var Qs_Form_Element_RegisterKids = {
    message: new Qs_Message({
        'eng': {
            'add':    'add',
            'up':     'up', 
            'down':   'down', 
            'delete': 'delete',
            'confirmDelete': 'Do you really want to delete this %s'
        },
        'uk': {
            'add':    'додати',
            'up':     'вгору', 
            'down':   'вниз', 
            'delete': 'видалити',
            'confirmDelete': 'Ви дійсно хочете видалити цей %s'
        }
    }),
    
    elementOptions: {},
    
    init: function (id, options)
    {
        Qs_Form_Element_RegisterKids.setElementOptions(id, options);
        $('#' + id + ' tbody tr').each(function(index) {
            var __name = options.name + '[' + index + ']' + '[birthdate]';
            var __id = __name.replace(/\[\]$/, '').replace(/\]/g, '').replace(/\[/g, '-');
            options.calendarOptions.altField = '#' + __id;
            Qs_Form_Element_Date2.init(__id, options.calendarOptions);
        });
    },
    
    getElementOptions: function (id)
    {
        if (typeof Qs_Form_Element_RegisterKids.elementOptions[id] == 'undefined') {
            return null;
        }
        return Qs_Form_Element_RegisterKids.elementOptions[id];
    },
    
    getElementOption: function (id, name)
    {
        var options = Qs_Form_Element_RegisterKids.getElementOptions(id);
        if (options) {
            if (typeof options[name] != 'undefined') {
                return options[name];
            }
        }
        return null;
    },
    
    setElementOption: function (id, name, value)
    {
        var options = Qs_Form_Element_RegisterKids.getElementOptions(id);
        if (options) {
            options[name] = value;
        } else {
            Qs_Form_Element_RegisterKids.elementOptions[id] = {name: value};
        }
    },
    
    setElementOptions: function (id, options)
    {
        Qs_Form_Element_RegisterKids.elementOptions[id] = options;
    },
    
    dateFormat: function (date)
    {
        var parts = date.split(/-/);
        var year = parseInt(parts[0]);
        var month = parseInt(parts[1]);
        var day = parseInt(parts[2]);
        return month + '/' + day + '/' + year;
    },
    
    add: function (id)
    {
        var row = '<tr>';
        var index = Qs_Form_Element_RegisterKids.getElementOption(id, 'autoIncrement');
        Qs_Form_Element_RegisterKids.setElementOption(id, 'autoIncrement', index + 1);
        var elementName = Qs_Form_Element_RegisterKids.getElementOption(id, 'name');
        var calendarOptions = Qs_Form_Element_RegisterKids.getElementOption(id, 'calendarOptions');
        var __name = elementName + '[' + index + ']';
        __id = __name.replace(/\[\]$/, '').replace(/\]/g, '').replace(/\[/g, '-');
        row += '<td class="firstName" id="' + __id + '-firstName-element">';
        row += Qs_Form_Element_RegisterKids._renderInput('text', __name + '[firstName]');
        row += '</td>';
        row += '<td class="displayName" id="' + __id + '-displayName-element">';
        row += Qs_Form_Element_RegisterKids._renderInput('text', __name + '[displayName]');
        row += '</td>';
        row += '<td class="birthdate" id="' + __id + '-birthdate-element">';
        row += Qs_Form_Element_RegisterKids._renderInput('hidden', __name + '[birthdate]');
        row += Qs_Form_Element_RegisterKids._renderInput('text', __name + '[_birthdate]', {'class': 'date'});
        row += '</td>';
        row += '<td class="options" id="' + __id + '-options-element">';
        row += '<a href="#" onclick="return Qs_Form_Element_RegisterKids.del(this, \'' + id +'\');">delete</a>';
        row += '</td>';
        row += '</tr>';
        $('#' + id + ' tbody').append(row);
        calendarOptions.altField = '#' + __id + '-birthdate';
        Qs_Form_Element_Date2.init(__id + '-birthdate', calendarOptions);
    },
    
    _renderInput: function(type, name, attribs)
    {
        var value = '';
        var className = '';
        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 = type;
        }
        var html = '<input type = "' + type + '" id="' + id +  '" '
             + 'class = "' + className + '"'
             + 'value = "' + value + '" '
             + 'name = "' + name + '"/>';
        return html;
    },

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

