// 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 de indicatoren/knoppen onder de banner neergezet 
// hierna wordt het roteren aangeroepen en wordt de banner voorzien van de juiste tekst 
	var knoppen='';
	if (banner.length > 0) {
// Eerste bannerelement wordt nu geladen
	document.images['bannerimage'].src = banner[teller];
	
//worden er evenveel indicatoren/knoppen (cirkels met een diameter van 12px, onder de banner) neergezet als er banners zijn
		for (i=0; i <= banner.length -1; i++){
			if (i==teller) knoppen += '<li id="b' + i + '" class="libannerhigh">' + '<a href="javascript:setBanner(' + i + ')">' + "&nbsp;" + '</a></li>';
			else knoppen += '<li id="b' + i + '" class="libanner">' + '<a href="javascript:setBanner(' + i + ')">' + "&nbsp;" + '</a></li>';
		}
	
// Bereken de breedte van de laag waarop de indicatoren/knoppen staan (cirkels met een diameter van 12px, onder de banner) die aangeven welke banner roteert en waarop ook geklikt kan worden
		bannerwidth=banner.length * 12; 
		document.getElementById('bannerknoppen').style.width= bannerwidth + "px";	
		document.getElementById('bannerknoppen').innerHTML=knoppen;	
	
// Zet de bannerteksten neer
		plaatsTekst();
// Pas na delay seconden wordt rotate aangeroepen als er iets te roteren valt, eerste beeld is immers reeds geladen, indicatoren 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/banner_home1.jpg';
}

function rotate() {
	teller++;
	if (teller>= banner.length) teller=0;	
// teller van counter/container waarmee door de verzameling heen kan worden gebrowsd updaten, zie thumbs.js
	container[0].setcounter(teller);
	
	if(!mouseoverimage) {
		FadeInImage('bannerimage',banner[teller],'bannerhome');
		plaatsTekst()
	}
	 
	if (!load) loadImages();
	load=true;
}	

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

// functie waarmee op een indicator/knop (cirkels met een diameter van 12px, onder de banner) geklikt kan worden en de corresponderende banner wordt geselecteerd
function setBanner(t) {
	stopRotating();
	teller= t-1;
	mouseoverimage=false;
	
	if (banner.length > 0) rotate();
}	

function plaatsTekst() {
// Zet de bannerteksten neer
	document.getElementById('bannertekst').innerHTML='<p id="bannerHeader">' + bannertitles[teller] + '</p>' + '<p id="bannerParagraph">' + bannertekst[teller] + '<a href="' + bannerlinkjes[teller] + '" alt="" title="">' + '<img src="' + theme_root + '/images/bannerleesmeer.png' + '" alt="" class="icoon" border="0" />&nbsp;</a></p>';	
	
// Laat de indicatoren/knoppen de cirkels met een diameter van 12px onder de banner 'meeroteren': de indicator die aangeeft welke banner actief is krijgt een aparte class mee
	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';}
	}
}

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

function startRotating() {
	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);
  }
}