/***********************************************
	Slide Show IV
	Version 1.0
	Last Revision: 09.25.2004
	steve@slayeroffice.com
	
	PLEASE LEAVE THIS NOTICE IN TACT!

	Should you modify/improve upon this code
	please let me know so that i may update the 
	version hosted at slayeroffice

***********************************************/


window.onload = init;		// set up the initialization event
var d=document;			// shortcut reference to the document object
var imageObjArray;		// this array will hold all the info we need for the images found in the imageContainer div
var currentImg = 0;		// the index of the current image
var containerObj,captionObj;		// references to div elements
var dims;				// array to hold the dimension transitions
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
var INCREMENT = 10;		// the rate at which we move through the dimension tranisition array. lower to slow it down, raise it to speed up.

var oldW = 0;
var oldH = 0;
var logger;
var imgObj;

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


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

	imgObj = imgID; //.getElementById(imgID);

	if(imgObj.style.width == '384px' || imgObj.style.width == '383px' ) {
		dims = calculateDimensionTransition(imgObj.style.width.substring(0,imgObj.style.width.length-2), imgObj.style.height.substring(0,imgObj.style.height.length-2), oldW, oldH);
	}
	else {
		oldW = imgObj.style.width.substring(0,imgObj.style.width.length-2);
		oldH = imgObj.style.height.substring(0,imgObj.style.height.length-2);
		dims = calculateDimensionTransition(imgObj.style.width.substring(0,imgObj.style.width.length-2), imgObj.style.height.substring(0,imgObj.style.height.length-2), 384, 282);
	}

	zInterval = setInterval("resizeContainer()",1);			// begin the fade-in interval
}


function resizeContainer() {
	if(wIndex<dims[0].length) imgObj.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) imgObj.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 {
		imgObj.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);
		zInterval = null;
		wIndex=0;
		hIndex=0;
		imgObj.style.display = "block";
		imgObj.style.width = dims[0][dims[0].length-1] + "px";
		imgObj.style.height = dims[1][dims[1].length-1] + "px";
	}
}


// 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;

	//dump(startW+"/"+startH + "  -  " + endW+"/"+endH + " \n");

	var stepW;
	var stepH;
	var dist;
	if (Math.abs(endH-startH) > Math.abs(endW-startW)) {
		dist = Math.abs(endH-startH);
		stepH = (endH-startH) / dist;
		stepW = (endW-startW) / dist;
	}
	else {
		dist = Math.abs(endW-startW);
		stepH = (endH-startH) / dist;
		stepW = (endW-startW) / dist;
		//dump(dist + " - " + stepH+"/"+stepW + " \n");
	}

	while( dist > 0 ) {
		nW = 1*nW + stepW;
		nH = 1*nH + stepH;
		dist = dist-1;
		dimensions[0][dimensions[0].length] = nW;
		dimensions[1][dimensions[1].length] = nH;
		//dump(nW+" / "+nH+" \n");
	}

	return dimensions;
}