<!--// Hide Javascript
//-------------------------------------
// Javascript Date / Date Time picker
// Author: Ng Kim Boon
//-------------------------------------
var defaultFormat = "dd/MM/yyyy";
var dateFormat = defaultFormat;
var days = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var months = new Array( "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" );
var today = new Date();
today = new Date( today.getFullYear(), today.getMonth(), today.getDate() );
var currMonth;
var selectedDate = 0;

//deprecated function. Use showCalendar instead.
function show_calendar(str_target) {
  var targetForm = "document.forms['" + str_target.substring(0, str_target.indexOf(".")) + "']";
  var targetField = "elements['" + str_target.substring(str_target.indexOf(".")+1) + "']";
  showCalendar( eval(targetForm + "." + targetField ) );
}

function showCalendar(field, format, year, month ) {
  dateFormat = format!=null? format : defaultFormat;
  initCurrentMonth(field, year, month);
  render( field );
}

function showDateTime(field, format, year, month, hours, minutes ) {
  dateFormat = format!=null? format : defaultFormat + " hh:mm";
  initCurrentMonth(field, year, month);
  render( field, true );
}

function initCurrentMonth( field, y, m ) {
  var date = new DateFormat( dateFormat ).parseDate( field.value );
  if (date==null) date=today;
  if ( m==null || m<=0) m=date.getMonth() + 1;
  if ( y==null ) y=date.getFullYear();
  currMonth = new Month( y, m );
}

// ----DateFormat object start---
function DateFormat( pattern ) {
  this.pattern = pattern;
  this.format = doFormat;
  this.parseDate = doParseDate;
}

function doFormat( date ) {
  var f = this.pattern;
  var y=date.getFullYear();
  var m=date.getMonth()+1;
  var d=date.getDate();
  var h=date.getHours();
  var mi=date.getMinutes();
  var formatters = new Array( /yyyy/, y, /yy/, y.toString().substr(2), /y/, y,
      /MMM/, months[m-1], /MM/, (100+m).toString().substr(1), /M/, m,
      /dd/, (100+d).toString().substr(1), /d/, d,
      /hh/, (100+h).toString().substr(1), /h/, h,
      /mm/, (100+mi).toString().substr(1), /m/, mi );
  for (var i=0; i<formatters.length; i=i+2 ) f = f.replace( formatters[i], formatters[i+1] );
  return f;
}

function doParseDate( dateStr ) {
  if (dateStr==null || dateStr=="") return null;
  var formatters = new Array( new Array("yyyy","yy","y"), new Array("MM","M"), new Array("dd","d"),
      new Array("hh","h"), new Array("mm","m"), new Array("ss","s") );
  var values = new Array(0,0,0,0,0,0,0);
  for (var i=0; i<formatters.length; i++ ) {
    for (var j=0; j<formatters[i].length; j++ ) {
      var index = this.pattern.indexOf( formatters[i][j] );
      if (index>-1) {
        values[i] = dateStr.substr( index, formatters[i][j].length ) - 0;
        if (isNaN(values[i])) values[i]=0;
        break;
      }
    }
  }
  if (values[0]==0 || values[1]==0 || values[2]==0) return null;
  return new Date(values[0], values[1]-1, values[2], values[3], values[4], values[5], values[6] );
}
// ----DateFormat object end---

function Month( y, m ) {
  // properties
  this.year = y - 0;	// minus 0 to convert it to number
  this.month = m - 0;
  this.name = months[m-1];
  this.length = new Date( this.year, this.month, 0).getDate();
  this.firstDay = new Date(this.year, this.month-1, 1).getDay();
  this.add = monthAdd;
  this.getDate = monthGetDate;
}

function monthAdd( n ) {
  var d = new Date( this.year, this.month-1 + n, 1);
  return new Month( d.getFullYear(), d.getMonth()+1 );
}

function monthGetDate( day ) {
  return new Date( this.year, this.month-1, day );
}

