/**
 * Navigation-Editor
 *     Stellt die Funktionalität für die Bearbeitung der Navigations-Struktur zur Verfügung
 *
 * Created by CS medien- & kommunikationssysteme.
 * @author Christian Steinle
 * @date 06.10.2016
 *
 * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
 */

var Navigation = {
    structureHtml: '',
    chosenNavID: 0,
    chosenNavPath: [],
    chosenBreadCrumb: '',

    /**
     * jQuery-Variablen des Navigations-Editors
     */
    structureElement: null,
    moveStructureElement: null,
    breadCrumbElement: null,
    tokenElement: null,
    buttonEditElement: null,
    buttonSortElement: null,
    buttonMoveElement: null,
    buttonChildElement: null,
    buttonSiblingElement: null,

    init: function () {
        Navigation.initElements();
        Navigation.initIconFunctions();
    },

    initElements: function () {
        Navigation.structureElement = $('#csEditorStructure');
        Navigation.moveStructureElement = $('#csEditorMoveStructure');
        Navigation.breadCrumbElement = $('.csEditorBreadCrumb');
        Navigation.buttonEditElement = $('.formEdit');
        Navigation.buttonSortElement = $('.formSort');
        Navigation.buttonMoveElement = $('.formMove');
        Navigation.buttonChildElement = $('.formChild');
        Navigation.buttonSiblingElement = $('.formSibling');
    },

    initIconFunctions: function () {
        Navigation.structureElement.on('click', '.glyphicon-folder-close', function () {
            $(this).removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');
            $(this).parent('li').removeClass('csEditorClosed').addClass('csEditorOpen');
        });

        Navigation.structureElement.on('click', '.glyphicon-folder-open', function (event) {
            if (event.target !== this) {
                return true;
            }
            $(this).removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
            $(this).parent('li').removeClass('csEditorOpen').addClass('csEditorClosed');
        });

        Navigation.structureElement.on('click', 'li', function () {
            if (event.target !== this) {
                return true;
            }

            $('li', Navigation.structureElement).removeClass('csEditorChosen');
            $(this).addClass('csEditorChosen');
            $(this).parents('li').addClass('csEditorChosen');
            Navigation.setChosenElements(this);
        });

        Navigation.moveStructureElement.on('click', '.glyphicon-folder-close', function () {
            $(this).removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');
            $(this).parent('li').removeClass('csEditorClosed').addClass('csEditorOpen');
        });

        Navigation.moveStructureElement.on('click', '.glyphicon-folder-open', function (event) {
            if (event.target !== this) {
                return true;
            }
            $(this).removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
            $(this).parent('li').removeClass('csEditorOpen').addClass('csEditorClosed');
        });

        Navigation.moveStructureElement.on('click', 'li:not(.csEditorNotEditable)', function () {
            if (event.target !== this) {
                return true;
            }
            var navStart = $(this).data('navstart');
            var navID = $(this).data('navid');
            if (navID !== 0) {
                var actualNavElement = CS.editorData['navStart_' + navStart]['navID_' + navID];
            }
            else {
                var actualNavElement = {navName: '/'};
            }

            var maxNavSort = 0;
            if (CS.editorData['navStart_' + navID] != undefined) {
                $.each(CS.editorData['navStart_' + navID], function (key, navPoint) {
                    maxNavSort = Math.max(navPoint.navSort, maxNavSort);
                });
                ++maxNavSort;
            }
            $('.moveSubmit').show();
            $('li', Navigation.moveStructureElement).removeClass('csEditorChosen');
            $(this).addClass('csEditorChosen');
            $("input[name='navStart']", $('.moveFields')).val(navID);
            $("input[name='navSort']", $('.moveFields')).val(maxNavSort);
            $('#csEditorMoveToItem').html(actualNavElement['navName']);
        })
    },

    fillEditorContent: function () {
        if (CS.editorData === null || CS.editorHtml === '') {
            window.setTimeout('Navigation.fillEditorContent()', 50);
            return true;
        }
        Navigation.init();

        Navigation.chosenNavID = csEditorParams.navID;
        Navigation.chosenNavPath = csEditorParams.navigationPath;
        Navigation.buildStructureHtml(0);
        Navigation.structureElement.html(Navigation.structureHtml);
        Navigation.breadCrumbElement.html(Navigation.chosenBreadCrumb);
        Navigation.fillForm();
    },

    buildStructureHtml: function (navStart) {
        var actualNavStartElements = CS.editorData['navStart_' + navStart];
        if (navStart === 0) {
            Navigation.structureHtml += '<ul class="well"><li data-navid="0" class="csEditorOpen csEditorChosen"><span class="glyphicon glyphicon-folder-open"></span>&nbsp;/';
            Navigation.chosenBreadCrumb += '/ ';
        }
        Navigation.structureHtml += '<ul>';

        $.each(actualNavStartElements, function (key, actualNavElement) {
            var liClass = '';
            var spanClass = '';

            if ($.inArray(actualNavElement['navID'], Navigation.chosenNavPath) !== -1) {
                liClass += 'csEditorOpen ';
                spanClass = 'glyphicon glyphicon-folder-open';
                Navigation.chosenBreadCrumb += '> ' + actualNavElement['navName'] + ' ';
            }
            else {
                liClass += 'csEditorClosed ';
                spanClass = 'glyphicon glyphicon-folder-close';
            }

            if (CS.editorData['navStart_' + actualNavElement['navID']] == undefined) {
                liClass += 'csEditorEmpty ';
                spanClass = 'glyphicon glyphicon-align-justify';
            }

            if (actualNavElement['navActive'] !== 'yes') {
                liClass += 'csEditorInactive ';
            }
            if (actualNavElement['navID'] == csEditorParams.navID) {
                liClass += 'csEditorChosen';
            }
            Navigation.structureHtml += '<li data-navstart="' + navStart + '" data-navid="' + actualNavElement['navID'] + '" class="' + liClass + '"><span class="' + spanClass + '"></span>&nbsp;' + actualNavElement['navName'];
            if (CS.editorData['navStart_' + actualNavElement['navID']] != undefined) {
                Navigation.buildStructureHtml(actualNavElement['navID']);
            }
            Navigation.structureHtml += '</li>';
        });

        if (navStart === 0) {
            Navigation.structureHtml += '</li>';
        }
        Navigation.structureHtml += '</ul>';
    },

    setChosenElements: function (element) {
        Navigation.chosenNavID = element.dataset.navid;
        Navigation.buildBreadCrumb(element);
        Navigation.buildNavPath(element);
        Navigation.fillForm();
    },

    fillForm: function () {
        if (Navigation.chosenNavID == 0) {
            Navigation.enableRootButtons();
        }
        else {
            Navigation.enableAllButtons();
        }
        var navStart = Navigation.chosenNavPath[Navigation.chosenNavPath.length - 2];
        var chosenNavElement = CS.editorData['navStart_' + navStart]['navID_' + Navigation.chosenNavID];
        $.each(chosenNavElement, function (key, value) {
            $("input[type='text'][name='" + key + "'], input[type='hidden'][name='" + key + "'], select[name='" + key + "'], textarea[name='" + key + "']", CS.contentElement).val(value);
            if (value !== null) {
                $("input[type='radio'][name='" + key + "'][value='" + value.replace(/\'/g, '\\') + "']", CS.contentElement).prop('checked', true);
            }
        });
        Navigation.fillSpecial();
    },

    fillSpecial: function () {
        if (Navigation.chosenNavID > 0) {
            Navigation.fillMove();
            Navigation.fillSibling();
        }
        Navigation.fillSort();
        Navigation.fillChild();
    },

    fillSort: function () {
        if (CS.editorData['navStart_' + Navigation.chosenNavID] == undefined) {
            $('.csEditorSortable').html('Keine Untermenü-Punkte zum Sortieren vorhanden!');
            $('.sortSubmit').hide();
            return true;
        }

        var sortHtml = '<ul>';
        $('.sortSubmit').show();
        $.each(CS.editorData['navStart_' + Navigation.chosenNavID], function (key, navPoint) {
            sortHtml += '<li data-id="' + navPoint['navID'] + '">' + navPoint['navName'] + '<span class="glyphicon glyphicon-sort"></span></li>';
        });
        sortHtml += '</ul>';
        $("input[name='navStart']", '.sortFields').val(Navigation.chosenNavID);

        $('.csEditorSortable').html(sortHtml);
        $('ul', '.csEditorSortable').sortable({
            axis: 'y',
            forcePlaceholderSize: true,
            handle: '.glyphicon-sort',
            stop: function () {
                var order = $('ul', '.csEditorSortable').sortable('toArray', {attribute: 'data-id'});
                $("input[name='sortOrder']", '.sortFields').val(order);
            }
        });
    },

    fillMove: function () {
        Navigation.moveStructureElement.html(Navigation.structureHtml);
        var ownItem = $("li[data-navid='" + Navigation.chosenNavID + "']", Navigation.moveStructureElement);
        $(ownItem.parents('li')[0]).addClass('csEditorNotEditable');
        $("li[data-navid='" + Navigation.chosenNavID + "']", Navigation.moveStructureElement).remove();
        $("input[name='navSort']", '.moveFields').val(0);
        $('.moveSubmit').hide();
    },

    fillChild: function () {
        $("input[name='navStart']", '.childFields').val(Navigation.chosenNavID);
        $("input[name='navName']", '.childFields').val('');
        $("input[name='navTitle']", '.childFields').val('');
        $("input[name='navSort']", '.childFields').val(0);
        $("input[name='navActive']", '.childFields').val('yes');
    },

    fillSibling: function () {
        var navStart = Navigation.chosenNavPath[Navigation.chosenNavPath.length - 2];
        var chosenNavElement = CS.editorData['navStart_' + navStart]['navID_' + Navigation.chosenNavID];
        $("input[name='navSort']", '.siblingFields').val(parseInt(chosenNavElement.navSort) + 1);
        $("input[name='navName']", '.siblingFields').val('');
        $("input[name='navTitle']", '.siblingFields').val('');
        $("input[name='navActive']", '.siblingFields').val('yes');
    },

    buildBreadCrumb: function (element) {
        Navigation.breadCrumb = '>' + $(element)[0].childNodes[1].textContent;

        $.each($(element).parents('li'), function () {
            Navigation.breadCrumb = '>' + ($(this)[0].childNodes[1].textContent) + '&nbsp;' + Navigation.breadCrumb;
        });

        Navigation.breadCrumb = Navigation.breadCrumb.substr(2);
        Navigation.breadCrumbElement.html(Navigation.breadCrumb);
    },

    buildNavPath: function (element) {
        var path = [];
        path.push(element.dataset.navid);

        $.each($(element).parents('li'), function () {
            path.push(this.dataset.navid);
        });

        path.push('0');
        Navigation.chosenNavPath = path.reverse();
    },

    enableEdit: function () {
        Navigation.disableSort();
        Navigation.disableMove();
        Navigation.disableSibling();
        Navigation.disableChild();
        Navigation.disableDelete();

        $('input', '.editFields').prop('disabled', false);
        $('.editFields').show();
    },

    enableSort: function () {
        Navigation.disableEdit();
        Navigation.disableMove();
        Navigation.disableSibling();
        Navigation.disableChild();
        Navigation.disableDelete();

        $('input', '.sortFields').prop('disabled', false);
        $('.sortFields').show();
    },

    enableMove: function () {
        Navigation.disableEdit();
        Navigation.disableSort();
        Navigation.disableSibling();
        Navigation.disableChild();
        Navigation.disableDelete();

        $('input', '.moveFields').prop('disabled', false);
        $('.moveFields').show();
    },

    enableSibling: function () {
        Navigation.disableEdit();
        Navigation.disableSort();
        Navigation.disableMove();
        Navigation.disableChild();
        Navigation.disableDelete();

        $('input', '.siblingFields').prop('disabled', false);
        $('.siblingFields').show();
    },

    enableChild: function () {
        Navigation.disableEdit();
        Navigation.disableSort();
        Navigation.disableMove();
        Navigation.disableSibling();
        Navigation.disableDelete();

        $('input', '.childFields').prop('disabled', false);
        $('.childFields').show();
    },

    enableDelete: function () {
        Navigation.disableEdit();
        Navigation.disableSort();
        Navigation.disableMove();
        Navigation.disableSibling();
        Navigation.disableChild();

        $('input', '.deleteFields').prop('disabled', false);
        $('.deleteFields').show();
    },

    disableEdit: function () {
        $('input', '.editFields').prop('disabled', true);
        $('.editFields').hide();
    },

    disableSort: function () {
        /* TODO: Destroy Sortable;
         if (imgEditor.imgThumbElement.is(':ui-sortable')) {
         imgEditor.imgThumbElement.sortable('destroy');
         */

        $('input', '.sortFields').prop('disabled', true);
        $('.sortFields').hide();
    },

    disableMove: function () {
        $('input', '.moveFields').prop('disabled', true);
        $('.moveFields').hide();
    },

    disableSibling: function () {
        $('input', '.siblingFields').prop('disabled', true);
        $('.siblingFields').hide();
    },

    disableChild: function () {
        $('input', '.childFields').prop('disabled', true);
        $('.childFields').hide();
    },

    disableDelete: function () {
        $('input', '.deleteFields').prop('disabled', true);
        $('.deleteFields').hide();
    },

    enableAllButtons: function () {
        Navigation.disableAllButtons();

        Navigation.buttonEditElement.removeClass('disabled');
        Navigation.buttonMoveElement.removeClass('disabled');
        Navigation.buttonSiblingElement.removeClass('disabled');

        Navigation.buttonEditElement.on('click', Navigation.enableEdit);
        Navigation.buttonSortElement.on('click', Navigation.enableSort);
        Navigation.buttonMoveElement.on('click', Navigation.enableMove);
        Navigation.buttonChildElement.on('click', Navigation.enableChild);
        Navigation.buttonSiblingElement.on('click', Navigation.enableSibling);
    },

    enableRootButtons: function () {
        Navigation.disableAllButtons();

        Navigation.buttonEditElement.addClass('disabled');
        Navigation.buttonMoveElement.addClass('disabled');
        Navigation.buttonSiblingElement.addClass('disabled');

        Navigation.buttonEditElement.on('click', function () {
            return false;
        });
        Navigation.buttonSortElement.on('click', Navigation.enableSort);
        Navigation.buttonMoveElement.on('click', function () {
            return false;
        });
        Navigation.buttonChildElement.on('click', Navigation.enableChild);
        Navigation.buttonSiblingElement.on('click', function () {
            return false;
        });
    },

    disableAllButtons: function () {
        Navigation.buttonEditElement.off();
        Navigation.buttonSortElement.off();
        Navigation.buttonMoveElement.off();
        Navigation.buttonChildElement.off();
        Navigation.buttonSiblingElement.off();
    },

    close: function () {
        Navigation.structureHtml = '';
        Navigation.chosenNavID = 0;
        Navigation.chosenNavPath = [];
        Navigation.chosenBreadCrumb = '';

        Navigation.structureElement = null;
        Navigation.moveStructureElement = null;
        Navigation.breadCrumbElement = null;
        Navigation.tokenElement = null;
        Navigation.buttonEditElement = null;
        Navigation.buttonSortElement = null;
        Navigation.buttonMoveElement = null;
        Navigation.buttonChildElement = null;
        Navigation.buttonSiblingElement = null;
    }
};