// JavaScript Document
// slideshow by James Hastings-Trew, The Marketing Den

var showimages = ["main-slide1.jpg","main-slide2.jpg","main-slide3.jpg","main-slide4.jpg"]; // array of images to use in the slideshow
var images  = Array(showimages);
var preImages = new Array();
var loaded = false;
var timerID;
var source = "images/"; // source folder for the images. This can be changed to point to an external server if need be.
var divlimit = showimages.length;

var bID = "sbk"; // ID of the background holder - could be div or td
var fID = "sft"; // ID of the foreground image
var selectionID = "sel"; // base name of the ID for the selection DIV that change colour with the slideshow. 
var selectionHighlight = "#ffff88"; // highlight colour for the selected DIV tags
var normalPause = 3000; // pause time between images during slide show
var freezePause = 6000; // pause time after rolling over a thumbnail - slide show "freezes" for this length of time, then continues with normal pause times
var fadeStep = 3; // controls the speed of the fading effect - larger values mean faster fade.


LoadImages();
checkLoad();

function LoadImages() {
	for (i = 0; i < showimages.length; i++) {
		preImages[i] = new Image();
		preImages[i] = source + showimages[i];
	}
}

function checkLoad() {
	loaded = true;
	for (i = 0; i < showimages.length; i++) {
		if (preImages[i].complete == false) {
			loaded = false;
		}
	}
	if (loaded) {
		fadeShow(0,100,false,0,fID,bID,20,normalPause);
	}
	else {
		setTimeout("checkLoad()",10);
	}
}

function changeOpacity(op,id) {
	if(op == 100) {
		op = 99.99;
	}
	var dop = op/100;
	var object=document.getElementById(id).style;
	object.opacity = (dop);
	object.MozOpacity = (dop);
	object.KhtmlOpacity = (dop);
	object.filter = "alpha(opacity=" + op +")";
} 


function setFront(pointer,frimage) {
	document.getElementById(frimage).src= source + images[0][pointer];
	changeOpacity(100,frimage);
}

function freezeShow(num) {
	clearTimeout(timerID);
	setFront(num,fID);
	//clearDivs();
	//setDiv(num);
	fadeShow(num,100,false,0,fID,bID,20,freezePause);
}

function clearDivs() {
	var i;
	for (i = 0; i < divlimit; i++) {
		var divid = selectionID + i;
		document.getElementById(divid).style.backgroundColor = '';
	}
}

function setDiv(num) {
	clearDivs();
	var divid = selectionID + num;
	document.getElementById(divid).style.backgroundColor = selectionHighlight;
}

function fadeShow(current,opacity,fade,pnt,frimage,bkimage,interval,pause) {
	var next = current+1;
	var dwell = interval;
	if ( next >= images[pnt].length) {
		next=0;
	}
	if (!fade) {
		document.getElementById(frimage).src= source + images[pnt][current];
		changeOpacity(opacity,frimage);
		document.getElementById(bkimage).style.backgroundImage="url(" + source + images[pnt][next]+")";
		fade=true;
		dwell = pause;
		// setDiv(current);
	}
	else {
		opacity -= fadeStep;
		if (opacity<0) {
			current=next;
			opacity=100;
			fade=false;	
		}
	}
	if (fade) {
		changeOpacity(opacity,frimage);
	}
	timerID = setTimeout("fadeShow(" + current + "," + opacity + "," + fade + "," + pnt + ",'" + frimage + "','" + bkimage + "'," + interval + "," + pause +")",dwell);
}