function render(dateField, timeRequired) {
  var w= window.open( "", "calendar","width=290,height=230,resizable=1,status=0,menubar=0,scrollbars=0,fullscreen=0");
  var doc = w.document;

  doc.writeln('<html>');
  doc.writeln('<head>');
  doc.writeln('<title>Calendar</title>');
  doc.writeln('<style type="text/css">');
  doc.writeln('body {');
  doc.writeln('	font-size : 9pt;');
  doc.writeln('	font-family : Arial;');
  doc.writeln('	font-weight : bold;');
  doc.writeln('	font-style : normal;');
  doc.writeln('}');
  doc.writeln('td {');
  doc.writeln('	font-size : 9pt;');
  doc.writeln('	font-family : Arial;');
  doc.writeln('	font-weight : bold;');
  doc.writeln('	font-style : normal;');
  doc.writeln('}');
  doc.writeln('.TABLEHEAD {');
  doc.writeln('	color : white;');
  doc.writeln('	background-color : #117ACF;');
  doc.writeln('}');

  doc.writeln('.DAYS {');
  doc.writeln('	color : black;');
  doc.writeln('	background-color : #87cefa;');
  doc.writeln('}');

  doc.writeln('.NONE {');
  doc.writeln('	color : lightgrey;');
  doc.writeln('	background-color : white;');
  doc.writeln('}');

  doc.writeln('.BEFORETODAY {');
  doc.writeln('	font-weight : normal;');
  doc.writeln('	color : #000080;');
  doc.writeln('	background-color : aliceblue;');
  doc.writeln('	line-height: 20px;');
  doc.writeln('}');

  doc.writeln('.AFTERTODAY {');
  doc.writeln('	font-weight : normal;');
  doc.writeln('	color : #000080;');
  doc.writeln('	background-color : #DDEEFF;');
  doc.writeln('	line-height: 20px;');
  doc.writeln('}');

  doc.writeln('.TODAY {');
  doc.writeln('	color : red;');
  doc.writeln('	background-color : pink;');
  doc.writeln('	line-height: 20px;');
  doc.writeln('}');
  doc.writeln('</style>');


  doc.writeln('<script language="Javascript">');
  doc.writeln('var dateField;');
  doc.writeln('var dateFormat;');
  doc.writeln('var selectedDate;');
  doc.writeln('function init( field, format ) {');
  doc.writeln('  dateField = field;');
  doc.writeln('  dateFormat = format;');
  doc.writeln('}');
  doc.writeln('function returnDate(y, m, d) {');
  doc.writeln('  selectedDate = d;');
  doc.writeln('  // Put the date value back in the underlying form in the right format.');
  doc.writeln('  if(window.opener){');
  doc.writeln('    if (calForm.hour) dateField.value = dateFormat.format( new Date(y, m-1, d, calForm.hour.value-0, calForm.minute.value-0 ) )');
  doc.writeln('    else dateField.value = dateFormat.format( new Date(y, m-1, d) ); ');
  doc.writeln('  }');
  doc.writeln('  if (calForm.hour){');
  doc.writeln('      var calFormHour = calForm.hour.value-0; var calFormMinute = calForm.minute.value-0; ');
  doc.writeln('      if (calFormHour == 0 && calFormMinute == 0){ ');
  doc.writeln('         if ( confirm("The time is still 00:00, are you sure you want to proceed?")) self.close(); ');
  doc.writeln('      }');
  doc.writeln('      else self.close();');
  doc.writeln('  }');
  doc.writeln('  else self.close();');
  doc.writeln('  // self.close();');
  doc.writeln('}');
  doc.writeln('function gotoMonth(y, m) {');
  doc.writeln('  //alert(\'gotoMonth1\')' );
  doc.writeln('  window.opener.' + (timeRequired ? 'showDateTime' : 'showCalendar') + '(dateField, dateFormat.pattern, y, m)' );
  doc.writeln('}');
  doc.writeln('</script>');
  doc.writeln('</head>');

  doc.writeln('<body>');
  doc.writeln('<form name="calForm" onSubmit="gotoMonth(calForm.y.value, calForm.m.value);return false;">');
  doc.writeln('<table cellspacing="0" width="245" align="center">');
  doc.writeln('<td bgcolor="#117ACF">');
  doc.writeln('<table border="0" cellspacing="1" width="245">');

  var prevMonth = currMonth.add( -1 );
  var nextMonth = currMonth.add( 1 );

  doc.writeln('<tr class="TABLEHEAD" align="center">');
  doc.writeln('<td colspan="1"><a class="TABLEHEAD" href="javascript:gotoMonth(' + prevMonth.year + ', ' + prevMonth.month + ')">Prev</a></td>');
  doc.writeln('<td colspan="5" class="TABLEHEAD">');

  //doc.writeln('<select name="m" onChange="' + showCalendar + '(dateField, null, this.value, calForm.y.value)">');
  doc.writeln('<select name="m" onChange="gotoMonth(calForm.y.value, calForm.m.value);return false;">');
  for (var i=1; i<13; i++ ) {
    doc.writeln('<option value="' + i + '"' + ((i==currMonth.month)? ' selected="true">' : '>') + months[i-1] + '</option>');
  }
  doc.writeln('</select>');
  doc.writeln('<input type="text" onBlur="gotoMonth(calForm.y.value, calForm.m.value);return false;" size="4" maxlength="4" name="y" value="' + currMonth.year + '">');
  doc.writeln('</td>');

  doc.writeln('<td colspan="1"><a class="TABLEHEAD" href="javascript:gotoMonth(' + nextMonth.year + ', ' + nextMonth.month + ')">Next</a></td>');
  doc.writeln('</tr>');

  // writes the days of the week
  doc.writeln('<tr align="center">');
  for(var d=0;d<7;d++){
    doc.writeln('<td width="14%" class="DAYS"><b>&nbsp;' + days[d] + '&nbsp;</b></td>');
  }
  doc.writeln('</tr>');

  var daycounter = 1;
  var cls = "";
  // allows month to possibly span over 6 weeks
  for(var i=0; i<6; i++){
    // Do not continue if already passed last day
    if ( daycounter > currMonth.length ) break;

    // if we have not exceeded number of days in month
    doc.writeln('<tr align="center">');

    // display each day of the week
    for(var j=0;j<7;j++){
      // First choose different style for different period.

      // Not yet the first day of the month, or it has exceeded the last day in the month.
      if( (i==0 && j<currMonth.firstDay) || daycounter>currMonth.length ) cls = 'class="NONE"';

      // Past date
      else if(currMonth.getDate(daycounter)<today) cls = 'class="BEFORETODAY"';

      // Future date
      else if(currMonth.getDate(daycounter)>today) cls = 'class="AFTERTODAY"';

      // Current date
      else {
        cls = 'class="TODAY"';
        selectedDate = daycounter;
      };

      doc.writeln('<td ' + cls + '>');
      if (cls!='class="NONE"') {
        doc.writeln('<a href="javascript:returnDate(' + currMonth.year + "," + currMonth.month + ',' + daycounter + ')" ' + cls + '>' + daycounter + '</a>');
        daycounter++;
      }
      doc.writeln('</td>');

    }//for
    doc.writeln('</tr>');
  }//for

  doc.writeln('</table>');
  doc.writeln('<script>');
  doc.writeln('  selectedDate = ' + selectedDate + ';');
  doc.writeln('</script>');

  if (timeRequired) {
    doc.writeln('<tr><td align="right">');
    doc.writeln('<table cellspacing="0" width="245" align="center">');
    doc.writeln('<tr><td align="left" width="30%">');
    doc.writeln('<input type=button value="Cancel" onClick="javascript:self.close();">');
    doc.writeln('</td><td align="right">');
    doc.writeln('&nbsp;&nbsp;');
    doc.writeln('Time: <select name="hour">');
    for (var i=0; i<24; i++) {
      doc.writeln( '<option value="' + i + '">' + (100+i).toString().substring(1) + '</option>');
    }
    doc.writeln('</select>:');
    doc.writeln('<select name="minute">');
    for (var i=0; i<60; i++) {
      doc.writeln( '<option value="' + i + '">' + (100+i).toString().substring(1) + '</option>');
    }
    doc.writeln('</select>');
    doc.writeln('&nbsp;<input type=button value="OK" onClick="javascript:returnDate(' + currMonth.year + "," + currMonth.month + ',selectedDate)" class="button">');
    doc.writeln('</td></tr>');
    doc.writeln('</table>');
    doc.writeln('</td></tr>');
  }
  doc.writeln('</table>');
  doc.writeln('</form>');
  doc.writeln('</body>');
  doc.writeln('</html>');
  doc.close();
  w.init( dateField, new DateFormat(dateFormat) );
}

