var year;
var month;
var day;
var date_element;
var calendar_element;
var max_years = 40;
var grid = new Array(6);
for(i=0;i<grid.length;i++) {
	grid[i] = new Array(7);
}
var months = ['January', 'February', 'March', 'April', 'May', 'June', 
              'July', 'August', 'September', 'October', 'November', 'December'];

function display() {
	var day = new Date();
	day.setFullYear(year, month, 1);
	var weekday = day.getDay();
	var max_days = daysInMonth();
	var i, j;
	j=0;
	for(i=0;i<weekday;i++) {
		grid[j][i] = 0;
	}
	for(i=0;i<max_days;i++) {
		grid[j][weekday] = i+1;
		weekday++;
		if(weekday == 7) {
			weekday = 0;
			j++;
		}
	}
	for(i=weekday;i<7;i++) {
		grid[j][i] = 0;
	}
	displayGrid(grid, j);
}

function displayGrid(grid, rows) {
	displayString = "<table class=\"calendar_table\">";

	displayString += "<tr><td onClick=\"javascript:prevYear()\">&lt;&lt;</td><td colspan=5>";
	displayString += "<select class=\"calendar_year\" name=\"calendar_year\" onchange=\"changeYear()\">";
	for(i=max_years; i>0;i--) {
		displayString += ("<option value=\"" + (year - i) + "\">" + (year - i)); 
	}
	for(i=0; i<=max_years; i++) {
		if(i == 0) {
			displayString += ("<option value=\"" + (year + i) + "\" selected>" + (year + i));
		} else {
			displayString += ("<option value=\"" + (year + i) + "\">" + (year + i));
		}
	}
	displayString += "</select>";
	displayString += "</td><td onClick=\"javascript:nextYear()\">&gt;&gt;</td></tr>";

	displayString += "<tr><td onClick=\"javascript:prevMonth()\">&lt;</td><td colspan=5>";
	displayString += "<select class=\"calendar_month\" name=\"calendar_month\" onchange=\"changeMonth()\">";
	for(i=0; i<12; i++) {
		if(i == month) {
			displayString += ("<option value=\"" + months[i] + "\" selected>" + months[i]);
		} else {
			displayString += ("<option value=\"" + months[i] + "\">" + months[i]);
		}
	}
	displayString += "</select>";
	displayString += "</td><td onClick=\"javascript:nextMonth()\">&gt;</td></tr>";

	displayString += "<tr><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>";
	for(i=0;i<=rows;i++) {
		displayString += "<tr>";
		for(j=0;j<7;j++) {
			var class_name; 
			if(day == grid[i][j]) {
				class_name = "selected_day";
			} else {
				class_name = "unselected_day";
			}
			displayString += ("<td onclick=\"javascript:setDay(" + grid[i][j] + ")\" class=\"" + class_name + "\" >" + (grid[i][j]==0?"":grid[i][j]) + "</td>");
		}
		displayString += "</tr>";
	}
	displayString += "</table>";
	datepicker = document.getElementById(calendar_element);
	datepicker.innerHTML = displayString;
	datefield = document.getElementById(date_element);
	datefield.value = year + "/" + (month + 1) + "/" + day;
	datepicker.style.display="block";
}

function nextMonth() {
	month++;
	if(month > 11) {
		month -= 12;
		year++;
	}
	display();
}

function prevMonth() {
	month--;
	if(month < 0) {
		month += 12;
		year--;
	}
	display();
}

function nextYear() {
	year++;
	display();
}

function prevYear() {
	year--;
	display();
}

function changeYear() {
	var datepicker_cal_year = document.getElementById('calendar_year');
	if(datepicker_cal_year.selectedIndex != max_years) {
		year = year + datepicker_cal_year.selectedIndex - max_years;
		display();
	}
}

function changeMonth() {
	var datepicker_cal_month = document.getElementById('calendar_month');
	if(datepicker_cal_month.selectedIndex != month) {
		month = datepicker_cal_month.selectedIndex;
		display();
	}
}

function setDay(new_day) {
	day = new_day;
	display();
}

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

function init(date_elem, cal_elem) {
	var now = new Date();
	date_element = date_elem;
	calendar_element = cal_elem;
	year = now.getFullYear();
	month = now.getMonth();
	day = now.getDate();
	display();
}