/*  ==================================================================================================================
FILE 			:cyclocross.js 
COMPATIBILITY 		:IE6+  ; FF 
AUTHOR 			: Davy Logie - Sept , 2007
==================================================================================================================*/
arrfotoKiezen = new Array();
locatie = "";
test = "0";
hoeveelheidfotos = 0;
nummerComm = 1;
bes = "";

function init(){

	document.getElementById('hoogerheide 2').onclick = new Function('ladenFiguren("hoogerheide 2", ' + 51 + ', "Hoogerheide 24 januari deel 2");');
	document.getElementById('hoogerheide 1').onclick = new Function('ladenFiguren("hoogerheide 1", ' + 61 + ', "Hoogerheide 24 januari deel 1");');
	document.getElementById('roub profs').onclick = new Function('ladenFiguren("roub profs", ' + 45 + ', "Roubaix Elite 17 januari");');
	document.getElementById('roub wom').onclick = new Function('ladenFiguren("roub wom", ' + 33 + ', "Roubaix Women 17 januari");');
	document.getElementById('roub juniorsu23').onclick = new Function('ladenFiguren("roub juniorsu23", ' + 54 + ', "Roubaix Juniors + U23 17 januari");');
	document.getElementById('zolder 1').onclick = new Function('ladenFiguren("zolder 1", ' + 57 + ', "Zolder 26 december deel 1");');
	document.getElementById('zolder 2').onclick = new Function('ladenFiguren("zolder 2", ' + 49 + ', "Zolder 26 december deel 2");');

}

function ladenFiguren(map, aantalFotos, beschrijving){
	bes = beschrijving;
	locatie = map;
	hoeveelheidfotos = aantalFotos;
	for( var teller = 1; teller < aantalFotos; teller ++){
		arrfotoKiezen[teller] = teller + ".jpg";
	}
	aanmakenRij(map, aantalFotos, beschrijving);
}

function aanmakenRij(map ,aantalFotos, beschrijving){
	var attr = document.getElementById(locatie.toString()).getAttribute('href');
	attr = attr + '?fotonr=1';
	//alert(attr);
	document.getElementById(locatie.toString()).setAttribute('href', attr);
	
	var div = document.createElement("div");
	div.setAttribute("id", "thumbnails");
	/*var ul = document.createElement("ul");
	for( var teller = 1; teller < aantalFotos; teller++){
		var li = document.createElement("li");
		li.onclick = new Function('clickThumbnails( ' + teller + ');');
		var afbeelding = new Image();
		afbeelding.src = "images/street/" + map + "/" + arrfotoKiezen[teller];
		li.appendChild(afbeelding);
		ul.appendChild(li);
	}
	div.appendChild(ul);*/
	
	var tbl = document.createElement("table");
	
	var tblHead = document.createElement('thead');
	var tblFoot = document.createElement('tfoot');
	var tblBody = document.createElement('tbody'); // Je MOET een body hebben om ervoor te zorgen dat de tabel toont in IE
	var tr = document.createElement('tr');
	for( var teller = 1; teller < aantalFotos; teller++){
		var td = document.createElement('td');
		td.onclick = new Function('clickThumbnails( ' + teller + ');');
		var afbeelding = new Image();
		afbeelding.src = "images/cyclocross/" + map + "/" + arrfotoKiezen[teller];
		td.appendChild(afbeelding);
		tr.appendChild(td);
	}
	tblBody.appendChild(tr);
	//tbl.appendChild(tblHead);
	//tbl.appendChild(tblFoot);
	tbl.appendChild(tblBody);
	div.appendChild(tbl);
	
	document.getElementById("fotos").innerHTML = "";
	document.getElementById("fotos").appendChild(div);
	aanmakenCommentaarbalk(beschrijving);
	if(test == "0"){
	ladenEersteGroteFoto();
	}
}