//Added for the div calendar

var dateField;
var timeRequired = false;

var divContent='<style type="text/css">';

divContent+='.CALENDAR_BODY {';
divContent+='	font-size : 9pt;';
divContent+='	font-family : Arial;';
divContent+='	font-weight : bold;';
divContent+='	font-style : normal;';
divContent+='}';

divContent+='.CALENDAR_TD {';
divContent+='	font-size : 9pt;';
divContent+='	font-family : Arial;';
divContent+='	font-weight : bold;';
divContent+='	font-style : normal;';
divContent+='}';

divContent+='.CALENDAR_TABLEHEAD {';
divContent+='	color : white;';
divContent+='	background-color : #117ACF;';
divContent+='}';

divContent+='.CALENDAR_DAYS {';
divContent+='	color : black;';
divContent+='	background-color : #87cefa;';
divContent+='}';

divContent+='.CALENDAR_TIMES {';
divContent+='	color : black;';
divContent+='	background-color : #87cefa;';
divContent+='}';

divContent+='.CALENDAR_NONE {';
divContent+='	color : lightgrey;';
divContent+='	background-color : white;';
divContent+='}';

divContent+='.CALENDAR_BEFORETODAY {';
divContent+='	font-weight : normal;';
divContent+='	color : #000080;';
divContent+='	background-color : aliceblue;';
divContent+='	line-height: 20px;';
divContent+='}';

