<!--
/*

Better(?) Image fader (C)2004 Patrick H. Lauke aka redux

Inspired by Richard Rutter / Clagnut http://www.clagnut.com/blog/1299/ 

Original concept and code adapted from Couloir http://www.couloir.org/ 

preInit "Scheduler" idea by Cameron Adams aka The Man in Blue
http://www.themaninblue.com/writing/perspective/2004/09/29/ 

Extended and enhanced by Trevor Bell, just-go-do-it Ltd, May 2008

*/

/* general variables */

var initLoadTargetID = 'layer1_img'
var initLoadTarget;
var fadeInTargetId = 'layer1'; /* change this to the ID of the fadeable object */
var fadeOutTargetId = 'layer2'
var	fadeInTarget;
var fadeOutTarget;
var fadeInOutSeq =[[10,90],[15,85],[20,80],[25,75],[30,70],[35,60],[40,50],[50,40],[55,30],[60,20],[65,10],[70,5],[75,0],[80,0],[85,0],[90,0],[95,0],[100,0]];
var nFadeInOut = 18;
var fade = true;
var fadeInOutItem = 0;
var fadeInOutIncr = 2;	// used instead of fadeInOutSeq for multiImageFade
var preInitTimer;
var item = 0;
var itemsLoaded = 0;
var pic = "images/";
var loc = "images/"; //"file:///C:/Documents%20and%20Settings/Trevor/My%20Documents/My%20Pictures/crete2007/";
var opacityLev = 10;

var timeouts = 0;
var curItem = 0;

/* functions */

var ft=0;
var lastSwappedImage = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
var lastSwappedPanels = 0;
var swapImage = 0;
var swapPanelPair = 0;
var panelIn = [2,4,6,8,10,12,14,16,18,20];
var panelOut = [1,3,5,7,9,11,13,15.17,19];
var swappingTimeout = 6000;
var andOut = true;

var panelFadeIn = 0;
var panelFadeOut = 0;
function swappingImages(){
	if((nItems == 0)||(nPanels == 0)) return;

	if(imageFade == "static") return;
	//alert("swapping images");
	if(itemsLoaded <= nPanels){
		//alert("waiting on image loading before enabling swapping: " + itemsLoaded);
		window.setTimeout("swappingImages()", 500);
	}else{
		//alert("new swap image: " + swapImage + " all: " + lastSwappedImage);
		swapPanelPair = getNextPair();
		swapImage = getNextImage(swapPanelPair);
		updateLastSwappedImage(swapImage, swapPanelPair);
		//alert("panelpair = " + swapPanelPair);
		lastSwappedPanels = swapPanelPair;
		panelFadeIn = panelIn[swapPanelPair];
		panelFadeOut = panelOut[swapPanelPair];
		panelIn[swapPanelPair] = panelFadeOut;
		panelOut[swapPanelPair] = panelFadeIn;
		//alert("go control swap, panelFadeIn= " + panelFadeIn + " panelFadeOut= " + panelFadeOut + " swapImage= " + swapImage);
		controlSwap(panelFadeIn, panelFadeOut, swapImage);
		//window.setTimeout("swappingImages()", swappingTimeout);
	}
}

var layersProcessed = 0;
function manageImagesAndLayers(){
	updateImagesAndLayers();
	manageLayerVisibility();
}

