/*
* Requires: imageutils.js
*
*/

/*
* This class provides a way to collect a set of images and have them
* continuously blend together.
*/
ImageBlender = function(divName, imageName, showMillis, blendMillis) 
{
   this.imageArray = new Array();
   this.imageIdx = 0;
   this.divName = divName;
   this.imageName = imageName;
   this.showMillis = showMillis
   this.blendMillis = blendMillis;
   this.pause = false;
   this.timerId = null;
};

/*
* Allows setting the pause flag for the blending.  If set
* to true, the next set of blending does not occur.  When
* reset to false, startBlending should be called, and 
* blending will continue where it left off
*/
ImageBlender.prototype.setPause = function(pauseIt) 
{
	if (pauseIt == true) 
		this.pause = true;
	else 
		this.pause = false;
	
	// stop the current timer - if any
	if (this.pause && timerId != null) {
		clearTimeout(timerId);
		timerId = null;
	}
}


/*
* Adds an image source/location, using URL, to the list of 
* images used in the continuous blending
*/
ImageBlender.prototype.addImage = function(src) 
{
//	this.imageArray[this.imageArray.length] = src;
	var tmpImg = new Image();
	tmpImg.src = src;
	this.imageArray[this.imageArray.length] = tmpImg;

	// trick using a hidden div
	// create a hidden div to allow the image to load
//	document.write("<div style=\"display:none;\"><img src=\""
//		+ src + "\"></div>");
};

/*
* Adds an image source/location, using ImageInfo, to the list of 
* images used in the continuous blending
*/
ImageBlender.prototype.addImageInfo = function(imgInfo)
{
	this.imageArray[this.imageArray.length] = imgInfo;
}

/*
* Ger the image information (src, alt, desc) of the 
* images used in the continuous blending
*/
ImageBlender.prototype.getImageInfo = function(idx)
{
	return this.imageArray[idx];
}

/*
* Ger the image size of the 
* images used in the continuous blending
*/
ImageBlender.prototype.size = function()
{
	return this.imageArray.length;
}

/*
* This is the method that starts the blending, and then
* sets a time, based on the showMillis, for it to blend again 
*/
ImageBlender.prototype.startBlending = function() 
{
	// allow the blending to be paused
	if (this.pause) {
		if (timerId != null) {
			clearTimeout(timerId);
			timerId = null;
		}
		return;
	}

	this.blendImages();

	this.imageIdx++;
	if (this.imageIdx == this.imageArray.length) {
		this.imageIdx = 0;
	}

	var self = this;
	timerId = setTimeout(function() { self.startBlending(); }, this.showMillis);
};


/*
* Creates the empty post blending function
* This post method will call the function with the ImageBlender 
* object, and the current index of the image, after blending
*
* This can be replaced by the page using the ImageBlender
* by setting this method, such as:
*   myImageBlender.postBlending = function(imageBlender, imageIndex) { ... }
* or
*   myImageBlender.postBlending = "myPostImageBlender"
*/
ImageBlender.prototype.postBlending = function(imageBlender, imageIndex)
{
}


/*
* This makes the next image the background, the changes the foreground
* image's opacity to 0, then sets the foreground image to the 
* back ground source, and sets the foreground opacity to 100
*/
ImageBlender.prototype.blendImages = function() {
    var speed = Math.round(this.blendMillis / 100);
    var timer = 0;
    var i;
//    var imagefile = this.imageArray[this.imageIdx];
    var imagefile = this.imageArray[this.imageIdx].src;
	var alt = this.imageArray[this.imageIdx].alt;

    // this 'self' reference appears to be the best way to make
    // the setTimeout() method to work properly - the 'this' does not
    // consistantly work
    var self = this;
    
    //set the new image as background
    document.getElementById(this.divName).style.backgroundImage = "url(" + imagefile + ")";

    // fade the foreground image by reducing its
    // opacity to 0
    for(i = 100; i >= 0; i--) {
        setTimeout("changeOpacity(" + i + ",'" + this.imageName + "')",(timer * speed));
        timer++;
    }

     this.postBlending(this, this.imageIdx);
	 
    // reset the foreground image after the other blending completes
    setTimeout(function() { self.setForeground(imagefile, alt); },(timer * speed));
};

ImageBlender.prototype.setForeground = function(newImageSrc, alt) {
    //make new image the foreground
	var currImage = document.getElementById(this.imageName);
	
	currImage.src = newImageSrc;
	if (alt != null)
		currImage.alt = alt		

    // make foreground image opaque again
    changeOpacity(100, this.imageName);
};