/****** customize define start ******/
var _calImgPath         = "/img/";
var _calImgBottomNormal = _calImgPath + "button_22.gif";
var _calImgBottomOver   = _calImgPath + "button_22_over.gif"
var _calImgBottomPrev   = _calImgPath + "arrow_b.gif";
var _calImgBottomNext   = _calImgPath + "arrow_b2.gif";
var _calImgBottomclose  = _calImgPath + "icon_close.gif";
var _calImgBGHandle     = _calImgPath + "dialoghead_bg.gif";
var _calCSSCurDate      = "date_cur";
var _calCSSTitle        = "tdhead_w";
var _calCSSTitleB       = "tdhead_wb";
var _calCSSMonth        = "month";
var _calCSSDate         = "date";
var _calCSSWeekday      = "datehead";
var _calCSSWeekend      = "dateb_red";

if("undefined" == typeof(MSG_CALENDAR_SUN))
{
   var MSG_CALENDAR_SUN             = "日";
   var MSG_CALENDAR_MON             = "一";
   var MSG_CALENDAR_TUE             = "二";
   var MSG_CALENDAR_WEN             = "三";
   var MSG_CALENDAR_THU             = "四";
   var MSG_CALENDAR_FRI             = "五";
   var MSG_CALENDAR_SAT             = "六";
   var MSG_CALENDAR_OK              = "確定";
   var MSG_CALENDAR_CANCEL          = "取消";
   var MSG_CALENDAR_CUR_DATE        = "目前選擇 ";
}


/****** customize define end ******/


/* define value */

var _calDragObj = null;
var _calCurDivObj = null;
var _calCurYear = "";
var _calCurMon = "";

var _CalMonName = new Array("January", "February", "March", "April",
                            "May", "June", "July", "August", "September",
                            "October", "November", "December");

function Calendar(func, year, mon, day)
{
   var dragObj;

   if("undefined" == typeof(_DragMovingObj))
      return null;

   if(null != document.getElementById("calHandle") ||
      null != document.getElementById("calContent"))
      return null;

   /* set the date of calendar to current time. if there is no input */
   if(year == null || mon == null || day == null)
   {
      var curDate = new Date();

      year = curDate.getFullYear();
      mon = curDate.getMonth()+1;
      day = curDate.getDate();
   }

   if(CreateCalendarWindow(year, mon, day) != true)
      return null;

   if((dragObj = new Drag("calHandle", "calContent")) == null)
      return null;
   
   this.drag = dragObj;
   this.Move = CalMove;
   this.Show = CalShow;
   this.Hide = CalHide;
   this.Cancel = CalCancel;
   this.Submit = CalSubmit;
   this.Reset = CalReset;
   this.Value = CalValue;
   this.drag.Enable();
   _calDragObj = dragObj;

   
   _calCurDivObj = document.getElementById("calCurSelected");
   if(day > 28)
   {
      if("TD" == _calCurDivObj.parentNode.tagName &&
         _calCSSCurDate == _calCurDivObj.parentNode.className)
         day = _calCurDivObj.innerHTML;
   }
      
   mon = CalAddZero(mon);
   day = CalAddZero(day);
   _calCurYear = year;
   _calCurMon = mon;
   document.getElementById("calMsg").innerHTML = year + "/" + mon + "/" + day; 
   document.getElementById("calContent").setAttribute("begyear", year);
   document.getElementById("calContent").setAttribute("begmon", mon);
   document.getElementById("calContent").setAttribute("begday", day);
   document.getElementById("calContent").setAttribute("func", func);
}

function CalendarForWeek(func, year, mon, day)
{
   var dragObj;
   if("undefined" == typeof(_DragMovingObj))
      return null;

   if(null != document.getElementById("calHandle") ||
      null != document.getElementById("calContent"))
      return null;

   /* set the date of calendar to current time. if there is no input */
   if(year == null || mon == null || day == null)
   {
      var curDate = new Date();

      year = curDate.getFullYear();
      mon = curDate.getMonth()+1;
      day = curDate.getDate();
   }

   if(CreateCalendarWindowForWeek(year, mon, day) != true)
      return null;

   if((dragObj = new Drag("calHandle", "calContent")) == null)
      return null;
   
   this.drag = dragObj;
   this.Move = CalMove;
   this.Show = CalShow;
   this.Hide = CalHide;
   this.Cancel = CalCancel;
   this.Submit = CalSubmit;
   this.Reset = CalResetForWeek;
   this.Value = CalValue;
   this.drag.Enable();
   _calDragObj = dragObj;

   
   _calCurDivObj = document.getElementById("calCurSelected");
   if(day > 28)
   {
      if("TD" == _calCurDivObj.parentNode.tagName &&
         _calCSSCurDate == _calCurDivObj.parentNode.className)
         day = _calCurDivObj.innerHTML;
   }
      
   mon = CalAddZero(mon);
   day = CalAddZero(day);
   _calCurYear = year;
   _calCurMon = mon;
   document.getElementById("calMsg").innerHTML = year + "/" + mon + "/" + day; 
   document.getElementById("calContent").setAttribute("begyear", year);
   document.getElementById("calContent").setAttribute("begmon", mon);
   document.getElementById("calContent").setAttribute("begday", day);
   document.getElementById("calContent").setAttribute("func", func);
   /* set the select week */
   setWeekSelect();
}

