<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>template.str_overview.html</title>
{_META_HEAD_CONTENIDO_}
{_CSS_HEAD_CONTENIDO_}
    <link rel="stylesheet" type="text/css" href="styles/jquery/plugins/tipsy.css">
    <link rel="stylesheet" type="text/css" href="styles/includes/str_overview.css">
    <style type="text/css">
    #cat_navbar span {padding-left:15px;}
    #cat_navbar span.last {padding-left:5px;}
    #category_list td.action {text-align:center;}
    </style>
{_JS_HEAD_CONTENIDO_}
    <script type="text/javascript" src="scripts/jquery/plugins/tipsy.js"></script>
    <script type="text/javascript" src="scripts/registerTipsy.js"></script>
    <script type="text/javascript" src="scripts/rowMark.js"></script>
    <script type="text/javascript" src="scripts/str_overview.js"></script>
    <script type="text/javascript">
    var area = "{AREA}";
    var frame = "{FRAME}";

    // Set imagepath and Translations in str_overview.js
    initStrOverview('{CON_IMAGES}', 'i18n("Make online")',
        'i18n("Make offline")', 'i18n("Protect category")',
        'i18n("Unprotect category")', 'i18n("Form error")',
        'i18n("Field category name is empty").', 'i18n("Please select a new Position for new category").'
    );

    var docEl = (
        typeof document.compatMode != "undefined" && document.compatMode != "BackCompat"
    ) ? "documentElement" : "body";
    </script>
</head>

