var Qs_Cms_Form = qs.create();
var Qs_Cms_Meta = qs.create();
var Qs_Cms_Item = qs.create();
var Qs_Cms_Item_Helper_Default = qs.create();
var Qs_Cms_Item_Helper_HtmlBlock = qs.create();
var cmsForm;
var cmsMessage = new Qs_Message({
    'eng': {
        'confirmPublishUnsaved': 'Do you really want to publish all unsaved items?',
        'confirmDeleteItem': 'Do you really want to delete this item?'
    }
});

Qs_Cms_Form.prototype =
{
    initialize: function(opt)
    {
        for (i in opt) {
            this[i] = opt[i];
        }
        // preload loading image
        this.loadingImage = new Image();
        this.loadingImage.src = 'images/loading-arrow-16x16.gif';

        this.activeSection = '';

        // Meta
        var metaOptions = {
            id_form:    this.id_form,
            parent:     this,
            mode:       this.metaMode
        };
        this.meta = new Qs_Cms_Meta(metaOptions);

        // Items
        this.itemGroups = [];
        var obj = this;
        //var items = {};

        $('#' + this.id_form).submit(function() {
            obj.onSubmit();
            return false;
        });
        for (var i in this.items) {
            var item = this.items[i];
            this.initItem(item);
        }

        for (i = 0; i < this.itemGroups.length; i++) {
            this.afterReorder(this.itemGroups[i]);
        }
        if (this.config.allowAddItem) {
            // add item link
            var toolbarContainer = document.createElement('div');
            toolbarContainer.id = 'cms_items_toolbar';
            toolbarContainer.className = 'cms_items_toolbar';
            this.linkAdd = document.createElement('a');
            this.linkAdd.appendChild(document.createTextNode('Add Item'));
            this.linkAdd.href = '#';
            this.linkAdd.className = 'add_item';
            this.linkAdd.onclick = function()
            {
                obj.addItemOnClick();
                return false;
            }
            toolbarContainer.appendChild(this.linkAdd);
            $('#fieldset-meta').after(toolbarContainer);
        }
        for (var i = 0; i < this.languages.length; i++) {
            $('#lng-' + this.languages[i]).click(function(){
                obj.changeLanguage(this.name);
            });
        }
    },

    initItem: function (item)
    {
        var dt = document.createElement('dt')
            dt.className = 'hidden';
        var dd = document.createElement('dd')
        var toolbar = document.createElement('div');
            toolbar.setAttribute('id', 'cms_item_toolbar_i' + item.id);
            toolbar.setAttribute('class', 'cms_item_toolbar');
            toolbar.groupName = item.groupName;
        dd.appendChild(toolbar);
        $('#fieldset-i' + item.id + ' dl:first').prepend(dd).prepend(dt);
        item.parent = this;
        item.containerObject = toolbar;
        item.config = this.config.item;
        if (typeof this[item.groupName] == 'undefined') {
            this[item.groupName] = {};
            this.itemGroups.push(item.groupName);
        }
        if (typeof this['order_' + item.groupName] == 'undefined') {
            this['order_' + item.groupName] = [];
        }
        if (!in_array(item.id, this['order_' + item.groupName])) {
            this['order_' + item.groupName].push(item.id);
        }
        this[item.groupName][item.id] = new Qs_Cms_Item(item);
    },

    changeLanguage: function (language)
    {
        var redirectUrl = BASE_URL + '/' + CURRENT_PAGE_FINAL + '/' + language + '?action=edit&id=' + this.getPageId();
        this.autosave(function() {
            document.location = redirectUrl;
        });
        return false;
    },

    // autosave first item
    autosaveItem: function ()
    {
        for (var groupIndex in this.itemGroups) {
            var groupName = this.itemGroups[groupIndex];
            for (var itemIndex in this[groupName]) {
                var item = this[groupName][itemIndex];
                if (item.mode == 'edit') {
                    item._afterSaveCallback = this.autosaveItem;
                    item.actionSave();
                    return false;
                }
            }
        }
        if (typeof this._autosaveCallback == 'function') {
            this._autosaveCallback.call(this);
        }
    },

    autosave: function (callback)
    {
        var allSaved = true;
        if (this.meta.mode == 'edit') {
            allSaved = false;
        }
        for (var groupIndex in this.itemGroups) {
            var groupName = this.itemGroups[groupIndex];
            for (var itemIndex in this[groupName]) {
                var item = this[groupName][itemIndex];
                if (item.mode == 'edit') {
                    allSaved = false;
                }
            }
        }
        if (!allSaved) {
            if (!confirm(cmsMessage.get('confirmPublishUnsaved'))) {
                callback.call(this);
                return false;
            }
        }
        this._autosaveCallback = callback;
        if (this.meta.mode == 'edit') {
            this.meta._afterSaveCallback = this.autosaveItem;
            this.meta.saveOnClick();
            return true;
        } else {
            this.autosaveItem();
        }
        return true;
    },

    onSubmit: function ()
    {
        //var redirectUrl = BASE_URL + '/' + CURRENT_PAGE_FINAL + '?action=publish&id=' + this.getPageId();
        this.autosave(function() {
            var form = document.getElementById(cmsForm.id_form);
            form.submit();
            //document.location = redirectUrl;
        });
        return false;
    },

    loadDialogItemType: function ()
    {
        var obj = this;
        $.ajax({
            url: BASE_URL + '/' + CURRENT_PAGE,
            type: 'POST',
            data: {action: 'loadDialogItemType'},
            dataType: 'html',
            error: cmsAjaxError,
            beforeSend: function()
            {
                obj.showLoadingBar()
            },
            complete: function() {
                obj.hideLoadingBar();
            },
            success: function(html)
            {
                $('body').prepend(html);
                $('#dialog-item-type').dialog({
                    bgiframe: true,
                    width: 350,
                    modal: true,
                    buttons: {
                        'Cancel' : function()
                        {
                            $(this).dialog('close');
                            obj.hideLoadingBar();
                        },
                        'OK' : function()
                        {
                            obj.addItem($('#cms-item-group-name').val(), $('#cms-item-type').val());
                            $(this).dialog('close');
                        }
                    }
                });
            }
        });
    },

    addItem: function (groupName, type)
    {
        var obj = this;
        var renderGroup = 0;
        if (typeof this[groupName] == 'undefined') {
            renderGroup = 1;
        }
        $.ajax({
            url: BASE_URL + '/' + CURRENT_PAGE,
            type: 'POST',
            data: {
                action:     'addItem',
                id :        $('#meta-id').val(),
                groupName:  groupName,
                handler:    this.meta.elements.handler.value,
                renderGroup: renderGroup,
                type: type
            },
            dataType: 'json',
            error: cmsAjaxError,
            beforeSend: function()
            {
                obj.showLoadingBar()
            },
            complete: function() {
                obj.hideLoadingBar();
            },
            success: function(data)
            {
                var item = {
                    id: parseInt(data.idItem, 10), //parseInt($('.cms_item:first', '<div>' + data.html + '</div>').attr('id').replace(/fieldset-i/, ''), 10),
                    type: type,
                    groupName: groupName,
                    actions: ['moveUp', 'moveDown', 'delete']
                }

                if (typeof obj[groupName] == 'undefined') {
                    $('#fieldset-submitGroup').before(data.html);
                } else {
                    $('#fieldset-' + groupName).append(data.html);
                }

                if (typeof data.javascript == 'string' && data.javascript.length != 0) {
                    $.globalEval(data.javascript);
                }

                if (is_array(data.actions)) {
                    item.actions = data.actions;
                }
                if (typeof data.mode != 'undefined') {
                    item.mode = data.mode;
                }

                obj.initItem(item);
                obj.afterReorder(groupName);
            }
        });
    },

    addItemOnClick: function ()
    {
        if (!$('#dialog-item-type').size()) {
            this.loadDialogItemType();
        }
        $('#dialog-item-type').dialog('open');
    },

    getLoadingImageSrc: function ()
    {
        return this.loadingImage.src;
    },

    deleteItem: function (groupName, idItem)
    {
        delete this[groupName][idItem];
        for (var i = 0; i < this['order_' + groupName].length; i++) {
            if (this['order_' + groupName][i] == parseInt(idItem, 10)) {
                this['order_' + groupName].splice(i, 1);
                break;
            }
        }
    },

    showLoadingBar: function ()
    {
        if (!$('#cms_items_toolbar > span > img').size()) {
            var html = '<span><img height="24" align="top" src="' + this.loadingImage.src + '"/>&nbsp;</span>';
            $('#cms_items_toolbar').prepend(html);
        } else {
            $('#cms_items_toolbar > span').css({visibility: 'visible'});
        }
    },

    hideLoadingBar: function ()
    {
       $('#cms_items_toolbar > span').css({visibility: 'hidden'});
    },

    setOrder: function (groupName, order)
    {
        this['order_' + groupName] = order;
    },

    afterReorder: function(groupName)
    {
        var order = this['order_' + groupName];
        for (var i = 0; i < order.length; i++) {
            var name = order[i];
            if (i == 0) {
                this[groupName][name].hideLink('moveUp');
                if (order.length > 1) {
                    this[groupName][name].showLink('moveDown');
                } else {
                    this[groupName][name].hideLink('moveDown');
                }
            } else if (i == order.length - 1) {
                this[groupName][name].showLink('moveUp');
                this[groupName][name].hideLink('moveDown');
            } else {
                this[groupName][name].showLink('moveUp', 'moveDown');
            }
        }
        return;
        if (this['order_' + groupName].length > 1 ) {
            var firstName = this['order_' + groupName][0];
            var lastName = this['order_' + groupName][this['order_' + groupName].length - 1];
            this[groupName][firstName].hideLink('moveUp');
            this[groupName][firstName].showLink('moveDown');
            this[groupName][lastName].showLink('moveUp');
            this[groupName][lastName].hideLink('moveDown');
        } else if (this['order_' + groupName].length == 1 ) {
            var firstName = this['order_' + groupName][0];
            this[groupName][firstName].hideLink('moveUp', 'moveDown');
        }
    },

    getPageId: function ()
    {
        if (typeof this.idPage == 'undefined') {
            this.idPage = $('#meta-id').val();
        }
        return this.idPage;
    }
}

