var minicalajaxpageid=49;
var viewdaypageid=6;

window.addEvent('domready', function() {
	date=getUrlVar('date');
	today=new Date();
	if(date!=""){
		date=date.split('-');
		jaar=date[0];
		maand=Number(String(date[1]));		
		chosenday=Number(String(date[2]));
		if(jaar<today.getFullYear())
			offset=-((12-maand)+(today.getMonth()+1));
		else
			offset=maand-(today.getMonth()+1);
		draw_calendar(Number(String(offset)),chosenday,maand-1,jaar);	
	}
	else
	{
		draw_calendar(0,today.getDate(),today.getMonth(),today.getFullYear());	
	}	


})

function draw_calendar(offset,chosenday,chosenmonth,chosenyear){//deze functie tekent de minicalender boven aan de site
	//alert(offset);
	
	d = new Date();
	d.setMonth(d.getMonth() +offset);
	
	
	var maand=d.getMonth();
	var jaar = d.getFullYear();
	
	//leesbare maanden
	var ARR_MAANDEN = ["Januari", "Februari", "March", "April", "May", "June",
		"July", "August", "September", "Oktober", "November", "December"];
	
	var dateselecters="<span id=minicalpijlleft class=clickable onclick=\"draw_calendar("+(offset-1)+","+chosenday+","+chosenmonth+","+chosenyear+")\">&#060;</span> "
						+ARR_MAANDEN[d.getMonth()]+" "+d.getFullYear()+
						"<span id=minicalpijlright class=clickable onclick=\"draw_calendar("+(offset+1)+","+chosenday+","+chosenmonth+","+chosenyear+")\">&#062;</span> "
	var table="<table id='minical' class='minical'><tr><th colspan=7>"+dateselecters+"</th></tr>";//buffer de output in deze variable. teven ook de eerste rij met de selectboxen
	

	d.setFullYear(jaar,maand,1);//dag 1 zodat je kan kijken op welke weekdag de maand begint
	// leesbare dagen
        var ARR_DAGEN = ["M", "T", "W", "T", "F", "S", "S"];

        var dag =(d.getDay()==0)? 6:d.getDay()-1; //week begint met maandag en niet op zondag...
        var dageninmaand=daysInMonth(maand,jaar);
        var aantweken=4+Math.ceil(((dageninmaand%7)+dag)/7); //het aantal weken in deze maand. belangrijk voor het tekenen

	
	//hieronder gaan we de tabel opvullen per week, en daarin per dag.
	for(var i=0;i<aantweken;i++)//weken
	{
		table+="<tr>";//elke week een eigen rij
		for(var ii=0;ii<7;ii++)//dagen
		{
			var cell=i*7+ii;//de hoeveelste dag van de maand zitten we?
			if(((cell-dag)>=0)&&(((cell-dag)+1)<=dageninmaand))//mocht de dag binnen de maand vallen, dan moet er een getal in
			{
				var selectedday=(((cell-dag)+1==chosenday)&&(maand==chosenmonth)&&(jaar==chosenyear))?'class=selectedday':'';//de dag die je aangeklikt hebt (of vandaag)
				var datestring=jaar+"-"+leadingZero(Number(maand)+1)+"-"+leadingZero(((cell-dag)+1));//om het hokje van de dag een uniek id mee te geven (later gebruikt om de data van die dag op te halen)
				table+="<td "+selectedday+" id='"+datestring+"'>"+((cell-dag)+1)+"</td>";//standaard ervan uit gaan dat er niets te doen valt op die dag. dit wordt later nog aangepast
				
			}	
			else
				table+="<td></td>";//een lege cell om de tabel toch compleet te houden

		}
		table+="</tr>";
	}
	table+="</table>";
	
	document.getElementById('minical_container').innerHTML=table;//output de tabel op de correcte plaats

	
	
	//het belangrijkste. met deze functie wordt er in de database gekeken en de tabel aangepast zodat er events in worden weergeven
	AjaxGetMonthEvents(jaar+"-"+leadingZero(Number(maand)+1)+"-01");

}