<body style="margin:10px">
    <!-- catnewlayer -->
    <div id="cat_edit" class="cat_new_layer">
        <form style="margin:0" name="newtree" method="post" action="{HREF_ACTION}" onsubmit="return checkForm();">
            <div class="cat_spacer"></div>
            {INPUT_ACTION_NEW}
            {INPUT_SESSION}

            <label for="cat_categoryname" class="cat_label">i18n("Category")</label>
            <div class="cat_input">{INPUT_CATNAME_NEW}</div>
            <div class="cat_icon">
                {MAKEVISIBLE_BUTTON_NEW}
                {INPUT_VISIBLE}
            </div>
            <div class="cat_icon_text" id="visible_label">i18n('Make online')</div>
            <div class="cat_end_row"></div>

            <label for="cat_categoryalias" class="cat_label">i18n("Alias")</label>
            <div class="cat_input">{INPUT_ALIAS_NEW}</div>
            <div class="cat_icon">
                {MAKEPUBLIC_BUTTON_NEW}
                {INPUT_PUBLIC}
            </div>
            <div class="cat_icon_text public_label">i18n("Protect category")</div>
            <div class="cat_end_row"></div>

            <div class="cat_label">&nbsp;</div>
            <div class="cat_input">&nbsp;</div>
            <div class="cat_icon">
                {TEMPLATE_BUTTON_NEW}
                {INPUT_TEMPLATE}
            </div>
            <div class="cat_icon_text">i18n("Configure category")</div>
            <div class="cat_end_row"></div>

            <div style="display:{PERMISSION_NEWTREE_DISPLAY}">
                <div class="cat_label">&nbsp;</div>
                <div class="cat_input">&nbsp;</div>
                <div class="cat_icon">
                    <input type="checkbox" name="is_tree" value="0" id="is_tree" onclick="refreshStatus();" {PERMISSION_NEWTREE}>
                </div>
                <label for="is_tree" class="cat_icon_text public_label">i18n("Category is a tree")</label>
                <div class="cat_end_row"></div>
            </div>

            <div style="display:{PERMISSION_NEWCAT_DISPLAY}">
                <div class="cat_label">&nbsp;</div>
                <div class="cat_large">
                    <p style="padding:0;margin: 0 0 5px;">i18n("Position of category")</p>
                    {CATEGORY_SELECT}
                </div>
                <div class="cat_end_row"></div>
            </div>

            <div class="cat_spacer"></div>

            <div style="text-align:right; padding-right:15px;">
                <a href="javascript:hideNewForm()"><img src="{CON_IMAGES}but_cancel.gif" id="cat_new_cancel" alt="" style="vertical-align:middle" border="0"></a>
                &nbsp;
                <input type="image" id="cat_new_submit" src="{CON_IMAGES}but_ok.gif">
            </div>

            <div class="cat_spacer"></div>
        </form>
    </div>

    <!-- hidelayer for catnewlayer -->
    <div id="cat_new_layer_disable" class="cat_new_layer_disable" style="background-color:transparent">
        <img src="{CON_IMAGES}spacer.gif" alt="" id="cat_new_layer_disable_image">
    </div>

    <!-- layer for template selection when a new category is created -->
    <div id="cat_set_template_layer" class="cat_set_template">
        <div class="cat_spacer"></div>
        <div class="cat_label">i18n('Template')</div>
        <div class="cat_input" style="width:100px;">{SELECT_TEMPLATE}</div>
        <div class="cat_end_row"></div>

        <div class="cat_spacer"></div>

        <div style="text-align:right; padding-right:15px;">
            <a href="javascript:hideTemplateSelect()"><img src="{CON_IMAGES}but_cancel.gif" alt="" style="vertical-align:middle" border="0"></a>
            &nbsp;
            <img style="vertical-align:middle" src="{CON_IMAGES}but_ok.gif" alt="" onmouseover="this.style.cursor = 'pointer'" onclick="hideTemplateSelect(1);">
        </div>

        <div class="cat_spacer"></div>
    </div>

    <!-- Begin listing of existing categories -->
    <table class="generic" cellspacing="0" id="category_list">
        <tbody>
            <tr class="fixed">
                <th colspan="{SUM_COLUMNS}" id="cat_navbar">
                    {NEWCAT}
                    <span>&nbsp;</span>
                    {COLLAPSE_ALL}
                    <span>&nbsp;</span>
                    {EXPAND_ALL}
                    <span>&nbsp;</span>
                    {CANCEL_MOVE_TREE}
                    <span class="last">&nbsp;</span>
                </th>
            </tr>
            <tr class="fixed">
                <td style="border-width:0;" height="10" colspan="{SUM_COLUMNS}"></td>
            </tr>
            <tr class="fixed">
                <th colspan="2" style="border-left:1px solid #B3B3B3">
                    <span class="overview_dist_left">i18n("Category")</span>
                </th>
                <th class="header">
                    i18n("Alias")
                </th>
                <th class="header">
                    i18n("Template")
                </th>
                <th class="header" colspan="8">
                    i18n("Actions")
                </th>
                {ADDITIONALHEADERS}
                <th width="1" class="str-style-f" valign="middle">&nbsp;</th>
            </tr>
            <!-- layer for inline editing of existing categories -->
            <tr id="cat_inline_layer" class="fixed">


                <td class="str-style-a" valign="middle">&nbsp;</td>
                <td colspan="{SUM_COLUMNS_EDIT}" class="str-style-c" style="padding-left:15px; vertical-align:middle;">
                    <form name="renamecategory" id="renamecategory" method="post" action="{ACTION_EDIT_URL}">
                        {INPUT_ACTION_EDIT}
                        {INPUT_IDCAT}
                        {INPUT_SESSION}
                        <span id="cat_name">i18n('Categoryname') &nbsp; {INPUT_CATNAME_EDIT}<span style="padding-left:15px;">&nbsp;</span></span>

                        {LABEL_ALIAS_NAME}
                        {INPUT_ALIAS_EDIT}
                        <span style="padding-left:15px;">&nbsp;</span>

                        <span id="tpl_cfg"><a href="{TEMPLATE_URL}" id="tplcfg_href"><img src="images/template_properties.gif" title="i18n('Configure category')" alt="i18n('Configure category')" border="0" style="vertical-align:middle"> &nbsp; i18n('Configure category')</a><span style="padding-left:15px;">&nbsp;</span></span>

                        <a href="{HREF_CANCEL}"><img src="{SRC_CANCEL}" alt="" style="vertical-align:middle" border="0"></a>
                        &nbsp;
                        <input style="vertical-align:middle" type="image" src="{SRC_OK}">
                    </form>
                </td>

            </tr>
            <!-- BEGIN:BLOCK -->
            <tr id="cat_{CATID}_row" class="text_medium draggable" style="background-color:{BGCOLOR};{HEIGHT}" data-idcat="{CATID}" data-parentid="{PARENTID}" data-level="{LEVEL}" data-preid="{PREID}" data-postid="{POSTID}"  {MOUSEOVER}>
                <td width="3" class="str-style-a" valign="middle">&nbsp;</td>
                <td {DIRECTION} class="{BORDER_CLASS}" style="padding-left:{INDENT};" valign="middle" {SHOW_MOUSEOVER_CATEGORY}>{COLLAPSE_CATEGORY_NAME}</td>
                <td class="{BORDER_CLASS}" valign="middle" {SHOW_MOUSEOVER_ALIAS}>{ALIAS}</td>
                <td width="30" class="{BORDER_CLASS}" {SHOW_MOUSEOVER}><span class="overview_dist_right">{TPLNAME}</span></td>
                <td width="25" class="action">{RENAMEBUTTON}</td>
                <td width="25" class="action">{VISIBLEBUTTON}</td>
                <td width="25" class="action">{PUBLICBUTTON}</td>
                <td width="25" class="action">{UPBUTTON}</td>
                <td width="25" class="action">{DOWNBUTTON}</td>
                <td width="25" class="action">{MOVEBUTTON}</td>
                <td width="25" class="action">{DUPLICATEBUTTON}</td>
                <td width="25" class="action">{DELETEBUTTON}</td>
                {ADDITIONALCOLUMNS}
                <td width="1" class="str-style-c" valign="middle">&nbsp;</td>
            </tr>
            <!-- END:BLOCK -->
        </tbody>
    </table>

