// &nbsp;<input type=\"button\" value=\"Find\" onclick=\"displayDatePicker('eventStartDate');\" class=\"formBtn\" />

	var datePickerDivID = "datePicker";
	var iFrameDivID = "datePickerIframe";

	var dayArrayShort = ["Su","Mo","Tu","We","Th","Fr","Sa"];
	var dayArrayMed = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
	var dayArrayLong = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
	var monthArrayShort = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
	var monthArrayMed = ["Jan","Feb","Mar","Apr","May","June","July","Aug","Sept","Oct","Nov","Dec"];
	var monthArrayLong = ["January","February","March","April","May","June","July","August","September","October","November","December"];

	var defaultDateSeparator = "/";        // common values would be "/" or "."
	var defaultDateFormat = "mdy"    // valid values are "mdy", "dmy", and "ymd"
	var dateSeparator = defaultDateSeparator;
	var dateFormat = defaultDateFormat;

	function displayDatePicker(dateFieldID,displayBelowThisObject,dtFormat,dtSep) {
		// if we weren't told what node to display the datepicker beneath, just display it
		// beneath the date field we're updating
		if (!displayBelowThisObject) {
			displayBelowThisObject = $(dateFieldID);
		}

		// if a date separator character was given, update the dateSeparator variable
		if (dtSep) {
			dateSeparator = dtSep;
		} else {
			dateSeparator = defaultDateSeparator;
		}

		// if a date format was given, update the dateFormat variable
		if (dtFormat) {
			dateFormat = dtFormat;
		} else {
			dateFormat = defaultDateFormat;
		}

		var x = displayBelowThisObject.offsetLeft;
		var y = (displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight);

		// deal with elements inside tables and such
		var parent = displayBelowThisObject;
		while (parent.offsetParent) {
			parent = parent.offsetParent;
			x += parent.offsetLeft;
			y += parent.offsetTop;
		}
		drawDatePicker($(dateFieldID),x,y);
	}


	/**
	Draw the datepicker object (which is just a table with calendar elements) at the
	specified x and y coordinates, using the targetDateField object as the input tag
	that will ultimately be populated with a date.

	This function will normally be called by the displayDatePicker function.
	*/
	function drawDatePicker(targetDateField,x,y) {
		var dt = getFieldDate(targetDateField.value);

		// the datepicker table will be drawn inside of a <div> with an ID defined by the
		// global datePickerDivID variable. If such a div doesn't yet exist on the HTML
		// document we're working with, add one.
		if (!$(datePickerDivID)) {
			// don't use innerHTML to update the body, because it can cause global variables
			// that are currently pointing to objects on the page to have bad references
			//document.body.innerHTML += "<div id='" + datePickerDivID + "' class='dpDiv'></div>";
			var newNode = document.createElement("div");
			newNode.setAttribute("id",datePickerDivID);
			newNode.setAttribute("class","dpDiv");
			newNode.setAttribute("style","visibility: hidden;");
			document.body.appendChild(newNode);
		}

		// move the datepicker div to the proper x,y coordinate and toggle the visiblity
		$(datePickerDivID).style.position = "absolute";
		$(datePickerDivID).style.left = (x + "px");
		$(datePickerDivID).style.top = (y + "px");
		$(datePickerDivID).style.visibility = ($(datePickerDivID).style.visibility == "visible" ? "hidden" : "visible");
		$(datePickerDivID).style.display = ($(datePickerDivID).style.display == "block" ? "none" : "block");
		$(datePickerDivID).style.zIndex = 10000;

		// draw the datepicker table
		refreshDatePicker(targetDateField.id,dt.getFullYear(),dt.getMonth(),dt.getDate());
	}


	/**
	This is the function that actually draws the datepicker calendar.
	*/
	function refreshDatePicker(dateFieldID,year,month,day) {
		// if no arguments are passed, use today's date; otherwise, month and year
		// are required (if a day is passed, it will be highlighted later)
		var thisDay = new Date();

		if ((month >= 0) && (year > 0)) {
			thisDay = new Date(year,month,1);
		} else {
			day = thisDay.getDate();
			thisDay.setDate(1);
		}

		// the calendar will be drawn as a table
		// you can customize the table elements with a global CSS style sheet,
		// or by hardcoding style and formatting elements below
		var crlf = "\r\n";
		var TABLE = "<table cols=\"7\" class=\"dpTable\">" + crlf;
		var xTABLE = "</table>" + crlf;
		var TR = "<tr class=\"dpTR\">";
		var TR_title = "<tr class=\"dpTitleTR\">";
		var TR_days = "<tr class=\"dpDayTR\">";
		var TR_todaybutton = "<tr class=\"dpTodayButtonTR\">";
		var xTR = "</tr>" + crlf;
		var TD = "<td class=\"dpTD\" onmouseout=\"this.className = 'dpTD';\" onmouseover=\"this.className = 'dpTDHover';\" ";    // leave this tag open, because we'll be adding an onClick event
		var TDe = "<td class=\"dpTD\" ";    // leave this tag open, because we'll be adding an onClick event
		var TD_title = "<td colspan=\"5\" class=\"dpTitleTD\">";
		var TD_buttons = "<td class=\"dpButtonTD\">";
		var TD_todaybutton = "<td colspan=\"7\" class=\"dpTodayButtonTD\">";
		var TD_days = "<td class=\"dpDayTD\">";
		var TD_selected = "<td class=\"dpDayHighlightTD\" onmouseout=\"this.className = 'dpDayHighlightTD';\" onmouseover=\"this.className = 'dpTDHover';\" ";    // leave this tag open, because we'll be adding an onClick event
		var xTD = "</td>" + crlf;
		var DIV_title = "<div class=\"dpTitleText\">";
		var DIV_selected = "<div class=\"dpDayHighlight\">";
		var xDIV = "</div>";

		// start generating the code for the calendar table
		var html = TABLE;

		// this is the title bar, which displays the month and the buttons to
		// go back to a previous month or forward to the next month
		html += TR_title;
		html += TD_buttons + getButtonCode(dateFieldID, thisDay, -1, "&lt;") + xTD;
		html += TD_title + DIV_title + monthArrayLong[thisDay.getMonth()] + " " + thisDay.getFullYear() + xDIV + xTD;
		html += TD_buttons + getButtonCode(dateFieldID,thisDay,1,"&gt;") + xTD;
		html += xTR;

		// this is the row that indicates which day of the week we're on
		html += TR_days;
		for (i=0;i<dayArrayShort.length;i++) {
			html += (TD_days + dayArrayShort[i] + xTD);
		}
		html += xTR;

		// now we'll start populating the table with days of the month
		html += TR;

		// first, the leading blanks
		for (i=0;i<thisDay.getDay();i++) {
			html += (TDe + ">" + xTD);
		}

		// now, the days of the month
		do {
			dayNum = thisDay.getDate();
			TD_onclick = " onclick=\"updateDateField('" + dateFieldID + "', '" + getDateString(thisDay) + "');\">";

			if (dayNum == day) {
				html += (TD_selected + TD_onclick + DIV_selected + dayNum + xDIV + xTD);
			} else {
				html += (TD + TD_onclick + dayNum + xTD);
			}

			// if this is a Saturday, start a new row
			if (thisDay.getDay() == 6) {
				html += xTR + TR;
			}

			// increment the day
			thisDay.setDate(thisDay.getDate() + 1);
		} while (thisDay.getDate() > 1);

		// fill in any trailing blanks
		if (thisDay.getDay() > 0) {
			for (i=6;i>thisDay.getDay();i--) {
				html += (TDe + ">" + xTD);
			}
		}
		html += xTR;

		// add a button to allow the user to easily return to today, or close the calendar
		var today = new Date();
		var todayString = ("Today is " + dayArrayMed[today.getDay()] + ", " + monthArrayMed[ today.getMonth()] + " " + today.getDate());
		html += (TR_todaybutton + TD_todaybutton);
		html += "<input type=\"button\" class=\"dpTodayButton\" onclick=\"refreshDatePicker('" + dateFieldID + "');\" value=\"This Month\" />";
		html += "&nbsp;<input type=\"button\" class=\"dpTodayButton\" onclick=\"updateDateField('" + dateFieldID + "',$('" + dateFieldID + "').value);\" value=\"Close\" />";
		html += (xTD + xTR);

		// and finally, close the table
		html += xTABLE;

		$(datePickerDivID).innerHTML = html;
		// add an "iFrame shim" to allow the datepicker to display above selection lists
		adjustiFrame();
	}

	// Convenience function for writing the code for the buttons that bring us back or forward a month. //
	function getButtonCode(dateFieldID,dateVal,adjust,label) {
		var newMonth = ((dateVal.getMonth () + adjust) % 12);
		var newYear = (dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12));
		if (newMonth < 0) {
			newMonth += 12;
			newYear -= 1;
		}

		return "<input type=\"button\" class=\"dpButton\" onclick=\"refreshDatePicker('" + dateFieldID + "'," + newYear + "," + newMonth + ");\" value=\"" + label + "\" />";
	}


	// Convert a JavaScript Date object to a string, based on the dateFormat and dateSeparator variables at the beginning of this script library. //
	function getDateString(dateVal) {
		var dayString = dateVal.getDate().toString();
		var monthString = (dateVal.getMonth() + 1).toString();
		dayString = dayString.substring(dayString.length - 2);
		monthString = monthString.substring(monthString.length - 2);

		switch (dateFormat) {
			case "dmy":
				return (dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear());
			case "ymd":
				return (dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString);
			case "mdy":
			default:
				return (monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear());
		}
	}


	// Convert a string to a JavaScript Date object. //
	function getFieldDate(dateString) {
		var dateVal, dArray, d, m, y;

		try {
			dArray = splitDateString(dateString);
			if (dArray) {
				switch (dateFormat) {
					case "dmy":
						d = parseInt(dArray[0],10);
						m = parseInt(dArray[1],10) - 1;
						y = parseInt(dArray[2],10);
						break;
					case "ymd":
						d = parseInt(dArray[2],10);
						m = parseInt(dArray[1],10) - 1;
						y = parseInt(dArray[0],10);
						break;
					case "mdy":
					default:
						d = parseInt(dArray[1],10);
						m = parseInt(dArray[0],10) - 1;
						y = parseInt(dArray[2],10);
						break;
				}
				dateVal = new Date(y,m,d);
			} else if (dateString) {
				dateVal = new Date(dateString);
			} else {
				dateVal = new Date();
			}
		} catch(e) {
			dateVal = new Date();
		}

		return dateVal;
	}


	// Try to split a date string into an array of elements, using common date separators. If the date is split, an array is returned; otherwise, we just return false. //
	function splitDateString(dateString) {
		var dArray;
		if (dateString.indexOf("/") >= 0) {
			dArray = dateString.split("/");
		} else if (dateString.indexOf(".") >= 0) {
			dArray = dateString.split(".");
		} else if (dateString.indexOf("-") >= 0) {
			dArray = dateString.split("-");
		} else if (dateString.indexOf("\\") >= 0) {
			dArray = dateString.split("\\");
		} else {
			dArray = false;
		}

		return dArray;
	}


	function updateDateField(dateFieldID,dateString) {
		$(dateFieldID).value = dateString;
		hideDatePicker();
	}

	function hideDatePicker() {
		$(datePickerDivID).style.visibility = "hidden";
		$(datePickerDivID).style.display = "none";
		adjustiFrame();
		$(datePickerDivID).blur();
	}


	// Use an "iFrame shim" to deal with problems where the datepicker shows up behind selection list elements, if they're below the datepicker. //
	function adjustiFrame(pickerDiv,iFrameDiv) {
		// we know that Opera doesn't like something about this, so if we think we're using Opera, don't even try
		if (navigator.userAgent.toLowerCase().indexOf("opera") != -1) {
			return;
		}

		// put a try/catch block around the whole thing, just in case
		try {
			if (!$(iFrameDivID)) {
				// don't use innerHTML to update the body, because it can cause global variables
				// that are currently pointing to objects on the page to have bad references
				var newNode = document.createElement("iFrame");
				newNode.setAttribute("id",iFrameDivID);
				newNode.setAttribute("src","about:blank");
				newNode.setAttribute("scrolling","no");
				newNode.setAttribute ("frameborder","0");
				document.body.appendChild(newNode);
			}

			if (!pickerDiv) {
				pickerDiv = $(datePickerDivID);
			}
			if (!iFrameDiv) {
				iFrameDiv = $(iFrameDivID);
			}

			try {
				iFrameDiv.style.position = "absolute";
				iFrameDiv.style.width = pickerDiv.offsetWidth + "px";
				iFrameDiv.style.height = pickerDiv.offsetHeight + "px";
				iFrameDiv.style.top = pickerDiv.style.top;
				iFrameDiv.style.left = pickerDiv.style.left;
				iFrameDiv.style.zIndex = pickerDiv.style.zIndex - 1;
				iFrameDiv.style.visibility = pickerDiv.style.visibility;
				iFrameDiv.style.display = pickerDiv.style.display;
			} catch(e) {}
		} catch (ee) {}
	}