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

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

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

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

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

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

    _renderInput: function(type, name, attribs, options)
    {
        var value = '';
        var className = '';
        if (attribs) {
            id = attribs.id;
            className = attribs['class'];
        }
        if (!className) {
            className = type;
        }
        html = '<input type = "' + type + '" '
             + 'class = "' + className + '"'
             + 'value = "' + value + '" '
             + 'name = "' + name + '"/>';
        return html;
    },

    add: function (id)
    {
        var isNumering = Qs_Form_Element_MultiText.getElementOption(id, 'isNumering');
        var isSortable = Qs_Form_Element_MultiText.getElementOption(id, 'isSortable');
        var numeringFormat = Qs_Form_Element_MultiText.getElementOption(id, 'numeringFormat');
        var itemName = Qs_Form_Element_MultiText.getElementOption(id, 'itemName');
        var name = Qs_Form_Element_MultiText.getElementOption(id, 'name');

        var table = document.getElementById(id);
        var row = '<tr>';
        if (isNumering) {
            row += '<td class = "no">';
            row += numeringFormat.replace(/%number%/, '<span class = "row-number">' + ($('tbody > tr', table).size() + 1) + '</span>');
            row += '</td>';
        }
        row += '<td class = "element">'
             + Qs_Form_Element_MultiText._renderInput('text', name, {'class': 'text'});
             + '</td>';
        row += '<td class = "options">';
        if (Qs_Form_Element_MultiText.getElementOption(id, 'isSortable')) {
            row += '<a class = "up" href="#" onclick = "return Qs_Form_Element_MultiText.up(this, \'' + id + '\');">'
                 + Qs_Form_Element_MultiText.message.get('up') + '</a><span> | </span>';
            row += '<a class = "down" href="#" onclick = "return Qs_Form_Element_MultiText.down(this, \'' + id + '\');">'
                 + Qs_Form_Element_MultiText.message.get('down') + '</a><span> | </span>';
        }
        row += '<a class = "del" '
             + 'href="#" onclick = "return Qs_Form_Element_MultiText.del(this, \'' + id + '\');">'
             + Qs_Form_Element_MultiText.message.get('delete') + "</a>";
        row += '</td>';
        $('#' + id + ' tbody').append(row);
        row += '</tr>';
        Qs_Form_Element_MultiText.updateOptions(id);
        return false;
    },

    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_MultiText.blink(id, row);
            Qs_Form_Element_MultiText.updateNumeration(id);
            Qs_Form_Element_MultiText.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_MultiText.blink(id, row);
            Qs_Form_Element_MultiText.updateNumeration(id);
            Qs_Form_Element_MultiText.updateOptions(id);
        }
        return false;
    },

    blink: function (id, row)
    {
        var idTimer = Qs_Form_Element_MultiText.getElementOption(id, 'blinkTimer');
        if (idTimer) {
            clearTimeout(idTimer);
        }
        row.className = 'moved';
        idTimer = setTimeout(function(){row.className = '';}, 1000);
        Qs_Form_Element_MultiText.setElementOption(id, 'blinkTimer', idTimer);
    },

    del: function (a, id)
    {
        var itemName = Qs_Form_Element_MultiText.getElementOption(id, 'itemName');
        var msg = _.str.tpl(Qs_Form_Element_MultiText.message.get('confirmDelete'), {itemName: itemName});
        if (confirm(msg)) {
            var row = qs.dom.getParentTag(a, 'TR');
            if (row) {
                $(row).remove();
            }
            Qs_Form_Element_MultiText.updateNumeration(id);
            Qs_Form_Element_MultiText.updateOptions(id);
        }
        return false;
    },

    updateNumeration: function (id)
    {
        $('#' + id + ' tbody > tr > td.no > span.row-number').each(function(i, span){
            $(span).text((i+1));
        });
    },

    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_MultiText.showLink(del);
        Qs_Form_Element_MultiText.showLink(up);
        Qs_Form_Element_MultiText.showLink(down);
        if (rows == 1) {
            Qs_Form_Element_MultiText.hideLink(del);
            Qs_Form_Element_MultiText.hideLink(up);
            Qs_Form_Element_MultiText.hideLink(down);
        } else if (rows > 1) {
            Qs_Form_Element_MultiText.hideLink(up + ':first');
            Qs_Form_Element_MultiText.hideLink(down + ':last');
        }
    }
}