var Qs_Form_Element_Grid = {
    message: new qs.Message({
        'en': {
            'add':    'add',
            'up':     'up',
            'down':   'down',
            'delete': 'delete',
            'confirmDelete': 'Do you really want to delete this {itemName}?'
        },
        'uk': {
            'add':    'додати',
            'up':     'вгору',
            'down':   'вниз',
            'delete': 'видалити',
            'confirmDelete': 'Ви дійсно хочете видалити цей {itemName}?'
        },
        'ru': {
            'add':    'добавить',
            'up':     'вверх',
            'down':   'вниз',
            'delete': 'удалить',
            'confirmDelete': 'Вы действительно хотите удалить этот {itemName}?'
        }
    }),
    options: {},
    elementOptions: {},

    init: function (id, options)
    {
        Qs_Form_Element_Grid.setElementOptions(id, options);
        Qs_Form_Element_Grid.updateOptions(id);
    },

    getElementOptions: function (id)
    {
        if (typeof Qs_Form_Element_Grid.elementOptions[id] == 'undefined') {
            return null;
        }
        return Qs_Form_Element_Grid.elementOptions[id];
    },

    getElementOption: function (id, name)
    {
        var options = Qs_Form_Element_Grid.getElementOptions(id);
        if (options) {
            if (typeof options[name] != 'undefined') {
                return options[name];
            }
        }
        return null;
    },

    setElementOption: function (id, name, value)
    {
        var options = Qs_Form_Element_Grid.getElementOptions(id);
        if (options) {
            options[name] = value;
        } else {
            Qs_Form_Element_Grid.elementOptions[id] = {name: value};
        }
    },

    setElementOptions: function (id, options)
    {
        Qs_Form_Element_Grid.elementOptions[id] = options;
    },

    _renderInput: function(type, name, attribs, options)
    {
        var value = '';
        var className = '';
        var label = options.label;
        var id = null;
        var description;
        if (attribs) {
            id = attribs.id;
            className = attribs['class'];
            if (attribs.description) {
                description = attribs.description;
            }
        }
        if (!id) {
            id = name + '[]';
            id = id.replace(/\[\]$/, '').replace(/\]/g, '').replace(/\[/g, '-');
        }
        if (!className) {
            className = type;
        }
        if (options.valueFrom) {
            var element = document.getElementById(options.idElement + '-' + options.valueFrom);
            if (element && element.value) {
                value = element.value;
                if ('SELECT' == element.tagName) {
                    label = $('option:selected', element).text();
                }
            }
        }
        if (typeof label == 'undefined') {
            label = '';
        }
        html = '<span>' + label + ' </span>'
             + '<input type = "' + type + '" id="' + id +  '" '
             + 'class = "' + className + '"'
             + 'value = "' + value + '" '
             + 'name = "' + name + '"/>';
        if (description) {
            html += description;
        }
        return html;
    },

    _renderSelect: function(name, attribs, options)
    {
        var value = '';
        var className = '';
        var label = options.label;
        var multiOptions = options.multiOptions;
        var id = null;
        if (attribs) {
            id = attribs.id;
            className = attribs['class'];
        }
        if (!id) {
            id = name + '[]';
            id = id.replace(/\[\]$/, '').replace(/\]/g, '').replace(/\[/g, '-');
        }
        if (!className) {
            className = 'select';
        }
        if (options.valueFrom) {
            var element = document.getElementById(options.idElement + '-' + options.valueFrom);
            if (element && element.value) {
                value = element.value;
                if ('SELECT' == element.tagName) {
                    label = $('option:selected', element).text();
                }
            }
        }
        if (typeof label == 'undefined') {
            label = '';
        }
        html = '<span>' + label + ' </span>'
             + '<select id="' + id +  '" '
             + 'class = "' + className + '" '
             + 'name = "' + name + '">';
        for(i in multiOptions) {
            html += '<option label="' + multiOptions[i] + '" value="' + i + '"';
            if (multiOptions[i] == value) {
                html += ' selected="selected"';
            }
            html += '>' + multiOptions[i] + '</option>';
        }
        html += '</select>';
        return html;
    },

    add: function (id)
    {
        var columns = Qs_Form_Element_Grid.getElementOption(id, 'columns');
        var elementName = Qs_Form_Element_Grid.getElementOption(id, 'name');
        var index = Qs_Form_Element_Grid.getElementOption(id, 'autoIncrement');
        Qs_Form_Element_Grid.setElementOption(id, 'autoIncrement', index + 1);
        if (!columns) {
            return false;
        }
        var table = document.getElementById(id);
        var row = '<tr>';
        for (var name in columns) {
            var column = columns[name];
            var value = '';
            var attribs = (column.attribs) ? column.attribs : {};
            for (var attribName in column) {
                if (attribName in {'class': 1, 'style': 1, 'description': 1}) {
                    attribs[attribName] = column[attribName];
                }
            }
            row += '<td class = "' + id + '_' + name + '">';
            column.idElement = id;
            switch (column.type) {
                case 'hidden':
                case 'text':
                    var inputName = elementName.replace('[]', '[' + index + ']') + '[' + name + ']';
                    row += Qs_Form_Element_Grid._renderInput(column.type, inputName, attribs, column);
                    break;
                case 'options':
                    if (Qs_Form_Element_Grid.getElementOption(id, 'sortable')) {
                        row += '<a class="up" href="#" onclick = "return Qs_Form_Element_Grid.up(this, \'' + id + '\');">'
                             + Qs_Form_Element_Grid.message.get('up') + '</a><span> | </span>';
                        row += '<a class="down" href="#" onclick = "return Qs_Form_Element_Grid.down(this, \'' + id + '\');">'
                             + Qs_Form_Element_Grid.message.get('down') + '</a><span> | </span>';
                    }
                    row += "<a class=\"del\" href=\"#\" onclick = \"return Qs_Form_Element_Grid.del(this, '" + id + "');\">"
                         + Qs_Form_Element_Grid.message.get('delete') + "</a>";
                    break;
                case 'select':
                    var selectName = elementName.replace('[]', '[' + index + ']') + '[' + name + ']';
                    row += Qs_Form_Element_Grid._renderSelect(selectName, column.attribs, column);
                    break;

                default:
                    break;
            }
            row += '</td>';
        }
        row += '</tr>';
        $('#' + id + ' tbody').append(row);
        Qs_Form_Element_Grid.updateOptions(id);
        return false;
    },

    switchIndexes: function(row1, row2)
    {
        var parts = $('*[id]:first', row1).attr('id').match(/-(\d+)-/);
        var topIndex = parts[1];
        parts = $('*[id]:first', row2).attr('id').match(/-(\d+)-/);
        var index = parts[1];
        $('*[id]', row1).each(function(){
            this.id = this.id.replace(/-(\d+)-/, '-' + index + '-');
        });
        $('*[name]', row1).each(function(){
            this.name = this.name.replace(/\[\d+\]/, '[' + index + ']');
        });
        $('*[id]', row2).each(function(){
            this.id = this.id.replace(/-(\d+)-/, '-' + topIndex + '-');
        });
        $('*[name]', row2).each(function(){
            this.name = this.name.replace(/\[\d+\]/, '[' + topIndex + ']');
        });
    },

    up: function (a, id)
    {
        var row = qs.dom.getParentTag(a, 'TR');
        var topRow = qs.dom.getPreviousTag(row, 'TR');
        if (topRow) {
            var tbody = qs.dom.getParentTag(topRow, 'TBODY');
            tbody.insertBefore(row, topRow);
            Qs_Form_Element_Grid.switchIndexes(topRow, row);
            Qs_Form_Element_Grid.updateOptions(id);
        }
        return false;
    },

    down: function (a, id)
    {
        var row = qs.dom.getParentTag(a, 'TR');
        var bottomRow = qs.dom.getNextTag(row, 'TR');
        if (bottomRow) {
            var tbody = qs.dom.getParentTag(row, 'TBODY');
            tbody.insertBefore(bottomRow, row);
            Qs_Form_Element_Grid.switchIndexes(row, bottomRow);
            Qs_Form_Element_Grid.updateOptions(id);
        }
        return false;
    },

    del: function (a, id)
    {
        var itemName = Qs_Form_Element_Grid.getElementOption(id, 'itemName');
        var msg = _.str.tpl(Qs_Form_Element_Grid.message.get('confirmDelete'), {itemName: itemName});
        if (confirm(msg)) {
            var row = qs.dom.getParentTag(a, 'TR');
            if (row) {
                $(row).remove();
                if (!$('#' + id + ' tbody tr').size()) {
                    Qs_Form_Element_Grid.add(id);
                }
                Qs_Form_Element_Grid.updateOptions(id);
            }
        }
        return false;
    },

    hideLink: function (link)
    {
        $(link).hide();
        $(link).each(function(i, el){
            if (el.nextSibling && el.nextSibling.tagName == 'SPAN') {
                $(el.nextSibling).hide();
            }
        });
    },

    showLink: function (link)
    {
        $(link).show();
        $(link).each(function(i, el){
            if (el.nextSibling && el.nextSibling.tagName == 'SPAN') {
                $(el.nextSibling).show();
            }
        });
    },

    updateOptions: function (id)
    {
        var selector = '#' + id + ' a';
        var del      = selector + '.del';
        var up       = selector + '.up';
        var down     = selector + '.down';
        var rows     = $(del).size();
        Qs_Form_Element_Grid.showLink(del);
        Qs_Form_Element_Grid.showLink(up);
        Qs_Form_Element_Grid.showLink(down);
         if (rows == 1) {
            Qs_Form_Element_Grid.hideLink(del);
            Qs_Form_Element_Grid.hideLink(up);
            Qs_Form_Element_Grid.hideLink(down);
        } else if (rows > 1) {
            Qs_Form_Element_Grid.hideLink(up + ':first');
            Qs_Form_Element_Grid.hideLink(down + ':last');
        }
    }
}