/*
* Requires: imageutils.js
*
*/

/*
* This class provides a way to collect a set of Div ids and have them
* continuously blend together.  The effect works best if the
* Divs are positioned at the same place
*/
DivBlender = function(showMillis, blendMillis) 
{
   this.divArray = new Array();
   this.divId = 0;
   this.showMillis = showMillis
   this.blendMillis = blendMillis;
};

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

/*
* This is the method that starts the blending, and then
* sets a time, based on the showMillis, for it to blend again 
*/
DivBlender.prototype.startBlending = function() 
{
	this.blend();

	this.divId++;
	if (this.divId == this.divArray.length) {
		this.divId = 0;
	}

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

/*
* This makes the next Div 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
*/
DivBlender.prototype.blend = function() {
    var speed = Math.round(this.blendMillis / 100);
    var timer = 0;
    var i;
    var divName = this.divArray[this.divId];
	var curDivName = this.divArray[this.divId == 0 ? this.divArray.length - 1 : this.divId - 1];
	
    // 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 current div to disappear by reducing its
    // opacity to 0
    	for(i = 100; i >= 0; i--) {
	        setTimeout("changeOpacity(" + i + ",'" + curDivName + "')",(timer * speed));
    	    timer++;
	    }
	
    // fade the next div to appear by increasing its opacity to 100
	changeOpacity(0, divName);
	document.getElementById(divName).style.visibility = "visible";
    for(i = 0; i <= 100; i++) {
        setTimeout("changeOpacity(" + i + ",'" + divName + "')",(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);
//};