/*
* 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.imageId = 0;
   this.divName = divName;
   this.imageName = imageName;
   this.showMillis = showMillis
   this.blendMillis = blendMillis;
};

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

/*
* 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() 
{
	this.blendImages();

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

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

/*
* 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.imageId];
    // 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++;
    }

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

ImageBlender.prototype.setForeground = function(newImageSrc) {
    //make new image the foreground
    document.getElementById(this.imageName).src = newImageSrc;

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