/** 
 * @fileoverview 
 * Javascript Website Utilities
 *
 * (c) M. Harris 2006 - All Rights Reserved
 *
 */

/**
 * @class
 * Image Rotator - this class implements a 'slideshow' type effect, rotating
 * a list of images through a single image on the page.
 * @constructor
 * Creates a new ImageShow.
 * @param {string} imgName	Name of the <img> tag for displaying the image
 * @param {array} imgUrlList 	Array of strings containing the URLs of the images
 * @param {int} displayTime	# of ms image is displayed before the transition to the next one is started
 * @param {int} fadeTime	# of ms it should take to fade images in/out (0=do not fade)
 */
ImageShow = function(imgName, imgUrlList, displayTime, fadeDelay) {
	 
	 this.displayTime=displayTime;
	 this.fadeDelay=fadeDelay;
	 this.imgObj=document.images[imgName];
	 this.imgList=[];
	 var h=this.imgObj.height;
	 var w=this.imgObj.width;
	 for (var i=0; i<imgUrlList.length; i++) {
		 var imgCache=new Image(w,h);
		 imgCache.src=imgUrlList[i];
		 this.imgList.push(imgCache);
	 }
	 this.fadeOpac=100;
	 var obj=this;
	 window.setTimeout(function() { obj.fadeStepOut()}, this.displayTime);
};

/**
* Fading Step size
* @final
* @type int
*/
ImageShow.FADESTEPSIZE = 10;

/**
* A reference to the Image object that displays the images in the document
* (ie. the member of document.images[])
* @type Image
*/
ImageShow.prototype.imgObj = null;

/**
* The array of images that this frame will display 
* @type Image[]
*/
ImageShow.prototype.imgList = null;

/**
* The index of the currently displayed image 
* @type int
*/
ImageShow.prototype.currentImg = 0;

/**
* Time in ms that each image is displayed 
* @type int
*/
ImageShow.prototype.displayTime = 0;

/**
* Amount of time it takes to fade image in/out
* @type int
*/
ImageShow.prototype.fadeTime = 0;

/**
* Current fade opacity
* @type int
*/
ImageShow.prototype.fadeOpac = 0;

/**
* Set the opacity of the image.
* @param {int} opacity The opacity of the image, in %
*/
ImageShow.prototype.setOpacity = function (opacity) {
  opacity = (opacity == 100)?99.999:opacity;
  
  // IE/Win
  this.imgObj.style.filter = "alpha(opacity:"+opacity+")";
  
  // Safari<1.2, Konqueror
  this.imgObj.style.KHTMLOpacity = opacity/100;
  
  // Older Mozilla and Firefox
  this.imgObj.style.MozOpacity = opacity/100;
  
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  this.imgObj.style.opacity = opacity/100;
};

/**
* Fade the current image in
*/
ImageShow.prototype.fadeIn = function() {

	this.fadeOpac=0;
	this.setOpacity(this.fadeOpac);
	this.fadeStepDelay = this.fadeDelay / (100/ImageShow.FADESTEPSIZE);
	var obj=this;
	window.setTimeout(function () { obj.fadeStepIn() }, this.fadeStepDelay);
	
};

/**
* Callback for Fade-In
* @param {ImageShow} obj	Ref to 'this' - needed because this is a callback
*/
ImageShow.prototype.fadeStepIn = function() {
	this.fadeOpac = (this.fadeOpac + ImageShow.FADESTEPSIZE <= 100) ? this.fadeOpac + ImageShow.FADESTEPSIZE : 100;
	this.setOpacity(this.fadeOpac);
	var obj=this;
	if (this.fadeOpac<100) {
		window.setTimeout(function() { obj.fadeStepIn() }, this.fadeStepDelay);
	} else {
		window.setTimeout(function() { obj.fadeStepOut()}, this.displayTime);
	}
};

/**
* Callback for Fade-Out
* @param {ImageShow} obj	Ref to 'this' - needed because this is a callback
*/
ImageShow.prototype.fadeStepOut = function(obj) {
	this.fadeOpac = (this.fadeOpac - ImageShow.FADESTEPSIZE >=0) ? this.fadeOpac - ImageShow.FADESTEPSIZE : 0;
	this.setOpacity(this.fadeOpac);
	var obj=this;
	if (this.fadeOpac>0) {
		window.setTimeout(function() { obj.fadeStepOut() }, this.fadeStepDelay);
	} else {
		this.switchImg();
	}
};

/**
* Switch the image to the next one in sequence
*/
ImageShow.prototype.switchImg = function() {
	this.currentImg = (this.currentImg+1 < this.imgList.length) ?
		this.currentImg+1 : 0;
	this.imgObj.src = this.imgList[this.currentImg].src;
	this.fadeIn();
};