// creates fading effect for the banner [JL]

var current=0, pause=false;
var imgs = ["Banners/00-logo.jpg", "Banners/01-tidbrf.jpg", "Banners/02-pickering.jpg", "Banners/03-paddles.jpg", "Banners/04-uc08.jpg", "Banners/05-jersey08.jpg", "Banners/06-medals.jpg"];
var bannerContainer;

//the entry point
function bannerMagic() {
	bannerContainer = document.getElementById("bannerContainer");
	bannerContainer.style.background = "url(" + imgs[0] + ")";
	current = 0;
	bannerContainer.myOpacity = 0.99;  //define property myOpacity
	setTimeout(fade,5000);
}

function fade() {
	//grow more transparent
	bannerContainer.myOpacity -= .05;
	setOpacity();
	
	if(bannerContainer.myOpacity <= 0) {
		//load a new image
		current++;
		if (current >= imgs.length) {current=0;}
		bannerContainer.style.background = "url(" + imgs[current] + ")";
		setTimeout(glow,50);
	} else {
		setTimeout(fade,50);
	}
}

function glow() {
	//grow more opaque
	bannerContainer.myOpacity += .05;
	setOpacity();
	
	if(bannerContainer.myOpacity >= .99) {
		setTimeout(fade,5000);
	} else {
		setTimeout(glow,50);
	}
}

function setOpacity() {
	if(bannerContainer.myOpacity >.99) {
		bannerContainer.myOpacity = .99;
		return;
	} else if (bannerContainer.myOpacity < 0) {
		bannerContainer.myOpacity = 0;
		return;
	}
	//firefox
	bannerContainer.style.opacity = bannerContainer.myOpacity;
	//opera
	bannerContainer.style.MozOpacity = bannerContainer.myOpacity;
	//IE
	bannerContainer.style.filter = "alpha(opacity=" + (bannerContainer.myOpacity*100) + ")";
}