Qs_Cms_Meta.prototype =
{
    initialize: function(opt)
    {
        for (i in opt) {
            this[i] = opt[i];
        }

        var obj = this;
        this.initElements();
        this.loadingImage = new Image();
        this.loadingImage.src = 'images/loading-arrow-16x16.gif';
        // bind actions
        if (typeof this.elements.handler != 'undefined') {
            $(this.elements.handler).change(function() {obj.handlerOnChange();});
        }
        this.elements.save.onclick = function () {
            obj.saveOnClick();
        };
        this.elements.cancel.onclick = function () {
            obj.cancelOnClick();
        };
        this.elements.edit.onclick = function () {
            obj.editOnClick();
        };
        if (typeof this.elements.redirectType != 'undefined') {
            obj.initShowHideRedirect();
        }
        if (this.mode == 'view') {
            this.view();
        }
    },

    initElements: function ()
    {
        var obj = this;
        this.elements = {};
        var form = document.getElementById(this.id_form);
        if (null === form) {
            return false;
        }
        for (var i = 0; i < form.elements.length; i++) {
            if (typeof form.elements[i].name == 'string' && form.elements[i].name.substring(0, 5) === 'meta[') {
                var name = form.elements[i].name.substring(5).replace(']', '');
                this.elements[name] = form.elements[i];
                $(this.elements[name]).focus(function(){
                    obj.parent.activeSection = 'meta';
                    obj.parent.activeItemId = 0;
                }).blur(function(){
                    obj.parent.activeSection = '';
                    obj.parent.activeItemId = 0;
                });
            }
        }

    },

    handlerOnChange: function ()
    {
        if (typeof this.elements.bodyTemplate != 'undefined') {
            var obj = this;
            $.ajax({
                url: BASE_URL + '/' + CURRENT_PAGE,
                type: 'GET',
                dataType: 'json',
                data: {
                    action: 'getBodyTemplates',
                    handler: this.elements.handler.value
                },
                beforeSend: function()
                {
                    obj.showLoadingBar()
                },
                complete: function() {
                    obj.hideLoadingBar();

                    this._currentData = undefined;
                },
                success: function (data)
                {
                    //var oldValue = obj.elements.bodyTemplate.value;
                    var oldValue = null;
                    if (typeof obj._currentData != 'undefined') {
                        oldValue = obj._currentData['meta[bodyTemplate]'];
                    }
                    var html = '';
                    for (var i in data.options) {
                        html += '<option value = "' + i + '"' + ((oldValue == i)?' selected="selected"':'') + '>'
                              + data.options[i] + '</option>';
                    }
                    $(obj.elements.bodyTemplate).html(html);
                }
            });
        }
    },

    getElement: function (element)
    {
        if (typeof element == 'string') {
            if (typeof this.elements[element] == 'undefined') {
                alert('Element "' + element + '" not found in Meta section');
            }
            return this.elements[element];
        }
        return element;
    },

    hideElement: function (element)
    {
        var el = this.getElement(element);
        $(el).hide();
    },

    hideElements: function ()
    {
        //$('dl.meta dd:not(.meta_toolbar), dl.meta dt').hide();
        $('#fieldset-meta>dl').addClass('view_mode');
    },

    showElement: function (element)
    {
        var el = this.getElement(element);
        $(el).show();
    },

    showElements: function ()
    {
        //$('dl.meta dd, dl.meta dt').show();
        $('#fieldset-meta>dl').removeClass('view_mode');
    },

    disableElement: function (element)
    {
        $(element).attr('disabled', 'disabled');
    },

    enableElement: function (element)
    {
        $(element).removeAttr('disabled');
    },

    saveOnClick: function ()
    {
        this.clearErrors();
        this.save();
    },

    editOnClick: function ()
    {
        this.hideElement('edit');
        this.showElement('save');
        this.showElement('cancel');
        this.showElements();
        this.handlerOnChange();
        this.mode = 'edit';

        var data = {};
        for (var name in this.elements) {
            if (!in_array(this.elements[name].type, ['hidden', 'button'])) {
                data[this.elements[name].name] = this.getElementValue(this.elements[name]);
            }
        }
        this._currentData = data;
    },

    cancelOnClick: function ()
    {
        var obj = this;
        if (typeof obj._currentData != 'undefined') {
            var form = $('#' + obj.parent.id_form);
            for (var field in obj._currentData) {
                var el = $('[name="' + field + '"]', form);
                switch ($(el).size()) {
                    case 0:
                        alert('Error: element ' + field + ' is not found');
                        break;

                    case 1:
                        switch ($(el).attr('type')) {
                            case 'checkbox':
                            case 'radio':
                                if ($(el).val() == obj._currentData[field]) {
                                    $(el).attr('checked', 'checked');
                                } else {
                                    $(el).removeAttr('checked');
                                }
                                break;

                            default:
                                $(el).val(obj._currentData[field]);
                        }
                        break;

                    default:
                        $(el).each(function (index) {
                            var elementType = $(this).attr('type');
                            if (elementType == 'hidden') {
                                var checkbox = $('input[type=checkbox][name="' + $(this).attr('name') + '"]');
                                if ($(checkbox).size() == 1) {
                                    var value = undefined;
                                    if (is_string(obj._currentData[field])) {
                                        value = obj._currentData[field];
                                    } else if (is_array(obj._currentData[field])) {
                                        value = array_pop(obj._currentData[field]);
                                    }

                                    if (typeof value != 'undefined') {
                                        if ($(checkbox).attr('value') == value) {
                                            $(checkbox).attr('checked', 'checked');
                                        } else {
                                            $(checkbox).removeAttr('checked');
                                        }
                                    } else {
                                        alert('Error: can\'t determine value for element ' + field);
                                    }

                                    return false; // значення для checkbox вже встановлене, тому виходим з циклу
                                } else {
                                    $(this).val(obj._currentData[field][index]);
                                }
                            } else if (in_array(elementType, ['checkbox', 'radio'])) {
                                if (is_string(obj._currentData[field])) {
                                    if ($(this).attr('value') == obj._currentData[field]) {
                                        $(this).attr('checked', 'checked');
                                    } else {
                                        $(this).removeAttr('checked');
                                    }
                                } else if (is_array(obj._currentData[field])) {
                                    if (in_array($(this).attr('value'), obj._currentData[field])) {
                                        $(this).attr('checked', 'checked');
                                    } else {
                                        $(this).removeAttr('checked');
                                    }
                                }
                            } else {
                                $(this).val(obj._currentData[field][index]);
                            }
                        });
                }
            }
        }

        this.clearErrors();
        obj.handlerOnChange();
        this.afterSave();
    },

    getElementValue: function (element)
    {
        if (element.type == 'checkbox' && !element.checked) {
            if ($('input:hidden[name="' + element.name + '"]').size()) {
                return $('input:hidden[name="' + element.name + '"]').val();
            }
            return '';
        }
        if (element.type == 'radio') {
            return $('input:radio[name="' + element.name + '"]:checked').val();
        }
        return element.value;
    },

    save: function ()
    {
        var requestData = {action: 'updateMeta'};
        for (var name in this.elements) {
            requestData[name] = this.getElementValue(this.elements[name]);
        }
        var obj = this;
        $.ajax({
            url: BASE_URL + '/' + CURRENT_PAGE,
            type: 'POST',
            data: requestData,
            dataType: 'json',
            error: cmsAjaxError,
            beforeSend: function()
            {
                obj.showLoadingBar()
            },
            complete: function() {
                obj.hideLoadingBar();
            },
            success: function(data)
            {
                if (typeof data.errors != 'undefined') {
                    obj.showValidationErrors(data.errors);
                    obj._afterSaveCallback = null;
                    return false;
                }
                obj.afterSave();
                if (typeof obj._afterSaveCallback == 'function') {
                    obj._afterSaveCallback.call(obj.parent);
                    obj._afterSaveCallback = null;
                }
            }
        });
    },

    afterSave: function ()
    {
        this.hideElement('save');
        this.hideElement('cancel');
        this.showElement('edit');
        this.hideElements();
        this.view();
    },

    view: function ()
    {
        var isAlias = $('#meta-alias').size();
        if (!$('#meta-view').size()) {
            var html = '<dt class="hidden">&nbsp;</dt><dd id="meta-view" class="noMargin"><table width="100%">';
            if (isAlias) {
                html += '<tr><td class="view-meta-label"><b>Alias</b></td><td id="view-meta-alias"></td></tr>';
            }
                html += '<tr><td class="view-meta-label"><b>Title</b></td><td id="view-meta-title"></td></tr>'
                      + '</table></dd>';
            $('#fieldset-meta>dl:first').prepend(html);
        }
        if (isAlias) {
            $('#view-meta-alias').text($('#meta-alias').val());
        }
        $('#view-meta-title').text($('#meta-title').val());
        this.mode = 'view';
    },

    showValidationErrors: function (errors)
    {
        for (var elementName in errors) {
            this.showElementErrors(elementName, errors[elementName]);
        }
        this.enableElement(this.saveElement);
    },

    clearErrors: function ()
    {
        $('#' + this.id_form + ' ul.errors').remove();
    },

    showElementErrors: function (elementName, errors)
    {
        var html = '<ul class="errors">'
        for (var i in errors) {
            html += '<li>' + errors[i] + '</li>';
        }
        html +='</ul>';
        $(this.elements[elementName]).after(html);
    },

    showLoadingBar: function ()
    {
        if (!$('#fieldset-meta > legend > img').size()) {
            var html = '<img height="24" align="top" src="' + this.loadingImage.src + '"/>';
            $('#fieldset-meta > legend').prepend(html);
        } else {
            $('#fieldset-meta > legend > img').show();
        }
    },

    hideLoadingBar: function ()
    {
        $('#fieldset-meta > legend > img').hide();
    },

    redirectOnClick: function ()
    {
        var checked = $('#meta-redirect').is(':checked');
        this.showHideRedirect(checked);
    },

    redirectOnTypeChange: function ()
    {
        var type = $('#meta-redirectType').val();
        $('#meta-redirectAlias-label').addClass('isHidden');
        $('#meta-redirectAlias-element').addClass('isHidden');
        $('#meta-redirectPageId-label').addClass('isHidden');
        $('#meta-redirectPageId-element').addClass('isHidden');
        if ('page' == type) {
            $('#meta-redirectPageId-label').removeClass('isHidden');
            $('#meta-redirectPageId-element').removeClass('isHidden');
        } else if ('url' == type) {
            $('#meta-redirectAlias-label').removeClass('isHidden');
            $('#meta-redirectAlias-element').removeClass('isHidden');
        }
    },

    initShowHideRedirect: function ()
    {
        var obj = this;
        obj.elements.redirect.onchange = function() {
            obj.redirectOnClick();
        }
        obj.elements.redirectType.onchange = function() {
            obj.redirectOnTypeChange();
        }
        var checked = $('#meta-redirect').is(':checked');
        obj.showHideRedirect(checked, true);
    },

    showHideRedirect: function (checked, init)
    {
        var checked = (typeof checked == 'boolean') ? checked : true;
        var init = init || false;

        var elements = [
            [true, 'meta-redirectType-label'],
            [true, 'meta-redirectType-element'],
            [true, 'meta-redirectPageId-label'],
            [true, 'meta-redirectPageId-element'],
            [true,'meta-redirectAlias-label'],
            [true,'meta-redirectAlias-element'],
            [true,'meta-redirectStatus-label'],
            [true,'meta-redirectStatus-element'],
            [false,'meta-keywords-label'],
            [false,'meta-keywords-element'],
            [false,'meta-description-label'],
            [false,'meta-description-element'],
            [false,'fieldset-TOP_ITEMS'],
            [false,'fieldset-ITEMS'],
            [false,'fieldset-RIGHT_ITEMS'],
            [false,'fieldset-LEFT_ITEMS']
        ];

        for (var k in elements) {
            var redirectEl = elements[k][0];
            var val = elements[k][1];
            if (checked) {
                if (!redirectEl) {
                    $('#'+val).addClass('isHidden');
                } else if (!init){
                    $('#'+val).removeClass('isHidden');
                }
            } else {
                if (redirectEl) {
                    $('#'+val).addClass('isHidden');
                } else if (!init) {
                    $('#'+val).removeClass('isHidden');
                }
            }
        }

        if (checked) {
            this.redirectOnTypeChange();
        }
    }
}