var Qs_Form_Element_Date2 = {

    message: new Qs_Message({
        'eng': {
        },
        'uk': {
        }
    }),

    init: function (id, options)
    {
        var displayId = Qs_Form_Element_Date2.getDisplayId(id);
        var element = document.getElementById(displayId);
        if (!element) {
            alert('Qs_Form_Element_Date2. Can not find element with id = ' + displayId);
            return false;
        }
        if (!element.tagName || element.tagName != 'INPUT') {
            alert('Qs_Form_Element_Date2. Element (id = ' + displayId + ') is not "input"');
            return false;
        }
        if (element.type != 'text') {
            alert('Qs_Form_Element_Date2. Element (id = ' + displayId + ') type is not "text"');
            return false;
        }
        
        $('#' + displayId).datepicker(options);
        
        $(element).click(Qs_Form_Element_Date2.onFocus);
        $(element).blur(Qs_Form_Element_Date2.onBlur);
        $(element).keyup(Qs_Form_Element_Date2.onKeyUp);
        $(element).change(Qs_Form_Element_Date2.onChange);
        $(element).qtip({
            content: 'Date in format: ' + $.datepicker.formatDate(Qs_Form_Element_Date2.getElementOption(id, 'dateFormat'), new Date()),
            prerender: true,
            position: {
                corner: {
                    target: 'topMiddle',
                    tooltip: 'bottomLeft'
                }
            },
            style: {
                tip:true
            }
        });
    },

    getDisplayId: function (id)
    {
        var pos = id.lastIndexOf('-');
        var displayId = '';
        if (-1 != pos) {
            pos++;
            if (id.charAt(pos) != '_') {
                displayId = id.substr(0, pos) + '_' + id.substr(pos);
            } else {
                displayId = id;
            }
        } else {
            displayId = ((id.charAt(0) == '_') ? '' : '_')  + id;
        }
        return displayId;
    },
    
    getElementOptions: function (id)
    {
        var displayId = Qs_Form_Element_Date2.getDisplayId(id);
        return $('#' + displayId).datepicker('option');
    },

    getElementOption: function (id, name)
    {
        var displayId = Qs_Form_Element_Date2.getDisplayId(id);
        return $('#' + displayId).datepicker('option', name);
    },

    setElementOption: function (id, name, value)
    {
        var displayId = Qs_Form_Element_Date2.getDisplayId(id);
        $('#' + displayId).datepicker('option', name, value);
    },

    setElementOptions: function (id, options)
    {
        for (var option in options) {
            Qs_Form_Element_Date2.setOption(id, option, options[option]);
        }
    },

    callMethod: function (id, method, value)
    {
        var displayId = Qs_Form_Element_Date2.getDisplayId(id);
        return $('#' + displayId).datepicker(method, value);
    },

    hideTip: function (id)
    {
        var element = document.getElementById(Qs_Form_Element_Date2.getDisplayId(id));
        $(element).qtip('hide');
    },
    
    showTip: function (id)
    {
        var element = document.getElementById(Qs_Form_Element_Date2.getDisplayId(id));
        
    },
    
    onFocus: function ()
    {
        $(this).qtip('show');
        return true;
    },

    onBlur: function ()
    {
        $(this).qtip('hide');
        return true;
    },

    onKeyUp: function ()
    {
        Qs_Form_Element_Date2.dateChanged(this);
    },

    onChange: function ()
    {
        Qs_Form_Element_Date2.dateChanged(this);
    },

    dateChanged: function (el)
    {
        var id = $(el).attr('id');
        var element = document.getElementById(id);
        var displayId = Qs_Form_Element_Date2.getDisplayId(id);
        var tDate = $('#' + displayId).val();
        try {
            var formatted = $.datepicker.parseDate(Qs_Form_Element_Date2.getElementOption(id, 'dateFormat'), tDate);
            if (formatted) {
                Qs_Form_Element_Date2.callMethod(id, 'setDate', formatted);
                $(element).qtip('hide');
            } else {
                $(element).qtip('show');
            }
        } catch (e) {
            $(element).qtip('show');
            $('#' + id).val(tDate);
        }
    }
}