// JavaScript Document

function showHide(id){
	var div = document.getElementById(id);
	if(div.style.display == "none"){
		div.style.display = "block";
	}else{
		div.style.display = "none";
	}
	
	
}

function setSrc(id){
	var pad = 'art/pics/';
	if(id=='alle'){
		plaatjes = document.getElementsByTagName('img');
		for(i=0; i<plaatjes.length; i++){
			if(plaatjes[i].className != "noscript"){
				imgid = plaatjes[i].getAttribute('id');
				document.getElementById(imgid).setAttribute('src', pad + 'loading.gif');
			}
		}
	}else{
		plaatjes = document.getElementById(id).getElementsByTagName('img');
		for(i=0; i<plaatjes.length; i++){
			if(plaatjes[i].className != "noscript"){
				imgid = plaatjes[i].getAttribute('id');
				if(imgid.match('thumb') == null){
					document.getElementById(imgid).setAttribute('src', pad + imgid);
				}
			}
		}
	}
}
window.onload=function(){
	setSrc("alle");
	//setSrc("p1");
}


function show(id){
	
	document.getElementById('cards').style.display = 'block';
	document.getElementById('welkom').style.display = 'none';
	
	setSrc(id);
	kaarten = document.getElementById('cards').getElementsByTagName('div');
	for(i=0; i<kaarten.length; i++){
		kaarten[i].style.display = "none"; //zet eerst alles uit
	}
	
	var dorp = document.getElementById(id);
	dorp.style.display = "block";
	 
	var subdivs = dorp.getElementsByTagName('div'); //kijk of er meerdere ansichten in deze div zitten
	if(subdivs.length > 0){
		
		cid = 'control' + id;
		if(!document.getElementById(cid)){
			
			thumbs = new Array();
			for(i=0; i<subdivs.length; i++){
				var subid = 'sub' + id + '_' + i;
				subdivs[i].setAttribute('id',subid); //maak id voor elke subdiv
				
				var oldNode = document.getElementById(subid).getElementsByTagName('img')[0];
				thumbs[i] = oldNode.cloneNode(true);
				
				var thumbid = 'thumb' + id + '_' + i;
				thumbs[i].setAttribute('id',thumbid); //maak id voor elke subdiv
				
				//nu nog even kijken of we hier een mouseover effect kunnen bewerkstelligen
				if(document.all){
					thumbs[i].attachEvent('onmouseover', trackEvent );
				}else{
					thumbs[i].addEventListener('mouseover', trackEvent ,true);
				}
				
			}
		
			controldiv = document.createElement('div');
			for(i=0; i<thumbs.length; i++){
				controldiv.appendChild(thumbs[i]);
			}
			controldiv.setAttribute('id',cid);
			controldiv.className = "control";
			dorp.insertBefore(controldiv,get_firstchild(dorp));
			
		}
		
		document.getElementById(cid).style.display = "block";
		var eersteSub = 'sub' + id + '_0';
		document.getElementById(eersteSub).style.display = "block";
		
	} 
	return false;
}
function trackEvent(e){
	var targ;
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) // opvangen Safari bug
		targ = targ.parentNode;
	//alert(e.type);
	id = targ.id;
	if(e.type == "mouseover"){
		control = document.getElementById(id).parentNode.getAttribute('id');
		container = document.getElementById(control).parentNode.getAttribute('id'); 
		var afb = id.replace(/thumb/,"sub");
		showSubs(container,afb);
	}
}
function get_firstchild(n){
	var x = n.firstChild;
	while (x.nodeType!=1){
		x = x.nextSibling;
	}
	return x;
}

function showSubs(id,subid){
	subs = document.getElementById(id).getElementsByTagName('div');
	for(i=1; i<subs.length; i++){ //begin niet bij 0, want dan zijn we ook de controldiv met de thumbs kwijt!
		subs[i].style.display = "none"; //zet eerst alles uit
	}
	document.getElementById(subid).style.display = "block";
}