// When you want to include this popup in a page you MUST:
// 1) create a named div for the popup to attach to in the page.
//    It should look like <div id="mypopup"></div>. Do not put
//    the div anywhere in a table. It should be outside tables.
// 2) create a stylesheet id selector entry for your div. It
//    MUST be position absolute and should look like:
//    #mypopup{ position: absolute;
//              visibility: hidden;
//              background-color: "#99BDDF";
//              layer-background-color: "#99BDDF"; }
// 3) call the popup with code that looks like
//    <a href="#" onClick="calPopup(this,'mypopup',-175,15,'additemform','valiDate');">
//    where -175 and 15 are your desired x and y offsets from the link.
//    The final argument indicates the validation script to run after
//    the popup makes a change to the form. This argument is optional.

var nn4 = (document.layers) ? true : false;
var ie  = (document.all) ? true : false;
var dom = (document.getElementById && !document.all) ? true : false;
var popups = new Array(); // keeps track of popup windows we create
var calHtml = '';

// language and preferences
wDay = new Array('일요일','월요일','화요일','수요일','목요일','금요일','토요일');
wDayAbbrev = new Array('<font color=#CC0000>일</font>','월','화','수','목','금','<font color=#0000CC>토</font>');
wMonth = new Array('1','2','3','4','5','6','7','8','9','10','11','12');
wOrder = new Array('첫번째','두번째','세번째','네번째','마지막');
wStart = 0;

function calPopup(obj, id, xOffset, yOffset, inputName, validationScript) {
   attachListener(id);
   registerPopup(id);
   calHtml = makeCalHtml(id,null,null,null,inputName,validationScript);
   writeLayer(id,calHtml);
   setLayerPos(obj,id,xOffset,yOffset);
   showLayer(id);
   return true;
}

function attachListener(id) {
   var layer = new pathToLayer(id)
   if (layer.obj.listening == null) {
      document.oldMouseupEvent = document.onmouseup;
      if (document.oldMouseupEvent != null) {
         document.onmouseup = new Function("document.oldMouseupEvent(); hideLayersNotClicked();");
      } else {
         document.onmouseup = hideLayersNotClicked;
      }
      layer.obj.listening = true;
   }
}

function registerPopup(id) {
   // register this popup window with the popups array
   var layer = new pathToLayer(id);
   if (layer.obj.registered == null) {
      var index = popups.length ? popups.length : 0;
      popups[index] = layer;
      layer.obj.registered = 1;
   }
}

