//alert('calendar box js');
var year; 
var month; 
var day;
var params;
var isMonthCalendar ;
var isWeekCalendar ;
var region ;

function createDatePicker()
{
	var calendarPanel = new Ext.Panel({
			id: 'calendarPanel',
			renderTo: 'CallendarBox',
			title: 'Termindienst Kalender',
			baseCls: 'calendarBoxBaseClass',
			layout: 'column',
			items:[
			{					
				columnWidth: .33,
				cls: 'columnCalendarCls',
				baseCls: 'columnDateBaseCls',
				items:[{					
						xtype: 'button',
						id: 'buttonDateId',
						text: 'Tag',
						cls: 'no-style',
						overCls: 'no-style-over',
						itemCls: 'buttonDateItemCls',
						handler: function()
						{
				            switchDatePicker();
						}       
				}]       
			},
			{	
				columnWidth: .33,
				cls: 'columnCalendarCls',
				baseCls: 'columnYearBaseCls',
				items:[{
					xtype: 'button',
					id: 'buttonWeekId',
					text: 'Woche',
					cls: 'no-style',
					overCls: 'no-style-over',
					itemCls: 'buttonYearItemCls',
					handler: function()
					{
			            switchWeekCalendar();
					}
				}]			      
			},
			{	
				columnWidth: .33,
				cls: 'columnCalendarCls',
				baseCls: 'columnCalendarMonthCls',
				items:[{
					xtype: 'button',
					id: 'buttonMonthId',
					text: 'Monat',
					cls: 'no-style',
					overCls: 'no-style-over',
					itemCls: 'buttonMonthItemCls',
					handler: function()
					{
			            switchMonthCalendar();
					}
				}]			      
			},
			{
				columnWidth: 1,
				id: 'montPickerId',
				items: [{
					xtype: 'datepickerrange',
					id: 'calendar',
					baseCls: 'calendarBaseCls',
					cls: 'calendarCls',
					listeners: 
					{
			            'select': function(date_picker, date)
			            {
			            params = new Object();
						params['y'] = date.getFullYear();
						if(isWeekCalendar != null && isWeekCalendar == true)
						{		
							params['w'] = true;							
						}else{
							params['w'] = false;
						}
						params['m'] = parseInt(date.getMonth())+1;
						if(isMonthCalendar == false)
						params['d'] = date.format('j');
						
						
						reloadMainPageByCalendarParam(params);

			            }
			    	}
				}]			
			}] 			
	});	
	
	//switchDatePicker();
	//Ext.getCmp('calendar').setSelectionMode('day');
}

function reloadMainPageByCalendarParam(params)
{
	
	var reloadform = new Ext.FormPanel({
	id:'formPanelId',
	renderTo: Ext.getBody(),
    standardSubmit: true,   
    items:[
    {
    	xtype: 'hidden', 
    	name: 'calendar', 
    	value: 'true'
    },
    {
    	xtype: 'hidden', 
    	name: 'r', 
    	value: region
    },
     {
    	xtype: 'hidden', 
    	name: 'w', 
    	value: params['w']
    },
     {
    	xtype: 'hidden', 
    	name: 'year', 
    	value: params['y']
    }, {
    	xtype: 'hidden', 
    	name: 'month', 
    	value: params['m']
    }, {
    	xtype: 'hidden', 
    	name: 'day', 
    	value: params['d']
    }],    
    url: '/main' ,
    method: 'GET'
   
});

reloadform.getForm().submit();

}

function switchWeekCalendar()
{
	Ext.getCmp('calendar').setSelectionMode('week');
	Ext.util.CSS.getRules(true);

	Ext.util.CSS.updateRule('#buttondateid', 'backgroundColor', '');	
	Ext.util.CSS.updateRule('#buttondateid', 'backgroundColor', '#FFFDDC');		
	Ext.util.CSS.updateRule('#buttonWeekId', 'backgroundColor', '');	
	//Ext.util.CSS.updateRule('#buttonyearid', 'backgroundColor', '#FFFDDC');	
	Ext.util.CSS.updateRule('#buttonmonthid', 'backgroundColor', '');	
	Ext.util.CSS.updateRule('#buttonmonthid', 'backgroundColor', '#FFFDDC');
	
	isWeekCalendar = true;
	isMonthCalendar = false;
}