/* the function can set the row color */
function setRowColor(theRow, theAction) {
   var theCells = null;
   if (typeof(document.getElementsByTagName) != 'undefined') {
        theCells = theRow.getElementsByTagName('td');
    } else if (typeof(theRow.cells) != 'undefined') {
        theCells = theRow.cells;
    } else { return false; }
 var newColor = '';
 if (theAction == 'over') newClass = 'week_over';
 if (theAction == 'selt') newClass='week_cur';
 
 if (theAction == 'clear') 
 {
 	 for (c = 0; c < theCells.length; c++) 
    {   
        theCells[c].className = "";
        if(theCells[c].id == "lastweekday" || theCells[c].id == "nextweekday")
        	theCells[c].className = "datedisable";
    }
 	return true;
 }
 
 if (theAction == 'out') 
 {
 	 for (c = 0; c < theCells.length; c++) 
    {   
       if(theCells[c].className != "week_cur")
       {
       	    theCells[c].className = ""; 
            if(theCells[c].id == "lastweekday" || theCells[c].id == "nextweekday")
        	   theCells[c].className = "datedisable";
       }
    }
 	return true;
 }
 for (c = 0; c < theCells.length; c++) 
 {   
 	if(theCells[c].className != "week_cur")
       theCells[c].className = newClass; 
 }
 return true;
}

function setWeekSelect()
{
   selectDivObj(_calCurDivObj);
}

function CreateCalendarWindow(year, month, day)
{
   var htmlStr = '<div id="calHandle" style="display: none; width: 289px;">\
<table width="289" height="28" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">\
        <tr>\
          <td height="26" valign="top" background="'
               + _calImgBGHandle +
                 '"><table width="100%" height="26" border="0" cellpadding="0" cellspacing="0">\
              <tr>\
                <td class="'
                + _calCSSTitle + 
                '"><div align="center" class="' 
                +_calCSSTitleB + 
                '">&nbsp;&nbsp;&nbsp;&nbsp;Calendar</div></td>\
                <td width="24"><div align="center"><img src="'
               + _calImgBottomclose + 
                 '" width="18" height="18" border="0" onClick="CalCancel()" style="cursor:default;"></div></td>\
              </tr>\
          </table></td>\
        </tr>\
</table>\
</div>\
<div id="calContent" style="display: none; width: 289px;">\
<table width="289" height="180" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">\
      <tr>\
          <td valign="top" bgcolor="#FFFFFF"><table width="240"  border="0" align="center" cellpadding="0" cellspacing="0">\
              <tr>\
                <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">\
                    <tr>\
                      <td width="12"><img src="'
               + _calImgBottomPrev + 
                 '" width="12" height="11" onclick="CalLastMon()" style="cursor:pointer;"></td>\
                      <td height="30"><div align="center" class="'
                      + _calCSSMonth +
                      '"><span id="calCurMon" class="'
                      + _calCSSMonth + 
                      '">'
               + _CalMonName[month-1] +
                 '</span> <span id="calCurYear">'
               + year +
                 '</span></div></td>\
                      <td width="12"><img src="'
               + _calImgBottomNext + 
                 '" width="12" height="11" onclick="CalNextMon()" style="cursor:pointer;"></td>\
                    </tr>\
                </table></td>\
              </tr>\
              <tr>\
                <td>\
            <div id="calRefalshTab">\
            <table width="100%"  border="0" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3">\
                    <tr bgcolor="#FFFFFF" class="' 
                    + _calCSSWeekday +
                    '">\
                      <td width="14%"><div align="center" class="'
                      + _calCSSWeekend +
                      '">'
               + MSG_CALENDAR_SUN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_MON +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_TUE +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_WEN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_THU +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_FRI +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_SAT +
                 '</div></td>\
                    </tr>'
               + CalTableStr(year, month, day) +
                 '</table>\
               </div>\
            </td>\
              </tr>\
            </table>\
              <div align="center" class="' 
              + _calCSSDate +
              '">\
                <table width="100%"  border="0" cellspacing="0" cellpadding="0">\
                  <tr>\
                    <td height="30"><div align="center" class="'
                    + _calCSSDate +
                    '">'
               + MSG_CALENDAR_CUR_DATE +
                 '<span id="calMsg"></span></div></td>\
                  </tr>\
                </table>\
              </div>\
              <table width="192"  border="0" align="center" cellpadding="0" cellspacing="0">\
                <tr>\
                  <td><TABLE width="66" align="center" cellpadding="0" cellspacing="0">\
                    <TBODY>\
                      <TR>\
                        <TD align=middle valign="middle" class="body13gray" \
    style="BACKGROUND-IMAGE: url('
               + _calImgBottomNormal + 
                 '); CURSOR: default" onmouseover="this.style.backgroundImage=\'url('
               + _calImgBottomOver + 
                 ')\'" \
    onmouseout="this.style.backgroundImage=\'url('
               + _calImgBottomNormal + 
                 ')\'" onClick="CalSubmit()"><div align="center" class="button">'
               + MSG_CALENDAR_OK +
                 '</div></TD>\
                      </TR>\
                    </TBODY>\
                  </TABLE></td>\
                  <td><TABLE width="66" align="center" cellpadding="0" cellspacing="0">\
                    <TBODY>\
                      <TR>\
                        <TD align=middle valign="middle" class="body13gray" \
    style="BACKGROUND-IMAGE: url('
               + _calImgBottomNormal + 
                 '); CURSOR: default" onmouseover="this.style.backgroundImage=\'url('
               + _calImgBottomOver + 
                 ')\'" \
    onmouseout="this.style.backgroundImage=\'url('
               + _calImgBottomNormal + 
                 ')\'" onClick="CalCancel()"><div align="center" class="button">'
               + MSG_CALENDAR_CANCEL + 
                 '</div></TD>\
                      </TR>\
                    </TBODY>\
                  </TABLE></td>\
                </tr>\
              </table>\
              <br></td>\
        </tr>\
    </table>\
   </div>';
//   document.getElementsByTagName("BODY")[0].innerHTML = htmlStr + document.getElementsByTagName("BODY")[0].innerHTML;
   document.getElementsByTagName("BODY")[0].innerHTML += htmlStr;
   return true;
}

