// Javascript <div> based popup calendar.

// (c) 2005 Justin R Carlson <justin.carlson@gmail.com>



// Setup your prefered date format

var DateFormat = 'MM/DD/YYYY'



// Setup a click function for static calender day clicks

function StaticCalClick(date){

alert(date);

}



// Setup a function for checking events on dates

function checkEvents(m,d,y){

return true;

}





////////////////////////////////////////////////////////////

//              CAL SELECTOR CODE FOLLOWS BELOW                       //

////////////////////////////////////////////////////////////



var clientX = 175; 

var clientY = 175; 



if (document.layers) { 

document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = captureMousePosition;

} else if (document.all) { 

document.onmousemove = captureMousePosition;

} else if (document.getElementById) { 

document.onmousemove = captureMousePosition;

}



function captureMousePosition(e) {

if (document.layers) {

clientX = e.pageX;

clientY = e.pageY;

} else if (document.all) {

clientX = window.event.x+document.body.scrollLeft+70;

clientY = window.event.y+document.body.scrollTop;

} else if (document.getElementById) {

clientX = e.pageX;

clientY = e.pageY;

}

}





var dayCounter=0;

var sessionX = 0;

var sessionY = 0;

var staticDayCounter=0;



function getTodayArray(){

var date = new Date();

var d = date.getDate();

var m = date.getMonth() + 1;

var yy = date.getYear();

var year = (yy < 1000) ? yy + 1900 : yy;

var dateArray =  new Array(m,d,year);

return dateArray;

}

function getTodayString(){

var date = new Date();

var d = date.getDate();

var m = date.getMonth() + 1;

var yy = date.getYear();

var year = (yy < 1000) ? yy + 1900 : yy;

return m + '/' + d + '/' + year;

}

function todaysCalHTML(fieldID){

var x;

dayCounter = 0;

var thisHTML = '';

var dateArray = getTodayArray();

var sday = dayOfWeek('0' + dateArray[0],'01',dateArray[2]);

thisHTML+='<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="3">';

thisHTML+='<tr><td width="25">';

thisHTML+='<div class="dayBox" id="dayBoxsub" onMouseOver="mouseOn(this.id);" onMouseOut="mouseOff(this.id);" ';

thisHTML+='onClick="calHTML(' + (dateArray[0]-1) +',' + dateArray[1] + ',' + dateArray[2] + ',\'' + fieldID + '\');">-</div></td>';

thisHTML+='<td align="center" colspan="5"><div id="calMonth" class="calHead" onClick="showDrops(\'calDrops\',\'calMonth\')">' + monthName(dateArray[0]) + ' ' + dateArray[2] + '</div>';

thisHTML+='<div id="calDrops" class="calDrops" style="display:none">';

thisHTML+='<select  name="calMonthdropper" onChange="calHTML(this.value,' + dateArray[1] + ',' + dateArray[2] + ',\'' + fieldID + '\');">';

var mz=1;

for(mz=1;mz<13;mz++){

thisHTML+='<option value="' + mz + '"';

if(mz==dateArray[0]) thisHTML+=' SELECTED';

thisHTML+='>' + monthName(mz) + '</option>';

}

thisHTML+='</select>';

thisHTML+='<select name="calYeardroper" onChange="calHTML(' +dateArray[0] + ',' + dateArray[1] + ',this.value,\'' + fieldID + '\');">';

var ms=(dateArray[2]-25);var my=0;var me=(parseInt(dateArray[2])+26);

for(my=ms;my<me;my++){

thisHTML+='<option value="' + my + '"';

if(my==dateArray[2]) thisHTML+=' SELECTED';

thisHTML+='>' + my + '</option>';

}



thisHTML+='</select>';

thisHTML+='</div></td>';

thisHTML+='<td width="25">';

thisHTML+='<div class="dayBox" id="dayBoxadd" onMouseOver="mouseOn(this.id);" onMouseOut="mouseOff(this.id);" ';

thisHTML+='" class="dayBox" onClick="calHTML(' + (parseInt(dateArray[0])+1) +',' + dateArray[1] + ',' + dateArray[2] + ',\'' + fieldID + '\');">+</div></td></tr>';

thisHTML+='<tr>';

thisHTML+='<td><div class="calHead2">Sun</div></td>';

thisHTML+='<td><div class="calHead2">Mon</div></td>';

thisHTML+='<td><div class="calHead2">Tue</div></td>';

thisHTML+='<td><div class="calHead2">Wed</div></td>';

thisHTML+='<td><div class="calHead2">Thu</div></td>';

thisHTML+='<td><div class="calHead2">Fri</div></td>';

thisHTML+='<td><div class="calHead2">Sat</div></td>';

thisHTML+='</tr>';

thisHTML+='<tr>';

for(x=0;x<sday;x++){

thisHTML+='<td>&nbsp;</td>';

}

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

for(x=sday+1;x<7;x++){

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

}

thisHTML+='</tr>';

var w;

for(w=0;w<5;w++){

if(dayCounter<daysInMonth(dateArray[0])){

thisHTML+='<tr>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='</tr>';

}

}

thisHTML+='</table>';

try {

var x = clientX;

var y = clientY;

} catch(e) {

var x = 100;

var y = 100;

}

sessionX = x;

sessionY = y;

document.getElementById('calendarBox').innerHTML = thisHTML;

document.getElementById('calendarBox').style.display='block';

document.getElementById('calendarBox').style.top=y + 'px';

document.getElementById('calendarBox').style.left=x + 'px';

document.getElementById(fieldID).select();

document.getElementById(fieldID).focus();

}



