var fieldID;
var calendar;
var currentYear;
var currentMonth;
var currentDay;

function openCalendar( f )
{

	fieldID = f;
	var field = document.getElementById( fieldID );
	if( document.getElementById( 'calendar' ) )
		field.parentNode.removeChild( document.getElementById( 'calendar' ) );	
	// parse the field values to get the date or use the current date
	
	var timeStamp = Date.parse(field.value);
	var date = new Date();
	if( timeStamp > 0 )
		date.setTime( timeStamp ) ;
	currentMonth = date.getMonth();
	currentDay = date.getDate();
	if( date.getYear() < 1900 )
		currentYear = date.getYear() + 1900;
	else
		currentYear = date.getYear();
	calendar=document.createElement( "div" );
	calendar.setAttribute( 'id', 'calendar');
	
	// add container for year selector/display
	var yearBlock = document.createElement( "div" );
	yearBlock.setAttribute( 'className', 'yearBlock' );
	yearBlock.setAttribute( 'class', 'yearBlock' );
	var decYear = document.createElement( "div" );
	decYear.onclick = decrementYear;
	decYear.setAttribute( 'className', 'decrement' );
	decYear.setAttribute( 'class', 'decrement' );
	decYear.innerHTML = '&lt;';
	yearBlock.appendChild(decYear);
	var incYear = document.createElement( "div" );
	incYear.onclick = incrementYear;
	incYear.setAttribute( 'className', 'increment' );
	incYear.setAttribute( 'class', 'increment' );
	incYear.innerHTML = '&gt;';
	yearBlock.appendChild(incYear);
	var year = document.createElement( "div" );
	year.setAttribute( 'id', 'year' );
	year.innerHTML = currentYear;
	yearBlock.appendChild(year);
	
	calendar.appendChild(yearBlock);
	
	// add container for month selector/display
	var monthBlock = document.createElement( "div" );
	monthBlock.setAttribute( 'className', 'monthBlock' );
	var decMonth = document.createElement( "div" );
	decMonth.onclick = decrementMonth;
	decMonth.setAttribute( 'className', 'decrement' );
	decMonth.setAttribute( 'class', 'decrement' );
	decMonth.innerHTML = '&lt;';
	monthBlock.appendChild(decMonth);
	var incMonth = document.createElement( "div" );
	incMonth.onclick = incrementMonth;
	incMonth.setAttribute( 'className', 'increment' );
	incMonth.setAttribute( 'class', 'increment' );
	incMonth.innerHTML = '&gt;';
	monthBlock.appendChild(incMonth)	;
	var month = document.createElement( "div" );
	month.setAttribute( 'id', 'month' );
	month.innerHTML = currentMonth;
	monthBlock.appendChild(month);
	calendar.appendChild(monthBlock);
	
	//add container for day selector/display
	var dayBlock = document.createElement( "div" );
	dayBlock.setAttribute( 'class', 'dayBlock' );
	var decDay = document.createElement( "div" );
	decDay.onclick = decrementDay;
	decDay.setAttribute( 'className', 'decrement' );
	decDay.setAttribute( 'class', 'decrement' );
	decDay.innerHTML = '&lt;';
	dayBlock.appendChild(decDay);
	var incDay = document.createElement( "div" );
	incDay.onclick = incrementDay;
	incDay.setAttribute( 'className', 'increment' );
	incDay.setAttribute( 'class', 'increment' );
	incDay.innerHTML = '&gt;';
	dayBlock.appendChild(incDay)	;
	var day = document.createElement( "div" );
	day.setAttribute( 'id', 'day' );
	day.innerHTML = currentDay;
	dayBlock.appendChild(day);
	calendar.appendChild(dayBlock);
	
	// add container to show days in the month
	var monthView = document.createElement( "div" );
	monthView.setAttribute( 'id', 'monthView' );
	var monthViewHeader = document.createElement( "div" );
	monthViewHeader.setAttribute( 'id', 'monthViewHeader' );
	var daysOfWeek = new Array('S','M','T','W','T','F','S');
	for( var dayOfWeek in daysOfWeek)
	{
		var dayHeader = document.createElement( "div" );
		dayHeader.innerHTML = daysOfWeek[dayOfWeek];
		monthViewHeader.appendChild(dayHeader);
	}
	monthView.appendChild(monthViewHeader);
	var monthViewDays = document.createElement( "div" );
	monthViewDays.setAttribute( 'id', 'monthViewDays' )	;
	monthView.appendChild(monthViewDays);
	calendar.appendChild(monthView);
	
	// add OK button
	var OKButton = document.createElement( "div" );
	OKButton.onclick = closeCalendar;
	OKButton.setAttribute( 'className', 'button' );
	OKButton.setAttribute( 'class', 'button' );
	OKButton.innerHTML = 'OK';
	calendar.appendChild(OKButton)	;
	
	// add calendar element to the page
	field.parentNode.insertBefore(calendar, field);
	updateCalendar();
}