Qs_Cms_Item.prototype =
{
    _currentItemData: [],

    initialize: function(opt)
    {
        for (i in opt) {
            this[i] = opt[i];
        }
        var itemClass = 'Qs_Cms_Item_Helper_' + this.type.replace(/_$/, '');
        if (typeof window[itemClass] == 'function') {
            this.helper = new window[itemClass](this);
        } else {
            this.helper = new Qs_Cms_Item_Helper_Default(this);
        }
        this.idConfigContainer = this.groupName + '-i' + this.id + '-config-element';

        var obj = this;
        $('#' + this.getGroupName() + '-i' + this.id + '-title').focus(function() {
            obj.parent.activeSection = 'item';
            var parts = this.name.split(/[\]\[]/, 2);
            var id = parseInt(parts[1].replace('i', ''));
            obj.parent.activeItemGroup = parts[0];
            obj.parent.activeItemId = id;
        }).blur(function(){
            obj.parent.activeSection = '';
            obj.parent.activeItemGroup = '';
            obj.parent.activeItemId = 0;
        });

        this.loadingImage = new Image();
        this.loadingImage.src = 'images/loading-arrow-16x16.gif';

        if (this.mode == undefined || !in_array(this.mode, ['edit', 'view'])) {
            this.mode = 'view';
        }

        this.actionTitles = {moveUp: 'Up', moveDown: 'Down'};
        this.initLinks();

        this.linkSeparator = '';
        if (typeof this.config.linkSeparator != 'undefined') {
            this.linkSeparator = this.config.linkSeparator;
        }
        this.render();

        if (this.mode == 'edit') {
            this.actionEdit({hideCancel: true});
        }
    },

    getGroupName: function ()
    {
        return this.groupName;
    },

    initLinks: function ()
    {
        this.links = {};
        var obj = this;
        var i = 0;
        for (actionIndex in this.actions) {
            var action = obj.actions[actionIndex];
            this.links[action] = document.createElement('a');
            this.links[action].setAttribute('href', '#');
            var span = document.createElement('span');
            span.appendChild(document.createTextNode(this.getActionTitle(action)));
            this.links[action].appendChild(span);
            this.links[action].method = 'action' + ucfirst(action);
            this.links[action].className = 'btn_' + action;
            this.links[action].onclick = function() {
                obj[this.method]();
                return false;
            }
        }
    },

    render: function ()
    {
        $(this.containerObject).empty();
        var i = 0;
        for (var action in this.links) {
            this.containerObject.appendChild(this.links[action]);
            if (this.linkSeparator && this.linkSeparator.length) {
                var spanSeparator = document.createElement('span');
                if (++i < this.actions.length) {
                    spanSeparator.appendChild(document.createTextNode(this.linkSeparator));
                    this.containerObject.appendChild(spanSeparator);
                }
            }
        }
        var divIdItem = document.createElement('div');
        divIdItem.appendChild(document.createTextNode(this.id));
        divIdItem.className = 'id_item';
        this.containerObject.parentNode.insertBefore(divIdItem, this.containerObject);
        this.helper.afterRender();
    },

    enableElement: function (name)
    {
        $('#' + this.groupName + '-i' + this.id + '-' + name).removeAttr('disabled');
    },

    disableElement: function (name)
    {
        $('#' + this.groupName + '-i' + this.id + '-' + name).attr('disabled', 'disabled');
    },

    getTitle: function ()
    {
        return $('#' + this.groupName + '-i' + this.id + '-title').val();
    },

    getActionTitle: function (action)
    {
        if (typeof this.actionTitles[action] == 'undefined') {
            this.actionTitles[action] = ucfirst(action);
        }
        return this.actionTitles[action];
    },

    updateLinkSeparators: function ()
    {
        var visibleLinks = [];
        var hiddenLinks = [];
        var i;
        var name;

        for (i = 0; i < this.actions.length; i++) {
            name = this.actions[i];
            if (this.links[name].nextSibling && this.links[name].nextSibling.tagName == 'SPAN') {
                $(this.links[name].nextSibling).hide();
            }
            if (this.links[name].style.display != 'none') {
                visibleLinks.push(name);
            }
        }
        for (i = 0; i < visibleLinks.length; i++) {
            name = visibleLinks[i];
            if (this.links[name].nextSibling && this.links[name].nextSibling.tagName == 'SPAN' && i != visibleLinks.length - 1) {
                $(this.links[name].nextSibling).show();
            }
        }
    },

    hideLink: function()
    {
        for (var i=0; i<arguments.length; i++) {
            var name = arguments[i];
            if (!in_array(name, this.actions)) {
                continue;
            }
            if (this.mode == 'edit' && in_array(name, ['save', 'delete'])) {
                continue;
            }
            $(this.links[name]).hide();
        }
        this.updateLinkSeparators();
    },

    showLink: function(name)
    {
        for (var i=0; i<arguments.length; i++) {
            var name = arguments[i];
            if (this.mode == 'edit' && in_array(name, ['edit', 'moveUp', 'moveDown'])) {
                continue;
            }
            $(this.links[name]).css('display', 'inline-block');
        }
        this.updateLinkSeparators();
    },

    deleteContainer: function ()
    {
        $('#fieldset-i' + this.id).remove();
        this.parent.deleteItem(this.getGroupName(), this.id);
    },

    showLoadingBar: function ()
    {
        if (!$('#fieldset-i' + this.id + ' > legend img').size()) {
            var html = '<img align="top" src="' + this.loadingImage.src + '"/>';
            $('#fieldset-i' + this.id + ' > legend').prepend(html);
        } else {
            $('#fieldset-i' + this.id + ' > legend img').show();
        }
    },

    hideLoadingBar: function ()
    {
       $('#fieldset-i' + this.id + ' > legend img').hide();
    },

    reorder: function ()
    {
        var groupName = this.getGroupName();
        var requestData = {
            id:         this.parent.getPageId(),
            groupName:  groupName,
            action:     'reorderItems'
        };
        $('#fieldset-' + groupName + ' input.sorter:hidden').each(function(){
            var id = this.id.replace(groupName + '-i', 'order[').replace('-sorter', ']');
            requestData[id] = this.value;
        });
        var obj = this;
        $.ajax({
            url: BASE_URL + '/' + CURRENT_PAGE,
            type: 'POST',
            data: requestData,
            beforeSend: function()
            {
                obj.parent.showLoadingBar()
            },
            complete: function() {
                obj.parent.hideLoadingBar();
            },
            dataType: 'json',
            error: cmsAjaxError,
            success: function(data)
            {
                if (typeof data.error == 'string') {
                    alert(data.error);
                    return false;
                }
                obj.parent.setOrder(data.groupName, data.order);
                obj.afterReorder();
            }
        });
    },

    afterReorder: function ()
    {
        this.parent.afterReorder(this.getGroupName());
    },

    setMode: function(mode)
    {
        this.mode = mode;
        $('#fieldset-i' + this.id + '>dl:first').attr('class', mode);
    },

    actionEdit: function(opt)
    {
        if (typeof opt == 'undefined') {
            opt = {};
        }

        this.helper.actionEdit();
        //this.showConfigForm();
        if (typeof opt.hideCancel == 'undefined' || opt.hideCancel == false) {
            this.showLink('save', 'cancel');
            this.hideLink('edit', 'moveUp', 'moveDown');
        } else {
            this.showLink('save');
            this.hideLink('edit', 'moveUp', 'moveDown', 'cancel');
        }
        this.setMode('edit');

        var data = {};
        var form = document.getElementById(this.parent.id_form);
        var formData = Qs_Form.toObject(form);
        var belongsTo = this.groupName + '[i' + this.id + ']';
        for (var field in formData) {
            if (field.indexOf(belongsTo) == 0) {
                data[field] = formData[field];
            }
        }
        this._currentItemData[this.id] = data;
    },

    actionMoveDown: function()
    {
        var fieldsetGroup = document.getElementById('fieldset-' + this.getGroupName());
        var fieldsetItem = document.getElementById('fieldset-i' + this.id);
        var fieldsetItemBottom = qs.getNextTag(fieldsetItem, 'FIELDSET');
        if (fieldsetItemBottom) {
            var idItemBottom = fieldsetItemBottom.id.replace('fieldset-i', '');
            var sorter = document.getElementById(this.getGroupName() + '-i' + this.id + '-sorter');
            var sorterBottom = document.getElementById(this.getGroupName() + '-i' + idItemBottom + '-sorter');
            var tmpValue = sorter.value;
            sorter.value = sorterBottom.value;
            sorterBottom.value = tmpValue;

            // $(fieldsetItem).css('visibility', 'hidden');
            // $(fieldsetItem).effect(
                // 'transfer',
                // {
                    // to: fieldsetItemBottom,
                    // className: 'ui-effects-transfer'
                // },
                // 800,
                // function() {
                    // $(fieldsetItem).css('visibility', 'visible');
                    // $(fieldsetItem).css({'visibility':'visible', 'opacity':0.2});
                    // $(fieldsetItem).animate({ opacity: 1 }, 500);
                    // $(fieldsetItemBottom).css({'visibility':'visible', 'opacity':0.2});
                    // $(fieldsetItemBottom).animate({ opacity: 1 }, 500);
                // }
            // );

            // $(fieldsetItemBottom).css('visibility', 'hidden');
            // $(fieldsetItemBottom).effect(
                // 'transfer',
                // {
                    // to: fieldsetItem,
                    // className: 'ui-effects-transfer'
                // },
                // 800,
                // function() {
                // }
            // );
            fieldsetGroup.insertBefore(fieldsetItemBottom, fieldsetItem);
        }
        this.reorder();
    },

    actionMoveUp: function ()
    {
        var fieldsetGroup = document.getElementById('fieldset-' + this.getGroupName());
        var fieldsetItem = document.getElementById('fieldset-i' + this.id);
        var fieldsetItemTop = qs.getPreviousTag(fieldsetItem, 'FIELDSET');
        if (fieldsetItemTop) {
            var idItemTop = fieldsetItemTop.id.replace('fieldset-i', '');
            var sorter = document.getElementById(this.getGroupName() + '-i' + this.id + '-sorter');
            var sorterTop = document.getElementById(this.getGroupName() + '-i' + idItemTop + '-sorter');
            var tmpValue = sorter.value;
            sorter.value = sorterTop.value;
            sorterTop.value = tmpValue;
            fieldsetGroup.insertBefore(fieldsetItem, fieldsetItemTop);
        }
        this.reorder();
    },

    actionSave: function ()
    {
        var obj = this;
        var requestData = {
            action:     'updateItem',
            idItem:     this.id,
            groupName:  this.groupName,
            type:       this.type
        };
        var form = document.getElementById(this.parent.id_form);
        Qs_Form.editorsTriggerSave(form)
        Qs_Form.removeElementsErrors(form);
        var data = Qs_Form.toObject(form);
        var belongsTo = this.groupName + '[i' + this.id + ']';
        for (var field in data) {
            if (field.indexOf(belongsTo) == 0) {
                var newFieldName = field.replace(belongsTo, '');
                if (newFieldName.charAt(0) == '[') {
                    var pos = newFieldName.indexOf(']');
                    if (pos == -1) {
                        newFieldName = trim(newFieldName, '][');
                    } else {
                        newFieldName = newFieldName.substring(1, pos) + newFieldName.substring(pos + 1);
                    }
                }
                requestData[newFieldName] = data[field];
            }
        }
        this.helper.prepareRequestData(requestData);
        $.ajax({
            url: BASE_URL + '/' + CURRENT_PAGE,
            type: 'POST',
            data: requestData,
            beforeSend: function()
            {
                obj.showLoadingBar()
            },
            complete: function() {
                obj.hideLoadingBar();
            },
            dataType: 'json',
            error: cmsAjaxError,
            success: function(response)
            {
                if (!response.isValid) {
                    obj._afterSaveCallback = null;
                    var form = document.getElementById(obj.parent.id_form);
                    Qs_Form.displayErrorsHtml(form, response.errors, belongsTo + '[config]');
                    var name = array_key(response.errors);
                    var focusFieldName = null;
                    if (name) {
                        focusFieldName = belongsTo + '[config][' + name + ']';
                        focusFieldId = focusFieldName.replace(/\]/g, '').replace(/\[/g, '-');
                        $('[name="' + focusFieldName + '"]').focus();
                        $.scrollTo('#' + focusFieldId + '-label');
                    }
                    return false;
                }
                $('#view-' + obj.idConfigContainer).remove();
                $('#' + obj.idConfigContainer).before(response.viewHtml);
                obj.setMode('view');
                obj.afterSave(response);
                if (typeof obj._afterSaveCallback == 'function') {
                    obj._afterSaveCallback.call(obj.parent);
                    obj._afterSaveCallback = null;
                }
            }
        });
    },

    afterSave: function (response)
    {
        this.hideLink('save', 'cancel');
        this.showLink('edit', 'moveUp', 'moveDown');
        this.afterReorder();
        this.disableElement('allowDelete');
        this.helper.afterSave(response);
        this.setMode('view');
        this._currentItemData[this.id] = undefined;
    },

    actionCancel: function ()
    {
        var obj = this;
        if (typeof obj._currentItemData[obj.id] != 'undefined') {
            var form = $('#' + obj.parent.id_form);
            for (var field in obj._currentItemData[obj.id]) {
                var el = $('[name="' + field + '"]', form);
                switch ($(el).size()) {
                    case 0:
                        alert('Error: element ' + field + ' is not found');
                        break;

                    case 1:
                        switch ($(el).attr('type')) {
                            case 'checkbox':
                            case 'radio':
                                if ($(el).val() == obj._currentItemData[obj.id][field]) {
                                    $(el).attr('checked', 'checked');
                                } else {
                                    $(el).removeAttr('checked');
                                }
                                break;

                            default:
                                $(el).val(obj._currentItemData[obj.id][field]);
                        }
                        break;

                    default:
                        $(el).each(function (index) {
                            var elementType = $(this).attr('type');
                            if (elementType == 'hidden') {
                                var checkbox = $('input[type=checkbox][name="' + $(this).attr('name') + '"]');
                                if ($(checkbox).size() == 1) {
                                    var value = undefined;
                                    if (is_string(obj._currentItemData[obj.id][field])) {
                                        value = obj._currentItemData[obj.id][field];
                                    } else if (is_array(obj._currentItemData[obj.id][field])) {
                                        value = array_pop(obj._currentItemData[obj.id][field]);
                                    }

                                    if (typeof value != 'undefined') {
                                        if ($(checkbox).attr('value') == value) {
                                            $(checkbox).attr('checked', 'checked');
                                        } else {
                                            $(checkbox).removeAttr('checked');
                                        }
                                    } else {
                                        alert('Error: can\'t determine value for element ' + field);
                                    }

                                    return false; // значення для checkbox вже встановлене, тому виходим з циклу
                                } else {
                                    $(this).val(obj._currentItemData[obj.id][field][index]);
                                }
                            } else if (in_array(elementType, ['checkbox', 'radio'])) {
                                if (is_string(obj._currentItemData[obj.id][field])) {
                                    if ($(this).attr('value') == obj._currentItemData[obj.id][field]) {
                                        $(this).attr('checked', 'checked');
                                    } else {
                                        $(this).removeAttr('checked');
                                    }
                                } else if (is_array(obj._currentItemData[obj.id][field])) {
                                    if (in_array($(this).attr('value'), obj._currentItemData[obj.id][field])) {
                                        $(this).attr('checked', 'checked');
                                    } else {
                                        $(this).removeAttr('checked');
                                    }
                                }
                            } else {
                                $(this).val(obj._currentItemData[obj.id][field][index]);
                            }
                        });
                }
            }
        }

        this.setMode('view');
        this.afterCancel();
    },

    afterCancel: function ()
    {
        this.hideLink('save', 'cancel');
        this.showLink('edit', 'moveUp', 'moveDown');
        this.afterReorder();
        this.disableElement('allowDelete');
        this.helper.afterCancel();
        this.setMode('view');
        this._currentItemData[this.id] = undefined;
    },

    actionDelete: function ()
    {
        var obj = this;
        $('#fieldset-i' + this.id).addClass('mark_delete');
        if (!confirm(cmsMessage.get('confirmDeleteItem'))) {
            $('#fieldset-i' + this.id).removeClass('mark_delete');
            return false;
        }
        $.ajax({
            url: BASE_URL + '/' + CURRENT_PAGE,
            type: 'POST',
            data: {
                action:     'deleteItem',
                id:         this.parent.getPageId(),
                idItem:    this.id
            },
            beforeSend: function()
            {
                obj.showLoadingBar()
            },
            complete: function() {
                obj.hideLoadingBar();
            },
            dataType: 'json',
            error: cmsAjaxError,
            success: function (data)
            {
                if (!cmsAjaxSuccessError(data)) {
                    return false;
                }
                obj.deleteContainer();
                obj.afterReorder();
            }
        });
    }
}