function calHTML(m,d,y,fieldID){

var x;

dayCounter = 0;

var thisHTML = '';

if(m>12){m=1;y++;}

if(m<1){m=12;y--;}

var dateArray = new Array(m,d,y);

var sday = dayOfWeek(dateArray[0],1,dateArray[2]);

thisHTML+='<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="3">';

thisHTML+='<tr><td width="25">';

thisHTML+='<div class="dayBox" onClick="calHTML(' + (dateArray[0]-1) +',' + dateArray[1] + ',' + dateArray[2] + ',\'' + fieldID + '\');">-</div></td>';

thisHTML+='<td align="center" colspan="5"><div id="calMonth" class="calHead" onClick="showDrops(\'calDrops\',\'calMonth\')">' + monthName(dateArray[0]) + ' ' + dateArray[2] + '</div>';

thisHTML+='<div id="calDrops" class="calDrops" style="display:none">';

thisHTML+='<select name="calMonthdropper" onChange="calHTML(this.value,' + dateArray[1] + ',' + dateArray[2] + ',\'' + fieldID + '\');">';

var mz=1;

for(mz=1;mz<13;mz++){

thisHTML+='<option value="' + mz + '"';

if(mz==dateArray[0]) thisHTML+=' SELECTED';

thisHTML+='>' + monthName(mz) + '</option>';

}

thisHTML+='</select>';



thisHTML+='<select name="calYeardroper" onChange="calHTML(' +dateArray[0] + ',' + dateArray[1] + ',this.value,\'' + fieldID + '\');">';

var ms=(dateArray[2]-25);

var my=0;

var me=(parseInt(dateArray[2])+26);

for(my=ms;my<me;my++){

thisHTML+='<option value="' + my + '"';

if(my==dateArray[2]) thisHTML+=' SELECTED';

thisHTML+='>' + my + '</option>';

}

thisHTML+='</select>';

thisHTML+='</div></td>';

thisHTML+='<td width="25">';

thisHTML+='<div id="dayBoxadd" onMouseOver="mouseOn(this.id);" onMouseOut="mouseOff(this.id);"';

thisHTML+=' class="dayBox" onClick="calHTML(' + (parseInt(dateArray[0])+1) +',' + dateArray[1] + ',' + dateArray[2] + ',\'' + fieldID + '\');">+</div></td></tr>';

thisHTML+='<tr>';

thisHTML+='<td><div class="calHead2">Sun</div></td>';

thisHTML+='<td><div class="calHead2">Mon</div></td>';

thisHTML+='<td><div class="calHead2">Tue</div></td>';

thisHTML+='<td><div class="calHead2">Wed</div></td>';

thisHTML+='<td><div class="calHead2">Thu</div></td>';

thisHTML+='<td><div class="calHead2">Fri</div></td>';

thisHTML+='<td><div class="calHead2">Sat</div></td>';

thisHTML+='</tr>';

thisHTML+='<tr>';

for(x=0;x<sday;x++){

thisHTML+='<td>&nbsp;</td>';

}

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

for(x=sday+1;x<7;x++){

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

}

thisHTML+='</tr>';

var w;

for(w=0;w<5;w++){

if(dayCounter<daysInMonth(dateArray[0])){

thisHTML+='<tr>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='<td>' + advanceDay(dateArray[0],dateArray[2],fieldID) + '</td>';

thisHTML+='</tr>';

}

}

thisHTML+='</table>';

document.getElementById('calendarBox').innerHTML = thisHTML;

document.getElementById('calendarBox').style.display='block';

document.getElementById('calendarBox').style.top=sessionY + 'px';

document.getElementById('calendarBox').style.left=sessionX + 'px';

}

