<script type="text/javascript">
 
	// These are the global variables neede to keep track of
	// the calendar and to provide faster lookup via indexing.
	var objStartDay = null;
	var objEndDay = null;
	var arrDays = new Array();
	var objToday = null;
 
 
	// This loads the global properties based on the calendar.
	function InitCalendars(){
		var objHolder = document.getElementById( "calendars" );
		var arrTBody = objHolder.getElementsByTagName( "tbody" );
		var arrTD = null;
		var intI, intJ;
 
		// Loop over tbodys and get their tds.
		for (intI = 0 ; intI < arrTBody.length ; intI++){
 
			// Get all the TDs.
			arrTD = arrTBody[ intI ].getElementsByTagName( "td" );
 
			// Loop over all the TDs to init.
			for (intJ = 0 ; intJ < arrTD.length ; intJ ++){
 
				InitTD( arrTD[ intJ ] );
 
			}
 
		}
 
	}
 
 
	// This initialized each TD within the calendar days.
	function InitTD( objTD ){
		// Set the TD collection index.
		objTD.dayIndex = arrDays.length;
 
		// Add this TD to the collection.
		arrDays[ arrDays.length ] = objTD;
 
		// Store the original class name.
		objTD.baseClassName = objTD.className;
 
		// Check to see if this is today.
		if (objTD.className == "today"){
			objToday = objTD;
		}
 
		// Set onclick handler.
		objTD.onclick = function(){
			SetDay( this );
		}
	}
 
 
	// This is the onClick handler for each calendar day. It is
	// used to set the start and end days of the selected day span,
	// then it renders the calendar.
	function SetDay( objTD ){
 
		// We can only set a day that is NOT an other month. If this
		// an other day, just return out.
		if (objTD.className == "othermonth"){
			return;
		}
 
		// Check to see if we if this is the day one.
		if (objTD == objStartDay){
 
			// Set the start day to be the end day.
			objStartDay = objEndDay;
 
			// Turn off end day.
			objEndDay = null;
 
		} else if (objTD == objEndDay){
 
			// Turn off the end day.
			objEndDay = null;
 
		} else {
 
			// We are turning ON a day. Check to see if there is an
			// existing start and end day.
			if (objStartDay && objEndDay){
 
				// Both days already exist. We need to alter the
				// way the selection exists. Check to see the
				// indexes.
				if (objTD.dayIndex < objStartDay.dayIndex){
 
					// Expanding back.
					objStartDay = objTD;
 
				} else {
 
					// We are going beyong the end day OR we are
					// going somewhere in the middle of the
					// existing range. Either way, when we do that,
					// we are always going to change the END day,
					// not the Start day.
					objEndDay = objTD;
 
				}
 
			} else if (objStartDay){
 
				// Check to see if the new TD is less than or
				// greater than the current start day.
				if (objStartDay.dayIndex < objTD.dayIndex){
 
					objEndDay = objTD;
 
				} else {
 
					objEndDay = objStartDay;
					objStartDay = objTD;
				}
 
			} else {
 
				// We will never have JUST an end day. Set this to
				// the start day.
				objStartDay = objTD;
 
			}
 
		}
 
 
		// Render the calendar with the new time span.
		RenderCalendar();
 
	}
 
 
	// This renders the calendar and turns the days on or off
	// depending on where they fall in any selected time span.
	function RenderCalendar(){
		var intDay = null;
 
		// Loop over all the days in the collection.
		for (intDay = 0 ; intDay < arrDays.length ; intDay++){
 
			// We cannot do anything to other month days. If this
			// is an other month day, just continue the loop.
			if (arrDays[ intDay ].className == "othermonth"){
				continue;
			}
 
			// Check to see if we have both start and end day.
			if (
				objStartDay &&
				objEndDay &&
				(objStartDay.dayIndex <= arrDays[ intDay ].dayIndex) &&
				(objEndDay.dayIndex >= arrDays[ intDay ].dayIndex)
				){
 
				// This is a selected day.
				arrDays[ intDay ].className = (
					( (arrDays[ intDay ] == objToday) ? "today" : "" ) +
					"selected"
					);
 
			} else if (
				(arrDays[ intDay ] == objStartDay) ||
				(arrDays[ intDay ] == objEndDay)
				){
 
				// This is a selected day.
				arrDays[ intDay ].className = (
					( (arrDays[ intDay ] == objToday) ? "today" : "" ) +
					"selected"
					);
 
			} else {
 
				// This is NOT a selected day. Turn off.
				arrDays[ intDay ].className = arrDays[ intDay ].baseClassName;
 
			}
 
		}
 
	}
 
</script>