/**
 * @author ben
 */
var DatePicker = function(par)
{
	this.months = {
		// UTC Months range from 0 to 11.
		0 : {name:"Januari",days:31},
		1 : {name:"Februari",days:28},
		2 : {name:"Maart",days:31},
		3 : {name:"April",days:30},
		4 : {name:"Mei",days:31},
		5 : {name:"Juni",days:30},
		6 : {name:"Juli",days:31},
		7 : {name:"Augustus",days:31},
		8 : {name:"September",days:30},
		9 : {name:"Oktober",days:31},
		10 : {name:"November",days:30},
		11 : {name:"December",days:31}
	};
	
	// default parameters.
	this.parameters = {
		panelClass : "date-picker-panel",
		panelOffsetX : 0,
		panelOffsetY : 20,
		panelId : "__JSDATEPICKER__",
		onSelect : function(){}
	};
	
	this.onSelect = this.parameters.onSelect;
	
	// no need to change values below this line.
	var parameters = par || {};
	
	for(var key in parameters)
		this.parameters[key] = parameters[key];
	
	this.panel = null;
	
	var self = this;
};

DatePicker.prototype.createPanel = function()
{
	this.panel = document.createElement("div");
	this.panel.setAttribute("id",this.parameters.panelId);
	this.panel.className = this.parameters.panelClass;
	this.panel.style.position = "absolute";
	this.panel.style.display = "none";
	this.panel = document.body.appendChild(this.panel);
	var self = this;
	this.panel.onclick = function(e)
	{
		var e = e || window.event;
		var target = e.target || e.srcElement;
		var cn = target.className || "";
		if(/workday|weekend/.test(cn))
		{
			self.announceDate(target.innerHTML);
		}
		else if (/previous-month/.test(cn))
		{
			self.prevMonth();
			self.renderPanel();
		}
		else if (/next-month/.test(cn))
		{
			self.nextMonth();
			self.renderPanel();
		}
		else if (/cancel/.test(cn))
		{
			self.cancelEdit();
		};
	};
	return this.panel;
};

DatePicker.prototype.setCurrentDate = function(date)
{
	var bits = date.replace(/^\s+|\s+$/g,"").split("-");
	this.year = this.currentYear = bits[0]*1;
	this.month = this.currentMonth = (bits[1]*1)-1; // UTC Month
	this.day = this.currentDay = bits[2]*1;
};

DatePicker.prototype.editDate = function(el,date)
{
	if(!this.panel)
		this.createPanel();
	this.setCurrentDate(date);
	this.positionPanel(el);
	this.renderPanel();
	this.panel.style.display = "block";
};

DatePicker.prototype.positionPanel = function(el)
{
	var up = el,x=0,y=0;
	if (up.offsetParent) 
	{
		while (up != document.body) 
		{
			x += up.offsetLeft;
			y += up.offsetTop;
			up = up.offsetParent;
		};
	};
	var offsetX = x + this.parameters.panelOffsetX;
	var offsetY = y + this.parameters.panelOffsetY;
	this.panel.style.top = offsetY + "px";
	this.panel.style.left = offsetX + "px";
};

DatePicker.prototype.cancelEdit = function(e)
{
	this.panel.style.display = "none";
};

DatePicker.prototype.renderPanel = function()
{
	this.table = "<table><tbody>"+this.renderHead()+this.renderDays()+"</tbody></table>";
	this.panel.innerHTML = this.table;
};

DatePicker.prototype.renderHead = function()
{
	var title = this.months[this.month].name+", "+this.year;
	var head = "<tr><th class='previous-month'>&laquo;</th>";
	head += "<th class='month' colspan='5'>"+title+"</th>";
	head += "<th class='next-month'>&raquo;</th></tr>";
	return head;
};

DatePicker.prototype.renderDays = function()
{
	var year = this.year;
	var month = this.month;
	var days = "";
	
	// ammount of days in current month.
	var daysInMonth = this.months[month].days;
	if(month == 1 && this.isLeapYear(year)) 
		daysInMonth++;

	// leading empty days, starting on monday.
	var diff = new Date(year, month-1, 1).getDay();
	if(diff == 6) diff = 0;
	var length = Math.ceil(((diff+1)+daysInMonth)/7) * 7;
	
	for(var i=0;i<length;i++)
	{
		if((i%7)==0) days += "<tr>";
		if(i>diff && (i-diff)<=daysInMonth)
		{
			var d = (i-diff);
			var cn = ((i%7)-5 == 0 || (i%7)-6 == 0) ? "weekend" : "workday";
			if(d == this.currentDay && month == this.currentMonth && year == this.currentYear)
				cn += " selected";
			days += "<td class='"+cn+"'>"+d+"</td>";
		}
		else
		{
			days += "<td></td>";
		};
	};
	days += "<tr><td colspan='7' class='cancel'>cancel</td></tr>";
	return days;
};

DatePicker.prototype.announceDate = function(d)
{
	var year = this.year;
	var m = this.month+1;
	var month = (m<10) ? "0"+m:m;
	var day = (d<10) ? "0"+d:d;
	this.panel.style.display = "none";
	this.onSelect(year+"-"+month+"-"+day);
};

