// JavaScript Document
// This script uses the JQuery JavaScript library (1.4.2) to create a rotating banner.
// It requires two divs (or other HTML elements) one named photo-area and the
// other named photo-holder inside it.
// This calls from a PHP file that needs to be located in the same folder to
// return a list of image files that will be used to rotate.
//
// The images from the different directories are combined in different combinations,
// which will be rotated through again and again. There are 4 images sizes:
// small, medium, large, and panoramic. These are combined and put into the
// photo-holder div.
//
// Values are configurable from several variables at the start of the program.
//
// Written by Peter S. Crackenberg
// 2/28/2010
//

// The rotation variable is used to configure the series of photos that are
// run through. More combinations can be added, or rearranged as needed.
var rotation = ["ls","mm","mss","p","sl","sms","ssm","ssss"];
// The time each set of pictures is shown, in milliseconds.
var rotationTime = 6000;
// The time the set of pictures are faded in or out, in milliseconds.
var fadeInOutTime = 1500;

// variable initialization
var rotationLocation = 0;
var htmlToInsert = "";
var largePhotos = new Array();
var largePhotosTotal = new Array();
var smallPhotos = new Array();
var smallPhotosTotal = new Array();
var mediumPhotos = new Array();
var mediumPhotosTotal = new Array();
var panoramicPhotos = new Array();
var panoramicPhotosTotal = new Array();
var images = new Array();
var image = new Image();

// A function that takes in an array, and returns an array with the elements inside it shuffled.
function shuffle(o)
{
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
}

// Call an AJAX function to retrieve the photos of a given size, and shuffle them. An AJAX stop call 
// must be made after this to have the script run after the photos are loaded in.
function loadPhotos(size)
{
	if(size == "small")
	{
		$.get("getImageNames.php?size=small", function(data){ smallPhotosTotal = data.split("\n"); });
	}
	else if(size == "medium")
	{
		$.get("getImageNames.php?size=medium", function(data){ mediumPhotosTotal = data.split("\n"); });
	}
	else if(size == "large")
	{
		$.get("getImageNames.php?size=large", function(data){ largePhotosTotal = data.split("\n"); });
	}
	else if(size == "panoramic")
	{
		$.get("getImageNames.php?size=panoramic", function(data){ panoramicPhotosTotal = data.split("\n"); });
	}
}

// Swap out one photo set for another. This is done by calling the fade out function, then on a callback function
// to swap images out, add in new html, and fade it in.
function swapPhotos()
{
	$("#photo-holder").fadeOut(fadeInOutTime, function () {
		$("#photo-holder").empty();
		$("#photo-holder").append(htmlToInsert);
		$("#photo-holder").fadeIn(fadeInOutTime, function () { var t = setTimeout(doRotation,rotationTime); });
														});
}

// Each of these following functions display a different series of images. Each starts with show, 
// then has the types of photos afterwards that is being displayed. This first function is 
// documented, and the rest just have different names.
function showLargeSmall()
{
	// Once it's successful, set the html variable to the correct html, based on what function
	// this is, and call the swap function.
	htmlToInsert = "<img src=\""+largePhotos.pop()+"\"/><img src=\""+smallPhotos.pop()+"\" class=\"lastPhoto\"/>";
	swapPhotos();
}

function showMediumMedium()
{
	htmlToInsert = "<img src=\""+mediumPhotos.pop()+"\"/><img src=\""+mediumPhotos.pop()+"\" class=\"lastPhoto\"/>";
	swapPhotos();
}

function showMediumSmallSmall()
{
	htmlToInsert = "<img src=\""+mediumPhotos.pop()+"\"/><img src=\""+smallPhotos.pop()+"\"/><img src=\""+smallPhotos.pop()+"\" class=\"lastPhoto\"/>";
	swapPhotos();
}

function showPanoramic()
{
	htmlToInsert = "<img src=\""+panoramicPhotos.pop()+"\" class=\"lastPhoto\"/>";
	swapPhotos();
}

function showSmallLarge()
{
	htmlToInsert = "<img src=\""+smallPhotos.pop()+"\"/><img src=\""+largePhotos.pop()+"\" class=\"lastPhoto\"/>";
	swapPhotos();
}

function showSmallMediumSmall()
{
	htmlToInsert = "<img src=\""+smallPhotos.pop()+"\"/><img src=\""+mediumPhotos.pop()+"\"/><img src=\""+smallPhotos.pop()+"\" class=\"lastPhoto\"/>";
	swapPhotos();
}

function showSmallSmallMedium()
{
	htmlToInsert = "<img src=\""+smallPhotos.pop()+"\"/><img src=\""+smallPhotos.pop()+"\"/><img src=\""+mediumPhotos.pop()+"\" class=\"lastPhoto\"/>";
	swapPhotos();
}

function showSmallSmallSmallSmall()
{
	htmlToInsert = "<img src=\""+smallPhotos.pop()+"\"/><img src=\""+smallPhotos.pop()+"\"/><img src=\""+smallPhotos.pop()+"\"/><img src=\""+smallPhotos.pop()+"\" class=\"lastPhoto\"/>";
	swapPhotos();
}

