//na het laden van de pagina worden alle onderwerpen verborgen
window.onload = function() {
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	//de onderwerp divs verbergen
	var alleinhoud = document.getElementById("inhoud");
	var deonderwerpen = alleinhoud.getElementsByTagName("div");
	for (var i = 1; i < deonderwerpen.length; i++) {
		deonderwerpen[i].style.display = "none";
	}
	//de links bovenin initialiseren
	var rijtjelinks = document.getElementById("catetitel");
	var dealineaas = rijtjelinks.getElementsByTagName("p");
	var delinks = rijtjelinks.getElementsByTagName("a");
	for (var i = 0; i < delinks.length; i++) {
		delinks[i].onclick = function() {
			//als de alinea's een 3actief hebben dan een 3bezocht geven
			for(k=0; k<dealineaas.length; k++){
			//als de alinea's niet hier in code een bgimg hebben gekregen dan wordt er geen gevonden
			//dus alsie wat vindt dan kannie 3bezocht worden. verderop wordtie nog actief
			if(dealineaas[k].style.backgroundImage != ""){
				dealineaas[k].style.backgroundImage = "url(basisbeeld/driehoekRv.gif)"
				dealineaas[k].style.backgroundPosition = "left 4px"
				}
			}
			//alinea 3hoekje van geklikte onderwerpen een andere kleur geven
			this.parentNode.style.backgroundImage = "url(basisbeeld/driehoekRa.gif)"
			this.parentNode.style.backgroundPosition = "5px 4px"
			//functie om onderwerpen te tonen aan het werk zetten adhv de titel
			return toonHetOnderwerp(this.getAttribute("title"));
		}
	}
}
//functie om de onderwerp divs te tonen.
function toonHetOnderwerp(p) {
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	var alleinhoud = document.getElementById("inhoud");
	var deonderwerpen = alleinhoud.getElementsByTagName("div");
	//verberg alle onderwerpen
	for (var i = 0; i < deonderwerpen.length; i++) {
		deonderwerpen[i].style.display = "none";
		}
	//toon het ene onderwerp 
	deonderwerpen[p].style.display = "block";
	//de achtergrondafbeelding verwijderen
	alleinhoud.style.backgroundImage = "url(niks.gif)";
	return maakDePlaatjes(p);
}
function maakDePlaatjes(p) {
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	var alleinhoud = document.getElementById("inhoud");
	//alle driehoekjesknoppen in de lijst in de inhoud
	var deknoppen = alleinhoud.getElementsByTagName("ul");
	//de juiste knoppen adhv de p
	var galerie = document.getElementById(deknoppen[p-1].id);
	//alert(galerie)
	var links = galerie.getElementsByTagName("a");
	for (var i = 0; i < links.length; i++) {
		//zet de driehoekjes (eventueel) terug
		links[i].style.marginLeft = "0px";
		//regel de links aan de driehoekjes
		links[i].onclick = function() {
		return toonPlaatjes(this, p);
		}
	}
	//toont na onderwerpkeuze het eerste plaatje (met tekst)
	return toonPlaatjes(links[0], p);
}
function toonPlaatjes(welk_plaatje, p) {
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	var alleinhoud = document.getElementById("inhoud");
	var deonderwerpen = alleinhoud.getElementsByTagName("div");
	//het juiste onderwerp plaatje kiezen, eerst alle (inclusiefdriehoekjes), dan de laatste uit de rij
	var alleplaatjes = deonderwerpen[p].getElementsByTagName("img");
	hoeveel = alleplaatjes.length-1;
	//het grote plaatje, de laatste uit de rij, bepalen en de src veranderen
	var inhimg = alleplaatjes[hoeveel].id;
	var plaatjeplek = document.getElementById(inhimg);
	var bron = welk_plaatje.getAttribute("href");
	//alert (bron);
	plaatjeplek.setAttribute("src",bron);
	//de tekst regelen
	var titeltekst = welk_plaatje.getAttribute("title")
	var dealinea = deonderwerpen[p].getElementsByTagName("p");
	for (var i = 0; i< dealinea.length; i++) {
		if (i != titeltekst) {
			dealinea[i].style.display = "none"
		} else {
			dealinea[i].style.display = "block"
		}
	}
	//alterantieve driehoekjes, volledig adres anders werkt het niet in IE
	var bronActief = "basisbeeld/driehoekRa.gif";
	var bronBezocht = "basisbeeld/driehoekRv.gif";
	//alle links in de  actieve lijst
	var delinklijst = deonderwerpen[p].getElementsByTagName("a");
	//als ze inspringen: terugzetten + plaatje bezocht
	for(i=0; i<delinklijst.length; i++) {
		if(delinklijst[i].firstChild.style.marginLeft == "5px"){
			delinklijst[i].firstChild.style.marginLeft = "0px"
			delinklijst[i].firstChild.setAttribute("src", bronBezocht)
		}
	}
	//actieve driehoekjes inspringen, welk_plaatje is de a-tag
	welk_plaatje.firstChild.style.marginLeft = "5px";
	welk_plaatje.firstChild.setAttribute("src", bronActief);
	return false;
}