Qs_Cms_Item_Helper_Default.prototype =
{
    initialize: function(parent)
    {
        this.parent = parent;

    },
    afterRender: function ()
    {
        this.parent.hideLink('save');
        this.parent.hideLink('cancel');
    },
    actionEdit: function ()
    {
        this.parent.enableElement('allowDelete');
    },
    prepareRequestData: function (requestData)
    {
    },
    afterSave: function () {},
    afterCancel: function () {},
    actionMoveUp: function () {},
    actionMoveDown: function () {},
    actionDelete: function () {}
}

Qs_Cms_Item_Helper_HtmlBlock.prototype =
{
    initialize: function(parent)
    {
        this.parent = parent;
    },

    afterRender: function ()
    {
        this.parent.hideLink('save');
        this.parent.hideLink('cancel');
    },

    afterSave: function (response)
    {
        this.hideEditor();
        var html = '';
        if (typeof response != 'undefined' && typeof response.contentViewHtml != 'undefined') {
            html = response.contentViewHtml;
        }
        this.setViewHtml(html);
        this.setElementHtml(this.getEditorHtml());
        this.showView();
    },

    afterCancel: function () {
        this.hideEditor();
        var html = this.getElementHtml();
        this.setViewHtml(html);
        this.setEditorHtml(html);
        this.showView();
    },

    setElementHtml: function (html)
    {
        $("input[name='" + this.getGroupName() + '[i' + this.parent.id + "][data][content]']").val(html);
    },

    getElementHtml: function ()
    {
        return $("input[name='" + this.getGroupName() + '[i' + this.parent.id + "][data][content]']").val();
    },

    getEditorHtml: function ()
    {
        instanceName = this.getElementName();
        var oEditor = FCKeditorAPI.GetInstance( instanceName ) ;
        return oEditor.GetXHTML( true ) ; // "true" means you want it formatted.
    },

    setEditorHtml: function ( text )
    {
        instanceName = this.getElementName();
        var oEditor = FCKeditorAPI.GetInstance( instanceName ) ;
        oEditor.SetHTML( text ) ;
    },

    getEditor: function ()
    {
        if ( typeof this.editor == 'undefined' ) {
            this.editor = new FCKeditor(this.getElementName());
            this.editor.Config['AutoDetectLanguage'] = false;
            this.editor.BasePath = BASE_URL + '/js/fckeditor/';
            this.editor.ToolbarSet = 'Default';
            this.editor.Config['EditorAreaCSS'] = BASE_URL + '/css/typographic.css';
            this.editor.Height = 540;
        }
        return this.editor;
    },

    getGroupName: function ()
    {
        return this.parent.getGroupName();
    },

    getViewHtml: function ()
    {
        return $('#' + this.getGroupName() + '-i' + this.parent.id +'-data-content').html();
    },

    setViewHtml: function (html)
    {
        $('#' + this.getGroupName() + '-i' + this.parent.id +'-data-content').html(html);
    },

    clearView: function ()
    {
        $('#' + this.getGroupName() + '-i' + this.parent.id +'-data-content').empty();
    },

    showView: function ()
    {
        $('#' + this.getGroupName() + '-i' + this.parent.id +'-data-content').show();
    },

    hideView: function ()
    {
        $('#' + this.getGroupName() + '-i' + this.parent.id +'-data-content').hide();
    },

    getElementName: function ()
    {
        if (typeof this.elementName == 'undefined') {
            this.elementName = '' + this.getGroupName() + '[i' + this.parent.id +'][data][content]';
        }
        return this.elementName;
    },

    hideEditor: function()
    {
        var idContent = this.getGroupName() + '-i' + this.parent.id + '-data-content';
        $('#' + idContent + '-editor').hide();
        $('#' + idContent + '-fckNote').hide();
    },

    showEditor: function()
    {
        var idContent = this.getGroupName() + '-i' + this.parent.id + '-data-content';
        $('#' + idContent + '-editor').show();
        $('#' + idContent + '-fckNote').show();
    },

    hideToolbar: function ()
    {
        $('#cms_item_toolbar_i' + this.parent.id).css({visibility: 'hidden'});
    },

    showToolbar: function ()
    {
        $('#cms_item_toolbar_i' + this.parent.id).css({visibility: 'visible'});
    },

    prepareRequestData: function (requestData)
    {
        requestData['data[content]'] = this.getEditorHtml();
    },

    actionEdit: function ()
    {
        var fckEditor = this.getEditor();
        this.parent.enableElement('allowDelete');

        var obj = this;
        if (this.editorCreated) {
            //this.setEditorHtml(this.getViewHtml());
            this.clearView();
            this.hideView();
            this.showEditor();
        } else {
            this.hideToolbar();
            this.parent.showLoadingBar();

            $.ajax({
                url: BASE_URL + '/' + CURRENT_PAGE,
                type: 'POST',
                data: {action: 'getHtmlBlockContent', idItem: this.parent.id},
                dataType: 'html',
                error: cmsAjaxError,
                beforeSend: function()
                {
                    //obj.parent.showLoadingBar()
                },
                complete: function() {
                    //obj.parent.hideLoadingBar();
                },
                success: function(html)
                {
                    fckEditor.Value = html;
                    obj.clearView();
                    obj.hideView();
                    var idContent = obj.getGroupName() + '-i' + obj.parent.id + '-data-content';
                    var msWordNote = '<p id="' + idContent + '-fckNote" style="color: #900;" class="fckNote">We strongly recommend to use this button '
                                   + '<img class="TB_Button_Image" style="background: url(\'js/fckeditor/editor/skins/default/fck_strip.gif\') no-repeat scroll 0pt -160px transparent; height: 16px; overflow: hidden; width: 16px; margin-bottom:-3px;" '
                                   + 'src="js/fckeditor/editor/images/spacer.gif" alt="" /> '
                                   + ' (see above in the toolbar) to insert the text from MS Word documents.</p>';
                    $('#' + idContent).before('<div id="' + idContent + '-editor">' + fckEditor.CreateHtml() + '</div>'  + msWordNote);
                    obj.editorCreated = true;
                }
            });
        }

    },

    updateEditorSize: function()
    {
        // Fix webkit bug when Textarea cut in half on webkit browsers
        var editor = document.getElementById(this.getGroupName() + '[i' + this.parent.id + '][data][content]___Frame');
        if (editor && editor.contentDocument) {
            var editArea = editor.contentDocument.getElementById('xEditingArea');
            if (editArea) {
                editArea.style.height = '100.1%';
                setTimeout(function() {editArea.style.height = '100%';}, 100);
            }
        }
    },

    afterLoadEditor: function ()
    {
        this.showToolbar();
        this.parent.hideLoadingBar();
        this.updateEditorSize();
    },

    actionMoveUp: function ()
    {
        this.parent.actionMoveUp();
    },

    actionMoveDown: function ()
    {
        this.parent.actionMoveDown();
    },

    actionDelete: function () {}
}

//=============================================================================================================================================================
//=== MAIN
//=============================================================================================================================================================

function FCKeditor_OnComplete( editorInstance )
{
    var pos = editorInstance.Name.indexOf('][data][content]');
    if (pos > 0 ) {
        var parts = editorInstance.Name.split(/[\]\[]/, 2);
        var groupName = parts[0];
        var id_item = parseInt(parts[1].replace('i', ''));
        cmsForm[groupName][id_item].helper.afterLoadEditor();
    }
}

function cmsAjaxError(request, textStatus, errorThrown)
{
    alert(textStatus + ' ' + errorThrown);
}

function cmsAjaxSuccessError(data)
{
    if (typeof data.error == 'string') {
        alert(data.error);
        return false;
    }
    return true;
}

function initCmsForm(options)
{
    cmsForm = new Qs_Cms_Form(options);
}