// JavaScript Document
// Home Page banner rotation

//  Set global variables.

var homeBannerImgs = ['bass6','boxettes','hobbit-tyte','hobbit','reepsone','yasson']; //  Create array to hold image file names
var homeBannerIndex = Math.floor(Math.random()*homeBannerImgs.length); // create random index
var pathToBannerImgs = "/assets/images/homepage/";

var slideTimer;
var fade = 0;  // Set initial opacity of img
var browser; // set variable for browser detection

// load first banner image
function loadBanner(){
	if (homeBannerIndex == 5){ // if the index is equal to the default image displayed....
		homeBannerIndex = Math.floor(Math.random()*homeBannerImgs.length); // reset the index to a random number .....
		loadBanner(); // and restart the function
	} else { // if the next image isn't the same as the default....
		fade = 1; // set fade variable to 1 for fadeOut function
		setTimeout("fadeOut()", 10000); // trigger fadeOut function
	}
}

// Detect the browser being used and store in browser variable
function detectBrowser() {
	browser = navigator.appName;
}

// fade img out
function fadeOut(){
	if (fade > 0){ // check if fade is greater than 0.  If so....
		fade -= 0.2; // reduce fade by this amount
		if (browser == "Microsoft Internet Explorer"){ // if browser is IE ....
			var ieFade = fade *100; // create fade variable for ie as it works from 0 to 100
			document.getElementById("banner").style.filter = "alpha (opacity = " + ieFade + ")"; // set img opacity
		} else { // if browser isn't IE....
		document.getElementById("banner").style.opacity = fade; // set img opacity
		}
		setTimeout("fadeOut()", 40); // set timer to retrigger fadeOut
	} else { // if fade == 0
		changeImg(); // run the changeImg function to load the new img now that opacity == 0
	}
}

// change large img
function changeImg(){
	document.getElementById("banner").src = pathToBannerImgs + homeBannerImgs[homeBannerIndex] + ".jpg";
	setTimeout("fadeIn ()", 1000); //  img opacity is set to 0 from fadeOut function, so run fade in
}

// fade in img
function fadeIn (){
	if (fade < 1){ // check if fade is less than 1
		fade += 0.175; // if so, increase fade by this amount
		if (browser == "Microsoft Internet Explorer"){ // if browser is IE...
			var ieFade = fade *100; // create fade variable for ie
			document.getElementById("banner").style.filter = "alpha (opacity = " + ieFade + ")"; // set img opcity
		} else { // if browser isn't IE...
	 		document.getElementById("banner").style.opacity = fade; // set img opacity
		}
		setTimeout("fadeIn()", 40); // retrigger fadeIn
	}
}

// Load next img in array
function nextImage(){
	homeBannerIndex++; // increase index by 1
	if (homeBannerIndex == homeBannerImgs.length){
		homeBannerIndex = 0; // if index is equal to the number of imgs in the array, set the index to 0
		loadBanner(homeBannerIndex); // trigger updateIndex function with new index
	} else {
		loadBanner(homeBannerIndex); // otherwise just trigger updateIndex function
	}
}

// start slide show
function slideShow(){
	loadBanner(homeBannerIndex); // trigger first loading of banner image with initial homeBannerIndex value which is random
	slideTimer = setInterval("nextImage()", 10000); // set slideTImer variable to hold interval for retriggering nextImage function
}