window.onload = function() {
	if (document.getElementById('vermissingencaroussel')) initCaroussel();
};

var currentid = 0;

function initCaroussel() {
	
	paginas = document.getElementsByClassName('thumbs', 'span');
	thumbs = document.getElementsByClassName('thumb', 'span');
	currentpagina = 0;
	swappagina();
	
	/* alle pijlen uit */
	document.getElementById('carousselnext').style.visibility = 'hidden';
	document.getElementById('carousselprev').style.visibility = 'hidden';
	document.getElementById('carousselfirst').style.visibility = 'hidden';
	document.getElementById('caroussellast').style.visibility = 'hidden';
	
	/* eventueel volgende pijl aan */
	if (paginas.length > 1) {
		document.getElementById('carousselnext').style.visibility = 'visible';
		document.getElementById('caroussellast').style.visibility = 'visible';
	}
	
	document.getElementById('carousselnext').onclick = function() { 
		
		if (currentpagina < paginas.length - 1) { 
			currentpagina ++; swappagina() 
		} 
		
		if (currentpagina == (paginas.length - 1)) {
			document.getElementById('carousselnext').style.visibility = 'hidden';
			document.getElementById('caroussellast').style.visibility = 'hidden';
		}
		
		if (currentpagina > 0 ) { 
			document.getElementById('carousselprev').style.visibility = 'visible';
			document.getElementById('carousselfirst').style.visibility = 'visible';
		}
		
	};
	
	document.getElementById('carousselprev').onclick = function() { 
		
		if (currentpagina > 0 ) { 
			currentpagina --; swappagina() 
		} 
		
		if (currentpagina == 0) {
			document.getElementById('carousselprev').style.visibility = 'hidden';		
			document.getElementById('carousselfirst').style.visibility = 'hidden';
		}
		
		if (currentpagina < paginas.length) { 
			document.getElementById('carousselnext').style.visibility = 'visible';
			document.getElementById('caroussellast').style.visibility = 'visible';
		}
		
	};
	
	document.getElementById('carousselfirst').onclick = function() { 
		currentpagina = 0; swappagina() 

		if (currentpagina == 0) {
			document.getElementById('carousselprev').style.visibility = 'hidden';		
			document.getElementById('carousselfirst').style.visibility = 'hidden';
		}
		
		if (currentpagina < paginas.length) { 
			document.getElementById('carousselnext').style.visibility = 'visible';
			document.getElementById('caroussellast').style.visibility = 'visible';
		}
		
	};
	
	document.getElementById('caroussellast').onclick = function() { 
		currentpagina = paginas.length - 1; swappagina() 

		if (currentpagina == (paginas.length - 1)) {
			document.getElementById('carousselnext').style.visibility = 'hidden';
			document.getElementById('caroussellast').style.visibility = 'hidden';
		}
		
		if (currentpagina > 0 ) { 
			document.getElementById('carousselprev').style.visibility = 'visible';
			document.getElementById('carousselfirst').style.visibility = 'visible';
		}
		
	};
	
	for (var thumb in thumbs) {
		if (thumb/1 >= 0) {
			thumbs[thumb].id = thumb;
			thumbs[thumb].classnaam = thumbs[thumb].className;
			thumbs[thumb].onclick = function() { swapPerson(this.id) };
			thumbs[thumb].onmouseout = function() { this.className = this.classnaam };
		}
	}
	
	swapPerson(0);
	
}


function swappagina() {

	for (var pagina in paginas) {
		if (pagina/1 >= 0) paginas[pagina].style.display = 'none';
	}
	paginas[currentpagina].style.display = 'inline';
	document.getElementById('carousselCurrentPage').innerHTML = currentpagina + 1;
}


function swapPerson(id) {
	
	/*for (var thumb in thumbs) {
		if (thumb/1 >= 0)	thumbs[thumb].className = thumbs[thumb].className.replace(/ active/, '');
		thumbs[thumb].onclick = function() { swapPerson(this.id); };
		thumbs[thumb].onmouseout = function() { this.className = this.classnaam};
	}*/
	
	thumbs[currentid].className = thumbs[currentid].className.replace(/ active/, '');
	thumbs[currentid].onclick = function() { swapPerson(this.id); };
	thumbs[currentid].onmouseout = function() { this.className = this.classnaam};
	
	thumbs[id].className = thumbs[id].className + ' active';
	thumbs[id].onclick = function() {  };
	thumbs[id].onmouseout = function() { };
	
	currentid = id;
	
}



/* resource functions */

document.getElementsByClassName = function(cl, tg) {
	var retnode = new Array;
	var myclass = new RegExp('\\b'+cl+'\\b');
	var elem = this.getElementsByTagName(tg);
	for (var i = 0; i < elem.length; i++) {
		var classes = elem[i].className;
		if (myclass.test(classes)) retnode.push(elem[i]);
	}
	return retnode;
};