/*
Frontpage rotaion widget for Grace Church of Fredericksburg
Created and Copyright (c) 2009 Mint Condition Studios - Brian Wood
http://www.mintconditionstudios.com

These scripts depend on jQuery and on the items.js to be src'd as well.

*/
var steps = 500; //how long should the normal fade take in ms. 
var multiplier = 3 //how much faster should the "fast fade" be? (fast fade will be steps/multiplier)														
var loopSteps = 3000; // how long should the loop take to switch? (in ms)
var activeImage = "/clientimages/27353/template/homepagerotator/Active.png"; //the background image for active items
var inactiveImage = "/clientimages/27353/template/homepagerotator/Inactive.png"; //the background image for inactive items



$(document).ready(function(){ //this function is a jQuery call that fires when the document has finished loading
	var caller = 0;
	
	//populate each item with the contents from items.js
	$("#itemTextEl1").html(itemText1); 
	$("#itemTextEl2").html(itemText2);
	$("#itemTextEl3").html(itemText3);
	$("#itemTextEl4").html(itemText4);
	
	//if the user clicks an item (anything with class of "itemz") then execute the function "itemClicked" and pass the name of the clicked element
	$('.itemz').click(function() {itemClicked(this.id)});
	looper(); //Call the loop timer function

	//BEGIN HOVER LISTENER
	//this is the listener that deals with what to do when the user hovers over an item (again, element with class "itemz"). It's actually all one line of code down to "END HOVER"
	$('.itemz').hover(function() {  //add hover listener to class itemz
			document.body.style.cursor='pointer'; //make the cursor change to show it's clickable
			clearTimeout(loopTimer); //stop the loop timer
			clearAll(); //call the function that makes all items "inactive" (this solved a bug where 2 items would be active in some circumstances)
			$(this).children("img").attr("src",activeImage); //look for children of the current element that are images and make the src the active image
			var strSplit = this.id.split('m'); //figure out which element is being hovered and pull the number
			curImg=strSplit[1];
			fastSwitch(curImg); //call the fastSwitch function and pass the number of the element
		}, function() { //this section of the 
			clearTimeout(loopTimer);
			document.body.style.cursor='auto';
			looper();	
			clearAll();	
			$(this).children("img").attr("src","/clientimages/27353/template/homepagerotator/Active.png");
		});
	//END HOVER
}); //ENF document.ready function

function itemClicked(item) { //what to do when a user clicks on an element
 	var	splitter = item.split('m'); //get the number of which element was clicked
	item = splitter[1];
	item = "itemURL" + item; // redefine item to be "itemURLx" where x is the element number
	gotoURL = window[item]; //read in itemURLx (defined in items.js)
	window.location = gotoURL; //send the browser to the location specified
}

function clearAll() { //turns all element images back to the inactive image
	$('#items').find('img').each(function(){ //itterate each image in the element with id "items" and set src to inactiveImage
		$(this).attr('src',inactiveImage);
	});
}

function imageSwitch(toImg) {
	//var destImage = 'image' + toImg + '.png';
	var imgCon = "itemImage"+toImg; //create a string that is itemImagex where x is the number of the current item
	var destImage = window[imgCon];
	
	curImg=toImg; 
	$('#myImg').show(); //make sure the image is visible (hiding background)
	$('#Image').css('background-image','url(' + destImage + ')').css('background-repeat','no-repeat').end(); //set background image to the destination image
	clearAll(); //clear all items
	$('#image'+toImg).attr("src",activeImage); //set appropriate item to the active image
	$('#myImg').fadeOut(steps, function() { //use jQuery to fade the opacity of the infront image (showing the background, which is the destination image
		$('#myImg').attr('src', destImage); //now that it's hidden, change the hidden image to the destination image (same as the bg)
	});
	$('#myImg').show(); //show the newly changed image (once again hiding the bg, but since they are the same, user will not see this
//	$('#item'+toImg).children("img").attr("src","Active.png");
}

function fastSwitch(toImg) { //works exactly like above but uses steps/3 to doe a faster fade
//var destImage = 'image' + toImg + '.png';
	var imgCon = "itemImage"+toImg;
	var destImage = window[imgCon];
	$('#myImg').show();
	clearAll();
	//$('#item'+toImg).children("img").attr("src","Active.png");
	$('#image'+toImg).attr("src",activeImage);
	$('#Image').css('background-image','url(' + destImage + ')').css('background-repeat','no-repeat').end();
	$('#myImg').fadeOut(steps/multiplier, function() {
		$('#myImg').attr('src', destImage);
	});
	$('#myImg').show();
		
}

function clearMe(el) { //clear all elements
	$(this).attr('src',inactiveImage);
}

var curImg=1;
function looper() { //Create and manage the looptimer
	loopTimer=setTimeout("looper()",loopSteps);
	imageSwitch(curImg);
	curImg++;
	curImg = ((curImg==5)?1:curImg);
}