/* ======================================================================

AUTHOR: Eddy P. de Leeuw

COMMENT: Voorladen van afbeeldingen inclusief een voortgangbalk.
De opmaak en positionering van de voortgangbalk is verwerkt in de
stylesheet en html code.

========================================================================== */


// Geef in onderstaande variabel de te laden afbeeldingen op:
var imagenames=new Array(
'../../product-catalogus/galerij/riemen/lula-belt-1.jpg',
'../../product-catalogus/galerij/riemen/lula-belt-2.jpg',
'../../product-catalogus/galerij/riemen/lula-belt-3.jpg',
'../../product-catalogus/galerij/riemen/mali-belt-1.jpg',
'../../product-catalogus/galerij/riemen/mali-belt-2.jpg',
'../../product-catalogus/galerij/riemen/mali-belt-3.jpg',
'../../product-catalogus/galerij/riemen/mali-belt-4.jpg',
'../../product-catalogus/galerij/riemen/mali-belt-5.jpg',
'../../product-catalogus/galerij/riemen/mali-belt-6.jpg',
'../../product-catalogus/galerij/riemen/mali-belt-7.jpg',
'../../product-catalogus/galerij/riemen/sep-belt-1.jpg',
'../../product-catalogus/galerij/riemen/sep-belt-2.jpg');

// Reken uit met welke stappen er versprongen moet worden. (de balk is 250px lang)
var blocksize=Math.floor(250/imagenames.length);

var images=new Array();
var loaded=0, txt='';
var fadeValue=0.5;
var fadeAlpha=50;

// voortgangbalk weergeven en alles start klaar stylen.
document.getElementById("PreloadPlaceholder").style.display="block";
document.getElementById("PreloadFade").style.opacity=fadeValue;
document.getElementById("PreloadFade").style.filter="alpha(opacity=" + fadeAlpha + ")";

// Fotogallerij weg 'faden'
/*
function fadeBackOut()
{
	fadeValue=fadeValue + 0.05;
	fadeAlpha=fadeAlpha + 5;
	document.getElementById("PreloadFade").style.opacity=fadeValue;
	document.getElementById("PreloadFade").style.filter="alpha(opacity=" + fadeAlpha + ")";
	if (fadeValue>=0.5) {
		setTimeout('fadeBackOut();', 5);
	}
}
*/

// Fotogallerij weer terug 'faden'
function fadeBackIn()
{
	fadeValue=fadeValue - 0.05;
	fadeAlpha=fadeAlpha - 5;
	document.getElementById("PreloadFade").style.opacity=fadeValue;
	document.getElementById("PreloadFade").style.filter="alpha(opacity=" + fadeAlpha + ")";
	if (fadeValue>=0) {
		setTimeout('fadeBackIn();', 50);
	}
}

// Het ding daadwerkelijk laten werken.
function dispbars()
{
	loaded++;
	// Vaststellen van het huidige formaat van de voortgangbalk.
	var newwidth=blocksize*loaded;
	// en daar dan een 'px' achter zetten.
	document.getElementById("preloadprogress").style.width=newwidth + "px";
	if(loaded>=imagenames.length){
		fadeBackIn();
		// Wanneer de laatste afbeelding bereikt is de balk volledig vullen. (meer een 'Just in case dit al niet gebeurd is' ding)
		document.getElementById("preloadprogress").style.width="250px";
		// Vervolgens de balk laten verdwijnen.
		setTimeout('document.getElementById("PreloadPlaceholder").style.display="none";', 1500);
	}
}
	
// Controleren of afbeeldignen zijn geladen en vervolgens de benodigde acties uitvoeren.
function checkload(index)
{
	(images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 500);
}


// Zorgen dat bovenstaande voor elke afbeelding gebeurd.
// fadeBackOut();
for(n=0;n<imagenames.length;n++){
	images[n]=new Image();
	images[n].src=imagenames[n];
	checkload(n);
}