// Configurable Variables
var sImagePath  = "Resource/gfx/Phototator/"; // Relative path to the home of the images.
var aImages = Array("io-valentines.jpg", "io-menu.jpg", "io2.jpg", "io22.jpg", "io3.jpg", "io23.jpg", "io4.jpg", "io5.jpg", "io6.jpg", "io7.jpg", "io8.jpg", "io10.jpg", "io11.jpg", "io12.jpg", "io13.jpg", "io14.jpg", "io15.jpg", "io16.jpg", "io17.jpg", "io18.jpg", "io19.jpg", "io20.jpg", "io21.jpg", "io24.jpg");

var iImgWid     = 561;      // Width of images in pixels.
var iImgHei     = 337;      // Height of images in pixels.

var iItvl       = 5000;     // Pause between transitions in miliseconds.
var iFade       = 2000;      // Time it takes to fade an image in or out in miliseconds.
var iPrLd       = 8;        // Number of images to preload in the first instance.

var aLoaded     = Array();  // Array to store the loaded images.
var bLoaded     = false;    // Indicates if all the images have been loaded.
var iNxtLd      = 0;        // Indicates the next element in the array to be loaded.

var ord=0;                  // Starting point in the array of images
var odd			= false;	// Tracks the faders

function preload() {
    var i=0;
    for(i;i<iPrLd;i++) {
        aLoaded[ord+i]      = new Image(iImgWid,iImgHei);
	    aLoaded[ord+i].src  = sImagePath+aImages[ord+i]+"?v=1";
	    iNxtLd++;
    }
}

function rotate() {
    var nxt=-1;
    
	if((ord+1)>=aImages.length) {nxt=0;} else {nxt=ord+1;}
	if(!odd) {
		$("#jImg2").attr("src",aLoaded[nxt].src);
		$("#jImgDiv2").fadeIn(iFade);
		$("#jImgDiv1").fadeOut(iFade);
		odd=true;
	} else {
		$("#jImg1").attr("src",aLoaded[nxt].src);
		$("#jImgDiv2").fadeOut(iFade);
		$("#jImgDiv1").fadeIn(iFade);
		odd=false;
	}
	
	// Load the next image...
	if(!bLoaded) {
	    aLoaded[iNxtLd]      = new Image(iImgWid,iImgHei);
	    aLoaded[iNxtLd].src  = sImagePath+aImages[iNxtLd]+"?v=1";
	    
	    iNxtLd++;	    
	    if(iNxtLd==aImages.length){bLoaded=true;} // Detect if loading is complete...
	}
	ord=nxt;
	setTimeout("rotate();",iItvl);
}


$(document).ready(function(){
    preload();
	$("#jImgDiv1").fadeIn(1);
	$("#jImgDiv2").fadeOut(1);
	setTimeout("rotate();",iItvl);
});