function dayOfWeek(month,day,year) {

  var dateEng = new Date();

  dateEng.setMonth(month-1);

  dateEng.setYear(year);

  dateEng.setDate(day);

  return dateEng.getDay();

}

function daysInMonth(month){

var dayCounts = new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);

return dayCounts[month];

}

function hideCal(){

document.getElementById('calendarBox').style.display='none';

}

function monthName(month){

var mn = new Array('Error','Jan','Feb','March','April','May','June','July','August','Sept','Oct','Nov','Dec');

return mn[month];

}

function advanceDay(month,year,id){

dayCounter++;

if(dayCounter<=daysInMonth(month)){

	var tempArrayToday = getTodayArray();

	if(dayCounter==tempArrayToday[1] && month==tempArrayToday[0] && year==tempArrayToday[2]){

	return '<div class="dayBoxToday" title="Today" id="dayBox' + dayCounter + '" OnClick="setValue(' + month + ',' + dayCounter + ',' + year + ',\'' + id + '\');">' + dayCounter + '</div>';

	} else {

	return '<div class="dayBox" id="dayBox' + dayCounter + '" onMouseOver="mouseOn(this.id);" onMouseOut="mouseOff(this.id);" OnClick="setValue(' + month + ',' + dayCounter + ',' + year + ',\'' + id + '\');">' + dayCounter + '</div>';

	}

} else {

return '&nbsp;';

}

}

function setValue(month,day,year,id){

var thisDate = DateFormat;

thisDate = thisDate.replace('MM',month);

thisDate = thisDate.replace('DD',day);

thisDate = thisDate.replace('YYYY',year);

document.getElementById(id).value = thisDate;

hideCal();

}

function showDrops(showID,hideID){

document.getElementById(hideID).style.display='none';

document.getElementById(showID).style.display='block';

}

function calFocus(id){

document.getElementById(id).select();

document.getElementById(id).focus();

}

















//////////////////////////////////////////////////////////////////////////

//                STATIC BOX OUTPUT AND CONTROL FOLLOWS BELOW                      //

//////////////////////////////////////////////////////////////////////////