var layerWidth;
var vp;
var p;
function updateImagesAndLayers(){
	if((nItems == 0)||(nPanels == 0)) return;

	swappingTimeout = Math.round(5000-((nPanels-1)*1000));
	//alert("updateImagesAndLayers-swappingTimeout: " + swappingTimeout);
	if(imageEdgeToEdge == true){
		vp = ((648 - ((nPanels + 1) * imageBorderWidth)) / nPanels);	// = visual panel without border
		var vp2 = Math.round(vp);
		p = vp + (2 * imageBorderWidth);
		var totWidth = (vp2 * nPanels) + (imageBorderWidth * (nPanels+1));
		if(totWidth > 648){
		 	vp2 = vp2-1;
		 	totWidth = (vp2 * nPanels) + (imageBorderWidth * (nPanels+1));
		}
		var addMorePixels = 648 - totWidth;
		
		//alert("tot width: " + totWidth + " vp: " + vp + " vp2: " + vp2 + " addMorePixels: " + addMorePixels);
		
		//alert("calc: vp= " + vp + " p= " + p);
		vp = vp2;
		layerWidth = vp2 - (2 * imageBorderWidth);	//648 / nPanels;
		if(imageBorderWidth > 0){
			imageWidth = imageWidth - (imageBorderWidth *2);
			imageHeight = imageHeight - (imageBorderWidth*2);
		}
		
	}else{	// gallery mode presentation
		vp = ((648 - ((nPanels) * (imageBorderWidth + imageSurround))) / nPanels);	// = visual panel without border
		var vp2 = Math.round(vp);
		p = vp + (2 * imageBorderWidth);
		var totWidth = (vp2 * nPanels) + ((imageBorderWidth + imageSurround) * (nPanels+1));
		if(totWidth > 648){
		 	vp2 = vp2-1;
		 	totWidth = (vp2 * nPanels) + ((imageBorderWidth + imageSurround) * (nPanels+1));
		}
		var addMorePixels = 648 - totWidth;
		
		//alert("tot width: " + totWidth + " vp: " + vp + " vp2: " + vp2 + " addMorePixels: " + addMorePixels);
		
		//alert("calc: vp= " + vp + " p= " + p);
		vp = vp2;
		layerWidth = Math.round(648 / nPanels);
		if(layerWidth * nPanels > 648) layerWidth = layerWidth -1;
		if(imageBorderWidth > 0){
			imageHeight = imageHeight * ((imageWidth - (imageBorderWidth*2) - (imageSurround*2))) / imageWidth;
			imageWidth = imageWidth - ((imageBorderWidth + imageSurround) *2);
		}
	}
	var val;
	//alert("layer v image width = " + imageWidth + " height= " + imageHeight + " layerWidth = " + layerWidth);
	if(imageWidth > layerWidth){
		//alert("image width > panel width");
		var reduce = layerWidth / imageWidth;
		imageWidth = imageWidth * reduce;
		imageHeight = imageHeight * reduce;
		val = "" + imageHeight + "px";
		document.getElementById("layer99").style.height = val;
	}
	
	var ih = Math.round(imageHeight);
	if(ih > imageHeight){
	 	imageHeight = ih - 1;
	}else{
		imageHeight = ih;
	}
	
	val = "" + (imageHeight + 2*imageBorderWidth) + "px";
	document.getElementById("layer99").style.height = val;

	//alert("updating images: " + nPanels);
	var x;
	var y;
	var lay;
	var val;
	lp = 0;
	for(x = 1; x <= nPanels; x++){
		y = ((x-1)*2)+1;
		//alert("y value: " + y);
		updateLayerDef(y, 1, x);
		updateLayerDef(y+1, 2, x);
		updateImageDef(y, 1, x);
		updateImageDef(y+1, 2, x);
		//alert(" do next x= " + x + " nPanels= " + nPanels);
	}
	//alert("no more images&layers to update");
	//alert("goTo swappingimages");
	

}

function updateImageDef(z, oddEven, x){
		//alert("update image: " +z + " width= " + imageWidth + " height= " + imageHeight);
		var lay = "layer" + z + "_img";
		//alert("1 lay: " + lay + " imageHeight: " + imageHeight);
		document.getElementById(lay).height = imageHeight;
		//alert("2");
		var iw;
		if(imageEdgeToEdge) iw = vp;
		else iw = imageWidth;
		document.getElementById(lay).width = iw;
		document.getElementById(lay).style.border = "" + imageBorderWidth + "px solid " + imageBorderCol;		
		//alert("oddEven: " + oddEven + " x: " + x + " itemsLoaded: " + itemsLoaded + " image: " + images[x]);
		if(oddEven == 1){
			if(x <= itemsLoaded){
			 	document.getElementById(lay).src = "images/" + images[x-1];
			 	document.getElementById(lay).title = titles[x-1];
			 	document.getElementById(lay).alt = titles[x-1];
			 }
		}
		//alert("4");

}

var lp = 0;

