/*****
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com
Please leave this notice intact. 
*****/

// do the init call after loading the page
// (figure out which type to do)
window.addEventListener ?
	window.addEventListener("load",xfadeInit,false)
	: window.attachEvent("onload",xfadeInit);

var imgs = new Array(), xfadeCur = 0, xfadeNext = 0;

function xfadeInit() {
	if(!document.getElementById || !document.createElement)return;

	// get all the images in the container DIV
	imgs = document.getElementById("xfadeImage").getElementsByTagName("img");

	// set all the images to be 0 opacity
	for(i=1; i<imgs.length; i++) {
		imgs[i].xOpacity = 0;
	}
	imgs[0].style.display = "block";
	imgs[0].xOpacity = .99;
}

function xfadeStart() {
	// return if already got the right pic
	if (xfadeCur == xfadeNext) {
		if ((xfadeCur == 0 && imgs[0].xOpacity >= .99) || (xfadeCur != 0)) {
			return;
		}
	}

	var nOpacity	= 0;

	for (i = 0; i < imgs.length; i++) {
		// fade the next guy in...
		if (i == xfadeNext) {
			imgs[i].style.display	= "block";
			nOpacity		= imgs[i].xOpacity;
			if (nOpacity < .99) {
				nOpacity		+= .05;
				imgs[i].xOpacity	= nOpacity;
				setOpacity(imgs[i]); 
			}
		}
		// fade everyone else out...
		else {
			if (imgs[i].xOpacity > 0) {
				imgs[i].xOpacity	= imgs[i].xOpacity - .05;
				setOpacity(imgs[i]);
			} else {
				imgs[i].style.display = "none";
			}
		}
	}

	var doneCnt	= 0;
	for (i = 0; i < imgs.length; i++) {
		if (i == xfadeNext) {
			if (imgs[i].xOpacity >= .99) {
				doneCnt++;
			}
		} else {
			if (imgs[i].xOpacity <= 0) {
				doneCnt++;
			}
		}
	}

	// done means next guy is full opacity, everyone else is 0
	if (doneCnt == imgs.length) {
		xfadeCur = xfadeNext;
	} else {
		xfadeTimer = setTimeout(xfadeStart,50);
	}
	
	function setOpacity(obj) {
		if (obj.xOpacity > .99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity	= obj.xOpacity;
		obj.style.MozOpacity	= obj.xOpacity;
		obj.style.filter	= "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}
}

var xfadeTimer		= 0;

function xfadeIn(imgSrc) {
	if (xfadeTimer) {
		clearTimeout(xfadeTimer);
		xfadeTimer = 0;
	}

	for(i=0; i < imgs.length; i++) {
		if (imgs[i].src.indexOf(imgSrc) != -1) {
			xfadeCur	= xfadeNext;
			xfadeNext	= i;
		}
	}
	xfadeStart();
}

// the real fade-outer...
function _xfadeOut() {
	xfadeCur	= xfadeNext;
	xfadeNext	= 0;
	xfadeStart();
}

// fade-out wrapper
function xfadeOut() {
	xfadeTimer	= setTimeout("_xfadeOut()", 50);
}

function debugMessage (str) {
	document.getElementById("debugDiv").innerHTML += str + "<br>";
}

	function drawXfade(thumbnailDivName, largeDivName, imgArr, width, height, miniWidth, miniHeight) {
		var thumbnailHTML	= "";
		var largeHTML		= "";

		// now - print the thumbnails
		for (i = 0; i < imgArr.length; i+=1) {
			imgSrc		= imgArr[i] + ".jpg";
			miniImgSrc	= imgArr[i] + ".gif";
			thumbnailHTML +=	"<img src=\"images/t/" + miniImgSrc + "\" width=\"" + miniWidth + "\" " +
					"height=\"" + miniHeight + "\" " +
					" onmouseover=\"xfadeIn('images/f/" + imgSrc + "')\" " +
					" onmouseout=\"xfadeOut()\" " +
					"/>";
			//if ((i%2)==1 && i!=imgArr.length && imgArr.length!=2) {
			if (i==1 && i!=imgArr.length && imgArr.length!=3) {		
			// 1,2,3 images no <br>
				thumbnailHTML += "<br/>";
			}
		}
		// draw the thumbnail images
		document.getElementById(thumbnailDivName).innerHTML = thumbnailHTML;

		// the large image
		largeHTML	+= "<div id='xfadeImage'>";

		// now - print the main
		for (i = 0; i < imgArr.length; i+=1) {
			imgSrc		= imgArr[i] + ".jpg";
			miniImgSrc	= imgArr[i] + ".gif";
			if (i == 0) {
				largeHTML +=	"<img style=\"display: block; opacity: 1.00;\" " +
						"src=\"images/f/" + imgSrc + "\" width=\"" + width + "\" " +
						"height=\"" + height + "\" border=\"0\"/>";
			} else {
				largeHTML +=	"<img style=\"display: none; opacity: -0.01;\" " +
						"src=\"images/f/" + imgSrc + "\" width=\"" + width + "\" " +
						"height=\"" + height + "\" border=\"0\"/>";
			}
		}

		// the footer
		largeHTML += 	"</div>";

		// draw the large image
		document.getElementById(largeDivName).innerHTML = largeHTML;
	}