//
// Home page embedded javascript has an array called 'imageIds'.
//
// e.g., imageIds = new Array("001","002","003");
//

document.banner_playing = true;

var seconds = 4; // 5

var currentIndex;

function nextLargeImage() {

	if (document.banner_playing) {

		newIndex = currentIndex + 1;

		if (currentIndex == (imageIds.length - 1))
			newIndex = 0;

		// Deselect the current thumbnail.
		setThumbnailDeselected(currentIndex);

		// Select the new thumbnail.
		setThumbnailSelected(newIndex);

		// Switch to the new large image.
		changeTo(newIndex);

		currentIndex = newIndex;

		setTimeout("nextLargeImage()", seconds * 1000);

	}

}

// -------------------------------------------------------------------------------------------------
// Select Thumbnail
// -------------------------------------------------------------------------------------------------

function selectThumbnail(thumb) {

	// Get the id of the thumbnail clicked on, e.g., i003.
	var thumbId = $(thumb).attr("id");

	// Remove the "i".
	var id = thumbId.substr(1,3);

	// Find the id in imageIds, keep it's index if found.
	var newIndex = findValueInImageIds(id);

	// Deselect the current thumbnail.
	setThumbnailDeselected(currentIndex);

	// Select the new thumbnail.
	setThumbnailSelected(newIndex);

	// Switch to the new large image.
	changeTo(newIndex);

	currentIndex = newIndex;

}

// -------------------------------------------------------------------------------------------------
// Large Actions
// -------------------------------------------------------------------------------------------------

function changeTo(newIndex) {

	// Ensure that the current large image is "on top".
	//ensureCurrentOnTop();

	// Bring the new large image to underneith the current lare image.
	//ensureJustBelow(newIndex);

  //var newLargeId = largeIdFromIndex(newIndex);  // e.g., "i003_large"
  //var currentLargeId = largeIdFromIndex(currentIndex); // e.g., "i003_large"
	
  //$("img#" + newLargeId).fadeIn('slow', function() {
	//	$("img#" + currentLargeId).fadeOut("slow");
  //});

	// Fade in the new selected image.
	fadeInLarge(newIndex,500);

	// Hide the current image.
	fadeOutLarge(currentIndex,1500);

}

function showLarge(index) {

  var largeId = largeIdFromIndex(index);  // e.g., "i003_large"
	$("img#" + largeId).show();

}

function fadeInLarge(index,ms) {

  var largeId = largeIdFromIndex(index);  // e.g., "i003_large"
	$("img#" + largeId).fadeIn(ms);

}

function hideLarge(index) {

  var largeId = largeIdFromIndex(index); // e.g., "i003_large"
	$("img#" + largeId).hide();

}

function fadeOutLarge(index,ms) {

  var largeId = largeIdFromIndex(index); // e.g., "i003_large"
	$("img#" + largeId).fadeOut(ms);

}

function ensureCurrentOnTop() {

  var largeId = largeIdFromIndex(currentIndex); // e.g., "i003_large"
	$("img#" + largeId).attr("style","z-index:1000");

}

function ensureJustBelow(index) {

  var largeId = largeIdFromIndex(index); // e.g., "i003_large"
	$("img#" + largeId).attr("style","z-index:1");
	
}

// -------------------------------------------------------------------------------------------------
// Thumbnail Actions
// -------------------------------------------------------------------------------------------------

function setThumbnailSelected(index) {

	var thumbId = thumbIdFromIndex(index); // e.g., "i003"

	$("a#" + thumbId).removeClass("thumbnail_off");
	$("a#" + thumbId).addClass("thumbnail_on");

}

function setThumbnailDeselected(index) {

	var thumbId = thumbIdFromIndex(index); // e.g., "i003"

	$("a#" + thumbId).addClass("thumbnail_off");
	$("a#" + thumbId).removeClass("thumbnail_on");

}

// -------------------------------------------------------------------------------------------------
// Ids and Index
// -------------------------------------------------------------------------------------------------

function findValueInImageIds(value) {

	// Find the id in imageIds, keep it's index if found.
	var newIndex = 999;

	for (var i = 0; i < imageIds.length; i++) {
		if (imageIds[i] == value)
			newIndex = i;
	} // for each in imageIds

	return newIndex;

}

function largeIdFromIndex(index) {

	var imageId = imageIds[index]; // e.g., "001"

	// Determine the id of the large image, e.g., "i001_large"
  var largeId = "i" + imageId + "_large";

	return largeId;

}

function thumbIdFromIndex(index) {

	var imageId = imageIds[index]; // e.g., "001"

	// Determine the id of the thumbnail, e.g., "i001"
  var thumbId = "i" + imageId;

	return thumbId;

}

// -------------------------------------------------------------------------------------------------
// Init Events and start rotation
// -------------------------------------------------------------------------------------------------

$(document).ready(function() {

	// Set the initial current id using the array generated in page.
  currentIndex = 0;

	// Fade in the first image.
	fadeInLarge(currentIndex);

	// When a thumbnail is clicked
	$('.hr_thumbnail').click(function() {

		// Stop the banner rotation
		document.banner_playing = false;

		// Select the clicked thumbnail
    if (!$(this).hasClass('thumbnail_on')) {
			selectThumbnail(this);
		}

		// Prevent the default anchor action
		return false;

	});


	// Start the banner rotation after delay
	setTimeout("nextLargeImage()", seconds * 1000);

});