function updateLayerDef(z, oddEven, x){
		//alert("pos layer calcs on: vp= " + vp); 
		var lw;
		var leftPos;
		var lay;
		var val;
		
		if(imageEdgeToEdge == false){
			lw = layerWidth;
			leftPos = ((x-1)*layerWidth);
		}else{
			lw = vp + (imageBorderWidth*2);
			leftPos = ((x-1)*vp) + ((x-1)*imageBorderWidth);
		}
		//alert("pos layer calcs: new width= " + lw + " leftPos= " + leftPos); 
		//alert("update layer: " +z + "left: " + left);
		lay = "layer" + z;
		//alert("show " + lay + " " + z);
		val = "" + leftPos + "px";
		//alert("1");
		document.getElementById(lay).style.left = val;
		val = "" + layerWidth + "px";
		//alert("2");
		document.getElementById(lay).style.width = lw; //val;
		val = "" + imageHeight + "px";
		//alert("3");
		document.getElementById(lay).style.height = val;
		//alert("4");
		
 		document.getElementById(lay).style.visibility = "hidden";
 		return;
		
		if(oddEven == 1){
			//alert("make visible " + lay);
			if((nPanels == 1) && (x > 1)){
		 		document.getElementById(lay).style.visibility = "hidden";
			}else{
				if(x <= itemsLoaded){
					//alert("set layer visible: " + x + " itemsLoaded: " + itemsLoaded);
		 			document.getElementById(lay).style.visibility = "visible";
		 		}else{
	 				document.getElementById(lay).style.visibility = "hidden";
		 		}
		 	}
		}
		if(oddEven == 0){
			//alert("make hidden " + lay);
			document.getElementById(lay).style.visibility = "hidden";
		}

		//alert("5");
}

function manageLayerVisibility(){
var lay;
var vis;
var img;
var x;
var layVisNum;
	//alert("layersProcessed: " + layersProcessed + " nPanels: " + nPanels);
	if(layersProcessed == nPanels){
		//alert("RETURNING FROM layersProcessed: " + layersProcessed + " nPanels: " + nPanels);
		if(nPanels > 1){
			window.setTimeout("swappingImages()", 2000);	
		}else{
			window.setTimeout("swappingImages()", 2000);
		}

		return;

	}
	layVisNum = (layersProcessed*2) + 1;
	lay = "layer" + layVisNum;
	//alert("lay: " + lay);
	vis = document.getElementById(lay).style.visibility;
	if(vis == "hidden"){
		if(itemsLoaded >= layersProcessed){
		 	document.getElementById(lay).style.visibility = "visible";
		 	
		 	img = lay + "_img";
		 	x = layersProcessed + 1;
		 	//alert("img: " + img + " x: " + x);
			document.getElementById(img).src = "images/" + images[x-1];
			document.getElementById(img).title = titles[x-1];
			document.getElementById(img).alt = titles[x-1];
		 	//alert(" layer: " + lay + " img: " + img);
		 	layersProcessed++;
		 	manageLayerVisibility();
		}else{
			window.setTimeout("manageLayerVisibility()", 250);
		}
	}else{
		layersProcessed++;
		manageLayerVisibility();	
	}
}


var xres = 0;
function getNextImage(panel){
	//alert("showing images record: " + lastSwappedImage + " items loaded: " + itemsLoaded);
	xres = get_random(itemsLoaded, lastSwappedImage[panel]);
	var x = 0;
	for(x = 0; x < nPanels; x++){
		if(xres == lastSwappedImage[x]){
			//alert("getNextImage SAME: " + res + " all: " + lastSwappedImage);
		 	break;
		}
		if(x == nPanels-1){
			//alert("getNextImage GOOD: " + res + " all: " + lastSwappedImage);
		 	return xres;
		}
	}
	//alert("getNextImage looping: " + res + " all: " + lastSwappedImage);
	xres = getNextImage();
	return xres;
}

function getNextPair(){
	if(nPanels == 1) return 0;
	return swapPanelPair = get_random(nPanels, lastSwappedPanels);
}

function updateLastSwappedImage(item, panel){
	lastSwappedImage[panel] = item;
	//alert("updateLastSwappedImage: " + item + " all: " + lastSwappedImage);
}