function switchMonthCalendar()
{
	Ext.getCmp('calendar').setSelectionMode('month');
	
	Ext.util.CSS.getRules(true);
	Ext.util.CSS.updateRule('.x-date-mp-month', 'display', '');	
	
	Ext.util.CSS.updateRule('#buttondateid', 'backgroundColor', '');	
	Ext.util.CSS.updateRule('#buttondateid', 'backgroundColor', '#FFFDDC');		
	Ext.util.CSS.updateRule('#buttonWeekId', 'backgroundColor', '');	
	Ext.util.CSS.updateRule('#buttonWeekId', 'backgroundColor', '#FFFDDC');	
	Ext.util.CSS.updateRule('#buttonmonthid', 'backgroundColor', '');	
//	Ext.util.CSS.updateRule('#buttonmonthid', 'backgroundColor', '#FFFDDC');
	isWeekCalendar = false;
	isMonthCalendar = true;
}

function switchDatePicker()
{
	Ext.getCmp('calendar').setSelectionMode('day');
	Ext.util.CSS.getRules(true);
	Ext.util.CSS.updateRule('.x-date-mp-month', 'display', '');	
	
    Ext.util.CSS.updateRule('#buttondateid', 'backgroundColor', '');	
	//Ext.util.CSS.updateRule('#buttondateid', 'backgroundColor', '#FFFDDC');		
	Ext.util.CSS.updateRule('#buttonWeekId', 'backgroundColor', '');	
	Ext.util.CSS.updateRule('#buttonWeekId', 'backgroundColor', '#FFFDDC');	
	Ext.util.CSS.updateRule('#buttonmonthid', 'backgroundColor', '');	
	Ext.util.CSS.updateRule('#buttonmonthid', 'backgroundColor', '#FFFDDC');	
	isWeekCalendar = false;
	isMonthCalendar = false;
}

function setDatePicker()
{
	if(typeof date != 'undefined' && date != null && date != '' )
	{ 
		var d = new Date(date);
		Ext.getCmp('calendar').setValue(d);
		

	}
 
 
	//choose if selected by month
  if(month != 'undefined' && month != null && month === 'true')
  {
  
  	switchMonthCalendar();
  
  }else if(typeof week != 'undefined' && week != null && week === 'true')
  {
  	switchWeekCalendar();
  	
  }else if(typeof date != 'undefined' && date != null )
  {
  	switchDatePicker();
  	
  }
  
}
Ext.onReady(function(){ 
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'under';
	
	Ext.DatePicker.prototype.dayNames = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
	Ext.DatePicker.prototype.todayText = "Heute";
	Ext.DatePicker.prototype.todayTip = "{0} (Leertaste)";
	Ext.DatePicker.prototype.format = "d.m.Y";
	Ext.DatePicker.prototype.nextText = 'Nächster Monat (Ctrl+rechter Pfeil)';
	Ext.DatePicker.prototype.prevText = 'Vorheriger Monat (Ctrl+linker Pfeil)';
	Ext.DatePicker.prototype.monthYearText = 'Wählen Sie den Monat (Ctrl+nach oben/unten um Jahr zu wescheln)';
	Ext.DatePicker.prototype.cancelText = 'Abbrechen';
	Ext.DatePicker.prototype.monthNames = ['Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
	Date.dayNames= ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
    Date.monthNames = ['Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];

	createDatePicker();	

	//alert('date: ' + date +' ,isMonth: ' +  month+' ,isWeek:' + week+ ' ,region: '+ region);
	
	
	setDatePicker();

	
});