function makeCalHtml(id, calYear, calMonth, calDay, inputName, validationScript) {
   var todayDate = new Date();

   //var arrDate = eval(inputName).value.split("/");
   //var arrDate = todayDate.

   //if( calYear == null || calYear == "" ) calYear = arrDate[0];
   if( calYear == null || calYear == "" ) calYear = todayDate.getFullYear();
   //if( calMonth == null || calMonth == "" ) calMonth = arrDate[1];
   if( calMonth == null || calMonth == "" ) calMonth = todayDate.getMonth()+1;
   //if( calDay == null || calDay == "" ) calDay = arrDate[2];
   if( calDay == null || calDay == "" ) calDay = todayDate.getDate();
   var daysInMonth = new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);
   if ((calYear % 4 == 0 && calYear % 100 != 0) || calYear % 400 == 0) {
      daysInMonth[2] = 29;
   }

   var calDate = new Date(calYear,calMonth-1,calDay);

   //-----------------------------------------
   // check if the currently selected day is
   // more than what our target month has
   //-----------------------------------------
   if (calMonth < calDate.getMonth()+1) {
     calDay = calDay-calDate.getDate();
     calDate = new Date(calYear,calMonth-1,calDay);
   }

   var calNextYear  = calDate.getMonth() == 11 ? calDate.getFullYear()+1 : calDate.getFullYear();
   var calNextMonth = calDate.getMonth() == 11 ? 1 : calDate.getMonth()+2;
   var calLastYear  = calDate.getMonth() == 0 ? calDate.getFullYear()-1 : calDate.getFullYear();
   var calLastMonth = calDate.getMonth() == 0 ? 12 : calDate.getMonth();
   
   var calPlusYear = calDate.getFullYear()+1;
   var calMinusYear = calDate.getFullYear()-1;

   var todayDate = new Date();

   //---------------------------------------------------------
   // this relies on the javascript bug-feature of offsetting
   // values over 31 days properly. Negative day offsets do NOT
   // work with Netscape 4.x, and negative months do not work
   // in Safari. This works everywhere.
   //---------------------------------------------------------
   var calStartOfThisMonthDate = new Date(calYear,calMonth-1,1);
   var calOffsetToFirstDayOfLastMonth = calStartOfThisMonthDate.getDay() >= wStart ? calStartOfThisMonthDate.getDay()-wStart : 7-wStart-calStartOfThisMonthDate.getDay()
   if (calOffsetToFirstDayOfLastMonth > 0) {
      var calStartDate = new Date(calLastYear,calLastMonth-1,1); // we start in last month
   } else {
      var calStartDate = new Date(calYear,calMonth-1,1); // we start in this month
   }
   var calStartYear = calStartDate.getFullYear();
   var calStartMonth = calStartDate.getMonth();
   var calCurrentDay = calOffsetToFirstDayOfLastMonth ? daysInMonth[calStartMonth+1]-(calOffsetToFirstDayOfLastMonth-1) : 1;

   var html = '';
   // writing the <html><head><body> causes some browsers (Konquerer) to fail

	html += "<style type='text/css'>" ;
	html += "#calendarPopup { position: absolute; visibility: hidden; z-index: 2; }";
	html += ".stylecal { font-size: 8pt; font-family: Tahoma; color: #000000; line-height: 9pt; }";
	html += ".notmonth { font-size: 8pt; font-family: Tahoma; color: #FFFFFF; line-height: 9pt; }";
	html += ".futuremonth { font-size: 8pt; font-family: Tahoma; color: #ffffff; line-height: 9pt; }";
	html += "A.notmonth:link { font-size: 8pt; font-family: Tahoma; color: #FFFFFF; line-height: 9pt;  text-decoration: none; }";
	html += "A.notmonth:visited { font-size: 8pt; font-family: Tahoma; color: #FFFFFF; line-height: 9pt;  text-decoration: none; }";
	html += "A.notmonth:hover { font-size: 8pt; font-family: Tahoma; color: #000000; line-height: 9pt; text-decoration: none; }";
	html += "A.stylecal:link { font-size: 8pt; font-family: Tahoma; color: #000000; line-height: 9pt;  text-decoration: none; }";
	html += "A.stylecal:visited { font-size: 8pt; font-family: Tahoma; color: #000000; line-height: 9pt;  text-decoration: none; }";
	html += "A.stylecal:hover { font-size: 8pt; font-family: Tahoma; color: #000000; line-height: 9pt; text-decoration: none; }";
	html += "</style>" ;


	html += '<table border=0 cellpadding=0 cellspacing=0 bgcolor="#ffffff" align="" width="250">\n';
	html += '<tr height=9>\n';
	html += '<td style="background:url(/images/com/calendar_bg.gif) top left; width:12px; height:7px;"></td>\n';
	html += '<td style="background:url(/images/com/calendar_bg.gif) top center;"><img src="/images/com/blank.gif" width="1" height="1"></td>\n';
	html += '<td style="background:url(/images/com/calendar_bg.gif) top right; width:12px;" ></td>\n';
	html += '</tr><tr>\n';
	html += '<td style="background:url(/images/com/calendar_bg.gif) 0 -30px; width:12px;"></td>\n';
	html += '<td>\n';
   // inner
   html += '<table width=100% cellpadding="0" cellspacing="1" border="0" bgcolor="#FFFFFF">\n';
   html += '<tr>\n';
   html += '<td valign="top">\n';
   html += '<table width=100% cellpadding="2" cellspacing="1" border="0">\n';
   html += '<tr>\n';
   html += '<td class="stylecal" align="center" colspan="7"><table width=100% cellpadding="0" cellspacing="1" border="0"><tr>\n';
   html += '<td align="left"><a class="stylecal" href="#" onClick="updateCal(\''+id+'\','+calMinusYear+','+calMonth+','+calDay+',\''+inputName+'\',\''+validationScript+'\'); return false;"><img src="/images/com/cal_pre01.gif" border="0"></a>\n';
   html += '<a class="stylecal" href="#" onClick="updateCal(\''+id+'\','+calLastYear+','+calLastMonth+','+calDay+',\''+inputName+'\',\''+validationScript+'\'); return false;"><img src="/images/com/cal_pre02.gif" border="0"></a></td>\n';
   html += '<td align="center" style="color:#00389a;">'+calDate.getFullYear()+'.'+wMonth[calDate.getMonth()]+ '</bold></td>\n';
   html += '<td align="right"><a class="stylecal" href="#" onClick="updateCal(\''+id+'\','+calNextYear+','+calNextMonth+','+calDay+',\''+inputName+'\',\''+validationScript+'\'); return false;"><img src="/images/com/cal_next02.gif" border="0"></a>\n';
   html += '<a class="stylecal" href="#" onClick="updateCal(\''+id+'\','+calPlusYear+','+calMonth+','+calDay+',\''+inputName+'\',\''+validationScript+'\'); return false;"><img src="/images/com/cal_next01.gif" border="0"></a>\n';
   html += '</td></tr></table>\n';
   html += '</td></tr>\n';
   for (var row=1; row <= 7; row++) {
      // check if we started a new month at the beginning of this row
      upcomingDate = new Date(calStartYear,calStartMonth,calCurrentDay);
      if (upcomingDate.getDate() <= 8 && row > 5) {
         continue; // skip this row
      }

      html += '<tr>\n';
      for (var col=0; col < 7; col++) {

         var tdColor = '"#F3F3F3"';
		 var fontColor = '"#000000"'; //#CC0000, #0000CC
		 if (col == 0)
		 {
			 fontColor = '"#fa2100"';
		 }
		 if (col == 6)
		 {
			 fontColor = '"#0056f6"';
		 }
         if (row == 1) {
            tdColor = '"#cde2ff"';
            html += '<td bgcolor='+tdColor+' align="center" class="stylecal"><font color='+fontColor+'>'+wDayAbbrev[(wStart+col)%7]+'</font></td>\n';
         } else {
            var hereDate = new Date(calStartYear,calStartMonth,calCurrentDay);
            var hereDay = hereDate.getDate();
            var aClass = '"stylecal"';

            if (hereDate.getYear() == todayDate.getYear() && hereDate.getMonth() == todayDate.getMonth() && hereDate.getDate() == todayDate.getDate()) {
               tdColor = '"#ffeb74"';
            }
            if (hereDate.getMonth() != calDate.getMonth()) {
               tdColor = '"#ffffff"';
               var aClass = '"notmonth"';
            }

            html += '<td style="padding:2px 5px 2px 5px" bgcolor='+tdColor+' align="right" onClick="changeFormDate('+hereDate.getFullYear()+','+(hereDate.getMonth()+1)+','+hereDate.getDate()+',\''+inputName+'\',\''+validationScript+'\'); hideLayer(\''+id+'\'); return false;" onMouseOver="this.className=\'row_on_a\'" onMouseOut="this.className=\'row_off\'"><a class='+aClass+' href="#" onClick="changeFormDate('+hereDate.getFullYear()+','+(hereDate.getMonth()+1)+','+hereDate.getDate()+',\''+inputName+'\',\''+validationScript+'\'); hideLayer(\''+id+'\'); return false;"><font color='+fontColor+'>'+hereDay+'</font></a></td>\n';
            calCurrentDay++;
         }
      }
      html += '</tr>\n';
   }
   html += '<tr>\n';
   html += '<td align="center" bgcolor=#FFFFFF colspan="7" onClick="updateCal(\''+id+'\','+todayDate.getFullYear()+','+(todayDate.getMonth()+1)+','+todayDate.getDate()+',\''+inputName+'\',\''+validationScript+'\'); return false;"><a class="stylecal" href="#" onClick="updateCal(\''+id+'\','+todayDate.getFullYear()+','+(todayDate.getMonth()+1)+','+todayDate.getDate()+',\''+inputName+'\',\''+validationScript+'\'); return false;">오늘로 이동</a></td>\n';
   html += '</tr>\n';
   html += '</table>\n';
   html += '</td></tr>\n';
   html += '</table>\n';