function controlSwap(pIn, pOut, x){		
	//alert("controlSwap pIn= " + pIn + " pOut= " + pOut + " image number= " + x);
	var curItemLoaded;
	var curItemTarget;
	
	var loadTargetImgId = "layer" + pIn + "_img";
	//alert("layer= " + loadTargetImgId + " image: " + images[x]);
	var loadTargetImg = document.getElementById(loadTargetImgId);
	loadTargetImg.src = loc + images[x];
	loadTargetImg.title = titles[x];

		
	loadTargetId = "layer" + pIn;
	//alert("layer= " + loadTargetId);
	loadTarget = document.getElementById(loadTargetId);
	//document.getElementById(loadTargetId).innerHTML = newImage;
	loadTarget.style.visibility = "hidden";

	
	fadeOutTargetID = "layer" + pOut;
	fadeOutTarget = document.getElementById(fadeOutTargetID);
	fadeInTargetID = "layer" + pIn;
	fadeInTarget = document.getElementById(fadeInTargetID);
	fadeInOutItem = 0;
	ft = 0;
	opacityLev = 10
	andOut = true;
	fadeInOut(ft, opacityLev, andOut);
	//window.setTimeout(swappingImages(), 3000);

}

function get_random(max, notNum){
    var ranNum= Math.floor(Math.random()*max);
    //alert("get_random: " + ranNum + " with max = " + max + " and not = " + notNum);
    if(ranNum == notNum){
    	ranNum = get_random(max, notNum);
    }
    return ranNum;
}

function preInit1() {
	/* an inspired kludge that - in most cases - manages to initially hide the image
	   before even onload is triggered (at which point it's normally too late, and a nasty flash
	   occurs with non-cached images) */
	//var myImage = "<img border='0' src='" + loc + images[item] + "' title='" + titles[item] + "'>"
	//var myImage = "<img border='0' src='file:///C:/Documents%20and%20Settings/Trevor/My%20Documents/My%20Pictures/crete2007/CIMG0343.JPG' width='600' height='200'>"

	
	if ((document.getElementById)&&(initLoadTarget=document.getElementById(initLoadTargetID))) {
		//document.getElementById(initLoadTargetID).innerHTML = myImage;
		//initLoadTarget.style.visibility = "hidden";
		if (typeof preInitTimer != 'undefined') clearTimeout(preInitTimer); /* thanks to Steve Clay http://mrclay.org/ for this small Opera fix */
		//alert("goto loading images");
		loadingImages();
	} else {
		preInitTimer = setTimeout("preInit1()",2);
	}
}

var firstLoadTarget;
var	loadTarget;
var loadTargetId;
var newImage;
var lheight;
var ftLoad = 0;
var loadTry = 0;
var loadTimeout = 200;
var loadTime = 0;
var date1;
var tStart;
var tEnd;
var initTime = false;
var showLoadInfo = false;

