document.onmousemove = mouseMove;
document.onmousedown = checkPos;

mouseX = null;
mouseY = null;
cal = null;

function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		mouseX = ev.pageX;
		mouseY = ev.pageY;
	} else { 
		var canv = document.documentElement;
		mouseX = ev.clientX + canv.scrollLeft - canv.clientLeft;
		mouseY = ev.clientY + canv.scrollTop  - canv.clientTop;
	}
}

function datePick(year, month, date){
	document.getElementById('Date').value = year+"/"+(month+1)+"/"+date;
	cal.style.display = 'none';
	cal = null;
}

function dateCancel(){
	if(cal){
		cal.style.display = 'none';
		cal = null;
	}
}

function checkPos(){
	if(cal){
		if(
			!(mouseX > parseInt(cal.style.left) && mouseX < parseInt(cal.style.left) + 200 &&
		mouseY > parseInt(cal.style.top) && mouseY < parseInt(cal.style.top) + 190)){
				dateCancel();
		}
	}
}

function dateChange(year, month, date){
	if(cal == null){
		cal = document.createElement("div");
		cal.id = 'cal';
		cal.style.position = 'absolute';
		cal.style.top = (mouseY + 0) + 'px';
		cal.style.left = (mouseX - 200) + 'px';
		cal.style.width = '200px';
		cal.style.height = '164px';
		cal.style.border = '1px solid black';
		cal.style.background = '#d4d0c8 url(../images/calendar-bg.gif) repeat-x 0 30px';
		cal.style.padding = '0';
		cal.style.zIndex = '10';
		document.body.appendChild(cal);
	}
	
	if(month < 0){
		month = 11;
		year--;
	}
	
	if(month > 11){
		month = 0;
		year ++;
	}
	
	var now = new Date();
		
	var start = new Date(year, month, 1);
	start = start.getDay();
		
	if(month == 1){
		var max = 28;
		if(year % 4 == 0 || year % 400 == 0){
			var max = 29;
		} 
		if(year % 100 == 0) {
			var max = 28;
		}			
	} else if(month == 8 || month == 3 || month == 5 || month == 10) {
		var max = 30;
	} else {
		var max = 31;
	}
	
	var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
	
	var days = new Array(42);
	var j = 1;
	for(var i = start; i < start + max; i++){
		days[i] = j++;
	}
	var buffer = "<table cellspacing='0'><tr><td colspan='7'><table cellspacing='0' id='calHead'>";
	buffer += "<tr><td><a onClick=\"dateChange("+year+","+(month-1)+","+date+")\" class=\"leftArrow\">&lt; </a><div class=\"calMonth\">"+months[month]+"</div><a onClick=\"dateChange("+year+","+(month+1)+","+date+")\" class=\"rightArrow\"> &gt;</a></td><td><a onClick=\"dateChange("+(year-1)+","+month+","+date+")\" class=\"leftArrow yearLeftArrow\">&lt; </a><div class=\"floatLeft\">"+year+"</div><a onClick=\"dateChange("+(year+1)+","+month+","+date+")\" class=\"rightArrow\"> &gt;</a></td></tr>";
	buffer += "<tr><td></td></tr><table></td></tr><tr><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr><tr>";
	for(i = 0; i <= 42; i++){
		buffer += "<td>";
		if(days[i]){
			if(now.getFullYear() == year && now.getMonth() == month && now.getDate() == days[i]){
				buffer += "<a class='today' onClick=\"datePick("+year+","+month+","+days[i]+")\">"+days[i]+"</a>";
			} else {
				buffer += "<a onClick=\"datePick("+year+","+month+","+days[i]+")\">"+days[i]+"</a>";
			}
		}
		buffer += "</td>";
		if((i+1) % 7 == 0){
			buffer += "</tr><tr>";
		}
	}
	buffer += "</tr></table>";
	cal.innerHTML = buffer;
}