function CreateCalendarWindowForWeek(year, month, day)
{
   var htmlStr = '<div id="calHandle" style="display: none; width: 289px;">\
<table width="289" height="28" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">\
        <tr>\
          <td height="26" valign="top" background="'
               + _calImgBGHandle +
                 '"><table width="100%" height="26" border="0" cellpadding="0" cellspacing="0">\
              <tr>\
                <td class="'
                + _calCSSTitle + 
                '"><div align="center" class="' 
                +_calCSSTitleB + 
                '">&nbsp;&nbsp;&nbsp;&nbsp;Calendar</div></td>\
                <td width="24"><div align="center"><img src="'
               + _calImgBottomclose + 
                 '" width="18" height="18" border="0" onClick="CalCancel()" style="cursor:default;"></div></td>\
              </tr>\
          </table></td>\
        </tr>\
</table>\
</div>\
<div id="calContent" style="display: none; width: 289px;">\
<table width="289" height="180" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">\
      <tr>\
          <td valign="top" bgcolor="#FFFFFF"><table width="240"  border="0" align="center" cellpadding="0" cellspacing="0">\
              <tr>\
                <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">\
                    <tr>\
                      <td width="12"><img src="'
               + _calImgBottomPrev + 
                 '" width="12" height="11" onclick="CalLastMonForWeek()" style="cursor:pointer;"></td>\
                      <td height="30"><div align="center" class="'
                      + _calCSSMonth +
                      '"><span id="calCurMon" class="'
                      + _calCSSMonth + 
                      '">'
               + _CalMonName[month-1] +
                 '</span> <span id="calCurYear">'
               + year +
                 '</span></div></td>\
                      <td width="12"><img src="'
               + _calImgBottomNext + 
                 '" width="12" height="11" onclick="CalNextMonForWeek()" style="cursor:pointer;"></td>\
                    </tr>\
                </table></td>\
              </tr>\
              <tr>\
                <td>\
            <div id="calRefalshTab">\
            <table width="100%"  border="0" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3">\
                    <tr bgcolor="#FFFFFF" class="' 
                    + _calCSSWeekday +
                    '">\
                      <td width="14%"><div align="center" class="'
                      + _calCSSWeekend +
                      '">'
               + MSG_CALENDAR_SUN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_MON +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_TUE +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_WEN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_THU +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_FRI +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_SAT +
                 '</div></td>\
                    </tr>'
               + CalTableStrForWeek(year, month, day) +
                 '</table>\
               </div>\
            </td>\
              </tr>\
            </table>\
              <div align="center" class="'
              + _calCSSDate +
              '">\
                <table width="100%"  border="0" cellspacing="0" cellpadding="0">\
                  <tr>\
                    <td height="30"><div align="center" class="'
                    + _calCSSDate +
                    '">'
               + MSG_CALENDAR_CUR_DATE +
                 '<span id="calMsg"></span></div></td>\
                  </tr>\
                </table>\
              </div>\
              <table width="192"  border="0" align="center" cellpadding="0" cellspacing="0">\
                <tr>\
                  <td><TABLE width="66" align="center" cellpadding="0" cellspacing="0">\
                    <TBODY>\
                      <TR>\
                        <TD align=middle valign="middle" class="body13gray" \
    style="BACKGROUND-IMAGE: url('
               + _calImgBottomNormal + 
                 '); CURSOR: default" onmouseover="this.style.backgroundImage=\'url('
               + _calImgBottomOver + 
                 ')\'" \
    onmouseout="this.style.backgroundImage=\'url('
               + _calImgBottomNormal + 
                 ')\'" onClick="CalSubmit()"><div align="center" class="button">'
               + MSG_CALENDAR_OK +
                 '</div></TD>\
                      </TR>\
                    </TBODY>\
                  </TABLE></td>\
                  <td><TABLE width="66" align="center" cellpadding="0" cellspacing="0">\
                    <TBODY>\
                      <TR>\
                        <TD align=middle valign="middle" class="body13gray" \
    style="BACKGROUND-IMAGE: url('
               + _calImgBottomNormal + 
                 '); CURSOR: default" onmouseover="this.style.backgroundImage=\'url('
               + _calImgBottomOver + 
                 ')\'" \
    onmouseout="this.style.backgroundImage=\'url('
               + _calImgBottomNormal + 
                 ')\'" onClick="CalCancel()"><div align="center" class="button">'
               + MSG_CALENDAR_CANCEL + 
                 '</div></TD>\
                      </TR>\
                    </TBODY>\
                  </TABLE></td>\
                </tr>\
              </table>\
              <br></td>\
        </tr>\
    </table>\
   </div>';
//   document.getElementsByTagName("BODY")[0].innerHTML = htmlStr + document.getElementsByTagName("BODY")[0].innerHTML;
   document.getElementsByTagName("BODY")[0].innerHTML += htmlStr;
   return true;
}