function loadingImages(){
	//alert("loading images: " + nItems + " itemsLoaded: " + itemsLoaded);
	
	if((nItems == 0)||(nPanels == 0)) return;
	
	if((itemsLoaded == nItems)&&(ftLoad > 0)){
		if(showLoadInfo == true){
			document.getElementById("info1").innerHTML = "" + nItems + " images loaded: complete";
			document.getElementById("info2").innerHTML = "";
			document.getElementById("info3").innerHTML = "";
		}
	 	return;
	 }
	
	if(itemsLoaded == 1){
		if(ftLoad == 0){
			ftLoad++;
			//alert("leave loading");
			window.setTimeout("manageImagesAndLayers()", 100);
		}
	}
	
	if(initTime == false){
		initTime = true;
		date1 = new Date();
		tStart = date1.getTime();
		//alert("initTime start: " + tStart);
	}
	
	//alert("loading: " + itemsLoaded);
	
	var pic2 = new Image();//Image(x,y); x,y is optional
	pic2.src = pic + images[itemsLoaded];
	//alert("image=" + pic2 + " " + images[itemsLoaded]);
	if(pic2.complete){	// donePic();
		//alert("pic apparently COMPLETE: " + pic2 + " " + images[itemsLoaded]);
		
		// belts and braces test
		
		lheight = pic2.height;
		var actHeight = Math.round(imageHeight * 90/100);
	
		if(lheight > actHeight){
			//alert("COMPLETE load height > 90% act height :" + lheight + " act: " + actHeight); 
			if(showLoadInfo == true){
				document.getElementById("info1").innerHTML = "complete";
				document.getElementById("info2").innerHTML = "time: " + calcTimeLapse() + " / " +loadTimeout;
				document.getElementById("info3").innerHTML = "" + (itemsLoaded+1) + ": " + images[itemsLoaded];
			}
			itemsLoaded++;
			loadTry = 0;
			loadTimeout = 200;
			loadTime = 0;
			initTime = false;
			loadingImages();
		}else{
			countTimeouts();
			loadTry++;
			if(loadTry > 20){
				//alert("BUT NOT COMPLETE loadTry > 10");
				if(showLoadInfo == true){
					document.getElementById("info1").innerHTML = "over 20";
					document.getElementById("info2").innerHTML = "time: " + calcTimeLapse() + " / " +loadTimeout;
					document.getElementById("info3").innerHTML = "" + (itemsLoaded+1) + ": " + images[itemsLoaded];
				}				
				itemsLoaded++;
				loadTry = 0;
				loadTimeout = 200;
				initTime = false;
				loadingImages();
			}else{
				//alert("BUT NOT COMPLETE: actHeight: " + actHeight + " loadHeight: " + lheight + " itemsLoaded: " + itemsLoaded + " loadTry: " + loadTry + " image: " + images[itemsLoaded]);
				if(showLoadInfo == true){
					document.getElementById("info1").innerHTML = "load try: " + loadTry;
					document.getElementById("info2").innerHTML = "time: " + calcTimeLapse() + " / " +loadTimeout;
					document.getElementById("info3").innerHTML = "" + (itemsLoaded+1) + ": " + images[itemsLoaded];
				}
				loadTimeout = loadTimeout + 100;
				if(loadTimeout > 5000) loadTimeout = 5000;

				window.setTimeout("loadingImages()", 200);
			}
		}		
	}else{	// image not yet completely loaded
		loadTry++;
		if(showLoadInfo == true){
			//alert("not yet");
			document.getElementById("info1").innerHTML = "not complete: " + loadTry;
			document.getElementById("info2").innerHTML = "time: " + calcTimeLapse() + " / " +loadTimeout;
			document.getElementById("info3").innerHTML = "" + (itemsLoaded+1) + ": " + images[itemsLoaded];
		}
		var done = true;
		done = pic2.onload; //= donePic;
		//alert("pic loading incomplete: " + images[itemsLoaded]);
		loadTimeout = loadTimeout + 100;
		if(loadTimeout > 5000) loadTimeout = 5000;
		window.setTimeout("loadingImages()", loadTimeout);	// 1000
	}
}

function calcTimeLapse(){
	date1 = new Date();
	tEnd = date1.getTime();
	var tl = (tEnd - tStart)/1000;
	tl = Math.round(tl*Math.pow(10,2))/Math.pow(10,2);
	//alert("timeLapse start: " + tStart + " end: " + tEnd + " timelapse: " + tl);
	return tl;
}

function invokeLoadInfo(){
	document.getElementById("info1").innerHTML = "image load: started";
	showLoadInfo = true;
	if(itemsLoaded == nItems){
		document.getElementById("info1").innerHTML = "" + nItems + " images loaded: complete";
	}

}

function countTimeouts(){
	timeouts++;
	//alert("timeout occurring: " + timeouts);
}

