/*
	<div id="calendar">
		<a href="javascript:closeDateSelector();" id="close">Close</a>
		<div class="header">	
			<a href="javascript:goToMonth('23/12/2008');" id="prevMth">&laquo;</a>
			<h1 id="headerMth">January 2008</h1>
			<a href="javascript:goToMonth('23/12/2008');" id="nextMth">&raquo;</a>
		</div>
		<ul id="day_listing">
			<li class="day">Sun</li>
			<li class="day">Mon</li>
			<li class="day">Tue</li>
			<li class="day">Wed</li>
			<li class="day">Thu</li>
			<li class="day">Fri</li>
			<li class="day">Sat</li>
			<li><a href="" class="active">1</a></li>
			<li><a href="">2</a></li>
			<li><a href="">3</a></li>
			<li><a href="">4</a></li>
			<li><a href="">5</a></li>
			<li><a href="">6</a></li>
			<li><a href="">7</a></li>
		</ul>
	</div>
*/
var dayName = new Array(7);
dayName[0] = "Sunday";
dayName[1] = "Monday";
dayName[2] = "Tuesday";
dayName[3] = "Wednesday";
dayName[4] = "Thursday";
dayName[5] = "Friday";
dayName[6] = "Saturday";

var mthName = new Array(12);
mthName[0] = 'January';
mthName[1] = 'February';
mthName[2] = 'March';
mthName[3] = 'April';
mthName[4] = 'May';
mthName[5] = 'June';
mthName[6] = 'July';
mthName[7] = 'August';
mthName[8] = 'September';
mthName[9] = 'October';
mthName[10] = 'November';
mthName[11] = 'December';
	
var date = new Date();
var format = 'dd/mm/yyyy';
var txt_Target;
var cal;

var body;
var iframe;
var div;

function openDateSelector(txt)
{
	var paramDate = format;
	paramDate = paramDate.replace('dd', date.getDate());
	paramDate = paramDate.replace('mm', date.getMonth() + 1);
	paramDate = paramDate.replace('yyyy', date.getFullYear());
	
	txt_Target = document.getElementById(txt);
	cal = document.getElementById('calendar');

	if (!cal)
	{createCalendar();}
	else
	{
		removeCalendar();
		createCalendar();
		cal = document.getElementById('calendar');
	}

	goToMonth(paramDate);
	
	posCalendar();
}

/* =====
Function	: goToMonth
Accepts		: A real date value(e.g. 1/8/2008 is really 1-Aug-2008)
Process		: Javascript treats months in a zero-based style meaning Jan = 0, Feb = 1;
				This function takes in a real date value and then reduces the month by 1.
===== */
function goToMonth(dateParam)
{	
	var arrVar;
	var arrVal;
	
	arrVar = format.split("/");
	arrVal = dateParam.split("/");
	for (i = 0; i <= arrVar.length; i++)
	{eval('var ' + arrVar[i] + ' = ' + arrVal[i] + ';');}
	
	mm--;

	document.getElementById('prevMth').href = 'javascript:goToMonth(\'' + getPreviousMonth(mm, yyyy) + '\');';
	document.getElementById('nextMth').href = 'javascript:goToMonth(\'' + getNextMonth(mm, yyyy) + '\');';
	document.getElementById('headerMth').innerHTML = mthName[mm] + ' ' + yyyy;
	document.getElementById('day_listing').innerHTML = buildCalendar(dd, mm, yyyy);
	
	posCalendar();
}

function setDate(dt)
{
	removeCalendar();
	txt_Target.value = dt;
	txt_Target.focus();
}

function closeDateSelector()
{removeCalendar();}

