﻿/*
	開發版本：V 1.0
	開發日期：2008-09-11
*/
/*
	開發版本：V 1.0
	開發日期：2008-09-11
	目的：提供一個日曆的基本程式模型
*/
	document.write(
		"<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" id=\"_this_calendar\" style=\"position:absolute;\">" +
		// 顯示頭部
		"   <tr height=\"30\">" +
		"      <td>" +
		"         <table width=\"100%\" height=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"cal\">" +
		"            <tr height=\"100%\">" +
		"               <td width=\"30\" valign=\"top\"><img src=\"calendar/images/arrow_cal.gif\" border=\"0\" align=\"absmiddle\"</td>" +
		"               <td id=\"_YMD_calendar\" bgcolor=\"#FFFFFF\" class=\"cal\"></td>" +
		"               <td width=\"44\" valign=\"bottom\" bgcolor=\"#FFFFFF\">" +
		"                  <img src=\"calendar/images/close.gif\" onclick=\"_display('_this_calendar', 0);\" border=\"0\" align=\"absmiddle\">"+
		"               </td>" +
		"            </tr>" +
		"         </table>" +
		"      </td>" +
		"   </tr>" +
		// 月曆body
		"   <tr><td bgcolor=\"#FFFFFF\" style=\"border:1px #333 solid;\"><div id=\"_calendar_day\"></div></td></tr>" +
		"   <tr height=\"15\" class=\"cal\"><td align=\"center\" class=\"footer\" disabled>Calendar &copy; by 2008</td></tr>" +
		"</table>"
		);
	_display('_this_calendar', 0);

	var _calendar_date = new Date();
	
	// 呼叫方式 _calendar(obj = 物件名稱,yyyy = 西元年,m = 月, d = 日, 是否定位true,false)
	function _calendar( obj, yyyy, m, d, is_first, e){
		var _YMD_calendar = document.getElementById('_YMD_calendar');
		var _this_calendar = document.getElementById('_this_calendar');
		var _calendar_day = document.getElementById('_calendar_day');

		if( is_first ){
			if(window.ActiveXObject){
				// IE Browser
				_this_calendar.style.top = event.y+document.body.scrollTop-10;
				_this_calendar.style.left = event.x+document.body.scrollLeft-10;
			}else{
				// Mozilla Firfox Browser
				yyyy += 1900;
				var _xy_x = (e.pageX+document.documentElement.scrollLeft-10);
				var _xy_y = (e.pageY+document.documentElement.scrollTop-10);
				_this_calendar.style.top = _xy_y+'px';
				_this_calendar.style.left = _xy_x+'px';
				}
			}

		var _prev = yyyy;	// 上一年
		var _next = yyyy;	// 下一年
		var m_p = m-1;		// 上個月
		var m_n = m+1;		// 下個月

		// 如果這個月是一月時
		if( m-1 < 1){
			_prev = yyyy-1;
			_next = yyyy;
			m_p = 12;
			m_n = m_n;
			}
		// 如果這個月是十二月時
		if( m+1 > 12){
			_prev = yyyy;
			_next = yyyy+1
			m_p = m_p;
			m_n = 1;
			}

		// 設定當月的日期物件
		var _current_date = new Date();
			// 取得當月第一天的日期
			_current_date.setYear(yyyy);
			_current_date.setMonth(m-1);
			_current_date.setDate(1);
			start_week = _current_date.getDay();		//取得本月的第一天是星期幾

			// 取得當月最後一天的日期
			_current_date.setYear(yyyy);
			_current_date.setMonth(m);
			_current_date.setDate(0);
			max_day = _current_date.getDate();		//取得最後一天的天數

		// 設定當月的日期物件
		var _last_date=new Date();
			// 取得上個月最後一天的日期物件
			_last_date.setMonth(m-1);
			_last_date.setDate(0);
			last_m_day = _last_date.getDate();

		// 取得今天的年月日
		var today = new Date();
			_year = today.getYear();
			_month = today.getMonth()+1;
			_today = today.getDate();

		var i, _day, sw=0;
		//  選擇上個月及下個月
		var long_m = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');

		_YMD_calendar.innerHTML = '&nbsp;&nbsp;' +
			'<img src="calendar/images/prev.gif" onclick="_calendar(\''+obj+'\','+(_prev)+','+(m_p)+','+d+',false);" border="0" align="absmiddle">'+
			//'&nbsp;' +
			'<img src="calendar/images/next.gif" onclick="_calendar(\''+obj+'\','+(_next)+','+(m_n)+','+d+',false);" border="0" align="absmiddle">' +
			'&nbsp;&nbsp;<b>'+ long_m[m-1] + '</b>&nbsp;&nbsp;' + yyyy ;

		// 月曆開始
		if(start_week==0){
			sw = 7;
		}else{
			sw = start_week;
			}

		var _width = 18;	// 每一格日期寬度
		var _height = 16;	// 每一格日期高度
		var _tab = "<table width=\"100%\" border=\"0\" cellpadding=\"5\" cellspacing=\"1\" class=\"cal\">" +
			// 顯示星期名稱
			"<tr align=\"center\" height=\""+_height+"\" class=\"header\">" +
			"<td bgcolor=\"#F18514\" width=\""+_width+"\">日</td>" +
			"<td bgcolor=\"#FFC333\" width=\""+_width+"\">一</td>" +
			"<td bgcolor=\"#FFC333\" width=\""+_width+"\">二</td>" +
			"<td bgcolor=\"#FFC333\" width=\""+_width+"\">三</td>" +
			"<td bgcolor=\"#FFC333\" width=\""+_width+"\">四</td>" +
			"<td bgcolor=\"#FFC333\" width=\""+_width+"\">五</td>" +
			"<td bgcolor=\"#F18514\" width=\""+_width+"\">六</td>" +
			"</tr>";

		// 顯示日期開始
		_tab += "<tr align=\"right\" height=\""+_height+"\">";

		var not_days = 0;
		// 補足當月前面並顯示當週上個月剩餘日期
		for(i=sw;i>0;i--){
			not_days = last_m_day-i+1;
			_tab += "<td class=\"not_days\" disabled>" +not_days+ "</td>";
			}

		var _days = 1;
		var s_day = _day = sw;	// 第一週開始日
		// 計算週數
		var total_weeks = Math.round((sw+1+max_day+(max_day%7))/7);
		// 每個月至少五週若是少於五週時週數就加1
		if(total_weeks == 4) total_weeks++;

		//開始顯示 1 ~ 當月最後一天
		for(i=1;i<=total_weeks;i++){
			// i == 1 當月第一週
			// i == total_weeks 當月最後一週
			// s_day = 當週開始日1~7
			// e_day = 當週結束日1~7
			if(i == 1){
				e_day = (7-_day)+s_day-1;
			}else{
				_tab += "<tr align=\"right\" height=\""+_height+"\">";
				if(i == total_weeks){
					s_day = _days;
					e_day = s_day+(max_day-s_day);
				}else{
					s_day = _days;
					e_day = s_day+6;
					}
				}

			for(j=s_day;j<=e_day;j++){
				_tab += "<td onclick=\"_show('"+obj+"',"+yyyy+","+(m)+","+_days+");\"";
				if( _days == _today && m == _month && yyyy == _year ){
					_tab += " class=\"today\"";
				}else{
					if((sw+_days)%7==1 || (sw+_days)%7==0){
						_tab += " class=\"h_days\"";
					}else{
						_tab += " class=\"days\"";
						}
					}
				_tab += ">"+_days+"</td>";
				_days++;
				}

			if(i < total_weeks-1 ) _tab += "</tr>";
			}
		_day += _days;	// 把第一週補滿日加上本月總日數

		// ************** 補滿最後一列的儲存格
		// 若是 (當月總天數+第一週補足)%7 為 0 而 當月總天數又不等於31天時
		if( (_day-1)%7 == 0 && max_day != 31){
			_tab += "<tr align=\"right\" height=\""+_height+"\">";
			}

		var f_s = (sw+max_day)%7;	// (當月總天數+第一週補足)%7
		not_days = 0;
		// 開始補滿最後一列的儲存格
		for(i=f_s;i<7;i++){
			not_days++;
			_tab += "<td class=\"not_days\" disabled>" +not_days+ "</td>";
			_day++;
			}
		_tab += "</tr>";
		_tab += "</table>";

		_calendar_day.innerHTML = _tab;
		_calendar_day.y = yyyy;
		_calendar_day.m = m;

		// 關閉畫面
		_display('_this_calendar', 1);
		}

	// obj_name 物件名稱
	// y 年
	// m 月
	// d 日
	function _show(obj, y, m, d){
		var _obj = document.getElementById(obj);

		m = ''+m;
		d = ''+d;
		// 若是1~9月前頭補0
		if(m.length ==1 ){
			m = '0'+m;
			}

		// 若是1~9日前頭補0
		if(d.length ==1 ){
			d = '0'+d;
			}

		if(_obj){
			_obj.value = y + "-" + m + "-" + d;
			}

		// 關閉畫面
		_display('_this_calendar',0);
		}

	function _display(divId, x){
		var div = document.getElementById(divId);

		if( x == 0 ){
			div.style.display = 'none';
			}
		if( x == 1 ){
			div.style.display = '';
			}
		}