function CalMove(x, y, hId)
{
   this.drag.Move(x, y, hId);
}

function CalShow(x, y)
{
   /* close the other drag windows first */
   if("undefined" != typeof(_curDragObj) && null != _curDragObj)
      _curDragObj.Hide();
   _curDragObj = this;
   
   this.drag.Show(x, y);
}

function CalHide()
{
   this.drag.Hide();
}

function CalCancel()
{
   var res = eval(document.getElementById("calContent").getAttribute("func") 
                  + '("' +
                  document.getElementById("calContent").getAttribute("begyear")
                  + "/" +
                  document.getElementById("calContent").getAttribute("begmon")
                  + "/" +
                  document.getElementById("calContent").getAttribute("begday")
                  + '", 2)');
   if(res)
      _calDragObj.Hide();
      
}

function CalSubmit()
{
   var divObj;
   var dateStr = document.getElementById("calMsg").innerHTML;   
   var res = eval(document.getElementById("calContent").getAttribute("func") 
                     + '("' + dateStr + '", 1)');
   if(res)
   {
      _calDragObj.Hide();
      document.getElementById("calContent").setAttribute("begyear", dateStr.substr(0, 4));
      document.getElementById("calContent").setAttribute("begmon", dateStr.substr(5, 2));
      document.getElementById("calContent").setAttribute("begday", dateStr.substr(8, 2));
   }
}