function todayscalHTMLbox(targetID){

var x;

staticDayCounter = 0;

var thisHTML = '';

var dateArray = getTodayArray();

var sday = dayOfWeek('0' + dateArray[0],'01',dateArray[2]);

thisHTML+='<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="3">';

thisHTML+='<tr><td width="25">';

thisHTML+='<div class="dayBox" id="dayBoxsub" onMouseOver="mouseOn(this.id);" onMouseOut="mouseOff(this.id);" onClick="calHTMLbox(' + (dateArray[0]-1) +',' + dateArray[1] + ',' + dateArray[2] + ',\'' + targetID + '\');">-</div></td>';

thisHTML+='<td align="center" colspan="5"><div id="calMonthBox" class="calHead" onClick="showDrops(\'calDropsBox\',\'calMonthBox\')">' + monthName(dateArray[0]) + ' ' + dateArray[2] + '</div>';

thisHTML+='<div id="calDropsBox" class="calDrops" style="display:none">';

thisHTML+='<select  name="calMonthdropper" onChange="calHTMLbox(this.value,' + dateArray[1] + ',' + dateArray[2] + ',\'' + targetID + '\');">';

var mz=1;

for(mz=1;mz<13;mz++){

thisHTML+='<option value="' + mz + '"';

if(mz==dateArray[0]) thisHTML+=' SELECTED';

thisHTML+='>' + monthName(mz) + '</option>';

}

thisHTML+='</select>';

thisHTML+='<select name="calYeardroper" onChange="calHTMLbox(' +dateArray[0] + ',' + dateArray[1] + ',this.value,\'' + targetID + '\');">';

var ms=(dateArray[2]-25);var my=0;var me=(parseInt(dateArray[2])+26);

for(my=ms;my<me;my++){

thisHTML+='<option value="' + my + '"';

if(my==dateArray[2]) thisHTML+=' SELECTED';

thisHTML+='>' + my + '</option>';

}



thisHTML+='</select>';

thisHTML+='</div></td>';

thisHTML+='<td width="25"><div class="dayBox" id="dayBoxaddm" onMouseOver="mouseOn(this.id);" onMouseOut="mouseOff(this.id);" onClick="calHTMLbox(' + (parseInt(dateArray[0])+1) +',' + dateArray[1] + ',' + dateArray[2] + ',\'' + targetID + '\');">+</div></td></tr>';

thisHTML+='<tr>';

thisHTML+='<td><div class="calHead2">Sun</div></td>';

thisHTML+='<td><div class="calHead2">Mon</div></td>';

thisHTML+='<td><div class="calHead2">Tue</div></td>';

thisHTML+='<td><div class="calHead2">Wed</div></td>';

thisHTML+='<td><div class="calHead2">Thu</div></td>';

thisHTML+='<td><div class="calHead2">Fri</div></td>';

thisHTML+='<td><div class="calHead2">Sat</div></td>';

thisHTML+='</tr>';

thisHTML+='<tr>';

for(x=0;x<sday;x++){

thisHTML+='<td>&nbsp;</td>';

}

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

for(x=sday+1;x<7;x++){

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

}

thisHTML+='</tr>';

var w;

for(w=0;w<5;w++){

if(staticDayCounter<daysInMonth(dateArray[0])){

thisHTML+='<tr>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='</tr>';

}

}

thisHTML+='</table>';

try {

var x = clientX;

var y = clientY;

} catch(e) {

var x = 100;

var y = 100;

}

document.getElementById(targetID).innerHTML = thisHTML;

}



