/**
 * @required $ jQuery, jQuery UI Datepicker
 * @required qs
 */
(function (ns) {

    /**
     * @alias lib.formElement.Date
     */
    ns.Date = function (options) {
        this.construct.apply(this, arguments);
    };

    ns.Date.prototype.construct = function (hiddenId, displayId, options) {
        this.name = 'lib.form.element.Date';

        this.timeoutHandle = null;
        this.eventTimeout = 1000;

        this.hidden = $(document.getElementById(hiddenId));
        this.element = $(document.getElementById(displayId));
        if (1 !== this.element.length) {
            alert(this.name + ': can not find element with hiddenId = ' + displayId);
            return;
        }
        if (!this.element.is('input[type="text"]')) {
            alert(this.name + ': element (hiddenId = ' + displayId + ') is not "input"');
            return;
        }

        options.onChangeMonthYear = $.proxy(this.onChangeMonthYear, this);
        this.element.datepicker(options);

        var dateFormat = this.element.datepicker('option', 'dateFormat');
        var sampleDate = $.datepicker.formatDate(dateFormat, new Date());
        this.element.attr('maxlength', sampleDate.length);
        this.element.tooltip({
            title: 'Date is in wrong format. Example: ' + sampleDate,
            trigger: 'manual'
        });
        this.element.on('keyup', $.proxy(this.onKeyUp, this));
        this.element.on('change', $.proxy(this.onChange, this));
        this.element.closest('form').on('qsFormAfterSubmitSuccess', $.proxy(this.onQsFormAfterSubmitSuccess, this));

        var date = this.hidden.val();
        try {
            if (date && (date = $.datepicker.parseDate("yy-mm-dd", date))) {
                this.element.datepicker('setDate', date);
            }
        } catch (e) {}

    };

    ns.Date.prototype.onQsFormAfterSubmitSuccess = function (e) {
        var data;
        if (e.response && false === e.response.isValid) {
            // refresh tooltip position
            if ((data = this.element.data('tooltip')) && data.$tip && data.$tip.is(':visible')) {
                this.element.tooltip('show');
            }
        }
    };

    ns.Date.prototype.onKeyUp = function () {
        clearTimeout(this.timeoutHandle);
        this.timeoutHandle = setTimeout($.proxy(this.dateChanged, this), this.eventTimeout);
    };

    ns.Date.prototype.onChange = function () {
        this.dateChanged();
    };

    ns.Date.prototype.dateChanged = function () {
        var value = this.element.val();
        var date;
        if (value) {
            try {
                date = $.datepicker.parseDate(this.element.datepicker('option', 'dateFormat'), value);
            } catch (e) {}
        }

        if (date && !isNaN(date)) {
            this.element.removeClass('error');
            this.hideTip();
        } else {
            if (value) {
                this.element.addClass('error');
                this.showTip();
            } else {
                this.hideTip();
            }
            this.hidden.val(value);
        }
        this.hidden.trigger('change');
    };

    ns.Date.prototype.showTip = function () {
        var data;
        if ((data = this.element.data('tooltip')) && data.$tip && data.$tip.is(':visible')) {
            return;
        }
        this.element.tooltip('show');
    };

    ns.Date.prototype.hideTip = function () {
        this.element.tooltip('hide');
    };

    ns.Date.prototype.onChangeMonthYear = function (year, month, inst) {
        var day = null;
        if (1 <= inst.currentDay) {
            var daysInMonths = new Date(year, month, 0).getDate();
            day = (inst.currentDay <= daysInMonths) ? inst.currentDay : daysInMonths;
        } else {
            day = new Date().getDate();
        }
        var date = new Date(year, month - 1,  day);
        if (date != this.element.datepicker('getDate')) {
            this.element.datepicker('setDate', date);
            // this.element.trigger('change');
        }
    }

})(qs.defineNS('lib.form.element'));