function aanmakenCommentaarbalk(beschrijving){	
	var divBalk = document.createElement("div");
	divBalk.setAttribute("id", "commentaarbalk");
	var spanCommentaar = document.createElement("div");
	spanCommentaar.setAttribute("id", "commentaar");
	spanCommentaar.appendChild(document.createTextNode(beschrijving));
	var spanback = document.createElement("a");
	spanback.appendChild(document.createTextNode("back"));
	spanback.setAttribute("href", "cyclocross.htm");
	spanback.setAttribute("id", "spanback");
	var links = document.createElement("a");
	var rechts = document.createElement("a");
	var commentaarbalklinks = new Image();
	var commentaarbalkrechts = new Image();
	links.setAttribute("id", "links");
	rechts.setAttribute("id", "rechts");
	commentaarbalklinks.setAttribute("id", "commentaarbalklinks");
	commentaarbalkrechts.setAttribute("id", "commentaarbalkrechts");

	divNummer = document.createElement("div");
	divNummer.setAttribute("id", "divNummer");
	divNummer.appendChild(document.createTextNode(nummerComm));
	
	//links.src = "images/links.gif";
	//rechts.src = "images/rechts.gif";
	commentaarbalklinks.src = "images/commentaarbalklinks.gif";
	commentaarbalkrechts.src = "images/commentaarbalkrechts.gif";
		links.onclick = new Function('linksFiguur();');
		rechts.onclick = new Function('RechtsFiguur();');
	divBalk.appendChild(links);
	divBalk.appendChild(divNummer);
	divBalk.appendChild(commentaarbalklinks);
	divBalk.appendChild(spanCommentaar);
	divBalk.appendChild(spanback);
	divBalk.appendChild(commentaarbalkrechts);
	divBalk.appendChild(rechts);
	document.getElementById("fotos").appendChild(divBalk);
}

function clickThumbnails(nummer){
	document.getElementById("fotos").removeChild(document.getElementById('commentaarbalk'));
	nummerComm = nummer;
	aanmakenCommentaarbalk(bes);
	
	test = "1";
	var attr = document.location;
	attr = attr.toString();
	attr = attr.substring(0 , attr.indexOf('?'));
	attr = attr + "?fotonr=" + nummer;
	document.location = attr;
	
	var divGroot = document.createElement("div");
	divGroot.setAttribute("id", "fotoGroot");
	var afbeeldingGroot = new Image();
	afbeeldingGroot.src = "images/cyclocross/" + locatie + "/groot/" + nummer + ".jpg";
	afbeeldingGroot.onclick = new Function('RechtsFiguur();');
	//alert(document.getElementById('fotos').lastChild);
	document.getElementById('fotos').removeChild(document.getElementById('fotoGroot'));
	divGroot.appendChild(afbeeldingGroot);
	document.getElementById("fotos").appendChild(divGroot);
}

function ladenEersteGroteFoto(){
	var divGroot = document.createElement("div");
	divGroot.setAttribute("id", "fotoGroot");
	var afbeeldingGroot = new Image();
	afbeeldingGroot.src = "images/cyclocross/" + locatie + "/groot/1.jpg";
	afbeeldingGroot.onclick = new Function('RechtsFiguur();');
	divGroot.appendChild(afbeeldingGroot);
	document.getElementById("fotos").appendChild(divGroot);
}
	
function linksFiguur(){
	var attr = document.location;
	attr = attr.toString();
	var nummerFoto = attr.substring(attr.indexOf('=') + 1, attr.length);
	nummerFoto = parseInt(nummerFoto, 10);
	nummerFoto = nummerFoto - 1;
	if(nummerFoto > 0){
	clickThumbnails(nummerFoto);
	}
}
	
function RechtsFiguur(){
	var attr = document.location;
	attr = attr.toString();
	var nummerFoto = attr.substring(attr.indexOf('=') + 1, attr.length);
	nummerFoto = parseInt(nummerFoto, 10);
	nummerFoto = nummerFoto + 1;
	if(hoeveelheidfotos > nummerFoto){
	clickThumbnails(nummerFoto);
	}
}