function buildCalendar(dd, mm, yyyy)
{
	var date_Start = new Date();
	date_Start.setFullYear(yyyy, mm, 1);

	var msec_Today;
	var msec_New;
	
	msec_Today = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
	
	var paramDate;
	var mthDays = getMonthDays(mm, yyyy);
	
	var disp_Day;
	var disp_Mth;
	
	var str =	'<li class="day">S</li>' + 
				'<li class="day">M</li>' + 
				'<li class="day">T</li>' + 
				'<li class="day">W</li>' + 
				'<li class="day">T</li>' + 
				'<li class="day">F</li>' + 
				'<li class="day">S</li>';
				
	for (i = 0; i < date_Start.getDay(); i++)
	{str += '<li>&nbsp;</li>';}
					
	for (i = 1; i <= mthDays; i++)
	{
		msec_New = Date.UTC(yyyy, mm, i);
		
		disp_Day = i;
		disp_Day < 10 ? disp_Day = '0' + i : disp_Day = i;
		
		disp_Mth = mm + 1;
		disp_Mth < 10 ? disp_Mth = '0' + disp_Mth : disp_Mth = disp_Mth;
		
		paramDate = format;
		paramDate = paramDate.replace('dd', disp_Day);
		paramDate = paramDate.replace('mm', disp_Mth);
		paramDate = paramDate.replace('yyyy', yyyy);

		if (msec_New > msec_Today)
		{str += '<li><a href="javascript:setDate(\'' + paramDate + '\');">' + i + '</a></li>';}
		else
		{str += '<li><span>' + i + '</span></li>';}
	}
	
	return str;
}

function getNextMonth(mm, yyyy)
{
	var nextMth;
	var displayMth;
	var ret_str;
	
	nextMth = mm + 1;
	ret_str = format;
	
	if (nextMth > 11)
	{	
		displayMth = '01';
		ret_str = ret_str.replace("dd", '01');
		ret_str = ret_str.replace("mm", displayMth);
		ret_str = ret_str.replace("yyyy", yyyy + 1);
	}
	else
	{
		displayMth = nextMth + 1;
		displayMth < 10 ? displayMth = '0' + displayMth : displayMth = displayMth;
		
		ret_str = ret_str.replace("dd", '01');
		ret_str = ret_str.replace("mm", displayMth);
		ret_str = ret_str.replace("yyyy", yyyy);
	}
	
	return ret_str;
}

function getPreviousMonth(mm, yyyy)
{
	var prevMth;
	var ret_str;
	
	prevMth = mm - 1;
	ret_str = format;
	
	if (prevMth < 0)
	{	
		displayMth = '12';
		ret_str = ret_str.replace("dd", '01');
		ret_str = ret_str.replace("mm", displayMth);
		ret_str = ret_str.replace("yyyy", yyyy - 1);
	}
	else
	{
		displayMth = prevMth + 1;
		displayMth < 10 ? displayMth = '0' + displayMth : displayMth = displayMth;
		
		ret_str = ret_str.replace("dd", '01');
		ret_str = ret_str.replace("mm", displayMth);
		ret_str = ret_str.replace("yyyy", yyyy);
	}
	
	return ret_str;
}

function getMonthDays(mm, yyyy)
{
	var date_Temp = new Date();
	date_Temp.setFullYear(yyyy, mm + 1, 1);
	date_Temp.setDate(date_Temp.getDate() - 1);
	return date_Temp.getDate();
}

function createCalendar() 
{
	body = document.getElementsByTagName('body')[0];
	
	iframe = document.createElement('iframe');
	iframe.setAttribute('id', 'cal_frame');
	
	div = document.createElement('div');
	div.setAttribute('id', 'calendar');
	div.innerHTML = '<a href="javascript:closeDateSelector();" id="close">Close</a>' + 
					'<div class="header">' + 
					'	<a href="" id="prevMth" title="Previous Month">&laquo;</a>' + 
					'	<h1 id="headerMth"></h1>' + 
					'	<a href="" id="nextMth" title="Next Month">&raquo;</a>' + 
					'</div>' + 
					'<ul id="day_listing">' +
					'</ul>';
	
	body.appendChild(iframe);
	body.appendChild(div);
}

function posCalendar()
{
	var xPos;
	var yPos;
	
	div.offsetWidth	 <= body.offsetWidth  ? xPos = (body.offsetWidth	- div.offsetWidth)	/ 2	: xPos = 0;
	div.offsetHeight <= body.offsetHeight ? yPos = (body.offsetHeight	- div.offsetHeight) / 2 : yPos = 0;
	
	div.style.position = 'absolute';
	div.style.left	= xPos + 'px';
	div.style.top	= yPos + 'px';
	
	iframe.style.position	= 'absolute';
	iframe.style.width		= div.offsetWidth + 'px';
	iframe.style.height		= div.offsetHeight + 'px';
	iframe.style.left		= xPos + 'px';
	iframe.style.top		= yPos + 'px';
}

function removeCalendar() 
{
	body.removeChild(div);
	body.removeChild(iframe);
}