// Written by Aquerne Solutions (www.aquerne.co.uk)
// Free to use and distribute

// Script to rotate through a set of images, with fading transitions

// For best effect, image in html should set initial opacity using style similar to:
// img.faded {opacity: <<firstImgInitDegree/100>>; filter: alpha(opacity = <<firstImgInitDegree>>);}

window.onload = init;

// array of images to cycle through
var allImgs = new Array("images/slide_1.jpg","images/slide_2.jpg","images/slide_3.jpg","images/slide_4.jpg");
var img;
var fade=0;

var degree;			// initial opacity
var degreeMin=10;	// % minimum intensity image fades down to
var degreeMax=100;	// % maximum intensity image fades up to
var degreeInc=5;	// % points to increment by each time
var incWait=50;		// time between increments for the fading in ms
var displayWait=5*1000;	// time each image is displayed for in ms
var firstImgInitDegree=100;	// 100 means first image starts fully present
							// <100 means first image will fade in
							// should match css style settings for best effect

preloadimages(allImgs);	// avoids delays in loading images

// Sets opacity of element (image) to the specified degree
fade=function (obj, degree){
	try {obj.filters.alpha.opacity=degree}
	catch(e){obj.style.filter="alpha(opacity="+degree+")"}
}

// Loops through degreeMin to degreeMax and sets image opacity iteratively
// Sets a call to itself after a timeout 
// NB control is returned to the container straight away - not a wait
function fadeIn(obj){

  img=obj

  if (degree<degreeMax){
    degree+=degreeInc	// increment degree
	if (img.filters&&img.filters[0]&&fade)
      fade(img, degree)
    else if (typeof img.style.opacity=='string'&&!img.filters)
      img.style.opacity=degree/101

    setTimeout("fadeIn(img)", incWait) // time between intensifying stages
  }

}

// Loops through degreeMax to degreeMin and sets image opacity iteratively
// Sets a call to itself after a timeout 
// NB control is returned to the container straight away - not a wait
function fadeOut(obj){

  img=obj;

  if (degree>degreeMin){
    degree-=degreeInc	// increment degree
	if (img.filters&&img.filters[0]&&fade)
      fade(img, degree)
    else if (typeof img.style.opacity=='string'&&!img.filters)
      img.style.opacity=degree/101

    setTimeout("fadeOut(img)", incWait) // time between fading stages
  }
  else
  {
    // must be here as a work around for js having no sleep function equivalent
  	rotate();
  }
  
}

// Called onload
// Sets initial image then calls rotate to cycle through all images in order
function init() {

    firstTime=1;
	currentImg=0;
	
	// Can use next line to randomise first image if preferred
    //   currentImg = Math.floor((Math.random() * allImgs.length));
	
	document.getElementById("fadeimg").src = allImgs[currentImg]; // set the initial image
	
	rotate();

}

// Called from init()
// Picks next image, calls fadeIn() and fadeOut() to transition Image
// Should properly call rotate again here and loop through images
// but lack of sleep function and differences in precise timing between browsers
// mean rotate call has to be in fadeOut().
function rotate() {
	
	if (firstTime == 1) {
		// first time through
		// keep current image and don't fade in
		firstTime=0;
		degree=firstImgInitDegree;
	}
	else{
	  currentImg++;
	  if (currentImg == allImgs.length) {
	    currentImg = 0;
	  }
	  degree=degreeMin;
	}  

	document.getElementById("fadeimg").src = allImgs[currentImg];
	
	// Fade in image
	fadeIn(document.getElementById("fadeimg"));
	
	// Set up future call to fadeOut
    // NB control is returned to the container straight away - not a wait
    setTimeout("fadeOut(document.getElementById('fadeimg'))", displayWait); 
	
}


function preloadimages(arr){
	var images=[]
	var arr=(typeof arr!="object")? [arr] : arr // arr parameter must be an array
	for (var i=0; i<arr.length; i++){
		images[i]=new Image()
		images[i].src=arr[i]
	}
}