var pic = new Array();

pic[1] = 'beelden/animatie-houtbouw-op-maat.jpg';
pic[2] = 'beelden/animatie-carport-op-maat.jpg';
pic[3] = 'beelden/animatie-tuinhuisjes-op-maat.jpg';
pic[4] = 'beelden/animatie-recreatiewoning-op-maat.jpg';
pic[5] = 'beelden/animatie-dierenverblijf-op-maat.jpg';
pic[6] = 'beelden/animatie-hobbyruimte-op-maat.jpg';

// totaal aantal foto's
var totaal = 6;
var teveel = totaal + 1;

// random start
var randomStartFoto = Math.floor(Math.random() * totaal);
if (randomStartFoto == 0) {
	randomStartFoto = 1;
}
var ondersteFoto	= randomStartFoto;
var bovensteFoto	= randomStartFoto--;

// alle foto's preloaden
var preLoad = new Array();
for (i = 1; i <= totaal; i++) {
	preLoad[i] = new Image();
	preLoad[i].src = pic[i];
}

// aangeven dat dit de eerste keer is dat de loop begint
var eersteKeer = 1;

function wissel() {
	if (bovensteFoto == 0) {
		bovensteFoto = totaal;
	}

	document.getElementById('ani_foto2').style.backgroundImage	= "url("+ pic[bovensteFoto] +")";
	document.getElementById('ani_foto2').style.opacity			= 1.0;
	document.getElementById('ani_foto2').style.filter			= 'alpha(opacity = 100)';
	document.getElementById('ani_foto1').style.backgroundImage	= "url("+ pic[ondersteFoto] +")";
	
	if (eersteKeer == 1) {
		setTimeout("fade('ani_foto2', 100, 0, 1000)", 4000);
		eersteKeer = 0;
	} else {
		fade('ani_foto2', 100, 0, 1000);
	}

	ondersteFoto++;

	if (ondersteFoto == teveel) {
		ondersteFoto = 1;
	}
	
	bovensteFoto = ondersteFoto - 1;

	setTimeout("wissel()", 4000);
}

function fade(eID, startOpacity, stopOpacity, duration) {
	var speed = Math.round(duration / 100);
	var timer = 0;
	if (startOpacity < stopOpacity) {
		for (var i=startOpacity; i<=stopOpacity; i++) {
			setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);
			timer++;
		} return;
	}
	for (var i=startOpacity; i>=stopOpacity; i--) {
		setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);
		timer++;
	}
}

function setOpacity(eID, opacityLevel) {
	var eStyle = document.getElementById(eID).style;
	eStyle.opacity = opacityLevel / 100;
	eStyle.filter = 'alpha(opacity='+opacityLevel+')';
}