DatePicker.prototype.prevMonth = function()
{
	if(this.month == 0)
	{
		this.month = 11;
		this.year =  this.year-1;	
	}
	else
		this.month = this.month-1;
};

DatePicker.prototype.nextMonth = function()
{
	if(this.month == 11)
	{
		this.month = 0;
		this.year =  this.year +1;	
	}
	else
		this.month = this.month+1;
};

DatePicker.prototype.isLeapYear =function(year)
{
	return ((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0);
};

var DP;
var editDate = function(el,xel)
{
	if(!DP)
		DP = new DatePicker()
	DP.editDate(el,xel.getTextContent());
	DP.onSelect = function(date)
	{
		xel.setTextContent(date);
		el.focus();
	};
};




/*
//Another date picker...

//what are they called again?
var months = ["","Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December"];
//Somehow that month before January has 0 days... probably a good thing.
var daysinmonths = [0,31,28,31,30,31,30,31,31,30,31,30,31];

//remember the element we are editing
var currentDateEditing = null;

//also remember what the current value is
var currentMonth = null;
var currentYear = null;
var currentDate = null;

//open the date picker for this element
function editDate(xopusElement) {
	var datePicker = document.getElementById("datePicker");
	
  //show the picker
	datePicker.style.top = window.event.clientY- window.event.offsetY+15;
	datePicker.style.left = window.event.clientX - window.event.offsetX;
	datePicker.style.display = "block";
	
  //remember
  currentDateEditing = xopusElement;

  var value = xopusElement.getTextContent();
 	var year  = value.substring(0,4)*1;
	var month = value.substring(5,7)*1; 
	var day   = value.substring(8,10)*1; 

	currentMonth = month;
	currentYear = year;	
	currentDate = value;	

	//alert(new Date(year, month, day));
	
	updateDatePicker();
}

//hide the thing and forget some things
function cancelEditDate()
{
	var datePicker = document.getElementById("datePicker");
	datePicker.style.display = "none";
	currentDateEditing = null;
}

//set the value on the node.
function setDate(value)
{
	//alert(value);
	currentDateEditing.setTextContent(value);
	cancelEditDate();
}

//well, what the function name says
function updateDatePicker()
{
	drawTitle(currentMonth, currentYear);
	drawDays(currentMonth, currentYear);

}

// they come and go...
function nextMonth()
{
	var month = currentMonth;
	var year = currentYear;
	
	if(month == 12)
	{
		month = 1;
		year = year +1;	
	}
	else
		month = month+1;
	
	currentMonth = month;
	currentYear = year;
	
	updateDatePicker();
}

// they go and come
function prevMonth()
{
	var month = currentMonth;
	var year = currentYear;
	
	if(month == 1)
	{
		month = 12;
		year = year -1;	
	}
	else
		month = month-1;
	
	currentMonth = month;
	currentYear = year;
	
	
	updateDatePicker();
}

// sets the title on the datePicker to monthname plus year
function drawTitle(month, year)
{
	var header = document.getElementById("dateMonthName");
	header.innerHTML = months[month]+" "+year;
}

//draw the dates, and the dummies
//dummie are the days before the first day of the week.
function drawDays(month,year)
{	
	var parent = document.getElementById("days");
  
  //cleanup for 'last' month
	while(parent.childNodes[0] != null)
		parent.removeChild(parent.childNodes[0]);
	
	//sunday = 0, we start on monday
	var dayoftheweek = new Date(year, month-1, 1).getDay();
	
	dayoftheweek = dayoftheweek-1;
	if(dayoftheweek == -1) dayoftheweek = 7;
	
  //dummies
	for(i=0;i<dayoftheweek;i++)
	{
		var div = createDay("day dummy",' ');
		parent.appendChild(div);
	}
	
  //this month
	var daysinmonth = daysinmonths[month];

	if(month == 2 && isLeapYear(year)) 
		daysinmonth++;
	
  //draw the days in the month, which are links with divs in them...
	for(i=0;i<daysinmonth;i++)
	{
		var a = createLink(year+"-"+leadingZero(month)+"-"+leadingZero(i+1));
		var div = createDay("day",i+1);
		a.appendChild(div);
		var f = getHandler(year+"-"+leadingZero(month)+"-"+leadingZero(i+1))
		a.attachEvent("onclick",f);
		parent.appendChild(a);
	}
}

//this function is over here to get the scope of 'value' right
function getHandler(value)
{
	return function(){setDate(value)};
}

//a div
function createDay(classnames, str)
{
	var div = document.createElement("div");
	div.className = classnames;
	if(str)
	{
		var textNode = document.createTextNode(str);
		div.appendChild(textNode);
	}
	return div;
}

//a link
function createLink(value)
{
	var a = document.createElement("a");
	if(value == currentDate)
	{
		a.className = "current";
	}
	a.setAttribute("href","#",2);
	return a;
}

// a whole method for that discrepancy in our way of figuring out how old we are...
function isLeapYear(year)
{
	return ((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0);
}

//esthetics..., but the date should always be written as yyyy-mm-dd
function leadingZero(val)
{
	return (val < 10) ?"0"+val:val;	
}
*/