qs.form = qs.form || {};
qs.form.element = qs.form.element || {};
qs.form.element.MultiDate = qs.createObject();

qs.form.element.MultiDate.prototype = {
    picker: undefined,
    viewBox: undefined,
    hidden: undefined,
    initialize: function (id, options) {
        options.onSelect = _.bind(this.valueOnChange, this);
        this.picker = $('#' + id + '-picker').multiDatesPicker(options);
        this.viewBox = $('#' + id + '-viewbox .multidate-selected-list');
        this.hidden = $('#' + id);
        this.renderViewBox();
    },

    renderViewBox: function() {
        var dates = this.picker.multiDatesPicker('getDates');
        var date;
        var listNode, a;
        this.viewBox.html('');
        for (var i = 0; i < dates.length; i++) {
            date = dates[i];
            listNode = $('<div class="multidate-selected-item">'
                + this.formatDate(date)
                + '<a class="delete-link" href="#">delete</a></div>');
            a = $('a', listNode);
            a.click(_.bind(this.deleteDate, this, date, a));
            this.viewBox.append(listNode);
        }
    },

    valueOnChange: function () {
        this.renderViewBox();
    },

    formatDate: function (date) {
        return $.datepicker.formatDate('mm/dd/yy', new Date(date));
    },

    deleteDate: function(date, a) {
        $(a).parent('.multidate-selected-item').remove();
        this.picker.multiDatesPicker('removeDates', date);
        this.removeDateFromHidden(date);
        return false;
    },

    removeDateFromHidden: function (date) {
        var value = this.hidden.val();
        var parts = value.split(/,/);
        for (var i = 0; i < parts.length; i++) {
            if (parts[i] == date) {
                parts.splice(i, 1);
                break;
            }
        }
        this.hidden.val(parts.join(','));
    }
};