/*INISEAL:[yppFsl75Wgxz%2FlF6TTM7OQRDpbY%3D%0A]*/
/*
 * Ext JS Library 2.0 RC 1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

/**
 * @class Ext.JHanaMultiCalendar
 * @extends Ext.Component
 * Multi-month Calendar
 * @constructor
  * @param {Object} config The config object
 */
Ext.ux.JHanaMultiCalendar = Ext.extend(Ext.Component, {
    /**
     * @cfg {Date} minDate
     * Minimum allowable date (JavaScript date object, defaults to null)
     */
    minDate : null,
    /**
     * @cfg {Date} maxDate
     * Maximum allowable date (JavaScript date object, defaults to null)
     */
    maxDate : null,
    /**
     * @cfg {String} minText
     * The error text to display if the minDate validation fails (defaults to "This date is before the minimum date")
     */
    minText : "¼±ÅÃÇÏ½Ç ¼ö ¾ø½À´Ï´Ù.",
    /**
     * @cfg {String} maxText
     * The error text to display if the maxDate validation fails (defaults to "This date is after the maximum date")
     */
    maxText : "¼±ÅÃÇÏ½Ç ¼ö ¾ø½À´Ï´Ù.",
    /**
     * @cfg {String} format
     * The default date format string which can be overriden for localization support.  The format must be
     * valid according to {@link Date#parseDate} (defaults to 'y/m/d').
     */
    format : "m/d/y",
    /**
     * @cfg {Array} disabledDays
     * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
     */
    disabledDays : null,
    /**
     * @cfg {String} disabledDaysText
     * The tooltip to display when the date falls on a disabled day (defaults to "")
     */
    disabledDaysText : "",
    /**
     * @cfg {RegExp} disabledDatesRE
     * JavaScript regular expression used to disable a pattern of dates (defaults to null)
     */
    disabledDatesRE : null,
    /**
     * @cfg {String} disabledDatesText
     * The tooltip text to display when the date falls on a disabled date (defaults to "")
     */
    disabledDatesText : "",
    /**
     * @cfg {Boolean} constrainToViewport
     * True to constrain the date picker to the viewport (defaults to true)
     */
    constrainToViewport : true,
    /**
     * @cfg {Array} monthNames
     * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
     */
    monthNames : Date.monthNames,
    /**
     * @cfg {Array} dayNames
     * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
     */
    dayNames : Date.dayNames,
    /**
     * @cfg {String} nextText
     * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
     */
    nextText: 'Next Month (Control+Right)',
    /**
     * @cfg {String} prevText
     * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
     */
    prevText: 'Previous Month (Control+Left)',    
    /**
     * @cfg {Number} startDay
     * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
     */
    startDay : 0,
    /**
    * @cfg {Number} noOfMonth
    * No of Month to be displayed
    */
    noOfMonth : 1,
    /**
    * @cfg {Array} eventDates
    * List of Dates which have an event (show as selected in UI)
    */    
    eventDates : null,
	
	value : null,
    
    initComponent : function(){
        
		Ext.ux.JHanaMultiCalendar.superclass.initComponent.call(this);
		
        this.value = this.value ?
                 this.value.clearTime() : new Date().clearTime();
				 
		this.addEvents(
            'select'
        );

        if(this.handler){
            this.on("select", this.handler,  this.scope || this);
        }

        this.initDisabledDays();
    },

    // private
    initDisabledDays : function(){
        if(!this.disabledDatesRE && this.disabledDates){
            var dd = this.disabledDates;
            var re = "(?:";
            for(var i = 0; i < dd.length; i++){
                re += dd[i];
                if(i != dd.length-1) re += "|";
            }
            this.disabledDatesRE = new RegExp(re + ")");
        }
    },

    /**
     * Sets the value of the date field
     * @param {Date} value The date to set
     */

    setValue : function(value){
        var old = this.value;
        this.value = value.clearTime(true);
        if(this.el){
            this.update(this.value);
        }
    },

    /**
     * Gets the current selected value of the date field
     * @return {Date} The selected date
     */
    getValue : function(){
        return this.value;
    },


    // private
    focus : function(){
        if (this.el) {
			this.update(this.activeDate);
		}

    },
    // private
    onRender : function(container, position){
        var m = ["<table cellspacing='0'><tr>"];
	
        for(var x=0; x<this.noOfMonth; x++) {
			m.push("<td><table class='calender_box'><tr>");	
            m.push("<td><table cellspacing='0' class='dateView'><tr>");
            if(x==0) {
                m.push("<td class='btnDateLeft'><span class='prevYear'><a href='#' title='Previous Year'><img alt='' src='"+pbk.APPLICATION_CONTEXT_ROOT+"/resource/images/common/btn/btn_date_left01.gif'/></a></span><span class='prevMonth" + x + "'><a href='#' title='", this.prevText ,"'><img alt='' src='"+pbk.APPLICATION_CONTEXT_ROOT+"/resource/images/common/btn/btn_date_left02.gif'/></a></span></td>");
            } else {
                m.push("<td class='btnDateLeft'><span class='prevMonth" + x + "'><a href='#' title='", this.prevText ,"' ><img alt='' src='"+pbk.APPLICATION_CONTEXT_ROOT+"/resource/images/common/btn/btn_date_left02.gif'/></a></span></td>");
            }
            m.push("<td class='TxtDateMid' align='center'><span id='monthLabel" + x + "'></span></td>");
            if(x == this.noOfMonth-1) {
                m.push("<td class='btnDateRight'><span class='nextMonth" + x + "'><a href='#' title='", this.nextText ,"'><img alt='' src='"+pbk.APPLICATION_CONTEXT_ROOT+"/resource/images/common/btn/btn_date_right02.gif'/></a></span><span class='nextYear'><a href='#' title='Next Year'><img alt='' src='"+pbk.APPLICATION_CONTEXT_ROOT+"/resource/images/common/btn/btn_date_right01.gif'/></a></span><p class='calender_btn_close'><a href='#//HanaBank'><img src='/resource/images/common/btn/btn_close_cal.gif' alt='close' onclick='pbk.extJS.multiCalendar.close();'/></a></p></td>");
            } else {
                m.push("<td class='btnDateRight'><span class='nextMonth" + x + "'><a href='#' title='", this.nextText ,"' ><img alt='' src='"+pbk.APPLICATION_CONTEXT_ROOT+"/resource/images/common/btn/btn_date_right02.gif'/></a></span><p class='calender_btn_close'><a href='#//HanaBank'><img src='/resource/images/common/btn/btn_close_cal.gif' alt='close' onclick='pbk.extJS.multiCalendar.close();'/></a></p></td>");
            }

            m.push("</tr></table>");
			m.push("<p><img src='"+pbk.APPLICATION_CONTEXT_ROOT+"/resource/images/common/img_day.gif' alt='' /></p>");
			
            var dn = this.dayNames;
			
			/*
            for(var i = 0; i < 7; i++){
               var d = this.startDay+i;
               if(d > 6){
                   d = d-7;
               }
                m.push("<th><span>", dn[d].substr(0,1), "</span></th>");
            }*/
            m[m.length] = "<table class='DateList' id='inner-date"+x+"'><tbody><tr>";
            for(var i = 0; i < 42; i++) {
                if(i % 7 == 0 && i != 0){
                    m[m.length] = "</tr><tr>";
                }
                m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
            }
            m[m.length] = '</tr></tbody></table></td>';
			m.push("</tr></table></td>");
            if(x != this.noOfMonth-1) {
                m[m.length] = "<td width='3'></td>";
            }			
        }
        m[m.length] = "</tr></table>";            
        var el = document.createElement("div");
        el.className = "x-date-picker";
        el.innerHTML = m.join("");
		

        container.dom.insertBefore(el, position);

        this.el = Ext.get(el);    
        this.eventEl = Ext.get(el.firstChild);
		if (this.el) {
			new Ext.util.ClickRepeater(this.el.child("span.prevYear a"), {
				handler: this.showPrevYear,
				scope: this,
				preventDefault: true,
				stopDefault: true
			});
			
			new Ext.util.ClickRepeater(this.el.child("span.nextYear a"), {
				handler: this.showNextYear,
				scope: this,
				preventDefault: true,
				stopDefault: true
			});
			
			
			for (var x = 0; x < this.noOfMonth; x++) {

				
				new Ext.util.ClickRepeater(this.el.child("span.prevMonth" + x + " a"), {
					handler: this.showPrevMonth,
					scope: this,
					preventDefault: true,
					stopDefault: true
				});
					
				new Ext.util.ClickRepeater(this.el.child("span.nextMonth" + x + " a"), {
					handler: this.showNextMonth,
					scope: this,
					preventDefault: true,
					stopDefault: true
				});								
			}
		}
		
		this.eventEl.on("mousewheel", this.handleMouseWheel,  this);

        var kn = new Ext.KeyNav(this.eventEl, {
            "left" : function(e){
                e.ctrlKey ?
                    this.showPrevMonth() :
                    this.update(this.activeDate.add("d", -1));
            },

            "right" : function(e){
                e.ctrlKey ?
                    this.showNextMonth() :
                    this.update(this.activeDate.add("d", 1));
            },
			
            "up" : function(e){
                e.ctrlKey ?
                    this.showNextYear() :
                    this.update(this.activeDate.add("d", -7));
            },

            "down" : function(e){
                e.ctrlKey ?
                    this.showPrevYear() :
                    this.update(this.activeDate.add("d", 7));
            },

            "pageUp" : function(e){
                this.showNextMonth();
            },

            "pageDown" : function(e){
                this.showPrevMonth();
            },

            "enter" : function(e){
                e.stopPropagation();
                return true;
            }, 
            scope : this 
        });
		
		this.eventEl.on("click", this.handleDateClick,  this, {delegate: "a.x-date-date"});
		
		this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,  this);
		if (this.el)
       		this.el.unselectable();
        
        this.cellsArray = new Array();
        this.textNodesArray = new Array(); 
        for(var x=0; x< this.noOfMonth; x++) {
            var cells = Ext.get('inner-date'+x).select("tbody td");
            var textNodes = Ext.get('inner-date'+x).query("tbody span");
            this.cellsArray[x] = cells;
            this.textNodesArray[x] = textNodes;
        }

        if(Ext.isIE){
			if (this.el)
            this.el.repaint();
        }
        this.update(this.value);
    },

    // private
    showPrevMonth : function(e){
        this.update(this.activeDate.add("mo", -1));
    },

    // private
    showNextMonth : function(e){
        this.update(this.activeDate.add("mo", 1));
    },
	
	showPrevYear : function(){
        this.update(this.activeDate.add("y", -1));
    },

    
    showNextYear : function(){
        this.update(this.activeDate.add("y", 1));
    },
	
	handleMouseWheel : function(e){
        var delta = e.getWheelDelta();
        if(delta > 0){
            this.showPrevYear();
            e.stopEvent();
        } else if(delta < 0){
            this.showNextYear();
            e.stopEvent();
        }
    },
	
	selectToday : function(){
        this.setValue(new Date().clearTime());
        this.fireEvent("select", this, this.value);
    },
	
	handleDateClick : function(e, t){
        e.stopEvent();
        if(t.dateValue && !Ext.fly(t.parentNode).hasClass("x-date-disabled")){
            //this.setValue(new Date(t.dateValue));
			var selectDate = new Date(t.dateValue);
            this.fireEvent("select", this, selectDate.clearTime(true));
        }
    },

    // private
    update : function(date){
        this.activeDate = date;
        for(var x=0;x<this.noOfMonth;x++) {
            var days = date.getDaysInMonth();
            var firstOfMonth = date.getFirstDateOfMonth();
            var startingPos = firstOfMonth.getDay()-this.startDay;
    
            if(startingPos <= this.startDay){
                startingPos += 7;
            }
    
            var pm = date.add("mo", -1);
            var prevStart = pm.getDaysInMonth()-startingPos;
    
            var cells = this.cellsArray[x].elements;
            var textEls = this.textNodesArray[x];
            days += startingPos;
    
            // convert everything to numbers so it's fast
            var day = 86400000;
            var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
            var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
            var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
            var ddMatch = this.disabledDatesRE;
            var ddText = this.disabledDatesText;
            var ddays = this.disabledDays ? this.disabledDays.join("") : false;
            var ddaysText = this.disabledDaysText;
            var format = this.format;
    
            var setCellClass = function(cal, cell){
                cell.title = "";
                var t = d.getTime();
                cell.firstChild.dateValue = t;

                // disabling
                if(t < min) {
                    cell.className = " x-date-disabled";
                    cell.title = cal.minText;
                    return;
                }
                if(t > max) {
                    cell.className = " x-date-disabled";
                    cell.title = cal.maxText;
                    return;
                }
                if(ddays){
                    if(ddays.indexOf(d.getDay()) != -1){
                        cell.title = ddaysText;
                        cell.className = " x-date-disabled";
                    }
                }
                if(ddMatch && format){
                    var fvalue = d.dateFormat(format);
                    if(ddMatch.test(fvalue)){
                        cell.title = ddText.replace("%0", fvalue);
                        cell.className = " x-date-disabled";
                    }
                }
                //Only active days need to be selected
                if(cal.eventDates && (cell.className.indexOf('x-date-active') != -1)) {
                    for(var y=0; y < cal.eventDates.length; y++) {
                        var evtDate = cal.eventDates[y].clearTime().getTime();
                        if(t == evtDate) {
                            cell.className += " x-date-selected";
                            break;
                        }
                    }
                }
            };
    
            var i = 0;
            for(; i < startingPos; i++) {
                textEls[i].innerHTML = (++prevStart);
                d.setDate(d.getDate()+1);
                cells[i].className = "x-date-prevday";
                setCellClass(this, cells[i]);
            }
            for(; i < days; i++){
                intDay = i - startingPos + 1;
                textEls[i].innerHTML = (intDay);
                d.setDate(d.getDate()+1);
				if (d.getDay() != 0 && d.getDay() != 6) {
					cells[i].className = "x-date-active";
					setCellClass(this, cells[i]);
				} else if (d.getDay() == 0) {
					cells[i].className = "calDate_sun";
                	setCellClass(this, cells[i]);					
				} else if (d.getDay() == 6) {
					cells[i].className = "calDate_sat";
                	setCellClass(this, cells[i]);		
				} 
				
				if ((d.clearTime() - this.value)== 0 ) {
					cells[i].className = "calDate_on";
					setCellClass(this, cells[i]);
				} 				
            }
            var extraDays = 0;
            for(; i < 42; i++) {
                 textEls[i].innerHTML = (++extraDays);
                 d.setDate(d.getDate()+1);
                 cells[i].className = "x-date-nextday";
                 setCellClass(this, cells[i]);				 
            }
            var monthLabel = Ext.get('monthLabel' + x);                    
            monthLabel.update(date.getFullYear() + "." + eval(date.getMonth()+1));

            if(!this.internalRender){
				if (this.el) {
					var main = this.el.dom.firstChild;
					var w = main.offsetWidth;
					this.el.setWidth(w + this.el.getBorderWidth("lr"));
					Ext.fly(main).setWidth(w);
					this.internalRender = true;
					// opera does not respect the auto grow header center column
					// then, after it gets a width opera refuses to recalculate
					// without a second pass
					if (Ext.isOpera && !this.secondPass) {
						main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth + main.rows[0].cells[2].offsetWidth)) + "px";
						this.secondPass = true;
						this.update.defer(10, this, [date]);
					}
				}
            }
            date = date.add('mo',1);
        }    
    }
});
Ext.reg('jhanamulticalendar', Ext.ux.JHanaMultiCalendar);  

var hanaMultiCalendar = pbk.extJS.multiCalendar;