/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux');
/*
 * @class Ext.ux.DatePicker
 * @extends Ext.DatePicker
 * Ext.ux.DatePicker
 */
Ext.ux.DatePicker = Ext.extend(Ext.DatePicker,{
    
    // bind this component to normal <input/> tag
    bindToInput : false,
    
    initComponent:function(){
        Ext.ux.DatePicker.superclass.initComponent.call(this);
        if(this.bindToInput){//create container to render
            this.createAlignToContainer();
            this.render(this.alignToContainerId);
        }
    },
    
    // private
    onRender : function(container, position){
        Ext.ux.DatePicker.superclass.onRender.call(this, container, position);
        if(this.bindToInput){
            Ext.getDoc().on('mousedown',function(e,t,o){
                if(t == this.bindTo.dom || e.getTarget('div.x-date-picker')){
                    //do nothing
                }else{// hide this component when click other area except <input/> tag and datepicker area
                    this.hide();
                }
            },this);
        }
    },
    
    // bind a singleton datepicker to <input/> tag while it onclick
    bindingTo: function(bindTo){
        if(bindTo){
            this.bindTo = Ext.get(bindTo);
            if(this.bindTo){
                if(this.bindTo.dom.prev){
                    this.prev = Ext.get(this.bindTo.dom.prev);
                }
                if(this.bindTo.dom.next){
                    this.next = Ext.get(this.bindTo.dom.next);
                }
                if(this.bindToInput){
                    this.alignToContainer.alignTo(bindTo,'tl-bl?');// alignment
                }
            }
        }
    },
    
    // create container
    createAlignToContainer : function(){
        var divElement = document.createElement('div');
        this.alignToContainerId = Ext.id();
        document.body.appendChild(divElement);
        divElement.setAttribute('id',this.alignToContainerId)
        this.alignToContainer = Ext.get(this.alignToContainerId);
        this.alignToContainer.applyStyles("position:absolute");
        this.alignToContainer.applyStyles("z-index:99999");
    },
    
    // override
    showMonthPicker : function(){
        if(!this.disabled){
            this.createMonthPicker();
            var size = this.el.getSize();
            this.monthPicker.setSize(size);
            this.monthPicker.child('table').setSize(size);

            this.mpSelMonth = (this.activeDate || this.value).getMonth();
            this.updateMPMonth(this.mpSelMonth);
            this.mpSelYear = (this.activeDate || this.value).getFullYear();
            this.updateMPYear(this.mpSelYear);

            if(this.format.indexOf('d') != -1){// format with days
                this.monthPicker.slideIn('t', {duration:0.2});
            }else{//format no days
                this.monthPicker.show();
                this.monthPicker.child('> table',false).setWidth(this.el.getWidth() - 2);
                this.monthPicker.setWidth(this.el.getWidth() - 2);
            }
        }
    },
    
    // override
    show : function(){
        Ext.ux.DatePicker.superclass.show.call(this);
        if(this.format.indexOf('d') == -1){
            this.showMonthPicker();
        }
    },
    
    // override
    onMonthClick : function(e, t){
        e.stopEvent();
        var el = new Ext.Element(t), pn;
        if(el.is('button.x-date-mp-cancel')){
            if(this.format.indexOf('d') == -1){
                this.hide();
            }else{
                this.hideMonthPicker();
            }
        }
        else if(el.is('button.x-date-mp-ok')){
            var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate());
            if(d.getMonth() != this.mpSelMonth){
                // 'fix' the JS rolling date conversion if needed
                d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth();
            }
            this.update(d);
            if(this.format.indexOf('d') == -1){
                this.bindTo.dom.value = d.format(this.format);
                this.setValue(Date.parseDate(d.format(this.format),this.format),true);
                this.hide();
                if(this.fireEvent('select', this, this.value) == true){
                    this.validateDate();
                }
            }else{
                this.hideMonthPicker();
            }
        }
        else if((pn = el.up('td.x-date-mp-month', 2))){
            this.mpMonths.removeClass('x-date-mp-sel');
            pn.addClass('x-date-mp-sel');
            this.mpSelMonth = pn.dom.xmonth;
        }
        else if((pn = el.up('td.x-date-mp-year', 2))){
            this.mpYears.removeClass('x-date-mp-sel');
            pn.addClass('x-date-mp-sel');
            this.mpSelYear = pn.dom.xyear;
        }
        else if(el.is('a.x-date-mp-prev')){
            this.updateMPYear(this.mpyear-10);
        }
        else if(el.is('a.x-date-mp-next')){
            this.updateMPYear(this.mpyear+10);
        }
    },

    // override
    onMonthDblClick : function(e, t){
        e.stopEvent();
        var el = new Ext.Element(t), pn, d;
        if((pn = el.up('td.x-date-mp-month', 2))){
            d = new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate());
            this.update(d);
            
            if(this.format.indexOf('d') == -1){
                this.bindTo.dom.value = d.format(this.format);
                this.setValue(Date.parseDate(d.format(this.format),this.format),true);
                this.hide();
                if(this.fireEvent('select', this, this.value) == true){
                    this.validateDate();
                }
            }else{
                this.hideMonthPicker();
            }
        }
        else if((pn = el.up('td.x-date-mp-year', 2))){
            d = new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate());
            this.update(d);
            
            if(this.format.indexOf('d') == -1){
                this.bindTo.dom.value = d.format(this.format);
                this.setValue(Date.parseDate(d.format(this.format),this.format),true);
                this.hide();
                if(this.fireEvent('select', this, this.value) == true){
                    this.validateDate();
                }
            }else{
                this.hideMonthPicker();
            }
        }
    },
    
    // private
    handleDateClick : function(e, t){
        e.stopEvent();
        if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){
            this.cancelFocus = this.focusOnSelect === false;
            this.setValue(new Date(t.dateValue));
            delete this.cancelFocus;
            if(this.fireEvent('select', this, this.value) == true){
                this.validateDate();
            }
        }
    },

    // private
    selectToday : function(){
        if(this.todayBtn && !this.todayBtn.disabled){
            this.setValue(new Date().clearTime());
            if(this.fireEvent('select', this, this.value) == true){
                this.validateDate();
            }
        }
    },
    
    //validate when a date is selected
    validateDate : function(){
        if(this.bindToInput){
            if(this.bindTo){
                if(this.prev){
                    if(Ext.get(this.prev)){
                        var prev_date = Date.parseDate(Ext.get(this.prev).getValue(),this.format,true);
                        if(prev_date){
                            var this_date = Date.parseDate(this.getValue().format(this.format),this.format,true);
                            if(prev_date.getTime() > this_date.getTime()){
                                Ext.Msg.alert('warning','"u6240"u9009"u65f6"u95f4"u7684"u524d"u540e"u987a"u5e8f"u6709"u8bef"uff01"uff01"uff01',function(){
                                    this.bindTo.focus();
                                    this.bindTo.dom.select();
                                },this);
                            }
                        }
                    }
                }
                if(this.next){
                    if(Ext.get(this.next)){
                        var next_date = Date.parseDate(Ext.get(this.next).getValue(),this.format,true);
                        if(next_date){
                            var this_date = Date.parseDate(this.getValue().format(this.format),this.format,true);
                            if(next_date.getTime() < this_date.getTime()){
                                Ext.Msg.alert('warning','"u6240"u9009"u65f6"u95f4"u7684"u524d"u540e"u987a"u5e8f"u6709"u8bef"uff01"uff01"uff01',function(){
                                    this.bindTo.focus();
                                    this.bindTo.dom.select();
                                },this);
                            }
                        }
                    }
                }
            }
        }
    }
});

/*
 * bind a datePicker,an example like this:
 * <input type='text' id='from_date' name='date1' next='to_date' onclick='showDatePicker(this);'/>
 * <input type='text' id='to_date' name='date2' prev='from_date' onclick='showDatePicker(this);'/>
 */
function showDatePicker(input){

    //singleton datePicker
    if(Ext.getCmp('x-datepicker-ux')){
        var datePicker = Ext.getCmp('x-datepicker-ux');
        datePicker.bindingTo(input);
        datePicker.show();
    }else{
        var datePicker = new Ext.ux.DatePicker({
            id: 'x-datepicker-ux',
            format: 'Y-m',
            bindToInput: true,
            handler: function(_datePicker,_date){
                _datePicker.bindTo.dom.value = _date.format(_datePicker.format);
                _datePicker.hide();
            }
        });
        datePicker.bindingTo(input);
        datePicker.show();
    }
}