Ext.define('Abel.MultiMonthCalendar', 
{
	initComponent: function () 
	{	
		var superClass = this;	
		var numCalendars = 3;
		
		
		Ext.override(Ext.picker.Date,
		{
			showMonthPicker: function()
			{	//disable this function
			}
		});
		
		for (var i = 0; i < numCalendars; i++)
		{	
			var parentDteObj;
			var btnElems;
			var clnElems; //calendar back element
			var dte = new Ext.picker.Date(
			{
				ownerId: this.id,
				owner: this,
				//minDate: new Date(),
				//maxDate: new Date(new Date().getTime() + (365*86400000)),
				style: "z-index: 20000; -moz-user-select: none; position: absolute;",
				renderTo: Ext.getBody(),
				listeners: {							
					select: function(thisField, selectedDate, opt)
					{
						var thisCmp = Ext.getCmp(thisField.ownerId);
						thisCmp.setValue(thisField.getValue());
						thisCmp.isOpen = false;
												
						for (var j = 0; j < superClass.numCalendars; j++)
						{
							superClass["Calendar" + j].setValue(thisField.getValue());
							superClass["Calendar" + j].hide();
						}
						
						thisCmp.fireEvent('select', thisCmp, thisField.getValue());
					}
				}
			});
			dte.hide(); //hide the calendar by default										
			superClass["Calendar" + i] = dte; //store handle to object
			
			//add custom events
			parentDteObj = Ext.get(dte.id);
			btnElems = parentDteObj.query('[role$="button"]'); //search for all buttons
			
			Ext.get(btnElems[0].id).on('click', function() //previous month button
			{
				var fieldId = this.id;
				for (var k  = 0; k < superClass.numCalendars; k++)
				{
					//cycle through each Ext.Picker.Date object
					var parentCalendarContainer = Ext.get(superClass["Calendar" + k].id);
					//find the one that has the pressed button in it
					if (parentCalendarContainer.query('[id$="' + fieldId + '"]').length == 0)
					{	
						superClass["Calendar" + k].showPrevMonth();
					}
				}
			});													
			
			Ext.get(btnElems[2].id).on('click', function() //next month button
			{
				var fieldId = this.id;
				for (var k  = 0; k < superClass.numCalendars; k++)
				{
					//cycle through each Ext.Picker.Date object
					var parentCalendarContainer = Ext.get(superClass["Calendar" + k].id);
					//find the one that has the pressed button in it
					if (parentCalendarContainer.query('[id$="' + fieldId + '"]').length == 0)
					{	
						superClass["Calendar" + k].showNextMonth();
					}
				}
			});
		}
		
		Ext.override(Ext.form.field.Date,
		{	
			expand: function()
			{
				if (this.isOpen)
				{
					this.isOpen = false;
					for (var i  = 0; i < this.numCalendars; i++)
					{
						this["Calendar" + i].hide();					
					}
				}else
				{	//sort out max-min date stuff
					this.isOpen = true;				
					var pos = this.getPosition();
					for (var i  = 0; i < this.numCalendars; i++)
					{
						//propogate min/max value's
						if (this.minVal)
							this["Calendar" + i].setMinDate(this.minVal);
						else
							this["Calendar" + i].setMinDate(new Date());
						
						if (this.maxVal)
							this["Calendar" + i].setMaxDate(this.maxVal);
						else
							this["Calendar" + i].setMaxDate(new Date(new Date().getTime() + (365*86400000)));
							
						
						this["Calendar" + i].setValue(this.getValue());
						for (var j = 0; j < i; j++)
							this["Calendar" + i].showNextMonth();//cycle trailing calendars to the next month
						this["Calendar" + i].show();
						this["Calendar" + i].ownerId = this.id;
						this["Calendar" + i].setPosition(pos[0] + (i*177), pos[1]+20, false);
					}
				}					
			},
			setMaxValue: function(value)
			{
				this.maxVal = value;
			},
			setMinValue: function(value)
			{
				this.minVal = value;
			}
		});
		
		
		var config = {
			hasCalendarFocus: false,
			canClose: true,
			numCalendars: numCalendars
			//anchor: '100%'
		};
		
		Ext.apply(this, Ext.apply(this.initialConfig, config));
		Abel.MultiMonthCalendar.superclass.initComponent.apply(this, arguments);
		
		this.loadDefaults();
	},
	extend: 'Ext.form.field.Date',
	loadDefaults: function()
	{
		
	}
});