<script type="text/javascript">

/* Function for setting Workflow */
function setWorkflow(idcat, idSelect) {
    var params = {
        area: area,
        action: 'workflow_cat_assign',
        frame: frame,
        modidcat: idcat
    };
    params[idSelect] = document.getElementById(idSelect).value;

    window.location.href = Con.UtilUrl.build("main.php", params);
}

/* Function for cancel moving a tree */
function cancelMoveTree(idcat) {
    if (idcat > 0) {
        var url = Con.UtilUrl.build("main.php", {
            area: area,
            action: 'str_movesubtree',
            frame: frame,
            idcat: idcat,
            parentid_new: 1
        });

        window.location.href = url;
    }
}

/* Inserts Worflow Select Box into Category row */
function printWorkflowSelect(idcat, selected) {
    var script = document.getElementById('wf' + idcat);
    var parent = script.parentNode;

    var sTemplate = '{PLUGIN_WORKFLOW}';
    sTemplate = sTemplate.replace(/{IDCAT}/g, idcat);
    var block = document.createElement('span');
    block.innerHTML = sTemplate;
    block.firstChild.value = selected;

    parent.removeChild(script);
    parent.appendChild(block);
}

/* Function for deleting categories */
function deleteStr(idcat, idparent) {
    var url = Con.UtilUrl.build("main.php", {
        area: 'str',
        action: 'str_deletecat',
        frame: '4',
        idcat: idcat,
        parentid: idparent
    });
    window.location.href = url;
}

/* Function for duplicating categories */
function duplicateCategory(idcat, idparent) {
    var url = Con.UtilUrl.build("main.php", {
        area: 'str',
        action: 'str_duplicate',
        frame: '4',
        idcat: idcat,
        parentid: idparent
    });
    window.location.href = url;
}

function confDupl(idcat, idparent, sName) {
    var sMessage = '{DUPLICATE_MESSAGE}';
    sMessage = sMessage.replace(/%s/g, sName);
    Con.showConfirmation(sMessage, function() {
        duplicateCategory(idcat, idparent);
    });
}

function confDel(idcat, idparent, sName) {
    var sMessage = '{DELETE_MESSAGE}';
    sMessage = sMessage.replace(/%s/g, sName);
    Con.showConfirmation(sMessage, function() {
        deleteStr(idcat, idparent);
    });
}