// end of inner
html += '</td>\n';
html += '<td style="background:url(/images/com/calendar_bg.gif) right -30px; width:12px;"></td>\n';
html += '</tr><tr height=9>\n';
html += '<td style="background:url(/images/com/calendar_bg.gif) bottom left; width:12px;"></td>\n';
html += '<td style="background:url(/images/com/calendar_bg.gif) bottom center; width:12px;"><img src="/images/com/blank.gif"></td>\n';
html += '<td style="background:url(/images/com/calendar_bg.gif) bottom right; width:12px;"></td>\n';
html += '</tr>\n';
html += '</table>\n';
   return html;
}

function updateCal(id, calYear, calMonth, calDay, inputName, validationScript) {
   calHtml = makeCalHtml(id,calYear,calMonth,calDay,inputName,validationScript);
  
   writeLayer(id,calHtml);
}

function writeLayer(id, html) {
   var layer = new pathToLayer(id);
   if (nn4) {
      layer.obj.document.open();
      layer.obj.document.write(html);
      layer.obj.document.close();
   } else {
      layer.obj.innerHTML = '';
      layer.obj.innerHTML = html;
   }
}

function setLayerPos(obj, id, xOffset, yOffset) {
   var newX = 0;
   var newY = 0;
   if (obj.offsetParent) {
      // if called from href="setLayerPos(this,'example')" then obj will
      // have no offsetParent properties. Use onClick= instead.
      while (obj.offsetParent) {
         newX += obj.offsetLeft-23;
         newY += obj.offsetTop-19;
         obj = obj.offsetParent;
      }
   } else if (obj.x) {
      // nn4 - only works with "a" tags
      newX += obj.x;
      newY += obj.y;
   }
  // var browserWidth = document.body.clientWidth + document.body.scrollLeft;
  // var browserHeight = document.body.clientHeight + document.body.scrollTop;  
  //alert("newX :: " + newX);
  //alert("newY :: " + newY);
  

   // apply the offsets
   newX += xOffset;
   newY += yOffset;

   // apply the new positions to our layer
//   var layer = new pathToLayer(id);
   var layer = document.getElementById( id );
   if (nn4) {
      layer.style.left = newX;
      layer.style.top  = newY;
   } else {
      // the px avoids errors with doctype strict modes
      layer.style.left = newX + 'px';
      layer.style.top  = newY + 'px';
   }
}

