//------------------------------------------------------------------------
// Written by Ray Wilson November 2010
// Copyright Music From Outer Space LLC 2010.
// http://www.musicfromouterspace.com/mfosweb/home.action
//------------------------------------------------------------------------
function ImageCrossFader(container, width, height)
{
	this.imageContainer = container;
	this.width = width;
	this.height = height;
	this.onClickCallBack  = null;
	this.imageNamesArray  = null;
	this.imageTitlesArray = null;
	this.imageURIsArray   = null;
	this.picTextArray     = null;
	this.textContainer    = null;
	
	var fader = this;
	this.imageContainer.onclick = function () {fader.callOnclickHandler();}; 
	this.imageContainer.style.position = "relative";
	this.imageContainer.style.width = width + "px";
	this.imageContainer.style.height = height + "px";
	this.imageContainer.style.margin = "0px";
	this.imageContainer.style.padding = "0px";
	this.imageContainer.style.cursor = "pointer";
	
	this.firstFade = true;
	this.initialTime = 10000;
	this.imgArray = [];
	this.stillTimeMS = 3000;
	this.fadeSliceMS = 50;
	this.opacityChange = 2;
	this.fadeUpImage;
	this.fadeDnImage;
	this.opacityUp = 0;
	this.opacityDn = 100;
	this.piccount = 0;
	this.picindex = 0;
	this.fadeindex = 0;
	this.all_pics_loaded = false;
	
}

ImageCrossFader.prototype.callOnclickHandler = function()
{
	if(this.onClickCallBack && this.imageURIsArray && this.imageURIsArray.length > this.fadeindex)
	{
		this.onClickCallBack(this.imageURIsArray[this.fadeindex]);
	}
	else if(this.onClickCallBack)
	{
		this.onClickCallBack();
	}
};

ImageCrossFader.prototype.setPicTextArray = function(imageTextArray)
{
	this.picTextArray = imageTextArray;
};

ImageCrossFader.prototype.setImageNamesArray = function(imageNamesArray)
{
	this.imageNamesArray = imageNamesArray;
};

ImageCrossFader.prototype.setImageTitlesArray = function(imageTitlesArray)
{
	this.imageTitlesArray = imageTitlesArray;
};

ImageCrossFader.prototype.setImageURIsArray = function(imageURIsArray)
{
	this.imageURIsArray = imageURIsArray;
};

ImageCrossFader.prototype.setImageContainer = function(imageContainer)
{
	this.imageContainer = imageContainer;
};

ImageCrossFader.prototype.addImageChild = function(nInx, bHide)
{
	var o = document.createElement("img");
	o.src = this.imageNamesArray[nInx];
	o.style.position = "absolute";
	o.style.top = "0px";
	o.style.left = "0px";
	o.style.zIndex = "0";
	o.style.cursor = "pointer";
	
	if(bHide)
	{
		ImageCrossFader.setOpacity(o, 0);
	}
	this.imageContainer.appendChild(o);
	this.imgArray.push(o);
};

ImageCrossFader.prototype.startFade = function()
{
	this.picindex = 0;
	this.piccount = this.imageNamesArray.length - 1;
	this.addImageChild(this.picindex, false);
	this.imageContainer.style.visibility = "visible";
	this.showStill();
};

ImageCrossFader.prototype.showStill = function()
{
	if(this.picindex >= this.piccount)
	{
		this.picindex = 0;
		this.all_pics_loaded = true;
		this.fadeindex = this.piccount;
	}
	else
	{
		this.fadeindex = this.picindex;
		++this.picindex;
	}
	
	if(!this.all_pics_loaded)
	{
		//-----------------------------------------
		// Pre-load images as needed one at a time.
		//-----------------------------------------
		this.addImageChild(this.picindex, true);
	}
	
	this.fadeUpImage = this.imgArray[this.picindex];
	this.fadeDnImage = this.imgArray[this.fadeindex];
	
	// Set the title of the image.
	if(this.imageTitlesArray && this.imageTitlesArray.length > this.fadeindex)
	{
		this.imageContainer.title = this.imageTitlesArray[this.fadeindex];
	}
	
	if(this.picTextArray && this.textContainer)
	{
		if(this.fadeindex < this.picTextArray.length)
		{
			this.textContainer.innerHTML = this.picTextArray[this.fadeindex];
		}
	}
	
	var that = this;
	var stilltime;
	if(this.firstFade)
	{
		stilltime = this.initialTime;
		this.firstFade = false;
	}
	else
	{
		stilltime = this.stillTimeMS;
	}
	window.setTimeout(function(){that.preFade();}, this.stillTimeMS);
};

ImageCrossFader.prototype.preFade = function()
{
	if(this.picTextArray && this.textContainer)
	{
		this.textContainer.innerHTML = "";
	}
	this.crossFade();
};

ImageCrossFader.prototype.crossFade = function()
{
	// No title during transition.
	this.imageContainer.title = "";
	
	if(this.opacityUp < 100)
	{
		this.opacityUp += this.opacityChange;
		this.opacityDn = 100 - this.opacityUp; 
		
		ImageCrossFader.setOpacity(this.fadeUpImage, this.opacityUp);
		ImageCrossFader.setOpacity(this.fadeDnImage, this.opacityDn);
		
		var that = this;
		window.setTimeout(function(){that.crossFade();}, this.fadeSliceMS);
	}
	else
	{
		this.opacityUp = 0;
		this.opacityDn = 100;
		this.showStill();
	}
};

ImageCrossFader.setOpacity = function(imgObject, opacity)
{
	opacity = (opacity > 100) ? 100 : (opacity < 0) ? 0 : opacity; 

	if (imgObject && imgObject.style)
	{
		if (imgObject.style.MozOpacity != null)
		{
			/* Mozilla's pre-CSS3 proprietary rule */
			imgObject.style.MozOpacity = (opacity / 100);
		}
		else if (imgObject.style.opacity != null)
		{
			/* CSS3 compatible */
			imgObject.style.opacity = (opacity / 100);
		}
		else if (imgObject.style.filter != null)
		{
			/* IE's proprietary filter */
			imgObject.style.filter = "alpha(opacity=" + opacity + ")";
		}
	}
};

ImageCrossFader.getOpacity = function(imgObject)
{
	var opacity;
	
	if (imgObject && imgObject.style)
	{
		if (imgObject.style.MozOpacity != null)
		{
			//---------------------------------------------
			// Mozilla's pre-CSS3 proprietary rule
			//---------------------------------------------
			opacity = parseFloat(imgObject.style.MozOpacity) * 100;
		}
		else if (imgObject.style.opacity != null)
		{
			//---------------------------------------------
			// CSS3 compatible
			//---------------------------------------------
			opacity = parseFloat(imgObject.style.opacity) * 100;
		}
		else if (imgObject.style.filter != null)
		{
			//---------------------------------------------
			// IE's proprietary filter: imgObject.style.filter
			// Returns string: "alpha(opacity=50)"
			//---------------------------------------------
			var ieop = imgObject.style.filter;
			opacity = ieop.match(/\d{1,3}/);
		}
		else
		{
			opacity = 100;
		}
		return opacity;
	}
	else
	{
		return -1;
	}
};