/***********************************************
	Slide Show V
	Version 1.1
	Last Revision: 12.13.2004
	webmaster@jshort.com	
***********************************************/
window.onload = init;	// set up the initialization event

var imgIndex = 0;		// This allows for global access to the current index for auto incrementing
var imgIndex2 = 0;		// This allows for global access to the current index for auto incrementing
var imageObjArray;		// this array will hold all the info we need for the images found in the ImageContainer div
var imageObjArray2;		// this array will hold all the info we need for the images found in the ImageContainer div
var containerObj;		// references to div element
var containerObj2;		// references to div element
var captionObj;			// references to div element
var captionObj2;			// references to div element
var wIndex=0;			// the index in the width subset of the array
var hIndex=0;			// the index in the height subset of the array
var zInterval = null;	// the animation interval

function init() 
{
	if (!document.getElementById) return;		//bail out if this is an older browser

	try {
		imageObjArray = getImageDimensions(document.getElementById("ImageContainer"));	// get all the data we need on the images
		imageObjArray[0][0].style.display = "block";					// show the first image and set its opacity to near 100%	
		resetOpacity(imageObjArray[0][0],99);					// mozilla browsers on Win32 give an ugly flash if you set the object opacity to 100%, so we use 99 to avoid that
		
		containerObj = document.getElementById("ImageContainer");				// create a reference to the ImageContainer element
		containerObj.style.width = imageObjArray[0][1] + "px";				// and set its dimensions the same as the first image.
		containerObj.style.height = imageObjArray[0][2] + "px";
			

		if (document.getElementById("ImageContainer2") != null) 
		{
			imageObjArray2 = getImageDimensions(document.getElementById("ImageContainer2"));	// get all the data we need on the images
			imageObjArray2[0][0].style.display = "block";					// show the first image and set its opacity to near 100%		
			resetOpacity(imageObjArray2[0][0],99);					// mozilla browsers on Win32 give an ugly flash if you set the object opacity to 100%, so we use 99 to avoid that
			containerObj2 = document.getElementById("ImageContainer2");				// create a reference to the ImageContainer element
			containerObj2.style.width = imageObjArray2[0][1] + "px";				// and set its dimensions the same as the first image.
			containerObj2.style.height = imageObjArray2[0][2] + "px";
		}
		

		setTimeout("showImage()",5500);
	}
	catch (ex)
	{
	
	}
}

// following function sets the object's (argument obj) opacity to argument val
// and covers all three methods for the different browsers capable of the effect
function resetOpacity(obj,val) 
{
	if(window.opera)return;
	img = obj.getElementsByTagName("img");
	img[0].style.MozOpacity = val/10;
	img[0].style.opacity = val/10;
	img[0].style.filter = "alpha(opacity="+val*10+")";
}

// creates an array of image objects and the data we need for them.
// only looks at the images found in the parentObj argument.
function getImageDimensions(parentObj) 
{
	imgArray = parentObj.getElementsByTagName("span");
	nImage = new Array();
	for(i=0;i<imgArray.length;i++) 
	{
		img = parentObj.getElementsByTagName("img");
		nImage[i] = new Array();
		nImage[i][0] = imgArray[i];
		// MSIE returns "0" for an objects dimensions when said object's display is none. we use bogus
		// attributes to get around this annoying flaw.
		nImage[i][1] = img[0].getAttribute("xwidth");
		nImage[i][2] = img[0].getAttribute("xheight");
	}
	return nImage;
}

function showImage() 
{
	if(zInterval != null) return;		// return if we are already animating or the user is clicking on the active image

	resetOpacity(imageObjArray[imgIndex][0],0);			// reset the opacity of the new current image to 0 and then figure out its dimension transitions	
	imageObjArray[imgIndex][0].style.display = "none";		// hide the current span	
	
	if (document.getElementById("ImageContainer2") != null) 
	{
		resetOpacity(imageObjArray2[imgIndex2][0],0);			// reset the opacity of the new current image to 0 and then figure out its dimension transitions	
		imageObjArray2[imgIndex2][0].style.display = "none";		// hide the current span	
		imgIndex2++; // Show the next image
		if (imgIndex2==imageObjArray2.length)
		{
			imgIndex2=0;
		}
	}
	
	imgIndex++; // Show the next image
	if (imgIndex==imageObjArray.length)
	{
		imgIndex=0;
	}
	zInterval = setInterval("resizeContainer()",10);			// begin the fade-in interval
	
	setTimeout("showImage()",5500);
}

