var targets = new Array();
var src_div = null;
var curr = 0;
var auto = true;
var imageType = ".jpg";
var path = "/images";
var loopInterval = null;
var waitLoop = null;
var blendDuration = 1000;
var blendDurationU = 1.0/1000;
var displayDuration = 3000;
var elapseTime = 0;
var str = "";
var targetImage=null;
var debugField=null;
var autoplay = true;


function findTargetImage(node) {
    
    node = node.firstChild;
        
    while(node && node.tagName != 'IMG') {
        node = node.nextSibling;
    }
    
   node.style.display = 'block';
    
    return node;
}


function setAlpha(alpha){
	var obj = targetImage;
	obj.style.opacity = alpha;
    obj.style.MozOpacity = alpha;
    obj.style.KhtmlOpacity = alpha;
    obj.style.filter = 'alpha(opacity=' + (alpha*100) + ')';
    //debugField.value=alpha;
}


function finishCurrentBlend(){
	
	var obj = targetImage;
	var alpha = 1.0;
	
	obj.style.opacity = alpha;
    obj.style.MozOpacity = alpha;
    obj.style.KhtmlOpacity = alpha;
    obj.style.filter = 'alpha(opacity=' + (alpha*100) + ')';
    //debugField.value=alpha;
    
    clearTimeout(loopInterval);
    clearTimeout(waitLoop);
    loopInterval = 0;
    waitLoop = 0;
    
}


function nextBlend(waitMS){

if(loopInterval)
	finishCurrentBlend();
	
	src_div.style.backgroundImage = "url("+targetImage.src+")";
	src_div.style.backgroundRepeat = "no-repeat";
    src_div.style.display = "block";
	curr = Math.floor ( (curr+1) % targets.length);
	
	if(waitMS){
		 clearTimeout(waitLoop);
		waitLoop = self.setTimeout("startBlend()", waitMS);
	}else{
		startBlend();
	}
	
}

function prevBlend(waitMS){
	
	if(loopInterval)
		finishCurrentBlend();

	src_div.style.backgroundImage = "url("+targetImage.src+")";
	src_div.style.backgroundRepeat = "no-repeat";
	curr = Math.floor ( (curr-1) % targets.length);
	
	if(curr<0){
		curr = targets.length - 1;
	}
	
	if(waitMS){
		clearTimeout(waitLoop);
		waitLoop = self.setTimeout("startBlend()", waitMS);
	}else{
		startBlend();
	}
	
}


function blendLoop(){
	
	var ct = new Date().getTime();
	var diff = elapseTime - ct;
	
	if(diff >= 0){
		var value = diff * blendDurationU;
		//str += value + ",";
		setAlpha ( (1.0-value) );
		
	} else {
	
		clearTimeout(loopInterval);
		loopInterval=0;
		
		if(autoplay){
			nextBlend(displayDuration);
		}
	}
	
}


function startBlend(){

	clearTimeout(waitLoop);
	waitLoop = 0;
	
	elapseTime = new Date().getTime() + blendDuration;
	//alert("elapse time is: " + elapseTime);
	targetImage.src = targets[curr].src;
	//debugField.value="max: " + targets.length + " index: " + curr + " src" + targetImage.src;
	setAlpha(0);
	loopInterval = self.setInterval("blendLoop()", 16);
	
}


function setupBlend(div, ipath, itype){
	
	src_div = document.getElementById(div);
	
	imageType = itype;
	path = ipath;
	
	targetImage = findTargetImage(src_div);
	
	debugField=document.getElementById("debugField");
	
	for (var i = 3; i < arguments.length; ++i) {
    	//str += ipath+arguments[i] + imageType + "\n";
    	var c = new Image();
    	c.src=ipath+arguments[i] + imageType;
    	targets.push(c);
	}
	
	
	startBlend();
	
}

function toggleAutoPlay(){

	autoplay = !autoplay;
	var btn=document.getElementById("playButton");
	if(autoplay){
		btn.src=path+"button_pause"+ ".png"
		startBlend();
	}else{
		btn.src=path+"button_play"+ ".png"
		finishCurrentBlend();
	}
}