/**
 *	$Id$
 *
 *	AMS Homepage Slideshow 
 *	The slidshow starts and plays automatically.
 *	The slideshow pauses when the cursor is hovered over a slide
 *	The slideshow stops entirely once a user clicks a slide, and will not restart automatically once clicked.
 *
 *	@author John Pennypacker <john_pennypacker@brown.edu>
 *
 */

// @global the delay between automatic slide advances
var slideShowDelay = 5000;

// @global a boolean to that is true once the visitor clicks or presses the slideshow
var hasClicked = false;

// @global the timeout variable for the slideshow
var slideShowTimeout;

// @global the identifier of slideshow's HTML parent element
var slideShowID = "#homepage-feature";

/**
 * Initialize the slideshow on document.load
 */
$(document).ready(function(){
	$(".view-content ul", slideShowID).css({"left":0});
	$(".feature-image", slideShowID).hover(showArrows, hideArrows);
	$(".view-content li img", slideShowID).bind("click keypress", userMove);
	$(slideShowID).bind("mouseover", function(){ stopTimer() });
	$(slideShowID).bind("mouseout", function() { 	if(!hasClicked) { startTimer(); } });
	initArrows();
	startTimer();
});

/**
 * Set up the arrow icons and their behavior
 */
function initArrows() {
	var imgPath = Drupal.settings.basePath + 'sites/brown.edu.academics.medical/themes/ursa-medicina/img/';
	$(".view-content li", slideShowID).each(function(i,el){
		var icon = ($(this).hasClass("views-row-last")) ? 'icon-start-over.png' : 'icon-next.png';
		var arrow = $(document.createElement("IMG"));
		$(arrow).attr({
			'src': imgPath + icon,
			'alt': ''
		}).addClass('feature-icon');
		$(this).find(".feature-image").append(arrow);
	});
	
	$(".feature-image").css({
		"position": "relative"
	});
	$(".feature-icon").css({
		"position": "absolute",
		"right": "1em",
		"top": "50%",
		"display": "none"
	});
}


/**
 * Display the arrows
 */
function showArrows() {
	$(".feature-icon").fadeIn("fast");
}


/**
 * Hides the arrows
 */
function hideArrows() {
	$(".feature-icon").fadeOut("fast");
}


/**
 * The move function that is called when the slideshow advances itself.
 * The difference between this one and the user-activated function is that this one
 * will reset the timer if the user hasn't clicked the slideshow.
 */
function autoMove() {
	stopTimer();
	move();
	if(!hasClicked) {
		startTimer();
	}
}


/**
 * The move function called when a user clicks the slideshow.
 * It's different from autoMove() in that it doesn't reset the slideshow timer.
 */
function userMove() {
	stopTimer();
	hasClicked = true;
	move();
}


/**
 * A helper function to stop the slideshow timer.
 */
function stopTimer() {
	window.clearTimeout(slideShowTimeout);
}


/**
 * A helper function to stop the start timer.
 */
function startTimer() {
	slideShowTimeout = window.setTimeout(autoMove, slideShowDelay);
}


/**
 * The function that actually advances the slideshow.
 * This isn't called directly, instead userMove() and autoMove() are used.
 */
function move() {
	var max = $(".view-content li", slideShowID).length * 960;
	var left = $(".view-content ul", slideShowID).css("left");
	left = ((left.replace(/px/, "") * 1) - 960);
	if((left * -1) == max) {
		left = 0;
	}
	$(".view-content ul", slideShowID).animate({"left": left}, "fast");
}