function preInit2(){	
	if ((document.getElementById)&&(fadeTarget2=document.getElementById(fadeTargetId2))) {
		document.getElementById(fadeTargetId2).innerHTML = myImage;
		fadeTarget2.style.visibility = "hidden";
		if (typeof preInitTimer != 'undefined') clearTimeout(preInitTimer); /* thanks to Steve Clay http://mrclay.org/ for this small Opera fix */
	} else {
		preInitTimer = setTimeout("preInit2()",2);
	}

}
function fadeInOut(ft, ol, andOut){
	var v = fadeInOutItem;
	var vali;
	//val = fadeInOutSeq[v][0];
	//val = getOpacityLevel(v, 0);
	vali = getOpacityLev(ol, 0);	
		//alert("fadeIn val = " + val);
		//alert("call fadein setOpacity val = " + val + " v = " + v);		
	if(ft == 0){
		ft++;
		//alert("fading in with first parameter : " + v);
		fadeInTarget.style.visibility = "visible";
	}
	setOpacityx(fadeInTarget, vali);	// fadeIn
	
	//val = fadeInOutSeq[v][1];
	//val = getOpacityLevel(v, 1);
	valo = getOpacityLev(ol, 1);	

		//alert("fadeOut val = " + val);	
	if(valo == 0){
		fadeOutTarget.style.visibility = "hidden";
	}else{
		//alert("call fadeout setOpacity val = " + val + " v = " + v);	
		setOpacityx(fadeOutTarget, valo);	// fadeOut
	}
	//if(v < nFadeInOut-1){
	if(valo > 0){
		fadeInOutItem++;
		opacityLev = opacityLev + 4;
		if(opacityLev > 100) opacityLev = 100;
		window.setTimeout("fadeInOut(ft, opacityLev, andOut)", 150);
		//fadeInOutItem++;
	}else{
		window.setTimeout("swappingImages()", swappingTimeout);
	}
}

function getOpacityLev(olv, n){
	var res = 0;
	if(n==0){
		res = olv;	
	}else{
		res = 100 - olv;
	}
	return res;
}	


function fadeInit() {
	if (document.getElementById) {
		/* get a handle on the fadeable object, to make code later more manageable */
		//alert("fadeInit");
		preInit1(); /* shouldn't be necessary, but IE can sometimes get ahead of itself and trigger fadeInit first */
		return;
		/* set the initial opacity in a (hopefully) cross browser way
		   notice that because of the way the image is in front, and not obfuscated
		   by another object we need to "fade out", i don't need a fallback mechanism
		   to show/hide the covering object...the image is just there, full stop */
		if (fadeTarget.style.MozOpacity!=null) {  
			/* Mozilla's pre-CSS3 proprietary rule */
			fadeTarget.style.MozOpacity = 0;
		} else if (fadeTarget.style.opacity!=null) {
			/* CSS3 compatible */
			fadeTarget.style.opacity = 0;
		} else if (fadeTarget.style.filter!=null) {
			/* IE's proprietary filter */
			fadeTarget.style.filter = "alpha(opacity=0)";
		}
		/* make the object visible again */
		fadeTarget.style.visibility = 'visible';
		window.setTimeout("fadeInz(0)", 500);
	}
}

function fadeInz(opacity) {
	if (fadeTarget) {
		if (opacity <= 100) {
			setOpacity(opacity);
			opacity += 5;
			window.setTimeout("fadeIn("+opacity+")", 250);
		} else{
			item++;
			if(item == nItems) item = 0;
			opacity = 5;
			
			//window.setTimeout("", 1000);

			myImage = "<img border='0' src='" + loc + images[item] + "' width='600' height='200'>"
			document.getElementById(fadeTargetId).innerHTML = myImage;
			setOpacity(5);
			window.setTimeout("fadeIn(0)", 250);

			//fadeIn(opacity);
		}
	}
}

function setOpacityx(fadeTarget, val){
			if (fadeTarget.style.MozOpacity!=null) {
				/* Mozilla's pre-CSS3 proprietary rule */
				fadeTarget.style.MozOpacity = (val/100)-.001;
				/* the .001 fixes a glitch in the opacity calculation which normally results in a flash when reaching 1 */
			} else if (fadeTarget.style.opacity!=null) {
				/* CSS3 compatible */
				fadeTarget.style.opacity = (val/100)-.001;
			} else if (fadeTarget.style.filter!=null) {
				/* IE's proprietary filter */
				fadeTarget.style.filter = "alpha(opacity="+val+")";
				/* worth noting: IE's opacity needs values in a range of 0-100, not 0.0 - 1.0 */ 
			}

}

/* initialise fader by hiding image object first */
addEvent (window,'load',fadeInit)


/* 3rd party helper functions */

/* addEvent handler for IE and other browsers */
function addEvent(elm, evType, fn, useCapture) 
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
 if (elm.addEventListener){
   elm.addEventListener(evType, fn, useCapture);
   return true;
 } else if (elm.attachEvent){
   var r = elm.attachEvent("on"+evType, fn);
   return r;
 }
}
//-->