function AjaxGetMonthEvents(date){//het belangrijkste. met deze functie wordt er in de database gekeken en de minikalender aangepast zodat er events in worden weergeven
	var url="index.php?id=" +minicalajaxpageid;
	new Request.JSON({url: url, onSuccess: function(databaseresult){
		if(databaseresult[0]!='')//als er uberhaupt data is
		{
			for(var row=0;row<databaseresult.length;row++)//ga alle events langs
			{
				var datum=databaseresult[row]['date']//omdat alle tabel cellen een datum als id hebben, kan je dus via de datum heel makkelijk eigenschappen veranderen
				$(datum).addClass("event");//zet de class zodat css er wat mee kan
				$(datum).onmouseover = AjaxGetDayEvents;//voeg een hoverevent toe
				$(datum).onmouseout = ClearOutput;//zorg dat het veld naast de tabel leeg is als je van het hokje af gaat
				$(datum).onclick = function (){window.location="index.php?id="+viewdaypageid+"&date="+this.id;};//voeg een event toe zodat de dag bekeken kan worden

			}
			d=new Date();
			var vandaag=d.getFullYear()+"-"+leadingZero(Number(d.getMonth())+1)+"-"+leadingZero((d.getDate()));//dit is om de dag van vandaag evt extra te benadrukken. verder niet geimplementeerd
		}
	}}).post({'date': date, 'reduced': '1'})
}

function update_calendar(){//als er een andere maand gekozen wordt, moet de kalender opnieuw getekend worden
	ClearOutput();//maak het vak naast de tabel leeg
	draw_calendar(document.getElementById('maand').value );//teken de tabel opnieuw
}

function AjaxGetDayEvents(){//print naast de minicalender de events van de desbetreffende dag
	var MAX_EVENTS=5;//hoeveel events kunnen er maximaal naast de kalender staan
	var container=this;//de cell waarop je klikt gaat het ajax event bevatten
	var url="index.php?id=" +minicalajaxpageid;
	if(typeof(container.ajaxRequest) != "undefined")//als deze cell een ajax object heeft	
		container.ajaxRequest.cancel();//deze functioncall is recenter, dus cancell de vorige
	
	container.ajaxRequest=new Request.JSON({url: url, onSuccess: function(databaseresult){
		var html="";//tegen variable injection
		if(databaseresult[0]!='')  //als er data is
		{	
			var ARR_MAANDEN = ["Januari", "Februari", "March", "April", "May", "June",
				"July", "August", "September", "Oktober", "November", "December"];//om het leesbaar te houden
				
			// leesbare dagen (maaar dan lang. is misschien ooit nog wel mooit
			//var ARR_DAGEN = ["Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"];
			var ARR_DAGEN = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; //om het leesbaar te houden
			var datum=databaseresult[0]['datum'].split('-'); //datum wordt in jaar, maand en dag gesplitst
			var dag=new Date() ;
			dag.setDate(Number(datum[2]));//zet de dag in de variable
			dag.setFullYear(Number(datum[0]));//zet het jaar in de variabele
			dag.setMonth(Number(datum[1])-1);//zet de maand in de variabele (-1 ivm javascript FAAL)
			dag=dag.getDay(); //verkrijg de dag van de week.
			
			html+="<b style='font-size:20px'>"+ ARR_DAGEN[(Number(dag-1)<0)?6:Number(dag-1) ] +" "+Number(datum[2]) +" "+ARR_MAANDEN[(Number(datum[1])-1)] +" " +"</b><ul>";//print welke dag het is
			
			for(var i=0; i<Math.min(databaseresult.length,MAX_EVENTS); i++)//print de eerst "MAX_EVENTS" events
			{
				if((i==MAX_EVENTS-1)&&(databaseresult.length>MAX_EVENTS))//MAX_EVENTS betekent eigenlijk maximaal aantal regels. laatste regel moet dus zeggen dat er meer is
					html+="<li>And more...</li>";
				else
					html+="<li>"+databaseresult[i]['subject'] +"</li>";//print de event
			}
			html+="</ul>";
		}
		document.getElementById("events_today").innerHTML = html;//output de html
	}}).post({'date': this.id})
	
	
	
	
}

function ClearOutput(){// maak het hok naast de minicalender leeg
	if(typeof(this.ajaxRequest) != "undefined")
		this.ajaxRequest.cancel();
	document.getElementById("events_today").innerHTML = "";
}

function daysInMonth(iMonth, iYear){//returnt het aantal dagen in de maand
	return 32 - new Date(iYear, iMonth, 32).getDate();
}

function leadingZero(x){
   return (x>9)?x:'0'+x;
}