/*!
 * 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