function resizeContainer() 
{
	var dims;				// array to hold the dimension transitions
	var INCREMENT = 2;		// the rate at which we move through the dimension tranisition array. lower to slow it down, raise it to speed up.
	
	dims = calculateDimensionTransition(imageObjArray[imgIndex][1],imageObjArray[imgIndex][2],imageObjArray[imgIndex][1],imageObjArray[imgIndex][2]);
	if (wIndex<dims[0].length) containerObj.style.width = dims[0][wIndex] + "px";	// if we havent exceeded the length of widths and heights, set the container object to the new dimensions
	if (hIndex<dims[1].length) containerObj.style.height = dims[1][hIndex] + "px";		
	wIndex+=INCREMENT; hIndex+=INCREMENT;		// add INCREMENT to the index's. Incrementing or decrementing here will speed up/slow down the animation
	try 
	{
		containerObj.style.top = (400-dims[1][hIndex])/2 + "px"; // IE can flip out here if we go out of range a little, so we catch the error.
	} catch(err) { }
	if (wIndex>=dims[0].length && hIndex >= dims[1].length) 
	{ // we've reached the width and height transition. clean it up and get ready for the next round
		clearInterval(zInterval);
		wIndex=0;
		hIndex=0;
		imageObjArray[imgIndex][0].style.display = "block";		
		
		containerObj.style.width = imageObjArray[imgIndex][1] + "px";
		containerObj.style.height = imageObjArray[imgIndex][2] + "px";
		curOpacity = 0;
		zInterval = setInterval("fadeImage()",10);
	}

	if (document.getElementById("ImageContainer2") != null) 
	{
		dims = calculateDimensionTransition(imageObjArray2[imgIndex2][1],imageObjArray2[imgIndex2][2],imageObjArray2[imgIndex2][1],imageObjArray2[imgIndex2][2]);
		if (wIndex<dims[0].length) containerObj2.style.width = dims[0][wIndex] + "px";	// if we havent exceeded the length of widths and heights, set the container object to the new dimensions
		if (hIndex<dims[1].length) containerObj2.style.height = dims[1][hIndex] + "px";		
		wIndex+=INCREMENT; hIndex+=INCREMENT;		// add INCREMENT to the index's. Incrementing or decrementing here will speed up/slow down the animation
		try 
		{
			containerObj2.style.top = (400-dims[1][hIndex])/2 + "px"; // IE can flip out here if we go out of range a little, so we catch the error.
		} catch(err) { }
		if (wIndex>=dims[0].length && hIndex >= dims[1].length) 
		{ // we've reached the width and height transition. clean it up and get ready for the next round
			clearInterval(zInterval);
			wIndex=0;
			hIndex=0;
			imageObjArray2[imgIndex2][0].style.display = "block";			
			containerObj2.style.width = imageObjArray2[imgIndex2][1] + "px";
			containerObj2.style.height = imageObjArray2[imgIndex2][2] + "px";
			curOpacity2 = 0;
			zInterval = setInterval("fadeImage()",10);
		}
	}

}

// this function fades the object in until it is 0.9 (90%) opaque
function fadeImage() 
{
	curOpacity++;
	resetOpacity(imageObjArray[imgIndex][0],curOpacity);
	if (curOpacity/10 == 0.9) 
	{
		resetOpacity(imageObjArray[imgIndex][0],9.9);
		
		clearInterval(zInterval);
		zInterval = null;
		curOpacity=0;
	}

	
	if (document.getElementById("ImageContainer2") != null) 
	{
		curOpacity2++;
		resetOpacity(imageObjArray2[imgIndex2][0],curOpacity2);
		if (curOpacity2/10 == 0.9) 
		{
			resetOpacity(imageObjArray2[imgIndex2][0],9.9);
			clearInterval(zInterval);
			zInterval = null;
			curOpacity2=0;
		}
	}
}

// calculates the transitions required for a 200x100 element to become a 315x60 element.
// the returned array is then used in resizeContainer for the animation effect.
function calculateDimensionTransition(startW,startH,endW,endH) 
{
	dimensions = new Array();
	dimensions[0] = new Array(); 
	dimensions[1] = new Array();
	nW = startW;
	nH = startH;
	if (endW>startW) 
	{
		while(nW<endW) 
		{
			nW++;
			dimensions[0][dimensions[0].length] = nW;
		}
	} 
	else 
	{
		while(nW>endW) 
		{ 
			nW--;
			dimensions[0][dimensions[0].length] = nW--;
		}
	}
	if (endH>startH) 
	{
		while(nH<endH) 
		{
			nH++;
			dimensions[1][dimensions[1].length] = nH;
		}
	} 
	else 
	{
		while(nH>endH) 
		{
			nH--;
			dimensions[1][dimensions[1].length] = nH;
		}
	}
	return dimensions;
}