function CalTableStr(year, month, day)
{
   var i, j;
   var str = "";
   var monthDay = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
   var date = new Date(year, month-1, 1);
   var weekday = date.getDay();
   var dayInLastMon;
   var nTr = 0;

   /* If the year is a leap year then the month day of Feb. is 29 days */
   if(((year % 4 == 0) && !(year % 100 == 0)) || (year % 400 == 0))
      monthDay[1] = 29;
   
   /* correct the day value */
   if(day < 1)
     day = 1;
   else if (day > monthDay[month-1])
     day = monthDay[month-1];
   
   /* add few days of last month to the beginning of the calendar table.
      if this month is Jan. then the last month is Dec (total days is 31).
      Otherwise, the month day of last month is monthDay[month-2] */
   if(month == 1) 
      dayInLastMon = 31 - weekday + 1;
   else
      dayInLastMon = monthDay[month-2] - weekday + 1;   
   
   if(weekday != 0)
   {
      str = '<tr bgcolor="#FFFFFF" class="' + _calCSSDate + '">';
      nTr++;
   }
   
   for(i = 0, j = dayInLastMon; i < weekday; i++, j++)
   {
       str += '<td width="14%" bgcolor="' + CalBGColorByWeekDay(i) + 
              '" class="datedisable"><div align="center">' +
              j + '</div></td>';
   }
   
   /* add the days of current month to the calendar table */
   for(i = 1; i <= monthDay[month-1]; i++, weekday++)
   {
      if(weekday % 7 == 0)
      {
         str += '<tr bgcolor="#FFFFFF" class="' + _calCSSDate + '">';
         nTr++;
      }
      /* if the date is the selected date, the css class is different */
      if(i == day)
      {
         str += '<td width="14%" bgcolor="' + CalBGColorByWeekDay(weekday) + 
                '" class="'
                + _calCSSCurDate +
                '"><div align="center" id="calCurSelected"\
                 class="date_div" onMouseOver="this.className=\'date_over\'"\
                 onMouseOut="this.className=\'date_div\'" onClick="CalSelect(event)">'
                 + i + '</div></td>';
      }
      else
         str += '<td width="14%" bgcolor="' + CalBGColorByWeekDay(weekday) + 
                '" class="'
                + _calCSSDate +
                '"><div align="center"\
                 class="date_div" onMouseOver="this.className=\'date_over\'"\
                 onMouseOut="this.className=\'date_div\'" onClick="CalSelect(event)">'
                 + i + '</div></td>';

      /* if the date is Sat. then the next day shoud be added to the 
         next row of the calendar table */
      if(weekday % 7 == 6)
         str += "</tr>";
   }
   /* add few days of next month to the end of the calendar table. */
   for(i = 1; nTr < 6 || weekday % 7 != 0; i++, weekday++)
   {
      if(weekday % 7 == 0)
      {
         str += '<tr bgcolor="#FFFFFF" class="' + _calCSSDate + '">';
         nTr++;
      }
      str += '<td width="14%" bgcolor="' + CalBGColorByWeekDay(weekday) + 
              '" class="datedisable"><div align="center">' +
              i + '</div></td>';
      
      if(weekday % 7 == 6)
         str += "</tr>";
   }

   return str;
}

function CalTableStrForWeek(year, month, day)
{
   var i, j;
   var str = "";
   var monthDay = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
   var date = new Date(year, month-1, 1);
   var weekday = date.getDay();
   var dayInLastMon;
   var nTr = 0;
   var fThisWeek = false;

   /* If the year is a leap year then the month day of Feb. is 29 days */
   if(((year % 4 == 0) && !(year % 100 == 0)) || (year % 400 == 0))
      monthDay[1] = 29;
   
   /* correct the day value */
   if(day < 1)
     day = 1;
   else if (day > monthDay[month-1])
     day = monthDay[month-1];
   
   /* add few days of last month to the beginning of the calendar table.
      if this month is Jan. then the last month is Dec (total days is 31).
      Otherwise, the month day of last month is monthDay[month-2] */
   if(month == 1) 
      dayInLastMon = 31 - weekday + 1;
   else
      dayInLastMon = monthDay[month-2] - weekday + 1;   
   
   if(weekday != 0)
   {
      str = '<tr bgcolor="#FFFFFF" class="' + _calCSSDate + 
      '" onMouseOver="setRowColor(this, \'over\')"\
         onMouseOut="setRowColor(this, \'out\')"\
         onClick="CalSelectForWeek(event)">';
      '">';
      nTr++;
   }
   
   for(i = 0, j = dayInLastMon; i < weekday; i++, j++)
   {
       str += '<td id="lastweekday" width="14%" bgcolor="' + CalBGColorByWeekDay(i) + 
              '" class="datedisable"><div align="center">' +
              j + '</div></td>';
   }
   
   /* add the days of current month to the calendar table */
   for(i = 1; i <= monthDay[month-1]; i++, weekday++)
   {
      if(weekday % 7 == 0)
      {
         str += '<tr bgcolor="#FFFFFF" class="' 
         + _calCSSDate + 
         '" onMouseOver="setRowColor(this, \'over\')"\
         onMouseOut="setRowColor(this, \'out\')"\
         onClick="CalSelectForWeek(event)">';
         nTr++;
      }
      /* if the date is the selected date, the css class is different */
         str += '<td width="14%" bgcolor="' + CalBGColorByWeekDay(weekday) + 
                '" class="'
                + _calCSSDate +
                '"><div align="center"';
         if(day == i)
         {
         	 str += ' id="calCurSelected"';
         }
         str += 'class="date_div">'
                 + i + '</div></td>';

      /* if the date is Sat. then the next day shoud be added to the 
         next row of the calendar table */
      if(weekday % 7 == 6)
         str += "</tr>";
   }
   /* add few days of next month to the end of the calendar table. */
   for(i = 1; nTr < 6 || weekday % 7 != 0; i++, weekday++)
   {
      if(weekday % 7 == 0)
      {
         str += '<tr bgcolor="#FFFFFF" class="' + _calCSSDate +
         	 '" onMouseOver="setRowColor(this, \'over\')"\
             onMouseOut="setRowColor(this, \'out\')"\
             onClick="CalSelectForWeek(event)">';
             '">';
         nTr++;
      }
      str += '<td width="14%" id="nextweekday" bgcolor="' + CalBGColorByWeekDay(weekday) + 
              '" class="datedisable"><div align="center">' +
              i + '</div></td>';
      
      if(weekday % 7 == 6)
         str += "</tr>";
   }

   return str;
}

