function DatePicker(name)
{
	this.months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
	this.days = ["S", "M", "T", "W", "T", "F", "S"];
	this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	this.id = name;
	this.control = document.getElementById(this.id);
	this.parent = null;
	this.date = null;
	this.month = null;
	this.year = null;
	this.day = null;
	this.active = false;
}

/// <summary>Set the Date for the control</summary>
DatePicker.prototype.setDate = function(date)
{
	this.date = date;
	this.month = date.getMonth();
	this.year = date.getFullYear();
	this.day = date.getDate();
	this.setDateExtended();
}

/// <summary>Set the Extended Date properties</summary>
DatePicker.prototype.setDateExtended = function()
{
	this.daysInMonth[1] = (this.year % 4 == 0 && this.month == 1) ? 29 : 28;
	this.FirstDay = new Date(this.year + "/" + (this.month + 1) + "/1").getDay();
}

DatePicker.prototype.setParentValue = function()
{
	if (this.parent != null)
	{
		this.parent.value = document.abo.getDateString(this.date);
		if (this.parent.onchange!=null)
		{
			try
			{
				this.parent.onchange();
			}
			catch (exc)
			{}
		}
	}
	this.hide();
}

/// <summary>Display the DatePicker Control</summary>
DatePicker.prototype.show = function(name) {
    this.active = true;
    this.parent = document.getElementById(name);
    if (this.parent != null) {
        // Set the Control Value
        this.setDate((this.parent.value > "") ? document.abo.getDate(this.parent.value) : new Date());
        this.render();

        // Set the Control Position
        var x = findX(this.parent);
        var y = findY(this.parent) + this.parent.offsetHeight + 3;
        if (y + this.control.offsetHeight > document.body.scrollHeight) {
            y -= (this.control.offsetHeight + this.parent.offsetHeight + 6);
        }
        this.control.style.top = y + "px";
        this.control.style.left = x + "px";
        this.control.style.visibility = "visible";
    }
    this.active = false;
    hideSelectElements(this.control);
}

/// <summary>Hide the DatePicker Control</summary>
DatePicker.prototype.hide = function()
{
	if (this.parent != null)
	{
		this.control.style.visibility = "hidden";
		this.parent = null;
	}
	showSelectElements();
}

/// <summary>Display the Previous Month</summary>
DatePicker.prototype.previousMonth = function()
{
	this.month--;
	if (this.month == -1)
	{
		this.year--;
		this.month=11;
	}
	this.setDateExtended();
	this.render();
}

/// <summary>Display the Next Month</summary>
DatePicker.prototype.nextMonth = function()
{
	this.month++;
	if (this.month == 12)
	{
		this.month = 0;
		this.year++;
	}
	this.setDateExtended();
	this.render();
}

/// <summary>Select a Date</summary>
DatePicker.prototype.selectDate = function(day)
{
	this.setDate(new Date(this.year + "/" + (this.month + 1) + "/" + day));
	this.setParentValue();
}

/// <summary>Select Today</summary>
DatePicker.prototype.selectToday = function()
{
	this.setDate(new Date());
	this.setParentValue();
}

/// <summary>Select no date</summary>
DatePicker.prototype.selectNone = function()
{
	if (this.parent != null)
	{
		this.parent.value = "";
	}
	this.hide();
}

/// <summary>Render the control</summary>
DatePicker.prototype.render = function()
{
	var output = new String();
	output += "<table class=\"datePicker\" width=\"100%\">";
	// Month Heading
	output += "<tr><td valign=top>";
	output += "<table cellpading=\"0\" cellspacing=\"0\" border=\"0\" class=\"DatePickerHeading\"><tr>";
	output += "<td><a class=\"DatePickerButton\" href=\"javascript:document.datePicker.previousMonth()\">&lt;&lt;</a></td>";
	output += "<td align=\"center\" width=\"100%\">" + this.months[this.month] + "&nbsp;" + this.year + "</td>";
	output += "<td><a class=\"DatePickerButton\" href=\"javascript:document.datePicker.nextMonth()\">&gt;&gt;</a></td>";
	output += "</table></tr>";
	output += "</td></tr>"
	// Day Heading
	output += "<tr><td valign=\"top\">";
	output += "<table border=\"0\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\">";
	output += "<tr class=\"datePickerHeading\">";
	for (var index=0; index<this.days.length; index++)
	{
		var day = (index + parseInt(document.abo.firstDayOfWeek)) % 7;
		output += "<td align=\"center\" width=\"" + (100 / this.days.length) + "%\">" + this.days[day] + "</td>";
	}
	output += "</tr>";
	// Month
	var day = 0;
	var row = 0;
	// computing starting index for date
	var startIndex = this.FirstDay - parseInt(document.abo.firstDayOfWeek);
	if (startIndex < 0)
	{
		startIndex += 7;
	}
	startIndex %= 7;
	//
	while (row < 6)
	{
	    output += "<tr class=\"DatePicker\">";
		row++;
		for (var index=0; index<7; index++)
		{
			if (day == 0 && row == 1 && index == startIndex)
			{
				day = 1;
			}
			else if (day != 0)
			{
				day++;
			}
			output += "<td align=\"center\"" + ((this.day == day && this.date.getMonth() == this.month && this.date.getFullYear() == this.year) ? " class=\"DatePickerDay\"" : "") + ">";
			output += (day != 0 && day <= this.daysInMonth[this.month]) ? "<a class=\"DatePicker\" href=\"javascript:document.datePicker.selectDate(" + day + ");\">" + day + "</a>" : "&nbsp;";
			output += "</td>";
		}
		output += "</tr>";
	}
	output += "</table>"
	output += "</td></tr>"
	// Options
	output += "<tr><td align=\"center\">";
	output += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\"><tr>";
	output += "<td align=center><a href=\"javascript:document.datePicker.selectToday()\" class=\"DatePickerButton\">Today</a></td>";
	output += "<td align=center><a href=\"javascript:document.datePicker.selectNone()\" class=\"DatePickerButton\">None</a></td>";
	output += "</tr></table>";
	output += "</td></tr>";
	output += "</table>";
	this.control.innerHTML = output;
}

/// <summary>Add the DatePicker Events to the document</summary>
function addDatePickerListener(datePicker)
{
	document.onclick = function()
	{
		if (!datePicker.active)
		{
			datePicker.hide();
		}
		else
		{
			datePicker.active = false;
		}
	}	
}