//functions to control the rotation of images in the page banner
//Works as follows:
// - The first (or bottom) image is always visible
// - The additional images are faded in one after the other, one on top of the other
// - Once the lst image is fully displayed, all the intermediate ones are re-set to invisible
// - The last (top) image is then faded out, leaving the first (bottom) image visible
// - The fading in begins again...

var BannerImgs; // holds all the images in the banner div
var nOpacity = 0; // controls image opacity (0 to 100 for alpha filter, 0 - 1 for opacity do divide by 100)
var nMillisecs = 3000; //time to display each image
var icnt = 1; //Counter for image rotation

//Begin the process when the page loads
function setupBanner() {
	//Set up an array of all the img tags in the banner div
	BannerImgs = document.getElementById('banner').getElementsByTagName('img');
	setTimeout(selectImg,nMillisecs);  //Get the next image after 3 secs
}

function selectImg() {
	//Check to see if there is still another image to do, and if so, begin to fade it in
	if (icnt < BannerImgs.length) {
		nOpacity = 0;
		FadeIn();
	}
	else resetVisibility(); //All images done, so reset the visiblity
}

function FadeIn() {
	//Continue to increase the opacity as long as we are not at 100% for the current image
	if (nOpacity < 100) {
		nOpacity = nOpacity + 5; //increase the opacity
		setOpacity(BannerImgs[icnt],nOpacity); //Manipulate the opacity syle settings
		setTimeout(FadeIn,50); //repeat this after 50 millisecs
	}
	else {
	//We are at full opacity for the current image, so go to the next image
		icnt++;
		setTimeout(selectImg,nMillisecs); //Process the next image after 3 secs
	}
}

function setOpacity(anImg, opacityVal) {
	//Reset the opacity styles to control image visibility
	anImg.style.filter = "alpha(opacity=" + opacityVal + ")"; //Manipulate the opacity syle settings
	anImg.style.opacity = opacityVal/100;
}

function resetVisibility() {
	//This is called once the icnt exceeds the number of images, and is used to make the images invisible again
	//Start by ecrementing the icnt back down to the last element in the images array
	icnt = icnt - 1;
	//Make all the intermediate images invsible - leaving only top and bottom visible
	for (x = 1; x< BannerImgs.length-1; x++) setOpacity(BannerImgs[x],0);
	FadeOut(); //Fade out the current image - which is actually the last (top) image
}

function FadeOut() {
	//Fade out the current image - this is always called just for the last image - we want to fade it out until we see the first image which is the only one left visibile underneath it
	if (nOpacity > 0) {
		nOpacity = nOpacity - 5; //decrease the opacity
		setOpacity(BannerImgs[icnt],nOpacity); //Manipulate the opacity syle settings
		setTimeout(FadeOut,50); //repeat this after 50 millisecs
	}
	else {
	//We are at zero opacity for the image, so are left with the bottom image visible
	//Reset the coutner to start the whole fading in process again, from the second image on up
		icnt=1;
		setTimeout(selectImg,nMillisecs); //Process the next image after 3 secs
	}
}