// NB: months are zero-based in JavaScript
var monthNames = new Array();
monthNames[0] = "January";
monthNames[1] = "February";
monthNames[2] = "March";
monthNames[3] = "April";
monthNames[4] = "May";
monthNames[5] = "June";
monthNames[6] = "July";
monthNames[7] = "August";
monthNames[8] = "September";
monthNames[9] = "October";
monthNames[10] = "November";
monthNames[11] = "December";

function getCalendar() {
	return document.getElementById("calendarPopup");
}

function showCal(whichItem, dateInputControl){
	document.getElementById("timePopup").style.display = "none";
	// function to display and position the calendar popup over the link
	var element = getCalendar();
	element.style.top = whichItem.offsetTop+"px";
	element.style.left = whichItem.offsetLeft+"px";
	element.inputControl = dateInputControl;
	if(!element.currentDate) {
		setCalendarCurrentMonth();
	}
	// show the calendar
	element.style.display = "block";
	// hide select boxes that get in the way of calendar popup
	hideSelectBoxes();
}

function hideCal(){
	// function to hide the calendar popup
	getCalendar().style.display = "none";
	setCalendarCurrentMonth();
	showSelectBoxes();
}

function setCalendarCurrentMonth() {
	var now = new Date();
	setCalendarMonth(now.getMonth(), now.getFullYear());
}

function setCalendarMonth(month, year) {
	getCalendar().currentDate = new Date(year, month, 1);
	renderCalendar();
}

function moveCalendar(moveDirection) {
	var monthCount = 0;
	moveDirection.toString().toLowerCase() == "forward" ? monthCount = 1 : monthCount = -1;
	
	var element = getCalendar();
	element.currentDate.setMonth(element.currentDate.getMonth() + monthCount)
	renderCalendar();
}

function useDate(day, month, year) {
	var element = document.getElementById("calendarPopup");
	var dayStr = "0" + day;
	var monthStr = "0" + month;
	dayStr = dayStr.substring(dayStr.length-2);
	monthStr = monthStr.substring(monthStr.length-2);
	element.inputControl.value = dayStr + "/" + monthStr + "/" + year;
	hideCal();
}

function renderCalendar() {
	var currentDate = getCalendar().currentDate;
	// clone the date so that we don't update the selected date later in this proc
	currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
	
	document.getElementById("monthOne").innerHTML = 
		renderCalendarMonthHeader(currentDate.getMonth(), currentDate.getFullYear()) +
		renderCalendarMonthBody(currentDate.getMonth(), currentDate.getFullYear()) +
		renderCalendarMonthFooter(currentDate.getMonth(), currentDate.getFullYear());
	
	
	currentDate = new Date(currentDate.setMonth(currentDate.getMonth() + 1));
	
	document.getElementById("monthTwo").innerHTML = 
		renderCalendarMonthHeader(currentDate.getMonth(), currentDate.getFullYear()) +
		renderCalendarMonthBody(currentDate.getMonth(), currentDate.getFullYear()) +
		renderCalendarMonthFooter(currentDate.getMonth(), currentDate.getFullYear());
}

function renderCalendarMonthHeader(month, year) {
	var thisMonthStart = new Date(year, month, 1);
	
	return "<h3>" + getMonthName(month) + " " + year + "</h3>" +
		"<table cellspacing=\"0\" class=\"cal\">" +
		"<tr>" + 
		"<th>S</th>" +
		"<th>M</th>" +
		"<th>T</th>" +
		"<th>W</th>" +
		"<th>T</th>" +
		"<th>F</th>" +
		"<th>S</th>" +
		"</tr>";
}

function renderCalendarMonthBody(month, year) {
	var today = new Date();
	var monthStart = new Date(year, month, 1);
	var dayOfWeek = monthStart.getDay();

	var ret = "<tr>";
	var firstWeek = true;
	var dayOfMonth = 1;
	for(var i = 0; i < 7; i++) {
		if(firstWeek && i < dayOfWeek) {
			ret += "<td>&nbsp;</td>";
		} else if(dayOfMonth <= getDaysInMonth(month, year)) {
			firstWeek = false;
			ret += "<td><a href=\"#\" onclick=\"useDate(" + dayOfMonth + ", " + (month + 1) + ", " + year + "); return false;\"";
			if(year == today.getFullYear() && month == today.getMonth() && dayOfMonth == today.getDate()) {
				ret += " class=\"today\"";
			}
			ret += ">" + dayOfMonth + "</a></td>";
			dayOfMonth++;
			if(i == 6) {
				i = -1;
				ret += "</tr><tr>";
			}
		} else {
			ret += "<td>&nbsp;</td>";
		}
	}	
	ret += "</tr>";
	return ret;
}

function getDaysInMonth(month, year) {
	return 32 - new Date(year, month, 32).getDate();
}

function renderCalendarMonthFooter() {
	return "</tr></table>";
}

function getMonthName(month) {
	return monthNames[month];
}

function showTime(whichItem, timeInputControl){
	document.getElementById("calendarPopup").style.display = "none";
	
	var element = document.getElementById("timePopup");
	// TODO: how to exclude the scrollbar from this?
	//element.onblur = function() { this.style.display = "none"; }
	element.style.top = whichItem.offsetTop+"px";
	element.style.left = whichItem.offsetLeft+"px";
	element.inputControl = timeInputControl
	element.style.display = "block";
	element.focus();
}

function hideTime(){
	document.getElementById("timePopup").style.display = "none";
}

function useTime(time) {
	var element = document.getElementById("timePopup");
	if(element && element.inputControl) {
		element.inputControl.value = time;
	}
	hideTime();
}

function showSelectBoxes(){
	var allSelects = dId("cContainer").getElementsByTagName("SELECT");
	for(var i=0; i<allSelects.length; i++){
		allSelects[i].style.visibility = "visible";
	}
}
function hideSelectBoxes(){
	var allSelects = dId("cContainer").getElementsByTagName("SELECT");
	for(var i=0; i<allSelects.length; i++){
		allSelects[i].style.visibility = "hidden";
	}
}