var arr_months = ["Januari", "Februari", "Maart", "April", "Mei", "Juni",	"Juli", "Augustus", "September", "Oktober", "November", "December"];
var week_days = ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"];
var untilYear = 2010;
var weekstart = 1; // day week starts from (normally 0 or 1)

function showCalendar(year,month,day) {
  	var date = (day == null || day =="" || month == null || month =="" || year == null || year =="") ?  new Date() : new Date(year,month,day);
		var firstday = new Date(date);
  	firstday.setDate(1);
  	firstday.setDate(1-(7+firstday.getDay()-weekstart)%7);
  	var start_date = new Date(firstday);
  	var current_day = new Date();
  
  	// print calendar header
  	var str_buffer = ""+
  	  "<table id=\"calendar\">\n"+
  		"  <tr>\n"+
  		"	   <td class=\"calendarTop\" colspan=\"7\">"+
  		"		   <select name=\"month\" id=\"month\" size=\"1\" onchange=\"showCalendar(document.getElementById('year').value,this.value,1);\">"
  		for(var i=0;i<12;i++){
  		  str_buffer += "<option value=\""+i+"\" "
  			if(i == date.getMonth())
  			  str_buffer += "selected "
  			str_buffer += ">"+arr_months[i]+"</option>"
  		}
  		str_buffer += "</select>"+
  		"		   <select name=\"year\" id=\"year\" size=\"1\" onchange=\"showCalendar(this.value,document.getElementById('month').value,1);\">"
  		for(var i=current_day.getFullYear();i<=untilYear;i++){
  		  str_buffer += "<option value=\""+i+"\" "
  			if(i == date.getFullYear())
  			  str_buffer += "selected "
  			str_buffer += ">"+i+"</option>"
  		}
  		str_buffer += "</select>"+
  		"			</td>\n"+
  		"  </tr>\n"
  
  	// print weekdays titles
  	str_buffer += "<tr>\n";
  	for(var n=0; n<7; n++)
  		str_buffer += "	<td class=\"dayOfWeek\">"+week_days[(weekstart+n)%7]+"</td>\n";
  	str_buffer += "</tr>\n";
  	
  	while((start_date.getMonth() == date.getMonth()) ||	(start_date.getMonth() == firstday.getMonth())) {
  		// print row heder
  		str_buffer += "<tr>\n";
  		for(var n_current_wday=0; n_current_wday<7; n_current_wday++) {
  			if (start_date.getMonth() == date.getMonth()){
  			  str_buffer += "	<td onclick=\"javascript:displayDate('"+dt2dtstr(start_date)+"')\" "
					if((start_date.getDate() == current_day.getDate()) && (start_date.getMonth() == current_day.getMonth()) && (start_date.getFullYear() == current_day.getFullYear()))
  					str_buffer += "class=\"day currentDay\">";// print current date
  				else if ((start_date.getDay() == 0) || (start_date.getDay() == 6))
  					str_buffer += "class=\"day weekend\">";// weekend days
  				else
  					str_buffer += "class=\"day\">";// print working days of current month
  
  				str_buffer += start_date.getDate()+"</td>\n";// print days of current month
  			}else{
  				str_buffer += "<td class=\"noday\">&nbsp;</td>"// print days of other months
  			}
  			start_date.setDate(start_date.getDate()+1);
  		}
  		// print row footer
  		str_buffer += "</tr>\n";
  	}
  	// print calendar footer
  	str_buffer +=	"</table>\n"
  
    document.getElementById('calendarContainer').innerHTML = str_buffer
  	document.getElementById('calendarContainer').style.display = "block";
}
// datetime parsing and formatting routimes. modify them if you wish other datetime format
function dt2dtstr (dt_datetime) {
	return (new String (
			dt_datetime.getDate()+" "+arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+" "));
}
function displayDate(date){
  document.getElementById('datum').value = date;
  document.getElementById('calendarContainer').style.display = "none";
}