// Rotating element for the George Fox Evangelical Seminary website. This creates the
// rotating effect and generates buttons so users can interact with the piece, other 
// than just watching it rotate through. The functionality is mostly based on jQuery,
// minus the timeout feature which is just standard DOM.
//
// Created by Peter S. Crackenberg on 10/21/2009
// 

// holder variables
var currentImage = 0;
var numImages = 0;
var currentTimer = 0;

// log an event so when the rotating area is ready, the rotation will start 
$("#rotating-holder").ready(startRotator);

//Integration with an existing google anaylicts object
$(document).ready(function(){
    
    //Apply this click handler for google anaylitics to the first level
    //children of the #rotating-holder element.
    $(document).delegate("#rotating-holder > a", "click", function()
    {
        //Get what slide we are on for the category.
        var slideNum = currentImage + 1;
        var slide = "Slide " + slideNum;
        
        //Set action to seminary
        var action = "Seminary Homepage Rotating Link";
        
        //Get the link and santize it
        var link = $(this).attr("href").split("#")[0];
        
        _gaq.push(['_trackEvent', slide, action, link]);
    });
});
 

// create the various elements surrounding the rotating images, and start them
// off by going to the first image
function startRotator(e)
{
	// get the number of images in the area so the rotator knows when to reset the counter
	numImages = $("#rotating-holder img").length;
	
	// create and append a new div to store the buttons for each image in
	var newDiv = document.createElement("div");
	newDiv.id = "rotating-buttons";
	$("#rotating-holder").append(newDiv);
	
	// create a tags and append them to the new div for each image
	for(i = 0; i < numImages; i++)
	{
		$("#rotating-buttons").append("<a>"+(i+1)+"</a> ");
	}
	
	// bind an event handler to each a tag so they can do something when clicked
	// the event will be passed an index so the handler knows which button was clicked
	$("#rotating-buttons a").each(function(i){ $(this).bind('click', {index:i},buttonClickHandler); });
	
	// bind mouseover events to the images so the rotation will start and stop when they're moused over
	$("#rotating-holder img").bind("mouseover",stopTimer);
	$("#rotating-holder img").bind("mouseout",startTimer);
	
	// start the rotation off by going to the first image
	goToImage(0,true);
}

// a handler to do the event when a button is clicked on
function buttonClickHandler(e)
{
	// use the data passed in to go to a specific image
	goToImage(e.data.index,true);
}

// Go to a specific image, and hide the current image that's being shown. If a specific number is being used
// then the additional parameter dontIterate should be included, otherwise the function will just increment
// the number, instead of using the specified number.
function goToImage(imageToShow,dontIterate)
{
	stopTimer();
	hideImage(currentImage);
	
	// if there's been a specific image to show, change the counter to that
	if(dontIterate)
	{
		currentImage = imageToShow;
	}
	// otherwise iterate the counter, reseting it if it's gone past the number of images
	else
	{
		currentImage++
		if(currentImage == numImages)
		{
			currentImage = 0;
		}
	}
	
	showImage(currentImage);
	startTimer();
}

// call the DOM function to set a timer, and save the timer ID
function startTimer()
{
	currentTimer = window.setTimeout(goToImage,8000);
}

// call the DOM function to stop the timer using the current timer ID
function stopTimer()
{
	window.clearTimeout(currentTimer);
}

// show the specific image, and set a class for the appropriate button
function showImage(imageNum)
{
	$("#rotating-buttons a:eq("+imageNum+")").addClass("current");
	$("#rotating-holder img:eq("+imageNum+")").fadeIn("slow");
}

// hide the older image, and remove the class from the appropriate button
function  hideImage(imageNum)
{
	$("#rotating-buttons a:eq("+imageNum+")").removeClass("current");
	$("#rotating-holder img:eq("+imageNum+")").fadeOut("slow");
}