/**************************************************************
 **
 ** effects.js
 **
 ** Library of javascript effects
 **
 **************************************************************/
 
/**************************************************************
 ** explodeImage
 **
 ** Description:  takes a small image and "explodes" it into a
 **				  larger version of that image
 **
 ** Requires:  A hidden, absolute positioned div tag
 **			   An image imbedded in that div tag, called img<divId>
 **
 ** Call Example:  <a href="#" onclick="return explodeImage(event, 'img1', 'explode', '/wrap2/images/homeLyrKitchen.jpg', 400);">
 **
 ** evt: event
 ** idClickedImg: the id of the image on which the user clicked
 ** idExplodeDiv: the id of the hidden div used during explosion
 ** urlSrcLarge: the path to the large verion of the image; can be ""
 ** iSrcLargeWidth: the max width to blow the image up to.
 ** iSrcLargeHeight: the max height to blow the image up to.
 **
 ** Returns false;
 ***************************************************************/
function explodeImage(evt, idClickedImg, idExplodeDiv, urlSrcLarge, iSrcLargeWidth, iSrcLargeHeight)
{
	e = document.getElementById(idExplodeDiv);
	ecimg = document.getElementById(idClickedImg);
	
	iwidth = strippx(ecimg.style.width);
	iheight = strippx(ecimg.style.height);
	if (!iwidth) iwidth = strippx(ecimg.width);
	if (!iheight) iheight = strippx(ecimg.height);
	
	if (document.all)
	{
		if (!document.documentElement.scrollLeft)
			iScrollX = document.body.scrollLeft;
		else
			iScrollX = document.documentElement.scrollLeft;
			
		if (!document.documentElement.scrollTop)
			iScrollY = document.body.scrollTop;
		else
			iScrollY = document.documentElement.scrollTop;	
	}
	else
	{	
		iScrollX = window.pageXOffset;
		iScrollY = window.pageYOffset;
	}

	ileft = (evt.clientX + iScrollX) - (iwidth /2);
	itop = (evt.clientY + iScrollY) - (iheight / 2);
	if (ileft < 0) ileft = 0;
	if (itop < 0) itop = 0;

	e.style.left = String(ileft) + "px";
	e.style.top = String(itop) + "px";	
	e.style.width = String(iwidth) + "px";
	e.style.height = String(iheight) + "px";
	eimg = document.getElementById("img" + idExplodeDiv);
	eimg.style.width = String(iwidth);
	eimg.style.height = String(iheight);
	
	// We need to determine the number of steps that will be taken, and then use that
	// to determine the "step value" for both width and height
	iIterations = 15;
	iStepWidth = (iSrcLargeWidth - iwidth) / iIterations;
	iStepHeight = (iSrcLargeHeight - iheight) / iIterations;
	
	iTimeOutVal = 5;
	if (eimg.captureEvents) eimg.captureEvents(Event.LOAD);
	eimg.onload = function (evt) { imgExplodeLoaded(idExplodeDiv, iSrcLargeWidth, iStepWidth, iStepHeight, iTimeOutVal, urlSrcLarge); };
	eimg.src = ecimg.src;
	return false;
}

function imgExplodeLoaded(id, iMaxWidth, iStepWidth, iStepHeight, iTimeOutVal, urlSrcLarge)
{
	eimg = document.getElementById("img" + id);
	eimg.onload = null;
	if (urlSrcLarge != "")
		eimg.src = urlSrcLarge;
	e = document.getElementById(id);
	e.style.visibility = "visible";
	setTimeout("explode('" + id + "', " + iMaxWidth + ", " +
						iStepWidth + ", " + iStepHeight + ", " +
						iTimeOutVal + ", '" + urlSrcLarge + "')", iTimeOutVal);	
}

function explode(id, iMaxWidth, iStepWidth, iStepHeight, iTimeOutVal, urlSrcLarge)
{
	e = document.getElementById(id);
	i = document.getElementById("img"+id);
	iwidth = strippx(e.style.width);
	iheight = strippx(e.style.height);
	ileft = strippx(e.style.left);
	itop = strippx(e.style.top);
	iwidth += iStepWidth/3*2;
	iheight += iStepHeight/3*2;
	ileft -= iStepWidth/3;
	itop -= iStepHeight/3;
	if (ileft < 0) ileft = 0;
	if (itop < 0) itop = 0;
	if (iwidth < iMaxWidth)
	{
		e.style.height = String(iheight) + "px";
		e.style.width = String(iwidth) + "px";
		e.style.left = String(ileft) + "px";
		e.style.top = String(itop) + "px";
		i.style.width = String(iwidth)+"px";
		i.style.height = String(iheight)+"px";				
		setTimeout("explode('" + id + "', " + iMaxWidth + ", " + 
							iStepWidth + "," + iStepHeight + "," +
							iTimeOutVal + ", '" + urlSrcLarge + "')", iTimeOutVal);
	}
	else
	{
		if (urlSrcLarge != "")
		{
			i.src = urlSrcLarge;
		}
		if (document.captureEvents) document.captureEvents(Event.CLICK);
		document.body.onclick = function (evt) { hideExplode(id); };
	}
}

function hideExplode(id)
{
	e = document.getElementById(id);
	e.style.visibility = "hidden";
	document.body.onclick = null;
}

function strippx(sPix)
{
	sStr = String(sPix);
	if (sStr.search(/px/i) > -1)
		return parseInt(sPix.substr(0, sPix.length-2));
	else
		return sStr;
}

// PreLoad a list of images using timers and events
// imgId = id of an image (hidden) to load the images into
// arImgList = array of URLS (image Src) to load
function PreLoadImages(imgId, arImgList)
{	
	img = document.getElementById(imgId);
	if (!img) return;	// Can't preload if we don't have a valid image "control"
	if (arImgList.length <= 0) return;		// No images?  Can't preload.
		
	iIndex = 0;
	img.onload = function (evt) { PreLoadImagesNext(imgId, arImgList, iIndex+1); };
	img.src = arImgList[iIndex];
}

function PreLoadImagesNext(imgId, arImgList, iIdxNext)
{
	img = document.getElementById(imgId);
	if (iIdxNext > arImgList.length - 1)
	{
		img.onload = null;
		return;					// finished!
	}
	else
	{
		img.onload = function (evt) { PreLoadImagesNext(imgId, arImgList, iIdxNext+1); };
		img.src = arImgList[iIdxNext];
	}
}