/**
*      Picture Fader.
*			 Show a slide show and fade in images.
*			 Assumes <div> divB is nested in <div> divA. It puts the
*			 previous (background) picture into divA and next picture
*			 into divB (with no opacity), then fades in divB by increasing
*			 it's opacity.
*
*			 Input is array of images, delay (in seconds), two div ids and the name of this object.
*
*      @author   Andrew Connick
*      @version  25/03/09
*
*			 Amended 22/10/09 to support full slide show
*/
function PictureFader(imgArr, delay, speed, divA, divB, objName, imgDir, ctlSeq) {

	this.imgArr = imgArr;
	this.curImg = 0;
	this.delay = delay;
	this.speed = speed; 						// Lower numbers yield a slower transition (more than 5 is not smooth)
	this.hldr1 = document.getElementById(divA);
	this.hldr2 = document.getElementById(divB);
	this.objName = objName;					// Name of this object, needed by set timeout
	this.firstCycle = true;
	this.imgDir = imgDir; 					// eg "images/"
	this.ctlSeq = ctlSeq; 					// id of the element to show picture number eg "slideShowNbr"
	this.run = true;

	// define method to swap images for slide show
	this.swapRunningImages = function() { if (this.run) this.swapImages(false) }

	// define method to swap images
	this.swapImages = function(goBack) {
		// get the previous and next image index. 
		var prvImg = this.curImg;
		if (goBack) {
			if (this.curImg==0) this.curImg = this.imgArr.length-1;
			else --this.curImg;
		}
		else {
			if (this.curImg==this.imgArr.length-1) {
				this.curImg = 0;
				this.firstCycle = false;
			}
			else ++this.curImg;
		}
		// swap images	
		this.hldr1.style.backgroundImage = "url('" + imgDir + this.imgArr[prvImg] + "')";
		setOpacity(this.hldr2, 0);
		this.hldr2.style.backgroundImage = "url('" + imgDir + this.imgArr[this.curImg] + "')";
		this.hldr2.removeAttribute("href");
		// fade in new image
		if (this.run) this.fadeIn(0);
		else this.fadeIn(50);
	}

	// define method to fade in
	this.fadeIn = function(opacity) {
		if (document.getElementById) {
			if (opacity < 100) {
				opacity = (opacity + this.speed) * 1.05;
				setOpacity(this.hldr2, opacity);
				setTimeout(this.objName + ".fadeIn(" + opacity + ")", 50);
			}
			else {
				this.hldr2.href = "picture.jsp?picturefile=" + this.imgArr[this.curImg];
				if (ctlSeq!=null) setHtml(ctlSeq, (1 + this.curImg) + " / " + this.imgArr.length);
				if (this.firstCycle && this.curImg < this.imgArr.length-1) preloadImage(imgDir + imgArr[this.curImg+1]);
				if (this.run) setTimeout(this.objName + ".swapRunningImages()", this.delay*1000);
			}
		}
	}

	// Define and run method to start slide show
	this.startShow = function() {
		this.hldr1.style.backgroundImage = "url('" + imgDir + imgArr[0] + "')";
		this.hldr2.style.backgroundImage = "url('" + imgDir + imgArr[0] + "')";
		this.fadeIn(100);
	}
	this.startShow();

	// Define methods to handle slide show controls

	this.goBack = function() { 
		this.run = false;
		this.swapImages(true);
	}

	this.play = function() { 
		if (!this.run) {
			this.run = true;
			this.swapImages(false);
		}
	}

	this.pause = function() { this.run = false; }

	this.goFwd = function() {
		this.run = false;
		this.swapImages(false);
	}
}
	
function setOpacity(obj, opacity) {
	if (opacity>=100) opacity = 99.999;
  
	// IE/Win
	obj.style.filter = "alpha(opacity:" + opacity + ")";
  
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
  
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
  
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}

function preloadImage(src) {
	var img = new Image();
	img.src = src;
	return img.complete;
}