function CalSelect(e)
{
   var divObj;
   var tdObj;

   if(document.all)
   {
      divObj = event.srcElement;
   }
   else
      divObj = e.target;
 
   /* cancel oranginal date_cur td first */
   if("TD" == _calCurDivObj.parentNode.tagName &&
      _calCSSCurDate == _calCurDivObj.parentNode.className)
      _calCurDivObj.parentNode.className = _calCSSDate;

   tdObj = divObj.parentNode;
   _calCurDivObj = divObj;
   tdObj.className = _calCSSCurDate;
   document.getElementById("calMsg").innerHTML = _calCurYear + "/" + 
                                                 _calCurMon + "/" + 
                                                 CalAddZero(divObj.innerHTML);
}

function CalSelectForWeek(e)
{
   var divObj;
   var tabObj;
   var trObj;
   var weekdiv;
   var theCells;
   var dispyear;
   var dispmonth;

   if(document.all)
   {
      divObj = event.srcElement;
   }
   else
      divObj = e.target;
   
   /* avoid the bubble event effect */
   if(divObj.parentNode.tagName != "TD")
   {
      return;
   }
   
   _calCurDivObj = divObj;
   
   tabObj = divObj.parentNode.parentNode.parentNode;
   
   for(i = 0; i < tabObj.getElementsByTagName("TR").length; i++)
   {
      setRowColor(tabObj.getElementsByTagName("TR")[i], "clear");
   }
   selectDivObj(divObj);
}

function selectDivObj(divObj)
{
   trObj = divObj.parentNode.parentNode;
   setRowColor(trObj, "selt");
   if (typeof(document.getElementsByTagName) != 'undefined') {
        theCells = trObj.getElementsByTagName('td');
    } else if (typeof(trObj.cells) != 'undefined') {
        theCells = trObj.cells;
    } else { return false; }
    
    dispyear = _calCurYear;
    dispmonth = _calCurMon;
    if(theCells[0].id == "lastweekday")
    	dispmonth--
    if(theCells[0].id == "nextweekday")
    	dispmonth++;
    if(dispmonth > 12)
    {
    	dispmonth = 1;
    	dispyear++;
    }
    if(dispmonth < 1)
    {
    	dispmonth = 12;
    	dispyear--;
    }
    
    if(dispmonth < 10)
    	dispmonth = "0"+parseInt(dispmonth, 10);
    
    weekdiv = theCells[0].childNodes[0];    
    document.getElementById("calMsg").innerHTML = dispyear + "/" + 
                                                 dispmonth + "/" + 
                                                 CalAddZero(weekdiv.innerHTML);
}

function CalAddZero(num)
{
   return ((num > 9) ? (num + "") : ("0" + num + ""));
}

function CalLastMonForWeek()
{
   var year = _calCurYear;
   var mon = _calCurMon;
   var day;
   var htmlStr;

   day = _calCurDivObj.innerHTML;
  
   if(mon <= 1)
   {
      mon = 12;
      year--;
   }
   else
      mon--;

   htmlStr = '<table width="100%"  border="0" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3">\
                    <tr bgcolor="#FFFFFF" class="'
                    + _calCSSWeekday +
                    '">\
                      <td width="14%"><div align="center" class="'
                      + _calCSSWeekend +
                      '">'
               + MSG_CALENDAR_SUN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_MON +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_TUE +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_WEN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_THU +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_FRI +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_SAT +
                 '</div></td>\
                    </tr>'
               + CalTableStrForWeek(year, mon, day) +
                 '</table>';

   document.getElementById("calRefalshTab").innerHTML = htmlStr;
   _calCurDivObj = document.getElementById("calCurSelected");
   if(day > 28)
   {
      if("TD" == _calCurDivObj.parentNode.tagName &&
         _calCSSCurDate == _calCurDivObj.parentNode.className)
         day = _calCurDivObj.innerHTML;
   }
   mon = CalAddZero(mon);
   day = CalAddZero(day);
   _calCurYear = year;
   _calCurMon = mon;
   document.getElementById("calMsg").innerHTML = year + "/" + mon + "/" + day; 
   document.getElementById("calCurYear").innerHTML = year;
   document.getElementById("calCurMon").innerHTML = _CalMonName[mon-1];
   setWeekSelect();
}