function closeCalendar(e)
{
	var field = document.getElementById( fieldID );
	field.value = ( currentMonth + 1 ) + '/' + currentDay + '/' + currentYear;
	field.parentNode.removeChild( calendar );
}

function decrementYear()
{
	currentYear--;
	updateCalendar();
}

function incrementYear()
{
	currentYear++;
	updateCalendar();
}

function decrementMonth()
{
	currentMonth--;
	updateCalendar();
}

function incrementMonth()
{
	currentMonth++;
	updateCalendar();
}

function decrementDay()
{
	currentDay--;
	updateCalendar();
}

function incrementDay()
{
	currentDay++;
	updateCalendar();
}

function setDay( e )
{
	var target;
	if (!e) var e = window.event;
	if (e.target) target = e.target;
	else if (e.srcElement) target = e.srcElement;
	if (target.nodeType == 3)
		target = target.parentNode;
	currentDay = target.firstChild.nodeValue;
	updateCalendar();
}

function updateCalendar()
{
	var date = new Date();
	date.setYear(currentYear);
	date.setMonth(currentMonth);
	date.setDate(currentDay);
	currentYear = date.getFullYear();
	currentMonth = date.getMonth();
	currentDay = date.getDate();
	document.getElementById( 'year' ).innerHTML = currentYear;
	var monthString;
	switch(currentMonth)
	{
		case 0:
			monthString = 'January';
			break;    
		case 1:
			monthString = 'Febuary';
			break;
		case 2:
			monthString = 'March';
			break;
		case 3:
			monthString = 'April';
			break;
		case 4:
			monthString = 'May';
			break;
		case 5:
			monthString = 'June';
			break;
		case 6:
			monthString = 'July';
			break;
		case 7:
			monthString = 'August';
			break;
		case 8:
			monthString = 'September';
			break;
		case 9:
			monthString = 'October';
			break;
		case 10:
			monthString = 'November';
			break;
		case 11:
			monthString = 'December';
			break;
		default:
	}
	document.getElementById( 'month' ).innerHTML = monthString;
	document.getElementById( 'day' ).innerHTML = currentDay;
	
	var monthViewDays = document.getElementById( 'monthViewDays' );
	// clear monthViewDays
	monthViewDays.innerHTML = '';
	// find the day of the week of the first day of the month
	date.setDate(1);
	var firstDay = date.getDay();
	//add spacers to align first day with headers
	while( firstDay > 0 )
	{
		var spacer = document.createElement( "div" );
		spacer.setAttribute( 'className', 'dayOfMonthSpacer');
		spacer.setAttribute( 'class', 'dayOfMonthSpacer');
		spacer.innerHTML = '&nbsp;';
		monthViewDays.appendChild(spacer);
		firstDay--;
	}
	// find the number of days in the month
	var daysInMonth = 28;
	date.setDate(28);
	while( date.getMonth() == currentMonth )
	{
		date.setDate(++daysInMonth);
	}
	daysInMonth--;
	
	for( var i = 1; i <= daysInMonth; i++)
	{
		var dayOfMonth = document.createElement( "div" );
		if( i == currentDay )
		{
			dayOfMonth.setAttribute( 'className', 'dayOfMonth selectedDate');
			dayOfMonth.setAttribute( 'class', 'dayOfMonth selectedDate');
		}
		else
		{
			dayOfMonth.setAttribute( 'className', 'dayOfMonth');
			dayOfMonth.setAttribute( 'class', 'dayOfMonth');
		}
		dayOfMonth.innerHTML = i;
		dayOfMonth.onclick = setDay;
		monthViewDays.appendChild(dayOfMonth);
	}
	
}