function hideLayersNotClicked(e) {
   if (!e) var e = window.event;
   e.cancelBubble = true;
   if (e.stopPropagation) e.stopPropagation();
   if (e.target) {
      var clicked = e.target;
   } else if (e.srcElement) {
      var clicked = e.srcElement;
   }

   // go through each popup window,
   // checking if it has been clicked
   for (var i=0; i < popups.length; i++) {
      if (nn4) {
         if ((popups[i].style.left < e.pageX) &&
             (popups[i].style.left+popups[i].style.clip.width > e.pageX) &&
             (popups[i].style.top < e.pageY) &&
             (popups[i].style.top+popups[i].style.clip.height > e.pageY)) {
            return true;
         } else {
            hideLayer(popups[i].obj.id);
            return true;
         }
      } else if (ie) {
         while (clicked.parentElement != null) {
            if (popups[i].obj.id == clicked.id) {
               return true;
            }
            clicked = clicked.parentElement;
         }
         hideLayer(popups[i].obj.id);
         return true;
      } else if (dom) {
         while (clicked.parentNode != null) {
            if (popups[i].obj.id == clicked.id) {
               return true;
            }
            clicked = clicked.parentNode;
         }
         hideLayer(popups[i].obj.id);
         return true;
      }
      return true;
   }
   return true;
}

