/* **********************************************************

DATE TIME PICKER BY ANDY TRUMAN (C) IBDG 2008
PURPOSE:
To provide site users with the ability to interactively choose a forward date and time from a calendar and populate a text field with the result.
USAGE:
1: Include the script at the bottom of the page (after any lightboxes)...
	<script type="text/javascript" src="datetime.js"></script>
2: Include (or alter) the styles to your page ...
	#caltop { width:95%;margin:10px auto 0px auto;text-align:center;font-weight:bold;font:14px Arial; }
	#caldates { background:#999;color:white }
	#caltoday { background:#ffc }
	#calmessage { background:white;padding:2px;color:black; }
	#caltop a { cursor:pointer; font-size:18px; font-weight:bold; } 
	#calendar { clear:left; width:95%; margin:10px auto; text-align:center; border-width:0 0 1px 1px; border-spacing:0; border-collapse:collapse; font:11px Arial; color:#999; }
	#calendar, #calendar td { border-color: #999; border-style:solid; }
	#calendar td { font-size:9px; width:14%; padding:3px 0px; margin:0; border-width:1px 1px 0 0; border-color:#999; }
	#calendar a { cursor:pointer; text-decoration:none; color:#333; }
	#thedate { width:80%; margin:10px auto 20px auto; text-align:center; padding:5px; font:12px Arial; font-weight:bold; border:1px solid #ccc; }
	#timepick { width:80%; margin:0px auto; font:11px Arial; }
	#timepick a { cursor:pointer; }
	#timeam a {display:block; float:left; text-decoration:none; width:20px; height:20px; line-height:20px; background:#eee; border:1px solid white; text-align:center; color:black; }
	#timepm a {display:block; float:left; text-decoration:none; width:20px; height:20px; line-height:20px; background:#ccc; border:1px solid white; text-align:center; color:black; }
	#timep a {display:block; float:left; text-decoration:none; width:20px; height:20px; line-height:20px; background:#999; border:1px solid white; text-align:center; color:white; }
	#timeam a:hover, #timepm a:hover, #timep a:hover { background:#ffc; border:1px solid black; color:black; }
	#timep { padding-top:5px; height:26px; line-height:26px; text-align:right; }
3: On the form element (text field) include a name and id and call the script ...
	<input type="text" id="first" name="first" onFocus="calSta(this);" />
4: If you want to use an image or an anchor to call it simply give focus to the field that will hold the value ...
	<a onclick="document.theform.first.focus()">
NOTES:
	The calendar is restricted to 2008 - 2012, to add new years simply add the start days of the new year months to line 120+ and if a leap year include in line 125 (plus change alerts line 114 & 115)
************************************************************ */

var dayNames = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthNames = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var currentyear = ""; var storemonth, storeyear, tempmonth, chosendate, formfield; var now = new Date(); var stoream = ""; var storepm="";


function calSta(el){
if(!document.getElementById('calholder')){
var temp = el.id;
formfield = temp; var temp2 = document.getElementById(temp); temp2.value="";
var calholder = document.createElement("div");
calholder.setAttribute('id', 'calholder');
calholder.style.width = '200px'; calholder.style.height = '206px';
calholder.style.position = 'absolute';
calholder.style.top = '0px';
calholder.style.left = '50%';
calholder.style.background = "white";
calholder.style.border = '1px solid black';
calholder.style.display = 'none';
calholder = document.body.appendChild(calholder);
document.getElementById('calholder').style.marginLeft = '-230px'; 
document.getElementById('calholder').style.top = (temp2.offsetTop + 333) + 'px';
var temp3 = document.getElementById('calholder');
if(temp3.style.display == "none"){ 
	temp3.style.display="block"; 
} else { 
	temp3.style.display = "none"; return false;
}
currentyear = now.getFullYear(); month = now.getMonth();
drawMonth();
} 
}