function preloadImages(imageSet)
{
	
	if(imageSet == "ls" || imageSet == "sl")
	{
		// Check to see if there are enough photos in each array needed. If not, then call the load function 
		// for the given type, and call this function again after it's done loading.
		if(largePhotos.length <= 0)
		{
			largePhotos = largePhotos.concat(shuffle(largePhotosTotal));
		}
		if(smallPhotos.length <= 0)
		{
			smallPhotos = smallPhotos.concat(shuffle(smallPhotosTotal));
		}
		
		image = new Image();
		image.src = largePhotos[0];
		images.push(image);
		image.width = 722;
		image.height = 378;
		image = new Image();
		image.src = smallPhotos[0];
		image.width = 240;
		image.height = 378;
		images.push(image);
	}
	else if(imageSet == "mm")
	{
		if(mediumPhotos.length <= 1)
		{
			mediumPhotos = mediumPhotos.concat(shuffle(mediumPhotosTotal));
		}
		
		image = new Image();
		image.src = mediumPhotos[0];
		image.width = 481;
		image.height = 378;
		images.push(image);
		image = new Image();
		image.src = mediumPhotos[1];
		image.width = 481;
		image.height = 378;
		images.push(image);
		
	}
	else if(imageSet == "mss" || imageSet == "sms" || imageSet == "ssm")
	{
		if(mediumPhotos.length <= 0)
		{
			mediumPhotos = mediumPhotos.concat(shuffle(mediumPhotosTotal));
		}
		if(smallPhotos.length <= 1)
		{
			smallPhotos = smallPhotos.concat(shuffle(smallPhotosTotal));
		}
		
		image = new Image();
		image.src = mediumPhotos[0];
		image.width = 481;
		image.height = 378;
		images.push(image);
		image = new Image();
		image.src = smallPhotos[0];
		image.width = 240;
		image.height = 378;
		images.push(image);
		image = new Image();
		image.src = smallPhotos[1];
		image.width = 240;
		image.height = 378;
		images.push(image);
	}
	else if(imageSet == "p")
	{
		if(panoramicPhotos.length <= 0)
		{
			panoramicPhotos = panoramicPhotos.concat(shuffle(panoramicPhotosTotal));
		}
		
		image = new Image();
		image.src = panoramicPhotos[0];
		image.width = 963;
		image.height = 378;
		images.push(image);
	}
	else if(imageSet == "ssss")
	{
		if(smallPhotos.length <= 3)
		{
			smallPhotos = smallPhotos.concat(shuffle(smallPhotosTotal));
		}
		
		image = new Image();
		image.src = smallPhotos[0];
		image.width = 240;
		image.height = 378;
		images.push(image);
		image = new Image();
		image.src = smallPhotos[1];
		image.width = 240;
		image.height = 378;
		images.push(image);
		image = new Image();
		image.src = smallPhotos[2];
		image.width = 240;
		image.height = 378;
		images.push(image);
		image = new Image();
		image.src = smallPhotos[3];
		image.width = 240;
		image.height = 378;
		images.push(image);
	}
}

// Load each type of image, then attach an AJAX stop event, so that when everything is loaded it will run the preloader 
// script, which starts the main rotation.
function initPhotoRotator()
{
	loadPhotos("small");
	loadPhotos("medium");
	loadPhotos("large");
	loadPhotos("panoramic");
	
	$(window).ajaxStop(function () { preloadImages(rotation[rotationLocation]); doRotation() } );
}

// The meat and bones of the rotation. This calls a function for each series of photos,\
// and each function will start a timer to call this function back.
function doRotation()
{
	// Unbind any events which may be attached to the window.
	$(window).unbind();
	
	// Find out which set of photos should be run.
	currentChoice = rotation[rotationLocation];

	nextLocation = rotationLocation+1;
	if(nextLocation > rotation.length-1)
	{
		nextLocation = 0;
	}
	nextChoice = rotation[nextLocation];
	preloadImages(nextChoice);

	// Based on which set should be run, call the appropriate function.
	if(currentChoice == "ls")
	{
		showLargeSmall();
	}
	else if(currentChoice == "mm")
	{
		showMediumMedium();
	}
	else if(currentChoice == "mss")
	{
		showMediumSmallSmall();
	}
	else if(currentChoice == "p")
	{
		showPanoramic();
	}
	else if(currentChoice == "sl")
	{
		showSmallLarge();
	}
	else if(currentChoice == "sms")
	{
		showSmallMediumSmall();
	}
	else if(currentChoice == "ssm")
	{
		showSmallSmallMedium();
	}
	else if(currentChoice == "ssss")
	{
		showSmallSmallSmallSmall();
	}
	
	// Iterate the set that should be shown, resetting it to the start
	// if it's gone past the end.
	rotationLocation++;
	if(rotationLocation > rotation.length-1)
	{
		rotationLocation = 0;
	}
}

// Set the init function to run once the window is loaded.
$(window).load(initPhotoRotator);