function pathToLayer(id) {
   if (nn4) {
      this.obj = document.layers[id];
      this.style = document.layers[id];
   } else if (ie) {
      this.obj = document.all[id];
      this.style = document.all[id].style;
   } else {
      this.obj = document.getElementById(id);
      this.style = document.getElementById(id).style;
   }
}

function showLayer(id) {
   var layer = new pathToLayer(id)
   layer.style.visibility = "visible";
   selectbox_hidden(id);
   //hideSelectList();
}
 
function hideLayer(id) {
   var layer = new pathToLayer(id);
   layer.style.visibility = "hidden";
   selectbox_visible();				//hidden 되어 있는  selectbox 보이게함
   //showSelectList();
}

function changeFormDate(changeYear,changeMonth,changeDay,inputName,validationScript) {
	if(changeMonth < 10) changeMonth = "0" + changeMonth;
	if(changeDay < 10) changeDay = "0" + changeDay;

	eval(inputName).value = changeYear + "-" + changeMonth + "-" + changeDay;
	if (validationScript) {
		eval(validationScript+"('"+inputName+"')"); // to update the other selection boxes in the form
	}
}

    // Internet Explorer 
    // layer가 selectbox와 겹쳤을때 selectbox를 hidden시켜버리는 함수
    //  : 
    // <div id=LayerID style="display:none; position:absolute;" onpropertychange="selectbox_hidden('LayerID')"> 
    function selectbox_hidden(layer_id) 
    { 
        var ly = eval(layer_id); 

       // 레이어 좌표 
        var ly_left  = ly.offsetLeft; 
        var ly_top    = ly.offsetTop; 
        var ly_right  = ly.offsetLeft + ly.offsetWidth; 
        var ly_bottom = ly.offsetTop + ly.offsetHeight; 

        // 셀렉트박스의 좌표 
        var el; 

        for (i=0; i<document.forms.length; i++) { 
            for (k=0; k<document.forms[i].length; k++) { 
                el = document.forms[i].elements[k];    
                if (el.type == "select-one" || el.type == "select-multiple") { 
                    var el_left = el_top = 0; 
                    var obj = el; 
                    if (obj.offsetParent) { 
                        while (obj.offsetParent) { 
                            el_left += obj.offsetLeft; 
                            el_top  += obj.offsetTop; 
                            obj = obj.offsetParent; 
                        } 
                    } 
                    el_left  += el.clientLeft; 
                    el_top    += el.clientTop; 
                    el_right  = el_left + el.clientWidth; 
                    el_bottom = el_top + el.clientHeight; 

                    //좌표를 따져 레이어가 셀렉트 박스를 침범했으면 셀렉트 박스를 hidden 시킴
                    if ( (el_left >= ly_left && el_top >= ly_top && el_left <= ly_right && el_top <= ly_bottom) || 
                        (el_right >= ly_left && el_right <= ly_right && el_top >= ly_top && el_top <= ly_bottom) || 
                        (el_left >= ly_left && el_bottom >= ly_top && el_right <= ly_right && el_bottom <= ly_bottom) || 
                        (el_left >= ly_left && el_left <= ly_right && el_bottom >= ly_top && el_bottom <= ly_bottom) ||
						(el_bottom >= ly_bottom && el_top <= ly_bottom)) 
                        el.style.visibility = 'hidden'; 
					if (el_top >= ly_top && el_top <= ly_bottom)
					{
						if (el_right >= ly_left &&el_left <= ly_right)
						{
							  el.style.visibility = 'hidden'; 
						}
					}
                } 
            } 
        } 
    } 

    //감추어진 셀렉트 박스를 모두 보이게 함
    function selectbox_visible() 
    { 
        for (i=0; i<document.forms.length; i++) { 
            for (k=0; k<document.forms[i].length; k++) { 
                el = document.forms[i].elements[k];    
                if ((el.type == "select-one"  || el.type == "select-multiple" )&& el.style.visibility == 'hidden') 
                    el.style.visibility = 'visible'; 
            } 
        } 
    }