divContent+='.CALENDAR_AFTERTODAY {';
divContent+='	font-weight : normal;';
divContent+='	color : #000080;';
divContent+='	background-color : #DDEEFF;';
divContent+='	line-height: 20px;';
divContent+='}';

divContent+='.CALENDAR_TODAY {';
divContent+='	color : red;';
divContent+='	background-color : pink;';
divContent+='	line-height: 20px;';
divContent+='}';
divContent+='</style>';

divContent+="<div id='Calendar' style='position:absolute; top:0px; left:0px; z-index:100; display:none;'></div>";
divContent+="<iframe id='CalendarIframe' scrolling='no'; frameborder='0'; style='position:absolute; top:0px; left:0px; bottom:0px; right:0px; display:none;'></iframe >";
document.writeln(divContent);

function HiddenCalendar()
{
  document.getElementById("Calendar").style.display="none";
  document.getElementById('CalendarIframe').style.display="none";
}

function writeCalendar()
{
  divContent='<body class="CALENDAR_BODY">';
  divContent+='<table cellspacing="0" width="245" align="center">';
  divContent+='<td class="CALENDAR_TD" bgcolor="#117ACF">';
  divContent+='<table border="0" cellspacing="1" width="245">';

  var prevMonth = currMonth.add( -1 );
  var nextMonth = currMonth.add( 1 );

  divContent+='<tr class="CALENDAR_TABLEHEAD" align="center">';
  divContent+='<td colspan="1" class="CALENDAR_TABLEHEAD"><a href="javascript:gotoMonth2(' + prevMonth.year + ', ' + prevMonth.month + ')">Prev</a></td>';
  divContent+='<td colspan="4" class="CALENDAR_TABLEHEAD">';
  divContent+='<select id="CALENDAR__month" name="CALENDAR__month" onChange="gotoMonth2(document.getElementById(\'CALENDAR__year\').value, document.getElementById(\'CALENDAR__month\').value);return false;">';
  for (var i=1; i<13; i++ )
  {
    divContent+='<option value="' + i + '"' + ((i==currMonth.month)? ' selected="true">' : '>') + months[i-1] + '</option>';
  }
  divContent+='</select>';
  divContent+='&nbsp;&nbsp;<input type="text" onKeyDown="if(event.keyCode==13) gotoMonth2(document.getElementById(\'CALENDAR__year\').value, document.getElementById(\'CALENDAR__month\').value);" onBlur="gotoMonth2(document.getElementById(\'CALENDAR__year\').value, document.getElementById(\'CALENDAR__month\').value);return false;" size="4" maxlength="4" name="CALENDAR__year" id="CALENDAR__year" value="' + currMonth.year + '">';
  divContent+='</td>';

  divContent+='<td colspan="1" class="CALENDAR_TABLEHEAD"><a href="javascript:gotoMonth2(' + nextMonth.year + ', ' + nextMonth.month + ')">Next</a></td>';
  divContent+="<td><img src='./images/close.gif' onclick='javascript:HiddenCalendar()' title='Close'></td>";
  divContent+='</tr>';

  // writes the days of the week
  divContent+='<tr align="center">';
  for(var d=0;d<7;d++){
    divContent+='<td width="14%" class="CALENDAR_DAYS"><b>&nbsp;' + days[d] + '&nbsp;</b></td>';
  }
  divContent+='</tr>';

  var daycounter = 1;
  var cls = "";
  // allows month to possibly span over 6 weeks
  for(var i=0; i<6; i++){
    // Do not continue if already passed last day
    if ( daycounter > currMonth.length ) break;

    // if we have not exceeded number of days in month
    divContent+='<tr align="center">';

    // display each day of the week
    for(var j=0;j<7;j++){
      // First choose different style for different period.

      // Not yet the first day of the month, or it has exceeded the last day in the month.
      if( (i==0 && j<currMonth.firstDay) || daycounter>currMonth.length ) cls = 'class="CALENDAR_NONE"';

      // Past date
      else if(currMonth.getDate(daycounter)<today) cls = 'class="CALENDAR_BEFORETODAY"';

      // Future date
      else if(currMonth.getDate(daycounter)>today) cls = 'class="CALENDAR_AFTERTODAY"';

      // Current date
      else {
        cls = 'class="CALENDAR_TODAY"';
        selectedDate = daycounter;
      };

      divContent+='<td ' + cls + '>';
      if (cls!='class="CALENDAR_NONE"') {
        divContent+='<a href="javascript:returnDate(' + currMonth.year + "," + currMonth.month + ',' + daycounter + ')" ' + cls + '>' + daycounter + '</a>';
        daycounter++;
      }
      divContent+='</td>';

    }//for
    divContent+='</tr>';
  }//for


  if (timeRequired) {
    divContent+='<tr><td colspan=7 class="CALENDAR_TIMES" align="right">';
    divContent+='&nbsp;&nbsp;';
    divContent+='Time: <select name="CALENDAR__hour">';
    for (var i=0; i<24; i++) {
      divContent+= '<option value="' + i + '">' + (100+i).toString().substring(1) + '</option>';
    }
    divContent+='</select>:';
    divContent+='<select name="CALENDAR__minute">';
    for (var i=0; i<60; i++) {
      divContent+= '<option value="' + i + '">' + (100+i).toString().substring(1) + '</option>';
    }
    divContent+='</select>';
    divContent+='&nbsp;<input type=button value="OK" onClick="javascript:returnDate(' + currMonth.year + "," + currMonth.month + ',' + selectedDate + ')" class="button">';
    divContent+='</td></tr>';
  }

  divContent+='</table>';
  divContent+='</td>';

  divContent+='</table>';
  divContent+='</body>';
  document.getElementById("Calendar").innerHTML=divContent;

  var x,y,h;
  var o = dateField;
  x=o.offsetLeft;
  y=o.offsetTop;
  h=o.offsetHeight;
  while(o=o.offsetParent)
  {
    x+=o.offsetLeft;
    y+=o.offsetTop;
  }

  var divCalendar 					= document.getElementById('Calendar');
  var divCalendarStyle 			= divCalendar.style;
  divCalendarStyle.left			=	x;
  divCalendarStyle.top			=	y+h;
  divCalendarStyle.display		=	"";

  var calendarIframe 					= document.getElementById('CalendarIframe');
  var calendarIframeStyle 		= calendarIframe.style;
  calendarIframeStyle.width 				= divCalendar.offsetWidth;
  calendarIframeStyle.height 			= divCalendar.offsetHeight;
  calendarIframeStyle.top 		= divCalendar.offsetTop;
  calendarIframeStyle.left 		= divCalendar.offsetLeft;
  calendarIframeStyle.zIndex 	= divCalendarStyle.zIndex - 1;
  calendarIframeStyle.display = "";
}