(function(Con, $) {

    $(function() {
        var CSS_CLASS_DISABLED = 'ui-state-disabled',
            SELECTOR_PARENT_CATS = '#category_list tbody tr[data-parentid={ID}]',
            $categoryList = $('#category_list tbody');

        $('#category_list tr th.header:last').css('borderRight', 'none');

        /**
         * Sets the disabled state of category items recursively.
         * Calls itself for each categories having identical parentid as passed idcat.
         * @private  Not intended to call from public context
         * @param  {Number}  idcat  The category id to set disabled state
         * @param  {Boolean}  disabled  Flad to set/remove disabled state
         */
        function _setCategoryItemsDisabledStateRecursive(idcat, disabled) {
            var $items = $(SELECTOR_PARENT_CATS.replace('{ID}', idcat));
            $items.each(function(pos, item) {
                if (disabled) {
                    $(item).addClass(CSS_CLASS_DISABLED);
                } else {
                    $(item).removeClass(CSS_CLASS_DISABLED);
                }
                _setCategoryItemsDisabledStateRecursive($(this).data('idcat'), disabled);
            });
        }

        /**
         * Handler for sortable start event
         * @private  Not intended to call from public context
         * @param {Object} event
         * @param {Object} ui
         */
        function _onSortableStart(event, ui) {
            // make all items sortable
            $categoryList.sortable({items: allSort}).sortable('refresh');

            // save the old index/idcat of the dragged element
            var start_pos = ui.item.index();
            ui.item.data('start_pos', start_pos);
            $(this).data('oldIndex', ui.item.index());
            $(this).data('oldIdcat', ui.item.data('idcat'));
            var id = ui.item[0].id;
            var sortItems = $categoryList.find('> tr:not(.fixed)');
            var excludedElements = [];
            var mainnode = 0;
            sortItems.each(function(i, item) {
                if (item.id == id) {
                    mainnode = item;
                }
            });

            sortItems.each(function(i, item) {
                //table elements
                var attr = _getAttributes(sortItems[i]);
                var idcat_elem = attr['data-idcat'];

                //selected element
                var attr = _getAttributes(mainnode);
                var postid = attr['data-postid'];
                var idcat = attr['data-idcat'];
                var preid = attr['data-preid'];

                if (idcat_elem == idcat) {
                    var j = i + 1;
                    for (j; j < sortItems.length; j++) {
                        excludedElements.push(sortItems[j]);
                        if (postid == 0) {
                            j = j + 1
                            for (j; j < sortItems.length; j++) {
                                excludedElements.push(sortItems[j]);
                                if (sortItems[j].getAttribute('data-parentid') == idcat) {
                                    // donut
                                } else {
                                    break;
                                }
                            }
                            break;
                        } else if (sortItems[j].getAttribute('data-idcat') == postid) {
                            break;
                        }
                    }
                }
            });
            excludedElements.pop();
            _toggleEvent(true, excludedElements);
        }

        /**
         * changes class for given html elements
         *
         */
        function _toggleEvent(state, arr) {
            if (state == true) {
                var size = arr.length;
                for (var i = 0; i < size; i++) {
                    arr[i].setAttribute('class', 'str_overview_toggle');
                }
            }
            if (state == false) {
                $('.str_overview_toggle').addClass('text_medium draggable');
            }
        }

        /**
         * Returns data-* attributes of given element
         * @private  Not intended to call from public context
         * @param {HTMLElement} element
         * @return {Object}
         */
        function _getAttributes(element) {
            var attributes = {};

            if (element.length != 0) {
                attributes['data-idcat'] = element.getAttribute('data-idcat');
                attributes['data-parentid'] = element.getAttribute('data-parentid');
                attributes['data-preid'] = element.getAttribute('data-preid');
                attributes['data-postid'] = element.getAttribute('data-postid');
                return attributes;
            } else {
                console.log('empty element in function _getAttributes');
                return attributes;
            }
        }

        /**
         * Handler for sortable stop event
         * @private  Not intended to call from public context
         */
        function _onSortableStop(event, ui) {
            // reset sortable item list
            $categoryList.sortable({items: toSort}).sortable('refresh');

            // fix: fold categories after drag event with no change of position
            var start_pos = ui.item.data('start_pos');
            var end_pos = ui.item.index();

            if (start_pos == end_pos) {
                window.location.reload();
            }

            _toggleEvent(false);
            var sortableContext = this,
                // get the old index/idcat of the dropped element
                oldIndex = $(this).data('oldIndex'),
                oldIdcat = $(this).data('oldIdcat');

            var idcat = ui.item.data('idcat'),
                currItem = ui.item,
                prevItem = ui.item.prev(),
                nextItem = ui.item.next();

            $(this).removeData('oldIndex');
            $(this).removeData('oldIdcat');

            // Do some checks...
            if (oldIndex == currItem.index()) {
                // do nothing if element has been dropped at the old position
                _setCategoryItemsDisabledStateRecursive(oldIdcat, false);
                return;
            } else if (currItem.hasClass(CSS_CLASS_DISABLED)) {
                // do nothing if element has been dropped into it's childs
                $(this).sortable('cancel');
                _setCategoryItemsDisabledStateRecursive(oldIdcat, false);
                return;
            } else if (prevItem.hasClass(CSS_CLASS_DISABLED)) {
                // do nothing if element has been dropped between it's disabled childs
                $(this).sortable('cancel');
                _setCategoryItemsDisabledStateRecursive(oldIdcat, false);
                return;
            }

            var additionalOptions = {
                buttons: {
                    '{OK}': function() {
                        // user wants to move the category, so send the request
                        var newParentId, newPreId, newPostId, tempPrevItem;

                        // compute newParentId, newPreId, newPostId depending on where the category has been dropped
                        if ((typeof prevItem.data('idcat') == 'undefined' || prevItem.data('idcat') == '') && nextItem.data('idcat') != '') {
                            // case: category moved to top level after empty row or to the very top
                            newParentId = 0;
                            if (typeof prevItem.prev().data('idcat') != 'undefined') {
                                // case: category moved to top level after empty row, so search for the next level-0 category
                                tempPrevItem = prevItem;
                                while (tempPrevItem.data('level') != 0) {
                                    tempPrevItem = tempPrevItem.prev();
                                }
                                newPreId = tempPrevItem.data('idcat');
                            } else {
                                // case: category moved to the very top
                                newPreId = 0;
                            }
                            newPostId = nextItem.data('idcat');
                        } else if (typeof prevItem.data('idcat') != 'undefined' && prevItem.data('idcat') != '' && (typeof nextItem.data('idcat') == 'undefined' || nextItem.data('idcat') == '')) {
                            // case: category moved to bottom of a top level category
                            tempPrevItem = prevItem;
                            while (tempPrevItem.data('level') != 0) {
                                tempPrevItem = tempPrevItem.prev();
                            }
                            newParentId = tempPrevItem.data('idcat');
                            if ($(SELECTOR_PARENT_CATS.replace('{ID}', newParentId)).size() > 0) {
                                // case: there already are child categories with this parentid
                                newPreId = prevItem.data('idcat');
                            } else {
                                // case: there is no child category yet
                                newPreId = 0;
                            }
                            newPostId = 0;
                        } else {
                            // there is a prev and a post category
                            if (prevItem.data('level') >= nextItem.data('level')) {
                                newParentId = prevItem.data('parentid');
                            } else if (prevItem.data('level') <= nextItem.data('level')) {
                                newParentId = nextItem.data('parentid');
                            }
                            if (prevItem.data('level') >= nextItem.data('level')) {
                                newPreId = prevItem.data('idcat');
                            } else {
                                newPreId = 0;
                            }
                            if (prevItem.data('level') <= nextItem.data('level')) {
                                newPostId = nextItem.data('idcat');
                            } else {
                                newPostId = 0;
                            }
                        }

                        // construct the URL and point the browser to it
                        var url = Con.UtilUrl.build("main.php", {
                            area: area,
                            action: 'str_movesubtree',
                            frame: frame,
                            idcat: idcat,
                            parentid_new: newParentId,
                            preid_new: newPreId,
                            postid_new: newPostId
                        });
                        window.location.href = url;
                        $(this).dialog('close');
                    },
                    '{CANCEL}': function() {
                        // user does not want to move the category, so cancel
                        $(sortableContext).sortable('cancel');
                        _setCategoryItemsDisabledStateRecursive(oldIdcat, false);
                        window.location.reload();
                        $(this).dialog('close');
                    }
                }
            };

            Con.showConfirmation('{MOVE_CONFIRMATION}', null, additionalOptions);
        }

        var x = $("img[src$='images/but_move_subtree_main.gif']").parent().parent().parent();
        // check if there is a element to move
        if (x.length > 0) {
            var mainnode = x[0];
            var check = false;
            var sortItems = $categoryList.find('> tr:not(.fixed)');
            var excludedElements = [];

            for (var i = 0; i < sortItems.length; i++) {

                //table elements
                var attr = _getAttributes(sortItems[i]);
                var idcat_elem = attr['data-idcat'];

                //selected element
                var attr = _getAttributes(mainnode);
                var postid = attr['data-postid'];
                var idcat = attr['data-idcat'];

                // get position of selected element
                if (idcat_elem == idcat) {
                    var j = i + 1;

                    for (j; j < sortItems.length; j++) {
                        excludedElements.push(sortItems[j]);

                        if (postid == 0) {
                            j = j + 1;
                            for (j; j < sortItems.length; j++) {
                                excludedElements.push(sortItems[j]);
                                if (sortItems[j].getAttribute('data-parentid') == idcat) {
                                    // donut
                                } else {
                                    break;
                                }
                            }
                            break;
                        } else if (sortItems[j].getAttribute('data-idcat') == postid) {
                            break;
                        }
                    }
                }
            }
            excludedElements.pop();
            if (excludedElements.length > 1) {
                _toggleEvent(true, excludedElements);
            }
        }

        // allow to drag and drop the table rows
        var sortItems = $categoryList.find('> tr:not(.fixed)');
        var toSort = [];
        var allSort = [];
        var exludedElements = [];
        sortItems.each(function(i, item) {
            var idcat = sortItems[i].getAttribute('data-idcat');
            var parentid = sortItems[i].getAttribute('data-parentid');
            if (i > 0) {
                var lastparentid = sortItems[i - 1].getAttribute('data-parentid');
                var lastidcat = sortItems[i - 1].getAttribute('data-idcat');
                if (lastidcat == parentid) {
                    exludedElements.push(sortItems[i - 1]);
                }
            }

            allSort.push(item);

            var idParts = item.id.split('_');
            var parentId = item.getAttribute('data-parentid');
            // category trees must not be moved
            if (parentId == 0) {
                item.removeAttribute('class');
            }
            if (idParts[1] && parseInt(idParts[1]) != 0 && parentId != 0) {
                toSort.push(item);
            }
        });

        $categoryList.sortable({
            // only allow to drag&drop rows that do not have the 'fixed' class
            items: toSort,
            forcePlaceholderSize: true,
            placeholder: 'ui-state-highlight',
            cancel: '.' + CSS_CLASS_DISABLED + " ,select",
            start: _onSortableStart,
            stop: _onSortableStop
        });
    });
})(Con, Con.$);

var strDataObj = {},
    tmpObject;

{JS_DATA}
</script>
{JS_MARK_SUBMENU_ITEM}
</body>
</html>
<!--
template.str_overview

i18n("Edit category")
i18n("Actions")
i18n("Alias")
i18n("Category is a tree")
i18n("Category")
i18n("Categoryname")
i18n("Configure category")
i18n("Delete category")
i18n("Duplicate category")
i18n("Field category name is empty")
i18n("Form error")
i18n("Make offline")
i18n("Make online")
i18n("Move category down")
i18n("Move category up")
i18n("Move tree")
i18n("One or more articles are existing, unable to delete.")
i18n("One or more subtrees and one or more articles are existing, unable to delete.")
i18n("One or more subtrees are existing, unable to delete.")
i18n("Place tree here")
i18n("Please select a new position for new category")
i18n("Position of category")
i18n("Protect category")
i18n("Template")
i18n("Unprotect category")
i18n("Please select a new Position for new category")

-->