// Opacity and Fade in script.
// Script copyright (C) 2008 http://www.cryer.co.uk/.
// Script is free to use provided this copyright header is included.

var delay=8000; var teller=0; var timeoutID=''; var load=false;
var mouseoverimage=false; var loader = new Array();

loader[0] = new Image();
if (banner.length > 0) loader[0].src = banner[0];

function loadImages() {
	for(var i=1; i < banner.length; i++) {
	loader[i] = new Image();
	loader[i].src = banner[i];
	}
}

function rotateBanner() {
// Wordt aangeroepen na het laden van de pagina, zorgt ervoor dat de eerste banner wordt getoond op de voorgrond
// Verder worden aan de linkerkant van de banner de knoppen neergezet en voorzien van de juiste tekst (title banner) 
// hierna wordt het roteren aangeroepen, in functie rotatie wordt per banner de tekst die in het contentgedeelte van de banner is geplaatst getoond.
	var knoppen='';
	if (banner.length > 0) {
// Eerste bannerafbeelding wordt nu geladen
		document.images['bannerimage'].src = banner[teller];
	
// worden er evenveel knoppen aan de linkerkant van de banner neergezet als er banners zijn, afhankelijk van de waarde van de banner krijgt een knop een accent.
// Er worden nooit meer dan 5 banners geplaatst, maximale hoogte knoppenrij
		for (i=0; i <= banner.length -1; i++){
			if (i < 5) {
				if (i == teller) knoppen += '<li id="b' + i + '" class="libannerhigh">' + '<a href="javascript:setBanner(' + i + ')">' + bannertitles[i] + '</a></li>';
				else knoppen += '<li id="b' + i + '" class="libanner">' + '<a href="javascript:setBanner(' + i + ')">' + bannertitles[i] + '</a></li>';
			}
		}

// Zet de knoppen en bannerteksten neer, voorlopig is het zo dat de teksten in de image zijn verwerkt, alleen de leesmeer knop is geplaatst visibility tekstlaag en titel is in css op hidden gezet
		document.getElementById('bannerknoppen').innerHTML=knoppen;	
		document.getElementById('bannertekst').innerHTML='<h1 id="bannerHeader">' + bannertitles[teller] + '</h1>' + '<p id="bannerParagraph">' + bannertekst[teller] + '</p><p class="bannerleesmeer">lees meer</p>';	

// Na delay seconden wordt functie rotate() aangeroepen als er iets te rotoren valt, eerste beeld is immers reeds geladen de knoppen en eerste tekst geplaatst
		if (banner.length > 1) {
			if (timeoutID) window.clearTimeout(timeoutID);
			timeoutID = setTimeout('rotate()',delay);
		}
	}
// Zijn er geen banners aanwezig, dan wordt er alleen een default afbeelding geplaatst
	else document.images['bannerimage'].src = theme_root + '/images/banner1b.jpg';
}

function rotate() {
	if(!mouseoverimage) {
		teller++; if (teller>= banner.length) teller=0;	
		FadeInImage('bannerimage',banner[teller],'bannerhome');
// Zet de bannerteksten neer, voorlopig is het zo dat de teksten in de image zijn geplaatst, alleen de leesmeer knop is geplaatst visibility tekstlaag en titel is in css op hidden gezet
		document.getElementById('bannertekst').innerHTML='<h1 id="bannerHeader">' + bannertitles[teller] + '</h1>' + '<p id="bannerParagraph">' + bannertekst[teller] + '</p><p class="bannerleesmeer">lees meer</p>';	
		
// Laat de knoppen roteren
		for (i=0; i <= banner.length -1; i++){
			var bId='b' + i;
			if (i == teller) { document.getElementById(bId).className='libannerhigh';}
			else {document.getElementById(bId).className='libanner';}
		}
	}
	
	if (!load) loadImages();
	load=true;
}	

function loadNewImage() {
	if (timeoutID) window.clearTimeout(timeoutID);
	timeoutID = setTimeout('rotate()',delay);
}

function setBanner(t) {
/*
// Voor als bij klik op knop eerst de bijbehorende banner moet verschijnen en de gebruiker daarna op de leesmeer knop moet klikken
// Werkt niet goed, is niet duidelijk voor de meeste mensen, daarom uitgeschakeld en vervangen door springen naar het bijbehorende onderdeel bij klik op knop.
	stopRotating();
	teller= t-1;
	mouseoverimage=false;
	rotate();
*/
	stopRotating();
	location.href=bannerlinkjes[t];
}	

function stopRotating() {
	mouseoverimage=true;
	if (timeoutID) window.clearTimeout(timeoutID);
}

function startRotating() {//alert('start');
	if (timeoutID) window.clearTimeout(timeoutID);
	mouseoverimage=false;
	
	if (banner.length > 0) {
		timeoutID = setTimeout('rotate()',delay);
	}
}

function FadeInImage(foregroundID,newImage,backgroundID) {
	var foreground=document.getElementById(foregroundID);
	
	if (backgroundID) {
	  var background=document.getElementById(backgroundID);
	  if (background) {
	    background.style.backgroundImage = 'url(' + document.images[foregroundID].src + ')';//
	    background.style.backgroundRepeat = 'no-repeat';
	  }
	}
	SetOpacity(foreground,0);
	foreground.src = newImage; 
	if (foreground.timer) window.clearTimeout(foreground.timer); 
	
	var startMS = (new Date()).getTime();
	foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "',2000," + startMS + ",0,100)",10);
}

function SetOpacity(object,opacityPct) {
	// IE.
	object.style.filter = 'alpha(opacity=' + opacityPct + ')';
	// Old mozilla and firefox
	object.style.MozOpacity = opacityPct/100;
	// Everything else.
	object.style.opacity = opacityPct/100;
}

function ChangeOpacity(id,msDuration,msStart,fromO,toO) {
	var element=document.getElementById(id);
	var opacity = element.style.opacity * 100;
	var msNow = (new Date()).getTime();
	opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
	
	if (opacity<0) 
		SetOpacity(element,0)
	else if (opacity >= 100) {
		SetOpacity(element,100);
	
// Zorg ervoor dat de banner blijft roteren
		if (!mouseoverimage) loadNewImage();
	}
	else {
	    SetOpacity(element,opacity);
	    element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",1);
	}
}