function pickDate(what){
	if(what == 1 || what == 21 || what == 31){ var suffix = "st"; }
	else if(what == 2 || what == 22){ var suffix = "nd"; }
	else if(what == 3 || what == 23){ var suffix = "rd"; }
	else { var suffix = "th"; }
	chosendate = monthNames[tempmonth] + " " + what + suffix + " " + currentyear;
	var newContent23 = '<div id="thedate">'+ chosendate +'</div>';
	newContent23 += '<table cellpadding="2" cellspacing="0" id="timepick">';
	newContent23 += '<tr><td id="timeam"><a id="c1" onclick="calpick(this)">1</a><a id="c2" onclick="calpick(this)">2</a><a id="c3" onclick="calpick(this)">3</a><a id="c4" onclick="calpick(this)">4</a><a id="c5" onclick="calpick(this)">5</a><a id="c6" onclick="calpick(this)">6</a><a id="c7" onclick="calpick(this)">7</a><a id="c8" onclick="calpick(this)">8</a><a id="c9" onclick="calpick(this)">9</a><a id="c10" onclick="calpick(this)">10</a><a id="c11" onclick="calpick(this)">11</a><a id="c12" onclick="calpick(this)">12</a></td><td>AM</td></tr>';
	newContent23 += '<tr><td id="timepm"><a id="d1" onclick="calpick(this)">1</a><a id="d2" onclick="calpick(this)">2</a><a id="d3" onclick="calpick(this)">3</a><a id="d4" onclick="calpick(this)">4</a><a id="d5" onclick="calpick(this)">5</a><a id="d6" onclick="calpick(this)">6</a><a id="d7" onclick="calpick(this)">7</a><a id="d8" onclick="calpick(this)">8</a><a id="d9" onclick="calpick(this)">9</a><a id="d10" onclick="calpick(this)">10</a><a id="d11" onclick="calpick(this)">11</a><a id="d12" onclick="calpick(this)">12</a></td><td>PM</td></tr>';
	newContent23 += '<tr><td colspan="2" id="timep"><a onclick="calfinal(00)">00</a><a onclick="calfinal(15)">15</a><a onclick="calfinal(30)">30</a><a onclick="calfinal(45)">45</a>Minutes</td></tr>';
	newContent23 += '</table>';
	document.getElementById('calholder').innerHTML= newContent23;
}

function calpick(el){
	var temp = el.id; var temp2 = document.getElementById(temp);
	for(var t=1; t<13; t++){
		document.getElementById("c" + t).style.borderColor = "white";
	}
	for(var u=1; u<13; u++){
		document.getElementById("d" + u).style.borderColor = "white";
	}
	temp2.style.borderColor = "black";
	var der = temp.substr(1); var def = temp.substr(0,1);
	if(def == "c"){ stoream = der; storepm = ""; } else { stoream = ""; storepm = der; }
}

function calfinal(what){
	var finalmessage = ""; if(what == "0"){ what = "00"; }
	if(stoream == "" && storepm == "") { stoream = "9"; what = "00"; }
	if(stoream == ""){ 
		finalmessage = (chosendate + " - " + storepm + ":" + what + "PM");
	}
	else {
		finalmessage = (chosendate + " - " + stoream + ":" + what + "AM");
	}
	stoream = ""; storepm = ""; 
	//document.getElementById('calholder').style.display="none";
	document.body.removeChild(document.body.lastChild);
	document.getElementById(formfield).value = finalmessage;
}

