// JavaScript Document
//定义一些变量
var gdCtrl = new Object();
var goSelectTag = new Array();
var gcGray   = "#808080";
var gcToggle = "#EDDAED";
var gcBG = "#DDDDFF";
var previousObject = null;
var gdCurDate = new Date();
var giYear = gdCurDate.getFullYear();
var giMonth = gdCurDate.getMonth()+1;
var giDay = gdCurDate.getDate();
var gMonths = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
//显示一个隐藏的层，放置日期的选择框。
with (document) {
write("<Div id='VicPopCal' style='POSITION:absolute;VISIBILITY:hidden;border:0px ridge;z-index:90000;'>");
write("<table border='0' bgcolor='#cccccc'>");
write("<TR>");
write("<td valign='middle' align='center'><input type='button' name='PrevMonth' value='<' style='height:20;width:20;FONT:bold' onClick='fPrevMonth()'>");
write(" <Select name='tbSelYear' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for(i=1950;i<2115;i++)
	write("<OPTION value='"+i+"'>"+i+" 年</OPTION>");
write("</Select>");
write(" <select name='tbSelMonth' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for (i=0; i<12; i++)
	write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>");
write("</Select>");
write(" <input type='button' name='PrevMonth' value='>' style='height:20;width:20;FONT:bold' onclick='fNextMonth()'>");
write("</td>");
write("</TR><TR>");
write("<td align='center'>");
write("<DIV style='background-color:teal'><table width='100%' border='0'>");
//fDrawCal()函数完成日期的显示。fDrawCal()函数有4个参数，第1个表示显示的年份，第2个参数表示显示的月份，第3个参数表示
//显示的格子的高度，最后一个参数应该是字体宽度，但是似乎不起作用。
fDrawCal(giYear, giMonth, 20, '12');
function fDrawCal(iYear, iMonth, iCellHeight, sDateTextSize) {
//建立WeekDay数组。
  var WeekDay = new Array("日","一","二","三","四","五","六");
//建立styleTD，就是每一个TD的style。
  var styleTD = " bgcolor='"+gcBG+"' bordercolor='"+gcBG+"' valign='middle' align='center' height='"+iCellHeight+"' style='font:bold arial "+sDateTextSize+";";
  with (document) {
	write("<tr>");
//这个for完成星期的显示。
	for(i=0; i<7; i++){
		write("<td "+styleTD+"color:maroon' >"+ WeekDay[i] + "</td>");
	}
	write("</tr>");
//在这里，每个格子（6行7列）的显示内容暂时都是空的，要由后面的fUpdateCal()函数完成。
  	for (w = 1; w < 7; w++) {
		write("<tr>");
		for (d = 0; d < 7; d++) {
			write("<td id=calCell "+styleTD+"cursor:hand;' onMouseOver='this.bgColor=gcToggle' onMouseOut='this.bgColor=gcBG' onclick='fSetSelected(this)'>");
			write("<font id=cellText Victor='Hcy_Flag'> </font>");			
			write("</td>")
		}
		write("</tr>");
	}
  }
}
write("</table></DIV>");
write("</td>");
write("</TR><TR><TD align='center'>");
write("<TABLE width='100%'><TR><TD align='center'>");
//write("<B style='cursor:hand' onclick='fSetDate(0,0,0)' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=0'>清空</B>");
write("</td><td algin='center'>");
write("<B style='cursor:hand' onclick='fSetDate(giYear,giMonth,giDay)' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=0'>今天: "+giYear+"-"+giMonth+"-"+giDay+"</B>");
write("<B style='margin-left:25px;cursor:hand' onclick='HiddenDiv()' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=0'>关闭</B>");
write("</td></tr></table>");
write("</TD></TR>");
write("</TABLE></Div>");
}
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 第1部分 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑


//第2部分的内容是4个辅助日期显示的函数。
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 第2部分 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
//fPopCalendar()函数完成日期div的显示和隐藏操作。fPopCalendar()函数有3个参数，第1个参数和第2个参数表示两个控件对象。
function fPopCalendar(popCtrl, dateCtrl){
//因为有后面的previousObject = popCtrl附值操作，所以这里可以理解成是再次点击文本框时修改调用HiddenDiv()函数取消显示。
  if (popCtrl == previousObject){
	  	if(VicPopCal.style.visibility == "visible"){
  		HiddenDiv();
  		return true;
  	}
  }
  Select = $tag($id('VicPopCal'),'select');
   for(var i=0;i<Select.length;i++){
	      Select[i].style.visibility = 'visible';
   }
  previousObject = popCtrl;
  gdCtrl = dateCtrl;
  fSetYearMon(giYear, giMonth);
//调用fGetXY()函数获取控件的坐标。 
  var point = fGetXY(popCtrl);
  with (VicPopCal.style) {
//给定显示层的绝对位置。
  	left = point.x;
	top  = point.y+popCtrl.offsetHeight;
	width = VicPopCal.offsetWidth;
	height = VicPopCal.offsetHeight;
	zIndex = max_zIndex();
	visibility = 'visible';
  }
}

//HiddenDiv()函数取消日期显示框div层的显示。
function HiddenDiv(){
  VicPopCal.style.visibility = "hidden";
  Select = $tag($id('VicPopCal'),'select');
   for(var i=0;i<Select.length;i++){
	     Select[i].style.visibility = 'hidden';
	}
}

//fUpdateCal()函数完成日期文字在页面div中的显示，fUpdateCal()有两个参数，第1个参数表示年份，第2个参数表示月份。
function fUpdateCal(iYear, iMonth) {
//fBuildCal()函数获取给定日期所有需要显示的日期内容。
  myMonth = fBuildCal(iYear, iMonth);
  var i = 0;
  for (w = 0; w < 6; w++)
	for (d = 0; d < 7; d++)
		with (cellText[(7*w)+d]) {
//Victor作为一个参数，用作判断同为负值的一些日期月份的变化。
			Victor = i++;
//这个if完成对日期的所有显示，同时完成所有的对日期颜色的操作。
			if (myMonth[w+1][d]<0) {
				color = gcGray;
				innerText = -myMonth[w+1][d];
			}else{
				color = ((d==0)||(d==6))?"red":"black";
				innerText = myMonth[w+1][d];
			}
		}
}

//fBuildCal()函数获取给定日期所有需要显示的日期内容。fBuildCal()函数有两个参数，第1个表示年份，第2个表示月份。
function fBuildCal(iYear, iMonth) {
//建立aMonth[1]到aMonth[6]六个空数组，最后的new Array(i)中的“i”不知道有什么作用，似乎可以去掉。
  var aMonth=new Array();
  for(i=1;i<7;i++)
  	aMonth[i]=new Array(i);
//Date对象的3个参数是必选的，表示给定的时间坐标，其中月份值比较特殊，6月份是用数字5表示的，1月份是用数字0表
//示的，所以要减去1。iDayOfFirst表示给定时间轴日期的星期值,iDaysInMonth表示所给年月的总的日期数。iOffsetLast
//表示在页面第一个格子中需要显示的上个月的日期值（在这里iYear，iMonth都是值的现在的时间）。
  var dCalDate=new Date(iYear, iMonth-1, 1);
  var iDayOfFirst=dCalDate.getDay();
  var iDaysInMonth=new Date(iYear, iMonth, 0).getDate();
  var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1;
  var iDate = 1;
  var iNext = 1;
//这个for完成第一行的显示，作者让刚开始的几天用负数表示，便于以后的页面显示，很好的方法。
  for (d = 0; d < 7; d++)
	aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++;
//这个for完成2-6行的显示，依旧用负数表示下个月的日期。
  for (w = 2; w < 7; w++)
  	for (d = 0; d < 7; d++)
		aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);
  return aMonth;
}
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 第2部分 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑


//事件函数。
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 第3部分 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
//fPrevMonth()函数显示上个月的日期。
function fPrevMonth(){
//tbSelMonth.value表示select中选中的月份值，tbSelYear.value表示select中选中的年份值。
  var iMon = tbSelMonth.value;
  var iYear = tbSelYear.value;
  if (--iMon<1) {
	  iMon = 12;
	  iYear--;
  }
//调用fSetYearMon函数显示最新的月份内容。
  fSetYearMon(iYear, iMon);
}

//fPrevMonth()函数显示下个月的日期。
function fNextMonth(){
//tbSelMonth.value表示select中选中的月份值，tbSelYear.value表示select中选中的年份值。
  var iMon = tbSelMonth.value;
  var iYear = tbSelYear.value;
  if (++iMon>12) {
	  iMon = 1;
	  iYear++;
  }
//调用fSetYearMon函数显示最新的月份内容。
  fSetYearMon(iYear, iMon);
}

//fSetYearMon()函数可以按照给定的时间，在页面中进行日期的显示。fSetYearMon()函数有两个参数，第1个参数表示
//给定的年份，第2个参数表示给定的月份。
function fSetYearMon(iYear, iMon){
//因为6月份是用数字5表示，所以-1，选中。
  tbSelMonth.options[iMon-1].selected = true;
//年份的选择有点复杂，但这似乎也是唯一的办法。
  for (i = 0; i < tbSelYear.length; i++)
	if (tbSelYear.options[i].value == iYear)
		tbSelYear.options[i].selected = true;
//完成了上面两个select的显示之后调用fUpdateCal()函数完成页面日期的显示。
  fUpdateCal(iYear, iMon);
}

//fSetDate()函数实现div层中的“清空”和“今天”的操作。
function fSetDate(iYear, iMonth, iDay){
  HiddenDiv();
//fSetDate(0,0,0)实现清空文本框。
  if ((iYear == 0) && (iMonth == 0) && (iDay == 0)){
  	gdCtrl.value = "";
  }else{
  	iMonth = iMonth + 100 + "";
  	iMonth = iMonth.substring(1);
  	iDay   = iDay + 100 + "";
  	iDay   = iDay.substring(1);
  	if(gdCtrl.tagName == "INPUT"){
  	  	gdCtrl.value = iYear+"-"+iMonth+"-"+iDay;
  	}else{
  	  	gdCtrl.innerText = iYear+"-"+iMonth+"-"+iDay;
  	}
  }
}

//fSetSelected()函数实现点击日期时的JS操作。
function fSetSelected(aCell){
  var iOffset = 0;
//获取select中选中的年月份。
  var iYear = parseInt(tbSelYear.value);
  var iMonth = parseInt(tbSelMonth.value);
//每一个显示日期的格子都有同一个ID“cellText”，这里用children方法可以获取操作的对象，srcElement也许会更
//清晰明了一些。
  with (aCell.children["cellText"]){
  	var iDay = parseInt(innerText);
//Victor参数的作用就在这里，如果是上个月的日期，则月份-1，如果是下个月的日期，则月份+1。
  	if (color==gcGray)
		iOffset = (Victor<10)?-1:1;
	iMonth += iOffset;
//这个if完成隔年的情况下的操作。
	if (iMonth<1) {
		iYear--;
		iMonth = 12;
	}else if (iMonth>12){
		iYear++;
		iMonth = 1;
	}
  }
//调用fSetDate()完成日期的最后显示。
  fSetDate(iYear, iMonth, iDay);
}
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 第3部分 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑


//两个小的工具函数，获取坐标。
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 第4部分 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
//Point()函数重新定位坐标。
function Point(iX, iY){
	this.x = iX;
	this.y = iY;
}

//fGetXY()函数获取某一给定对象的大小坐标
function fGetXY(aTag){
  var oTmp = aTag;
  var pt = new Point(0,0);
  do {
  	pt.x += oTmp.offsetLeft;
  	pt.y += oTmp.offsetTop;
//offsetParent表示在HTML中的上一个标签的对象合集。
  	oTmp = oTmp.offsetParent;
  } while(oTmp.tagName!="BODY");
  return pt;
}
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 第4部分 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
function IsDate(sDate) {
	var iYear, iMonth, iDay, iIndex

	var	reg
	reg = new RegExp('[^0-9-]','')
	if (sDate.search(reg) >= 0)
		return false;
	
	iIndex = sDate.indexOf('-');
	if ( iIndex == -1 )
		return false;
	else {
		iYear = parseFloat(sDate.substr(0, iIndex));
		if ( isNaN(iYear) || iYear < 1900 || iYear > 2099 )
			return false;
		else
			sDate = sDate.substring(iIndex + 1, sDate.length);
	}
	
	iIndex = sDate.indexOf('-');
	if ( iIndex == -1 )
		return false;
	else {
		iMonth = parseFloat(sDate.substr(0, iIndex));
		if ( isNaN(iMonth) || iMonth < 1 || iMonth > 12 )
			return false;
		else
			sDate = sDate.substring(iIndex + 1, sDate.length);
	}
	
	iIndex = sDate.indexOf('-');
	if ( iIndex >= 0 )
		return false;
	else {
		iDay = parseFloat(sDate);
		if ( isNaN(iDay) || iDay < 1 || iDay > 31 )
			return false;
	}
	
	
	switch(iMonth) {
		case 4:
		case 6:
		case 9:
		case 11:
			if ( iDay > 30 )
				return false;
			else
				break;
		case 2:
			if ( ( ( iYear % 4 == 0 && iYear % 100 != 0 ) || iYear % 400 == 0 ) && iDay > 29 )
				return false;
			else if ( (iYear % 4 != 0 || (iYear % 100 == 0 && iYear % 400 != 0)) && iDay > 28 )
				return false;
			else
				break;
		default:
	}
	return true;
}