function calHTMLbox(m,d,y,targetID){



var x;

staticDayCounter = 0;

var thisHTML = '';

if(m>12){m=1;y++;}

if(m<1){m=12;y--;}

var dateArray = new Array(m,d,y);

var sday = dayOfWeek(dateArray[0],1,dateArray[2]);

thisHTML+='<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="3">';

thisHTML+='<tr><td width="25"><div class="dayBox" id="dayBoxsub" onMouseOver="mouseOn(this.id);" onMouseOut="mouseOff(this.id);" onClick="calHTMLbox(' + (dateArray[0]-1) +',' + dateArray[1] + ',' + dateArray[2] + ',\'' + targetID + '\');">-</div></td>';

thisHTML+='<td align="center" colspan="5"><div id="calMonthBox" class="calHead" onClick="showDrops(\'calDropsBox\',\'calMonthBox\')">' + monthName(dateArray[0]) + ' ' + dateArray[2] + '</div>';

thisHTML+='<div id="calDropsBox" class="calDrops" style="display:none">';

thisHTML+='<select name="calMonthdropper" onChange="calHTMLbox(this.value,' + dateArray[1] + ',' + dateArray[2] + ',\'' + targetID + '\');">';

var mz=1;

for(mz=1;mz<13;mz++){

thisHTML+='<option value="' + mz + '"';

if(mz==dateArray[0]) thisHTML+=' SELECTED';

thisHTML+='>' + monthName(mz) + '</option>';

}

thisHTML+='</select>';



thisHTML+='<select name="calYeardroper" onChange="calHTMLbox(' +dateArray[0] + ',' + dateArray[1] + ',this.value,\'' + targetID + '\');">';

var ms=(dateArray[2]-25);

var my=0;

var me=(parseInt(dateArray[2])+26);

for(my=ms;my<me;my++){

thisHTML+='<option value="' + my + '"';

if(my==dateArray[2]) thisHTML+=' SELECTED';

thisHTML+='>' + my + '</option>';

}

thisHTML+='</select>';

thisHTML+='</div></td>';

thisHTML+='<td width="25"><div class="dayBox" onClick="calHTMLbox(' + (parseInt(dateArray[0])+1) +',' + dateArray[1] + ',' + dateArray[2] + ',\'' + targetID + '\');">+</div></td></tr>';

thisHTML+='<tr>';

thisHTML+='<td><div class="calHead2">Sun</div></td>';

thisHTML+='<td><div class="calHead2">Mon</div></td>';

thisHTML+='<td><div class="calHead2">Tue</div></td>';

thisHTML+='<td><div class="calHead2">Wed</div></td>';

thisHTML+='<td><div class="calHead2">Thu</div></td>';

thisHTML+='<td><div class="calHead2">Fri</div></td>';

thisHTML+='<td><div class="calHead2">Sat</div></td>';

thisHTML+='</tr>';

thisHTML+='<tr>';

for(x=0;x<sday;x++){

thisHTML+='<td>&nbsp;</td>';

}

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

for(x=sday+1;x<7;x++){

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

}

thisHTML+='</tr>';

var w;

for(w=0;w<5;w++){

if(staticDayCounter<daysInMonth(dateArray[0])){

thisHTML+='<tr>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='<td>' + advanceDayBox(dateArray[0],dateArray[2],targetID) + '</td>';

thisHTML+='</tr>';

}

}

thisHTML+='</table>';

document.getElementById(targetID).innerHTML = thisHTML;

}



function advanceDayBox(month,year,id){

staticDayCounter++;

if(staticDayCounter<=daysInMonth(month)){

	if(checkEvents(month,staticDayCounter,year)==true){

	return '<div class="dayBoxEvent" id="dayBox' + staticDayCounter + '" onMouseOver="mouseOn(this.id);" onMouseOut="mouseOff(this.id);" onClick="StaticCalClick(\'' + month + '/' + staticDayCounter + '/' + year + '\');">' + staticDayCounter + '</div>';

	} else {

	return '<div class="dayBox" id="dayBox' + staticDayCounter + '" onMouseOver="mouseOn(this.id);" onMouseOut="mouseOff(this.id);" onClick="StaticCalClick(\'' + month + '/' + staticDayCounter + '/' + year + '\');">' + staticDayCounter + '</div>';

	}

} else {

return '&nbsp;';

}

}

function calClose(value){

	if(value.length>5){

	document.getElementById('calendarBox').style.display='none';	

	}	

}

function mouseOn(id){

	document.getElementById(id).className = 'dayBoxEvent';	

}

function mouseOff(id){

	document.getElementById(id).className = 'dayBox';	

}



document.write('<div id="calendarBox" class="calendarBox"></div>');