// **********************************************************************************
// Program by Deiva(Liang Dai Fa)
// a very simple date and time picker
// in the page, it should include the dtp.js file
// like <script src="DateTimePicker/dtp.js" /></script>
// then using onClick="dtpDate(this, 'name')" to popup the selector
// the date's is dtpDate(this, 'name'), and the time's is dtpTime(this, 'name')
// it just passes test from IE explorer....
// QQ:42798496
// mail: deiva@tom.com
// CE(http://www.ce.net.cn) Tech Department
// **********************************************************************************

var dtpFolder = 'DateTimePicker/';
var dtpToday = new Date();
var dtpDayName = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var dtpMonthDay = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var dtpMonthList = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var dtpHourList = new Array('00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23')
var dtpMinuteList = new Array('00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59')
var dtpYear,dtpMonth,dtpDay,dtpHour,dtpMinute,dtpTextbox;
var dtpStartYear,dtpStartHour,dtpStartMinute;


function dtpInit(){
	var _html = '';
	_html += '<input type="hidden" id="dtpHidden" name="dtpHidden">';
	_html += '<iframe id="DateTimePicker" style="display:none; position:absolute;" frameborder="0" scrolling="no"></iframe>';
	_html += '<iframe id="dtpDropMenu" style="display:none; position:absolute;" frameborder="1" scrolling="no"></iframe>';
	document.write(_html);
}
function dtpGetElement(eId){
	return document.getElementById(eId);
}
function dtpGetFrame(eId){
	return document.frames(eId);
}
function dtpHiddenDrop(){
	dtpGetElement('dtpDropMenu').style.display = 'none';
}
function dtpShowDrop(){
	dtpGetElement('dtpDropMenu').style.display = '';
}
function dtpClose(){
	dtpHiddenDrop();
	dtpGetElement('DateTimePicker').style.display = 'none';
}
function dtpGetIE(e){
	var top = e.offsetTop;
	var left = e.offsetLeft;
	while(e = e.offsetParent){
		top += e.offsetTop;
		left += e.offsetLeft;
	}
	return {x:top,y:left}
}
function dtpSetDate(date){
	var _html = dtpYear +'-'+ (dtpMonth + 1) +'-'+ date;
	dtpGetElement(dtpTextbox).innerText = _html;
	dtpClose();
}
function dtpSetMonth(index){
	dtpMonth = index;
	dtpSetSpanText('dtpTextMonth', dtpMonthList[index]);
	dtpCalendar();
}
function dtpSetYear(Year){
	dtpYear = Year;
	dtpSetSpanText('dtpTextYear', Year);
	dtpCalendar();
}
function dtpSetHour(hour){
	dtpHour = hour;
	dtpSetSpanText('dtpTextHour', dtpHourList[dtpHour]);
	dtpSetTime();
}
function dtpSetMinute(minute){
	dtpMinute = minute;
	dtpSetSpanText('dtpTextMinute', dtpMinuteList[dtpMinute]);
	dtpSetTime();
}
function dtpSetTime(){
	var _html = dtpHourList[dtpHour] +':'+ dtpMinuteList[dtpMinute];
	dtpGetElement(dtpTextbox).innerText = _html;
	dtpHiddenDrop();
}
function dtpSetSpanText(elem, text){
	var dtp = dtpGetFrame('DateTimePicker');
	dtp.document.getElementById(elem).innerHTML = text;
	dtpHiddenDrop();
}
function dtpTime(e, elem){
	dtpTextbox = elem;
	var ifrDtp = dtpGetFrame('DateTimePicker');
	var elemDtp = dtpGetElement('DateTimePicker');
	ifrDtp.document.open('text/html', 'replace');
	ifrDtp.document.write('<html><head><link rel="stylesheet" type="text/css" href="'+ dtpFolder +'default.css">'+
						  '<script language="javascript" src="'+ dtpFolder +'selector.js"></script></head><body>'+						  
						  '<div style="padding:2px; height:20px; background-color:#0000aa;" id="dtpCaption"><div style="float:left; ">'+
						  '<span class="dtpCaption" onMouseOver="dtpSpanOver(this, \'dtpImgHour\',\'drop2.gif\')" onMouseOut="dtpSpanOut(this, \'dtpImgHour\',\'drop1.gif\')" onClick="dtpHour(this)">&nbsp;<span id="dtpTextHour">Hour</span><img id="dtpImgHour" src="'+ dtpFolder +'drop1.gif" border="0" align="absmiddle"></span>&nbsp;'+
						  '<span class="dtpCaption" onMouseOver="dtpSpanOver(this, \'dtpImgMinute\',\'drop2.gif\')" onMouseOut="dtpSpanOut(this, \'dtpImgMinute\',\'drop1.gif\')" onClick="dtpMinute(this)">&nbsp;<span id="dtpTextMinute">Minute</span><img id="dtpImgMinute" src="'+ dtpFolder +'drop1.gif" border="0" align="absmiddle"></span>&nbsp;'+
						  '</div><div style="float:right; padding:3px; cursor:hand;" onClick="dtpClose()"><img src="'+ dtpFolder +'close.gif" align="absmiddle"></div></div>'+
						  '</body></html>');
	ifrDtp.document.close();
	ifrDtp.document.body.style.border = '1px solid #a0a0a0';
	
	var xy = dtpGetIE(e);
	elemDtp.style.display = '';
	elemDtp.style.width = 100;
	elemDtp.style.left = xy.y;
	elemDtp.style.top = xy.x + 20;
	
	var time = dtpGetTextboxTime();
	dtpHour = time.h;
	dtpMinute = time.m;
	dtpSetSpanText('dtpTextHour', dtpHourList[dtpHour]);
	dtpSetSpanText('dtpTextMinute', dtpMinuteList[dtpMinute]);
	dtpStartHour = dtpHour;
	dtpStartMinute = dtpMinute;
	dtpSetDateHeight(0);
}
function dtpDate(e, elem){
	dtpTextbox = elem;
	var ifrDtp = dtpGetFrame('DateTimePicker');
	var elemDtp = dtpGetElement('DateTimePicker');
	ifrDtp.document.open('text/html', 'replace');
	ifrDtp.document.write('<html><head><link rel="stylesheet" type="text/css" href="'+ dtpFolder +'default.css">'+
						  '<script language="javascript" src="'+ dtpFolder +'selector.js"></script></head><body>'+
						  '<div style="padding:2px; height:20px; background-color:#0000aa;" id="dtpCaption"><div style="float:left; ">'+
						  '<span class="dtpCaption" onMouseOver="dtpSpanOver(this, \'dtpImgToPre\', \'left2.gif\')" onMouseOut="dtpSpanOut(this, \'dtpImgToPre\', \'left1.gif\')" onClick="dtpSetPreMonth()">&nbsp;<img id="dtpImgToPre" src="'+ dtpFolder +'left1.gif" border="0" align="absmiddle">&nbsp;</span>&nbsp;'+
						  '<span class="dtpCaption" onMouseOver="dtpSpanOver(this, \'dtpImgToNext\', \'right2.gif\')" onMouseOut="dtpSpanOut(this, \'dtpImgToNext\', \'right1.gif\')" onClick="dtpSetNextMonth()">&nbsp;<img id="dtpImgToNext" src="'+ dtpFolder +'right1.gif" border="0" align="absmiddle">&nbsp;</span>&nbsp;'+
						  '<span class="dtpCaption" onMouseOver="dtpSpanOver(this, \'dtpImgMonth\',\'drop2.gif\')" onMouseOut="dtpSpanOut(this, \'dtpImgMonth\',\'drop1.gif\')" onClick="dtpMonth(this)">&nbsp;<span id="dtpTextMonth">Month</span><img id="dtpImgMonth" src="'+ dtpFolder +'drop1.gif" border="0" align="absmiddle"></span>&nbsp;'+
						  '<span class="dtpCaption" onMouseOver="dtpSpanOver(this, \'dtpImgYear\',\'drop2.gif\')" onMouseOut="dtpSpanOut(this, \'dtpImgYear\',\'drop1.gif\')" onClick="dtpYear(this)">&nbsp;<span id="dtpTextYear">Year</span><img id="dtpImgYear" src="'+ dtpFolder +'drop1.gif" border="0" align="absmiddle"></span>&nbsp;'+
						  '</div><div style="float:right; padding:3px; cursor:hand;" onClick="dtpClose()"><img src="'+ dtpFolder +'close.gif" align="absmiddle"></div></div><div id="dtpCalendar"></div>'+
						  '</body></html>');
	ifrDtp.document.close();
	ifrDtp.document.body.style.border = '1px solid #a0a0a0';
	
	var xy = dtpGetIE(e);
	elemDtp.style.display = '';
	elemDtp.style.width = 205;
	elemDtp.style.left = xy.y;
	elemDtp.style.top = xy.x + 20;
	
	var date = dtpGetTextboxDate();
	dtpYear = date.y;
	dtpMonth = date.m;
	dtpDay = date.d;
	dtpSetSpanText('dtpTextMonth', dtpMonthList[dtpMonth]);
	dtpSetSpanText('dtpTextYear', dtpYear);
	dtpStartYear = dtpYear;
	dtpCalendar();
}
function dtpGetTextboxDate(){
	var text = dtpGetElement(dtpTextbox).value;
	var reg = /^\d{4}-\d{1,2}-\d{1,2}$/g;
	var yy,mm,dd;
	if(reg.test(text)){
		var date = text.split('-');
		yy = date[0];
		mm = date[1]-1;
		dd = date[2];
	}
	else{
		yy = dtpToday.getYear();
		mm = dtpToday.getMonth();
		dd = dtpToday.getDate();
	}
	return {y:yy, m:mm, d:dd}
}
function dtpGetTextboxTime(){
	var text = dtpGetElement(dtpTextbox).value;
	var reg = /^\d{2}:\d{2}$/g;
	var hh,mm;
	if(reg.test(text)){
		var time = text.split(':');
		hh = time[0];
		mm = time[1];
	}
	else{
		hh = dtpToday.getHours();
		mm = dtpToday.getMinutes();
	}
	hh = parseInt(hh);
	mm = parseInt(mm);
	return {h:hh, m:mm}
}
function dtpSetDateHeight(line){
	var height = 142;
	if(line == 0){
		height = 27;
	}else if(line == 6){
		height = 162;
	}
	dtpGetElement('DateTimePicker').style.height = height;
}
function dtpCalendar(){
	var _html = '<table border="0" style="font-size:12px;"><tr>';
	for(i=0; i<dtpDayName.length; i++){
		_html += '<td align="center" width="24"><b>'+ dtpDayName[i] +'</b></td>';
	}
	_html += '</tr><tr>';

	var objDate = new Date(dtpYear, dtpMonth, 1);
	var StartDay = objDate.getDay();
	for(i=0; i<StartDay; i++){
		_html += '<td align="center"></td>';
	}
	dtpMonthDay[1] = (dtpYear % 4 == 0) ? 29 : 28;
	var Lines = 1;
	var SelectCss = '';
	var MonthDay = dtpMonthDay[dtpMonth];
	var date = dtpGetTextboxDate();
	for(i=1; i<=MonthDay; i++){
		var TdCss = 'cursor:hand;';
		var TrMod = (i+StartDay-1) % 7;
		if(date.y == dtpYear && date.m == dtpMonth && date.d == i){
			TdCss += 'border:1px solid #CCCCCC;  ';
		}
		if(dtpToday.getYear() == dtpYear && dtpToday.getMonth() == dtpMonth && dtpToday.getDate() == i){
			TdCss += 'color:red; font-weight:bold; ';
		}
		else if(TrMod == 0 || TrMod == 6){
			TdCss += 'color:#666666; ';
		}
		
		_html += '<td align="center" height="15"><a style="'+ TdCss +'" onClick="dtpSetDate('+ i +')">&nbsp;'+ i +' </a></td>';
		if(TrMod == 6){
			if(i != 31) Lines ++;
			_html += '</tr><tr>';
		}
	}
	
	_html += '</tr></table>';
	dtpSetDateHeight(Lines);
	dtpSetSpanText('dtpCalendar', _html);
}
dtpInit();