/*
 * Script created by ThinkSharp. Copyright 2006 (www.thinksharp.nl).
 * 
 * SlideShow with fade/in/out. Adjust variables below. IE/Firefox only (! for now..)
 */


/* 
 * configuration variables
 *
 */
var urls        = 6;    // number of images (each image should be named 1.jpg, 2.jpg etc).
var speed       = 5000; // speed between images (slideshow) in miliseconds
var fadestep    = 10;    // the % of fading for each step
var fadespeed   = 70;   // the speed of the transition steps (miliseconds)
var imageid     = "animation"; // name of 'img' tag that will contain the images
var containerid = "header";   // name of the containing div (for transition effects): note that the div's bgimage will be changed
var imagePath   = "images/slidefotos/";          // path prefix for the image relative to html page (if not in the same folder)
var transition	= true;        // transitions image if true, if false: fades image out and fades new image in.

// internal variables, dont edit
var imgPos      = 0;
var _opac       = 100;
var newImage	= true;

/* 
 * Changes the image to the given position in the array
 * and start the fadeIn.
 */
function changeImage(){

	
	imgPos+=1;
 	imgPos %=(urls);
	document.images[imageid].src = imagePath+(imgPos+1)+".jpg";
	window.setTimeout("FadeIn();",fadespeed*2);
	
}

/*
 * Wrap up the FadeIn, set the new image and call 
 * the fadeOut with the given speed of the slideshow.
 */
function finish(){

	window.setTimeout("FadeOut();",speed);	
	var tmp = new Image();
	var nex = imgPos+1;
	tmp.src = imagePath+((nex%urls)+1)+".jpg";
}

/*
 * Fade the image (only IE and FireFox supported).
 */
function Fade(){

	if(document.getElementById(imageid).style.MozOpacity < 2){	 	
    	    
 	    document.getElementById(imageid).style.MozOpacity = _opac/100;

    	}
	else if (navigator.userAgent.indexOf("MSIE") > -1){
       
	    document.images[imageid].style.filter="alpha(opacity=0)";
	    document.images[imageid].filters.alpha.opacity = _opac;
    	}
	else {
		// no transitions .. sorry or crash..
	}


}

function FadeIn(){

	_opac+=fadestep;
	
	if( _opac>100){
	
	    _opac = 100;
	    finish();
	}
	else{
	
	    Fade();
	    setTimeout('FadeIn()',fadespeed);
	
	}
}

function FadeOut(){
   
	if(transition && newImage) document.getElementById(containerid).style.backgroundImage  =	"url("+imagePath+((imgPos)+1)+".jpg)";
	
	_opac-=fadestep;
	if( _opac<0){
		_opac = 0;            
		changeImage();
		newImage = true;  
	}
	else{
		
	    Fade();
	    setTimeout('FadeOut()',fadespeed);
		newImage = false;
  	}
}



window.onload = function() { 
	
	setTimeout('FadeOut()',speed);
	
}