/** Klasse zur Darstellung des Rennkalenders */
var RaceCalendar = new Class({
	Implements: Options,

	options: { //default-Werte
		elContainer: null,
		currentThemesPath: '/img',
		dateToday: null,
		startupHidden: false,
		arrElCalendarToggle: []
	},

	elTitleBox: null,
	elMainBox: null,
	elBottomBox: null,
	dateToday: null,
	dateSelected: null,

	/** Initialisieren */
	initialize: function(options) {
		this.setOptions(options); //options übernehmen

		if(typeof(this.options.elContainer) != 'object' || this.options.elContainer==null) { return; }

		Locale.use(''+ cal_locale +''); //deutsches Datum
		Date.defineParser('%s'); //Damit Date auch Unix Timestamps erkennt

		if(this.options.dateToday!=null) { this.dateToday = new Date.parse(this.options.dateToday); } //Serverdatum
		else { this.dateToday = new Date(); } //Clientdatum
		
		this.dateSelected = this.dateToday.clone(); //ausgewähltes Datum ist heute

		this.bindEvents();
		this.injectUI();
		this.updateUI();

		//Kalender ein/ausblenden
		if(this.options.startupHidden==true) { this.hide(); }
		else { this.show(); }
	},


	/** bindet Events an kalenderexterne Elemente */
	bindEvents: function() {
		window.addEvent('domready', function() {
			this.options.arrElCalendarToggle.each(function(el) {
				el.addEvent('click', function() {
					this.toggleView();
				}.bind(this))
			}.bind(this));
		}.bind(this));
	},


	/** Erstellt das Kalender UI und bindet es in das Containerelement ein, welches vorher geleert wird */
	injectUI: function() {
		this.options.elContainer.empty(); //Bereich leeren

		//Titelleiste bzw. Monatsbox
		this.elTitleBox = new Element('div.month');
		this.elTitleBox.grab(new Element('a', { //fast forward
			'class': 'fr',
			'href':'javascript:;',
			'html': '<img src="'+this.options.currentThemesPath+'/d-r-arr.gif" alt="" />',
			'events': { 'click': function() { this.dateSelected.increment('year', 1); this.updateUI();  }.bind(this) }
		}));
		this.elTitleBox.grab(new Element('a', { //forward
			'class': 'fr r-spacing',
			'href':'javascript:;',
			'html': '<img src="'+this.options.currentThemesPath+'/r-arr.gif" alt="" />',
			'events': { 'click': function() { this.dateSelected.increment('month', 1); this.updateUI();  }.bind(this) }
		}));
		this.elTitleBox.grab(new Element('a', { //fast backward
			'class': 'fl r-spacing',
			'href':'javascript:;',
			'html': '<img src="'+this.options.currentThemesPath+'/d-l-arr.gif" alt="" />',
			'events': { 'click': function() { this.dateSelected.decrement('year', 1); this.updateUI();  }.bind(this) }
		}));
		this.elTitleBox.grab(new Element('a', { //backward
			'class': 'fl',
			'href':'javascript:;',
			'html': '<img src="'+this.options.currentThemesPath+'/l-arr.gif" alt="" />',
			'events': { 'click': function() { this.dateSelected.decrement('month', 1); this.updateUI();  }.bind(this) }
		}));
		this.elTitleBox.grab(new Element('h4'));
		this.options.elContainer.grab(this.elTitleBox);

		//Hauptbox (Tage)
		this.elMainBox = new Element('table', {
			'width': '100%',
			'border': '0',
			'cellspacing': '0',
			'cellpadding': '0'
		});
		//Tagesüberschriften
		var elDaysTitle = new Element('tr', { 'class':'daysTitle' });
		([cal_days[0], cal_days[1], cal_days[2], cal_days[3], cal_days[4], cal_days[5], cal_days[6]]).each(function(day) {
			elDaysTitle.grab(new Element('th', {'text':day}));
		});
		this.elMainBox.grab(elDaysTitle);
		//Platzhalter für die Tagesboxen
		this.elMainBox.grab(new Element('tr', { 'class':'daysLine' }));
		this.elMainBox.grab(new Element('tr', { 'class':'daysLine' }));
		this.elMainBox.grab(new Element('tr', { 'class':'daysLine' }));
		this.elMainBox.grab(new Element('tr', { 'class':'daysLine' }));
		this.elMainBox.grab(new Element('tr', { 'class':'daysLine' }));
		this.elMainBox.grab(new Element('tr', { 'class':'daysLine' }));
		this.options.elContainer.grab(this.elMainBox);

		//Fußzeile
		this.elBottomBox = new Element('div.btm-links');
		this.elBottomBox.grab(new Element('div.cl', { 'text':'&nbsp;' }));
		this.elBottomBox.grab(new Element('a.fr', {
			'html':''+ cal_tommorow +'<strong> &gt;</strong>',
			'href':'javascript:;',
			'events': { 'click': function() { this.openMeetings(this.dateToday.clone().increment('day', 1));  }.bind(this) }
		}));
		this.elBottomBox.grab(new Element('a', {
			'html':'<strong>&lt; </strong>' + cal_yesterday +'',
			'href':'javascript:;',
			'events': { 'click': function() { this.openMeetings(this.dateToday.clone().decrement('day', 1));  }.bind(this) }
		}));
		this.elBottomBox.grab(new Element('div.cl', { 'text':'&nbsp;' }));
		this.options.elContainer.grab(this.elBottomBox);
	},


	/** Stellt die aktuellen Kalenderdaten dar */
	updateUI: function() {
		//Monat und Jahr ausgeben
		this.elTitleBox.getElements('h4')[0].set('text', this.dateSelected.format('%B %Y'));

		//ersten Tag des ausgewählten Monats ermitteln, Abstand zum Wochenanfang ermitteln, von Wochenanfang 5x7 mal hochiterieren
		var objTmpDate = new Date.parse(this.dateSelected.format('%Y-%m-01'));
		objTmpDate.decrement('day', ((parseInt(objTmpDate.format('%w'))+6)%7));

		var elDay = null;
		this.elMainBox.getElements('.daysLine').each(function(elDayLine, key) {
			elDayLine.empty();
			for(var iCol=0; iCol<7; iCol++) {
				elDay = new Element('td', {
					'text': objTmpDate.format('%e'),
					'events': { click: function(objDate) { this.openMeetings(objDate); }.bind(this, objTmpDate.clone()) }
				})
				if(objTmpDate.format('%m') != this.dateSelected.format('%m')) { elDay.addClass('prev'); } //aktueller Monat oder nicht?
				else if(objTmpDate.diff(this.dateToday)==0) { elDay.addClass('today'); } //heute?

				elDayLine.grab(elDay);
				objTmpDate.increment('day', 1);
			}
		}.bind(this));
	},


	/** öffnet die Meetings eines übergebenen Datums */
	openMeetings: function(objDate) {
		location.href='/races.php?date='+objDate.format('%d%m%Y');
	},


	/** Versteckt den Kalender */
	hide: function() { this.options.elContainer.hide(); },


	/** Zeigt den Kalender */
	show: function() { this.options.elContainer.show(); },


	/** Schaltet die Sichtbarkeit des Kalenders um */
	toggleView: function() { this.options.elContainer.toggle(); }


});