function CalNextMonForWeek()
{
   var year = _calCurYear;
   var mon = _calCurMon;
   var day;
   var htmlStr;

   day = _calCurDivObj.innerHTML;

   if(mon >= 12)
   {
      mon = 1;
      year = (year-0)+1;
   }
   else
      mon = (mon-0)+1;

   htmlStr = '<table width="100%"  border="0" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3">\
                    <tr bgcolor="#FFFFFF" class="' 
                    + _calCSSWeekday +
                    '">\
                      <td width="14%"><div align="center" class="'
                      + _calCSSWeekend + 
                      '">'
               + MSG_CALENDAR_SUN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_MON +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_TUE +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_WEN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_THU +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_FRI +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_SAT +
                 '</div></td>\
                    </tr>'
               + CalTableStrForWeek(year, mon, day) +
                 '</table>';

   document.getElementById("calRefalshTab").innerHTML = htmlStr;
   _calCurDivObj = document.getElementById("calCurSelected");
   if(day > 28)
   {
      if("TD" == _calCurDivObj.parentNode.tagName &&
         _calCSSCurDate == _calCurDivObj.parentNode.className)
         day = _calCurDivObj.innerHTML;
   }
   mon = CalAddZero(mon);
   day = CalAddZero(day);
   _calCurYear = year;
   _calCurMon = mon;
   document.getElementById("calMsg").innerHTML = year + "/" + mon + "/" + day; 
   document.getElementById("calCurYear").innerHTML = year;
   document.getElementById("calCurMon").innerHTML = _CalMonName[mon-1];
   setWeekSelect()
}

function CalLastMon()
{
   var year = _calCurYear;
   var mon = _calCurMon;
   var day;
   var htmlStr;

   day = _calCurDivObj.innerHTML;
  
   if(mon <= 1)
   {
      mon = 12;
      year--;
   }
   else
      mon--;

   htmlStr = '<table width="100%"  border="0" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3">\
                    <tr bgcolor="#FFFFFF" class="'
                    + _calCSSWeekday +
                    '">\
                      <td width="14%"><div align="center" class="'
                      + _calCSSWeekend +
                      '">'
               + MSG_CALENDAR_SUN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_MON +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_TUE +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_WEN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_THU +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_FRI +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_SAT +
                 '</div></td>\
                    </tr>'
               + CalTableStr(year, mon, day) +
                 '</table>';

   document.getElementById("calRefalshTab").innerHTML = htmlStr;
   _calCurDivObj = document.getElementById("calCurSelected");
   if(day > 28)
   {
      if("TD" == _calCurDivObj.parentNode.tagName &&
         _calCSSCurDate == _calCurDivObj.parentNode.className)
         day = _calCurDivObj.innerHTML;
   }
   mon = CalAddZero(mon);
   day = CalAddZero(day);
   _calCurYear = year;
   _calCurMon = mon;
   document.getElementById("calMsg").innerHTML = year + "/" + mon + "/" + day; 
   document.getElementById("calCurYear").innerHTML = year;
   document.getElementById("calCurMon").innerHTML = _CalMonName[mon-1];
}

function CalNextMon()
{
   var year = _calCurYear;
   var mon = _calCurMon;
   var day;
   var htmlStr;

   day = _calCurDivObj.innerHTML;

   if(mon >= 12)
   {
      mon = 1;
      year = (year-0)+1;
   }
   else
      mon = (mon-0)+1;

   htmlStr = '<table width="100%"  border="0" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3">\
                    <tr bgcolor="#FFFFFF" class="' 
                    + _calCSSWeekday +
                    '">\
                      <td width="14%"><div align="center" class="'
                      + _calCSSWeekend + 
                      '">'
               + MSG_CALENDAR_SUN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_MON +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_TUE +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_WEN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_THU +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_FRI +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_SAT +
                 '</div></td>\
                    </tr>'
               + CalTableStr(year, mon, day) +
                 '</table>';

   document.getElementById("calRefalshTab").innerHTML = htmlStr;
   _calCurDivObj = document.getElementById("calCurSelected");
   if(day > 28)
   {
      if("TD" == _calCurDivObj.parentNode.tagName &&
         _calCSSCurDate == _calCurDivObj.parentNode.className)
         day = _calCurDivObj.innerHTML;
   }
   mon = CalAddZero(mon);
   day = CalAddZero(day);
   _calCurYear = year;
   _calCurMon = mon;
   document.getElementById("calMsg").innerHTML = year + "/" + mon + "/" + day; 
   document.getElementById("calCurYear").innerHTML = year;
   document.getElementById("calCurMon").innerHTML = _CalMonName[mon-1];
}

