function DatePicker(name)
{
	this.name = name;
	this.dt = new Date();
	document.write("<span style=''><span id='" + name +
        "' style='position:absolute;' class='DatePicker' style='border:none;'></span></span>");

	this.show=mf_show;
	function mf_show(dt, x, y)
	{
		if(dt)
		  this.dt = dt;

		// if not rendered yet, do so
		if(!this.oSpan)
		  this.render();
		// set coordinates
		this.oSpan.style.left = x;
		this.oSpan.style.top= y;

		this.fill();
		this.oMonth.focus();
	}

	this.hide=mf_hide;
	function mf_hide()
	{
		if(this.oSpan)
		  this.oSpan.innerHTML="";
		this.oSpan=null;
	}

	this.render=mf_render;
	function mf_render()
	{
		var oT1, oTR1, oTD1, oTH1;
		var oT2, oTR2, oTD2;

		this.oSpan = $(this.name);
		this.oSpan.appendChild(oT1 = document.createElement("table"));
		oT1.className = "dpTable";
	    oT1.cellPadding = 0;
	    oT1.cellSpacing = 0;
		oTR1 = oT1.insertRow(oT1.rows.length);
		oTD1 = oTR1.insertCell(oTR1.cells.length);
		oTD1.colSpan = 7;
		oTD1.className = 'DatePickerHdr';

		oT2 = document.createElement("table");
		oTD1.appendChild(oT2);
		oT2.border = 0;

		oTR2 = oT2.insertRow(oT2.rows.length);

		oTD2 = oTR2.insertCell(oTR2.cells.length);
		oTD2.title = this.texts.prevMonth;
		oTD2.onclick = function() { this.oDatePicker.onPrev(); }
		oTD2.oDatePicker = this;
		oTD2.innerHTML = "&lt;&lt;";
		oTD2.className = 'DatePickerHdrBtn';

		oTD2 = oTR2.insertCell(oTR2.cells.length);
		this.oMonth = document.createElement("select");
		oTD2.appendChild(this.oMonth);
		this.oMonth.oDatePicker = this;
		this.oMonth.onchange = this.oMonth.onkeyup =
			function() { this.oDatePicker.onMonth(); }
		for ( var i = 0; i < 12; i++ ) {
			this.oMonth.add(new Option(this.texts.months[i], i),undefined);
		}

		this.oYear = oTR2.insertCell(oTR2.cells.length);
		this.oYear.title = this.texts.yearTitle;
		this.oYear.oDatePicker = this;
		this.oYear.onclick = function() { this.oDatePicker.onYear(); }
		this.oYear.className = 'DatePickerHdrBtn';

		oTD2 = oTR2.insertCell(oTR2.cells.length);
		oTD2.title = this.texts.nextMonth;
		oTD2.onclick = function() { this.oDatePicker.onNext(); }
		oTD2.oDatePicker = this;
		oTD2.innerHTML = "&gt;&gt;";
		oTD2.className = 'DatePickerHdrBtn';

		oTD2 = oTR2.insertCell(oTR2.cells.length);
		oTD2.title = this.texts.close;
		oTD2.onclick = function() { this.oDatePicker.onClose(); }
		oTD2.oDatePicker = this;
		oTD2.innerHTML = "X";
		oTD2.className = 'DatePickerHdrBtn';

		oTR1 = oT1.insertRow(oT1.rows.length);
		for ( i = 0; i < 7; i++ ) {
			oTH1 = document.createElement("th");
			oTR1.appendChild(oTH1);
			oTH1.innerHTML = this.texts.days[i];
			oTH1.className = 'DatePicker';
		}

		this.aCells = new Array;
		for ( var j = 0; j < 6; j++ ) {
			this.aCells.push(new Array);
			oTR1 = oT1.insertRow(oT1.rows.length);
			for ( i = 0; i < 7; i++ ) {
				this.aCells[j][i] = oTR1.insertCell(oTR1.cells.length);
				this.aCells[j][i].oDatePicker = this;
				this.aCells[j][i].onclick =
					function() { this.oDatePicker.onDay(this); }
			}
		}
	}

	this.fill=mf_fill;
	function mf_fill()
	{
		// first clear all
		this.clear();

		// place the dates in the calendar
		var nRow = 0;
		var d = new Date(this.dt.getTime());
		var m = d.getMonth();
		for ( d.setDate(1); d.getMonth() == m; d.setTime(d.getTime() + 86400000) ) {
			var nCol = d.getDay();
			this.aCells[nRow][nCol].innerHTML = d.getDate();

			if ( d.getDate() == this.dt.getDate() ) {
				this.aCells[nRow][nCol].className = 'DatePickerBtnSelect';
			}
			if ( nCol == 6 ) nRow++;
		}

		// set the month combo
		this.oMonth.value = m;

		// set the year text
		this.oYear.innerHTML = this.dt.getFullYear();
	}

	this.clear=mf_clear;
	function mf_clear()
	{
		for ( var j = 0; j < 6; j++ )
			for ( var i = 0; i < 7; i++ ) {
				this.aCells[j][i].innerHTML = "&nbsp;"
				this.aCells[j][i].className = 'DatePickerBtn';
			}
	}

	this.onPrev=mf_onPrev;
	function mf_onPrev()
	{
		if ( this.dt.getMonth() == 0 ) {
			this.dt.setFullYear(this.dt.getFullYear() - 1);
			this.dt.setMonth(11);
		} else {
			this.dt.setMonth(this.dt.getMonth() - 1);
		}
		this.fill();
	}
	this.onClose=mf_onClose;
	function mf_onClose()
	{
		this.hide();
	}
	this.onNext=mf_onNext;
	function mf_onNext()
	{
		if ( this.dt.getMonth() == 11 ) {
			this.dt.setFullYear(this.dt.getFullYear() + 1);
			this.dt.setMonth(0);
		} else {
			this.dt.setMonth(this.dt.getMonth() + 1);
		}
		this.fill();
	}

	this.onMonth=mf_onMonth;
	function mf_onMonth()
	{
		this.dt.setMonth(this.oMonth.value);
		this.fill();
	}

	this.onYear=mf_onYear;
	function mf_onYear()
	{
		var y = parseInt(prompt(this.texts.yearQuestion, this.dt.getFullYear()));
		if ( !isNaN(y) ) {
			this.dt.setFullYear(parseInt(y));
			this.fill();
		}
	}

	this.onDay=mf_onDay;
	function mf_onDay(oCell)
	{
		var d = parseInt(oCell.innerHTML);
		if ( d > 0 )
		{
			this.dt.setDate(d);
			this.hide();
			this.callback(this.dt);
		}
	}

	this.texts =
	{
		months: [
			"January", "February", "March",
			"April", "May", "June",
			"July", "August", "September",
			"October", "November", "December"
		],
		days: ["S", "M", "T", "W", "T", "F", "S"],
		prevMonth: "Previous Month",
		nextMonth: "Next Month",
		close: "Close Calendar",
		yearTitle: "Year. Click to modify.",
		yearQuestion: "Enter a new year:"
	};

	this.callback=mf_callback;
	function mf_callback(dt)
	{
		this.client.value =
			dt.getFullYear() + "-" +
			(dt.getMonth() + 1) + "-" +
			dt.getDate();
	}
}

function showDP(oDatePicker,oTxt)
{

    // since we control the text format in callback(), getting the date is easy
	var aDt = oTxt.value.split("-");
	var dt = null;
	if ( aDt && (aDt.length == 3) ) {
		if(aDt[1].substr(0,1)=="0")
		  aDt[1]=aDt[1].substr(1,1);
		if(aDt[2].substr(0,1)=="0")
		  aDt[2]=aDt[2].substr(1,1);
		dt = new Date(parseInt(aDt[0]),parseInt(aDt[1])-1,parseInt(aDt[2]));
	}

	// store the textbox for use in the client
	oDatePicker.client = oTxt;

	oDatePicker.show(dt, oTxt.offsetLeft, oTxt.offsetTop-110);
}