/*********************************************************************************

Script to cycle through a slideshow of images with a fade-in effect.
Requires a single <img> inside an element which can display a background.

For best results, use more than two images in the slideshow.

Create a new slideshow like this:
	var whiteboardButtonShow = new slideShow();
	whiteboardButtonShow.startShow("img_ID","container_ID",pixArray,2.5);

**********************************************************************************/

var slideShow = function() {

var Picture = "";							//ID of <img> to be changed
var Background = "";					//ID of <img>'s container
var Pix = new Array ();		
var PicCurrent = new Image(); 
var PicCurrentNum = 0;				
var timeDelay = 5000;					//how long each image displays. Default is about 5 seconds
var interval;


/*********************************************************************************

Start the slideshow by calling the startShow function.
	picID = id of the <img> to be changed
	backgroundID = id of the <img>'s container
	pixArray = array of strings. Each string is a path to an image  
	delayInSeconds = how long to display each image before fading in the next. Optional
	
**********************************************************************************/

function startShow(picID,backgroundID,pixArray,delayInSeconds) {
	Picture = picID;
	Background = backgroundID;
	Pix = pixArray;
	PicCurrent.src = pixArray[PicCurrentNum]; 
	if(delayInSeconds){timeDelay = delayInSeconds*1000;}
	var self = this;
	interval=window.setInterval(self.changePic, timeDelay);
}


/*********************************************************************************

ChangePic fades in the next image in the array.
If the current image is last in the array, fade in the first image.
	
**********************************************************************************/

function changePic() { 
	PicCurrentNum++; 
	if (PicCurrentNum >= Pix.length) { 
		PicCurrentNum = 0; 
	};
	PicCurrent.src = Pix[PicCurrentNum]; 
	FadeInImage(Picture,PicCurrent.src,Background);
}


/*********************************************************************************

ChangePicNow can be called at any time to change the image and reset the timer.
Use it within onclick= to let the user jump to the next image.
	
**********************************************************************************/

function changePicNow() { 
	interval=window.clearInterval(interval); 
	changePic(); 
	interval=window.setInterval(this.changePic, timeDelay);
}



return {											//return functions for public access
	startShow:startShow,
	changePic:changePic,
	changePicNow:changePicNow,
	interval:interval
};

};	//end of slideShow function

/*********************************************************************************

Functions to handle fading behaviour.
current image is set as the container background, then the new image is faded in
in its place.
	
**********************************************************************************/

function SetOpacity(object,opacityPct)
{
  if (object) {
    if (object.style) {
      if (object.style.filter) object.style.filter = 'alpha(opacity=' + opacityPct + ')';	// IE
      if (object.style.MozOpacity) object.style.MozOpacity = (opacityPct/100); // Old mozilla and firefox
      if (object.style.opacity) object.style.opacity = (opacityPct/100); // Everything else
    }
  }
}

function ChangeOpacity(elementID,msDuration,msStart,opacityStart,opacityEnd)
{
  var element = document.getElementById(elementID);
  var opacity = element.style.opacity * 100;
  var msNow = (new Date()).getTime();
  opacity = opacityStart + (opacityEnd - opacityStart) * (msNow - msStart) / msDuration;
  if (opacity<0) 
    SetOpacity(element,0)
  else if (opacity>100)
    SetOpacity(element,100)
  else
  {
    SetOpacity(element,opacity);
    element.timer = window.setTimeout("ChangeOpacity('" + elementID + "'," + msDuration + "," + msStart + "," + opacityStart + "," + opacityEnd + ")",1);
  }
}

function FadeInImage(foregroundID,newImageSrc,backgroundID)
{
  var foreground=document.getElementById(foregroundID);
  if (backgroundID)
  {
    var background=document.getElementById(backgroundID);
    if (background)
    {
      background.style.backgroundImage = 'url(' + foreground.src + ')';
      background.style.backgroundRepeat = 'no-repeat';
    }
  }
  if (foreground) {
    SetOpacity(foreground,0);
    foreground.src = newImageSrc;
    if (foreground.timer) window.clearTimeout(foreground.timer); 
    var startMS = (new Date()).getTime();
    foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "',1000," + startMS + ",0,100)",10);
  }
}