function CalReset(func, year, mon, day)
{
   var htmlStr;

   /* hide the calendar first */
   this.Hide();
   
   /* set the date of calendar to current time. if there is no input */
   if(year == null || mon == null || day == null)
   {
      var curDate = new Date();

      year = curDate.getFullYear();
      mon = curDate.getMonth()+1;
      day = curDate.getDate();
   }

   /* reset the calendar */
   htmlStr = '<table width="100%"  border="0" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3">\
                    <tr bgcolor="#FFFFFF" class="'
                    + _calCSSWeekday +
                    '">\
                      <td width="14%"><div align="center" class="'
                      + _calCSSWeekend +
                      '">'
               + MSG_CALENDAR_SUN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_MON +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_TUE +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_WEN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_THU +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_FRI +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_SAT +
                 '</div></td>\
                    </tr>'
               + CalTableStr(year, mon, day) +
                 '</table>';

   document.getElementById("calRefalshTab").innerHTML = htmlStr;
   _calCurDivObj = document.getElementById("calCurSelected");
   if(day > 28)
   {
      if("TD" == _calCurDivObj.parentNode.tagName &&
         _calCSSCurDate == _calCurDivObj.parentNode.className)
         day = _calCurDivObj.innerHTML;
   }
   mon = CalAddZero(mon);
   day = CalAddZero(day);
   _calCurYear = year;
   _calCurMon = mon;
   document.getElementById("calMsg").innerHTML = year + "/" + mon + "/" + day; 
   document.getElementById("calContent").setAttribute("begyear", year);
   document.getElementById("calContent").setAttribute("begmon", mon);
   document.getElementById("calContent").setAttribute("begday", day);
   document.getElementById("calContent").setAttribute("func", func);
   document.getElementById("calCurYear").innerHTML = year;
   document.getElementById("calCurMon").innerHTML = _CalMonName[mon-1];
}

function CalResetForWeek(func, year, mon, day)
{
   var htmlStr;

   /* hide the calendar first */
   this.Hide();
   
   /* set the date of calendar to current time. if there is no input */
   if(year == null || mon == null || day == null)
   {
      var curDate = new Date();

      year = curDate.getFullYear();
      mon = curDate.getMonth()+1;
      day = curDate.getDate();
   }

   /* reset the calendar */
   htmlStr = '<table width="100%"  border="0" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3">\
                    <tr bgcolor="#FFFFFF" class="'
                    + _calCSSWeekday +
                    '">\
                      <td width="14%"><div align="center" class="'
                      + _calCSSWeekend +
                      '">'
               + MSG_CALENDAR_SUN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_MON +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_TUE +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_WEN +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_THU +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_FRI +
                 '</div></td>\
                      <td width="14%" bgcolor="#FFFFFF"><div align="center">'
               + MSG_CALENDAR_SAT +
                 '</div></td>\
                    </tr>'
               + CalTableStrForWeek(year, mon, day) +
                 '</table>';

   document.getElementById("calRefalshTab").innerHTML = htmlStr;
   _calCurDivObj = document.getElementById("calCurSelected");
   if(day > 28)
   {
      if("TD" == _calCurDivObj.parentNode.tagName &&
         _calCSSCurDate == _calCurDivObj.parentNode.className)
         day = _calCurDivObj.innerHTML;
   }
   mon = CalAddZero(mon);
   day = CalAddZero(day);
   _calCurYear = year;
   _calCurMon = mon;
   document.getElementById("calMsg").innerHTML = year + "/" + mon + "/" + day; 
   document.getElementById("calContent").setAttribute("begyear", year);
   document.getElementById("calContent").setAttribute("begmon", mon);
   document.getElementById("calContent").setAttribute("begday", day);
   document.getElementById("calContent").setAttribute("func", func);
   document.getElementById("calCurYear").innerHTML = year;
   document.getElementById("calCurMon").innerHTML = _CalMonName[mon-1];
   setWeekSelect();
}

function CalValue()
{
   if(null != document.getElementById("calMsg"))
      return document.getElementById("calMsg").innerHTML;
   else
      return null;
}


function CalBGColorByWeekDay(weekday)
{
   switch(weekday % 7)
   {
      case 0:
         return "#FDF0F0";
      case 6:
         return "#F5F5F5";
      default:
         return "#FFFFFF";
   }
}