function returnDate(y, m, d)
{
  // Put the date value back in the underlying form in the right format.');
  if (document.getElementById('CALENDAR__hour'))
  {
    var hour = document.getElementById('CALENDAR__hour').value-0;
    var minute = document.getElementById('CALENDAR__minute').value-0;
    if (hour == 0 && minute == 0)
    {
      if ( confirm("The time is still 00:00, are you sure you want to proceed?"))
      {
        dateField.value = dateFormat.format( new Date(y, m-1, d, document.getElementById('CALENDAR__hour').value-0, document.getElementById('CALENDAR__minute').value-0 ) );
        HiddenCalendar();
      }
    }
    else
    {
      dateField.value = dateFormat.format( new Date(y, m-1, d, document.getElementById('CALENDAR__hour').value-0, document.getElementById('CALENDAR__minute').value-0 ) );
      HiddenCalendar();
    }
  }
  else
  {
    dateField.value = dateFormat.format( new Date(y, m-1, d) );
    HiddenCalendar();
  }
}

function gotoMonth2(y, m)
{
  //alert('gotoMonth2');
  //alert(y);
  //alert(m);
  initCurrentMonthForDivCalendar(y, m);
  writeCalendar();
}

function showDivCalendar(field, format, year, month ) {
  timeRequired = false;
  dateField = field;
  dateFormat = new DateFormat(format!=null? format : defaultFormat);
  initCurrentMonthForDivCalendar(year, month);
  writeCalendar();
}

function showDivDateTime(field, format, year, month, hours, minutes ) {
  timeRequired = true;
  dateField = field;
  dateFormat = new DateFormat(format!=null? format : defaultFormat + " hh:mm");
  initCurrentMonthForDivCalendar(year, month);
  writeCalendar();
}

function initCurrentMonthForDivCalendar( y, m ) {
  var date = new DateFormat( dateFormat.pattern ).parseDate( dateField.value );
  if (date==null) date=today;
  if ( m==null || m<=0) m=date.getMonth() + 1;
  if ( y==null ) y=date.getFullYear();
  currMonth = new Month( y, m );
  selectedDate = date.getDate();
}

//-->