function drawMonth(which){
var day = now.getDate(); var month = now.getMonth(); var year = now.getFullYear(); var todays_date = parseInt(day, 10);
if(currentyear != ""){ year = currentyear; } else { currentyear = year; }
if(which == undefined){ which = month; storemonth = month; storeyear = currentyear;  }
if(which == 12){ which = 0; year++; currentyear = year; }
if(which == -1){ which = 11; year--; currentyear = year; }
var prev = (which - 1); var next = (which + 1); tempmonth = which; 
if(currentyear < 2008 || currentyear > 2012){
	alert("Calendar restricted to 2008 - 2012"); 
	currentyear = now.getFullYear(); year = currentyear; month = now.getMonth(); which = month; 
	var prev = (which - 1); var next = (which + 1); drawMonth(); 
}
// Restricted 2008 - 2011 - Mon1, Tue2, Wed3, Thu4, Fri5, Sat6, Sun0 //
if(currentyear == 2008){ var startDays = new Array(2,5,6,2,4,0,2,5,1,3,6,1); }
if(currentyear == 2009){ var startDays = new Array(4,0,0,3,5,1,3,6,2,4,0,2); }
if(currentyear == 2010){ var startDays = new Array(5,1,1,4,6,2,4,0,3,5,1,3); }
if(currentyear == 2011){ var startDays = new Array(6,2,2,5,0,3,5,1,4,6,2,4); }
if(currentyear == 2012){ var startDays = new Array(0,3,4,0,2,5,0,3,6,1,4,6); }
if(currentyear == 2008 || currentyear == 2012){ var monthDays = new Array("31","29","31","30","31","30","31","31","30","31","30","31"); } else { var monthDays = new Array("31","28","31","30","31","30","31","31","30","31","30","31"); }
var newContent22 = '<div id="caltop"><a onclick=\"drawMonth('+ prev +')\">&laquo;</a>  ' + monthNames[which] +' '+ year +'  <a onclick=\"drawMonth('+ next +')\">&raquo;</a></div>';
newContent22 += '<table cellspacing="0" cellpadding="0" id="calendar">';
newContent22 += '<tr id="caldates"><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>';
var days_in_this_month = monthDays[which]; var first_day_in_month = parseInt(startDays[which], 10);
var ccounter = 0; var fd = 0; var viewing_month = which;
for(var j=0; j<6; j++){
	newContent22 += '<tr>';
	for(var h=0; h<7; h++){

// if today is the first of the month //
			if(ccounter == first_day_in_month){ 
				fd = 1; 
				if(fd == todays_date){
					if((storemonth == viewing_month) && (storeyear == currentyear)){ // if the correct month and year //
						newContent22 += '<td id="caltoday">'+ fd +'</td>';
						fd++;
					}
					else {
						if(viewing_month <= storemonth){ // the 1st of the month (back in time) //
							newContent22 += '<td>'+ fd +'</td>';
							fd++;
						}
						else { // the 1st of the month (ahead in time) //
							newContent22 += '<td><a onclick="pickDate('+ fd +')">'+ fd +'</a></td>';
							fd++;
						}
					}
				}
				else {
					if(currentyear > storeyear){
						newContent22 += '<td><a onclick="pickDate('+ fd +')">'+ fd +'</a></td>';
						fd++;
					}
					else {
						if((currentyear == storeyear) &&  (viewing_month > storemonth)){
							newContent22 += '<td><a onclick="pickDate('+ fd +')">'+ fd +'</a></td>';
							fd++;
						}
						else {
							newContent22 += '<td>'+ fd +'</td>';
							fd++;
						}
					}
				}
			}
// all other days //			
			else if((ccounter >= first_day_in_month) && (fd <= days_in_this_month)){
// if a day in this month // 
				if(fd == todays_date){ // if today //
					if((storemonth == viewing_month) && (storeyear == currentyear)){
						newContent22 += '<td id="caltoday">'+ fd +'</td>';
						fd++; // today - this  month - this year -right now //
					}
					else {
							if((viewing_month < storemonth) && (storeyear == currentyear)){
								newContent22 += '<td>'+ fd +'</td>';
								fd++; // no anchor for today back in time //
							}
							else {
								newContent22 += '<td><a onclick="pickDate('+ fd +')">'+ fd +'</a></td>';
								fd++; // anchor for today (in future) //
							}
					}
				}
// normal days // 
				else {
					if((viewing_month == storemonth) && (currentyear == storeyear)){
						if(fd < todays_date){
							newContent22 += '<td>'+ fd +'</td>';
							fd++; // no anchors back in time //
						}
						else {
							newContent22 += '<td><a onclick="pickDate('+ fd +')">'+ fd +'</a></td>';
							fd++;
						}
					}
					else {
						if((viewing_month < storemonth) && (currentyear == storeyear)){
							newContent22 += '<td>'+ fd +'</td>';
							fd++;
						}
						else {
							newContent22 += '<td><a onclick="pickDate('+ fd +')">'+ fd +'</a></td>';
							fd++;
						}
					}
				} 
// else if not a day draw a blank //
			}
			else { newContent22 += '<td>&nbsp;</td>'; }
		ccounter++;
	}
	newContent22 += '</tr>';
}
newContent22 += '<tr><td colspan="7" id="calmessage"><div id="calstop">Please select a date above</div></td></tr>';
newContent22 += '</table>';
document.getElementById('calholder').innerHTML = newContent22;
}