var __datepicker = null;

function startDatePicker(f_id, f_path)
{
	if(__datepicker != null)
	{
		if(__datepicker.source_id == f_id)
		{
			__datepicker.close();
			__datepicker = null;
		}
		else if(__datepicker.source_id != '')
		{
			__datepicker.close();
			__datepicker = new DatePicker('__datepicker', f_id, f_path);
		}
		else
		{
			__datepicker = new DatePicker('__datepicker', f_id, f_path);
		}
	}
	else
	{
		__datepicker = new DatePicker('__datepicker', f_id, f_path);
	}
}

function closeDatePicker()
{
	if(__datepicker != null)
	{
		if(__datepicker.source_id != '')
		{
			__datepicker.close();
			__datepicker = null;
		}
	}
}

var DatePicker = function(f_key, f_id)
{
	this.init(f_key, f_id);
}

DatePicker.prototype = 
{
	// Resources
	'key' : '',
	'source' : null,
	'source_id' : '',
	'datepicker' : null,
	'datepicker_id' : '',

	'current_date' : null,
	'selected_date' : null,
	'active_date' : null,


	// Init
	'init' : function(f_key, f_id)
	{
		var rand = Math.round(Math.random() * 100000);
		this.key = f_key;
		this.source_id = f_id;
		this.datepicker_id = 'datepicker_' + rand;
		this.current_date = new Date();

		if(document.getElementById && document.createElement && document.insertBefore && document.removeChild)
		{
			this.source = document.getElementById(this.source_id);

			// Create DatePicker
			var HTML = document.createElement('div');
			HTML.setAttribute('id', this.editor_id);
			HTML.setAttribute('class', 'datepicker');
			this.source.parentNode.insertBefore(HTML, this.source);
			this.datepicker = document.getElementById(this.editor_id); // Create a reference to the DatePicker


			// Style the DatePicker
			this.datepicker.style.background = '#FFFFFF';
			this.datepicker.style.border = '#000000 solid 2px;';
			this.datepicker.style.position = 'absolute';
			this.datepicker.style.width = '150px';
			this.datepicker.style.zIndex = 1000;


			// Load active date
			var input = this.source.value;
			if(input.match('^[0-9]{1,2}[-]{1,1}[0-9]{1,2}[-]{1,1}[0-9]{4,4}$')) // Validate Date-string Syntax (dd-mm-yyyy)
			{
				var tmp = input.split('-'); // Get year, month and day

				if(tmp[0].substr(0, 1) == '0') // Remove leading zero (if any)
				{
					tmp[0] = tmp[0].substr(1, 2);
				}

				if(tmp[1].substr(0, 1) == '0') // Remove leading zero (if any)
				{
					tmp[1] = tmp[1].substr(1, 2);
				}

				this.selected_date = new Date(parseInt(tmp[2]), parseInt(tmp[1]) - 1, parseInt(tmp[0])); // Set selected date
				this.active_date = new Date(parseInt(tmp[2]), parseInt(tmp[1]) - 1, parseInt(tmp[0])); // Set active date
			}
			else
			{
				this.selected_date = new Date(this.current_date.getFullYear(), this.current_date.getMonth(), this.current_date.getDate());
				this.active_date = new Date(this.current_date.getFullYear(), this.current_date.getMonth(), this.current_date.getDate());
			}

			this.draw();
		}
		else
		{
			alert('Deze datumkiezer wordt niet ondersteund door uw browser.');
		}
	},

	'draw' : function()
	{
		var HTML = '';
		HTML += '<table border="0" cellpadding="0" cellspacing="0" width="100%">';

		// DatePicker Head
		HTML += '<tr>';
		HTML += '<td onclick="javascript: ' + this.key + '.prevMonth();" onmouseout="this.style.border = \'#CDCDCD solid 1px;\'" onmouseover="this.style.border = \'#000000 solid 1px;\'" style="background: #CDCDCD; border: #CDCDCD solid 1px; cursor: pointer; font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;" title="Vorige maand">&lt;&lt;</td>'; // Go to previous month
		HTML += '<td colspan="5" style="background: #CDCDCD; border: #CDCDCD solid 1px; font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;">' + this.monthToString(this.active_date.getMonth()) + ' ' + this.active_date.getFullYear() + '</td>'; // Display month & year
		HTML += '<td onclick="javascript: ' + this.key + '.nextMonth();" onmouseout="this.style.border = \'#CDCDCD solid 1px;\'" onmouseover="this.style.border = \'#000000 solid 1px;\'" style="background: #CDCDCD; border: #CDCDCD solid 1px; cursor: pointer; font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;" title="Volgende maand">&gt;&gt;</td>'; // Go to next month
		HTML += '</tr>';

		// Weekday indicators (sunday-saturday)
		HTML += '<tr>';
		HTML += '<td style="font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;" title="Zondag">z</td>';
		HTML += '<td style="font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;" title="Maandag">m</td>';
		HTML += '<td style="font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;" title="Dinsdag">d</td>';
		HTML += '<td style="font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;" title="Woensdag">w</td>';
		HTML += '<td style="font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;" title="Donderdag">d</td>';
		HTML += '<td style="font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;" title="Vrijdag">v</td>';
		HTML += '<td style="font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;" title="Zaterdag">z</td>';
		HTML += '</tr>';

		// Seperator
		HTML += '<tr>';
		HTML += '<td colspan="7" style="background: #000000; height: 1px;"></td>';
		HTML += '</tr>';

		var dim = this.daysInMonth(this.active_date.getFullYear(), this.active_date.getMonth());
		var fdim = this.firstDayInMonth(this.active_date.getFullYear(), this.active_date.getMonth());
		var dayIndex = 1;

		for(var i = 0; i < 6; i++)
		{
			HTML += '<tr>';

			for(var j = 0; j < 7; j++)
			{
				if(fdim > 0)
				{
					fdim--;
					HTML += '<td style="font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;"></td>';
				}
				else
				{
					if(dayIndex > dim)
					{
						HTML += '<td style="font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;"></td>';
					}
					else
					{
						var string_date = this.dateToString(new Date(this.active_date.getFullYear(), this.active_date.getMonth(), dayIndex));

						var background_color = '#FFFFFF';
						var border_color = '#FFFFFF';

						if((this.selected_date.getFullYear() == this.active_date.getFullYear()) && ((this.selected_date.getMonth()) == (this.active_date.getMonth())) && (this.selected_date.getDate() == dayIndex))
						{
							background_color = '#EAEAEA';
						}

						if((this.current_date.getFullYear() == this.active_date.getFullYear()) && ((this.current_date.getMonth()) == (this.active_date.getMonth())) && (this.current_date.getDate() == dayIndex))
						{
							border_color = '#CD0000';
						}

						HTML += '<td onclick="javascript: ' + this.key + '.selectDate(\'' + string_date + '\');" onmouseout="this.style.border = \'' + border_color + ' solid 1px;\'" onmouseover="this.style.border = \'#000000 solid 1px;\'"  style="background: ' + background_color + '; border: ' + border_color + ' solid 1px; cursor: pointer; font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;" title="' + string_date + '">' + dayIndex + '</td>';

						dayIndex++;
					}
				}
			}

			HTML += '</tr>';
		}

		// Seperator
		HTML += '<tr>';
		HTML += '<td colspan="7" style="background: #000000; height: 1px;"></td>';
		HTML += '</tr>';

		// Footer
		HTML += '<tr>';
		HTML += '<td colspan="3" onclick="javascript: ' + this.key + '.selectNow();" onmouseout="this.style.border = \'#FFFFFF solid 1px;\'" onmouseover="this.style.border = \'#000000 solid 1px;\'" style="border: #FFFFFF solid 1px; cursor: pointer; font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;" title="Huidige datum">VANDAAG</td>';
		HTML += '<td colspan="3" onclick="javascript: ' + this.key + '.selectNone();" onmouseout="this.style.border = \'#FFFFFF solid 1px;\'" onmouseover="this.style.border = \'#000000 solid 1px;\'" style="border: #FFFFFF solid 1px; cursor: pointer; font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;" title="Geen datum">GEEN</td>';
		HTML += '<td onclick="javascript: ' + this.key + '.close();" onmouseout="this.style.border = \'#FFFFFF solid 1px;\'" onmouseover="this.style.border = \'#000000 solid 1px;\'" style="border: #FFFFFF solid 1px; cursor: pointer; font-family: arial; font-size: 10px; font-weight: normal; padding: 3px; text-align: center;" title="Afsluiten">X</td>';
		HTML += '</tr>';

		HTML += '</table>';

		this.datepicker.innerHTML = HTML; // Vernieuw de inhoud.
	},

	'nextMonth' : function()
	{
		this.active_date.setMonth(this.active_date.getMonth() + 1);
		this.draw();
	},

	'prevMonth' : function()
	{
		this.active_date.setMonth(this.active_date.getMonth() - 1);
		this.draw();
	},

	'close' : function()
	{
		this.source_id = '';
		this.datepicker.parentNode.removeChild(this.datepicker);
	},

	'selectDate' : function(f_date)
	{
		this.source.value = f_date;
		this.close();
	},

	'selectNow' : function()
	{
		this.source.value = this.dateToString(this.current_date);
		this.close();
	},

	'selectNone' : function()
	{
		this.source.value = '';
		this.close();
	},

	'dateToInt' : function(f_string) // Create a date-string DD-MM-YYYY
	{
		var s = '';

		if(f_date.getDate() < 10)
		{
			s += '0';
		}

		s += f_date.getDate();
		s += '-';

		if(f_date.getMonth() < 9)
		{
			s += '0';
		}

		s += f_date.getMonth() + 1;
		s += '-';
		s += f_date.getFullYear();

		return s;
	},

	'dateToString' : function(f_date) // Create a date-string DD-MM-YYYY
	{
		var s = '';

		if(f_date.getDate() < 10)
		{
			s += '0';
		}

		s += f_date.getDate();
		s += '-';

		if(f_date.getMonth() < 9)
		{
			s += '0';
		}

		s += f_date.getMonth() + 1;
		s += '-';
		s += f_date.getFullYear();

		return s;
	},

	'monthToString' : function(f_month) // Translate month-number to month-name
	{
		var s = 'Maand ' + f_month;

		switch(f_month)
		{
			case 0:	s = 'Januari'; break;
			case 1:	s = 'Februari'; break;
			case 2:	s = 'Maart'; break;
			case 3:	s = 'April'; break;
			case 4:	s = 'Mei'; break;
			case 5:	s = 'Juni'; break;
			case 6:	s = 'Juli'; break;
			case 7:	s = 'Augustus'; break;
			case 8:	s = 'September'; break;
			case 9: s = 'Oktober'; break;
			case 10: s = 'November'; break;
			case 11: s = 'December'; break;
		}

		return s;
	},

	'daysInMonth' : function(f_year, f_month) // Find the number of days in given month
	{
		if((f_month == 0) || (f_month == 2) || (f_month == 4) || (f_month == 6) || (f_month == 7) || (f_month == 9) || (f_month == 11))
		{
			return 31;
		}
		else
		{
			if(f_month == 2)
			{
				if(((f_year % 4) == 0) && ((f_year % 400) != 0)) // Leapyear
				{
					return 29;
				}
				else
				{
					return 28;
				}
			}
			else
			{
				return 30;
			}
		}
	},

	'firstDayInMonth' : function(f_year, f_month) // Find out what weekday the 1th day of a month is
	{
		/*
			0 (sunday)
			1 (monday)
			2 (tuesday)
			  ..
			6 (saturday)
		*/

		var tmp = new Date(f_year, f_month, 1);
		return tmp.getDay(); // Return weekday
	}
}