/* MagicShow.js - Creates a slideshow animation of and images contained in a div tag.
	
	Author: Alejandro Gonzalez
	Date: 5/29/07
	
	Description:  This script creates an animated slideshow effect for images, where
		one images slowly fades in place of the old image.  Several options can be specified
		including the size of the image pane and the speed of the animation.
		
	Bugs: Some image transitions occur slightly out of sync according to the specified animation speed
		  Sometimes a message displaying "Stack overflow at line: 0" may appear.

   	Requirements: This script requires jquery.js

 * MUST INLCUDE THESE LINES TO LOAD THE JAVASCRIPT FILE *
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="magicAnimate.js"></script>


 * THEN YOU MUST ADD THIS LINE IN THE JQUERY LOAD FUNCTION *
	<script type="text/javascript" >
		...
		$(function () { 
			...
			animateDiv("family_weekend", "images/family/", "family", 320, 213, 6, 3000, true, true);
			...
		});
		...
	</script>

 * SYNTAX OF THE "animateDiv" FUNCTION *
	animateDiv(divName, imgFolder, imgPrefix, imgWidth, imgHeight, totImages, waitTime, aniContinous, showRandomly)
			 divName				...			-Div object where the magic happens. Usually empty and better if 
			 									 the width and height is specified.
												   i.e. <div id="family_weekend" style="width:320px; height:213px">
												   			&nbsp;
														</div>
			 imgFolder				...			-Specifies the relative folder where the pictures are located.
			 imgPrefix				...			-Specifies the prefix of the JPEG files. 
			 									   *NOTE: Must start from 01.
			 									   i.e. the file "animateXX.jpg" just the "animate" part.
			 imgWidth, imgHeight	...			-Specifies the size of the images on the div. 
			 									   *NOTE: Make sure all images are the same size.
			 totImages				...			-Total Images in the folder with the prefix sepcifed.
			 waitTime				...			-Specifies the delay time in miliseconds between transitions.
			 aniContinous			...			-true/false value that specifies whether the animation repeates 
			 									 continously forever.
			 showRandomly			...			-true/false value that specifies whether the images are shown randomly
			 									 or in order.
*/
var aniSpeed=500;
var aniRepeat = false;
var aniRandom = false;
var totalImages = 0;
var aniWidth = 0;
var aniHeight = 0;
var aniDivName ="";
var blankImage ="";
var preloadedImage = new Array();
var shownImage = new Array();

function animateDiv(divName, imgFolder, imgPrefix, imgWidth, imgHeight, totImages, waitTime, aniContinous, showRandomly){
	aniSpeed = waitTime;
	aniRepeat = aniContinous;
	totalImages = totImages;
	aniWidth = imgWidth;
	aniHeight = imgHeight;
	aniDivName =divName;
	aniRandom = showRandomly;
	blankImage = imgFolder + "blank.jpg";
	$("#"+ aniDivName).html("<div id=\"ani_frame\" style=\"width:"+imgWidth+"px; height:"+imgHeight+"\"><img src=\""+ imgFolder + "blank.jpg\" alt=\""+ aniDivName +"\" width=\""+aniWidth+"\" height=\""+aniHeight+"\" /></div>");
	$("#"+ aniDivName).css("background","url(" + blankImage +")");
	preloadImages(1, totImages, imgPrefix, imgFolder, "animateTick(0)");
}

function preloadImages(startIndex, totImages, imgPrefix, imgFolder, doneFunc){
	shownImage[startIndex] = false;
	preloadedImage[startIndex] = new Image();
	preloadedImage[startIndex].onload = function () {
		if (startIndex != totImages){
			preloadImages(++startIndex, totImages, imgPrefix, imgFolder, doneFunc);
		}else{
			setTimeout(doneFunc, 1);
			document.status = "Done";
		}
	};
	preloadedImage[startIndex].src = imgFolder + imgPrefix + fixNum(startIndex) + ".jpg";
	document.status =  "Loading image "+ startIndex +"/"+ totImages +"...";
}

function animateTick (startImageId){
	var preloadImage = new Image();
	var stopAnimation=false;
	var i;
	if (aniRandom==true){
		if (startImageId!=0) shownImage[startImageId]=true;
		do{
			if (checkAllShown()==true){
				if (aniRepeat==true){ 
					for (i=1; i<=totalImages; i++)
						shownImage[i] = false;
				}else{
					stopAnimation = true;
					break;
				}
			}
			i = Math.floor(Math.random()*totalImages)+1;
		}while(shownImage[i]==true);
		if (!stopAnimation){
			currentImage = startImageId==0 ? blankImage: preloadedImage[startImageId].src;
			startImageId = i;
			nextImage = preloadedImage[startImageId].src;
		}
	}else{
		if (startImageId>=totalImages) {
			currentImage = preloadedImage[startImageId].src;
			if (aniRepeat==true){
				startImageId = 1;
			}else{
				stopAnimation = true;
			}
			nextImage = preloadedImage[startImageId].src;
		}else{
			currentImage = startImageId==0 ? blankImage: preloadedImage[startImageId].src;
			nextImage = preloadedImage[++startImageId].src;
		}
	}// end if (randomize==true)
	
	if (!stopAnimation){
		$("#"+ aniDivName).css("background","url("+ nextImage +")");
		$("#ani_frame img").attr("src",currentImage);
		$("#ani_frame").fadeOut("slow", function() {
			$("#ani_frame img").attr("src",nextImage);
			setTimeout("animateTick("+startImageId+")", aniSpeed);
		});
	}
}

function fixNum(num){ return ((num.toString().length == 1) ? "0" : "") + num.toString(); }
function checkAllShown(){ for (var count=0; count<totalImages; count++){ if (shownImage[count]==false){ return false; }} return true; }