// img array contains id references for the banner images to fade below in html body
var img = ['products','services', 'news'];
var parentBkgImg = 'images/home.jpg'; // IMPORTANT dependency, the div bkg image of parent page (index.php) that holds iframe
var parentBkgDiv;


var fadeSpeed = 680; // lower value, faster transition
var fadeBackTime = 6000; // after 6 seconds inactivity, fade back to original bkg 
var fadeBackSpeed = 1000;

var zindex = null;
var firstFade = false;
var currImg='';
var bkgTimer = false;

/*
Set individual timers for the banner opacity/fading (uses setOpac)
*/
function opacityTimer (name, oStart, oEnd, time) { 

		currImg = name;
		img[name].fading = true;
    //speed for each frame 
    var speed = Math.round(time/100); 
    var timer = 0; 

		t = img[name].timers.length;
		if(t){
			for(var i=0; i<t; i++){
				window.clearTimeout(img[name].timers[i]);
			}
			img[name].timers = [];
		}
		// check direction; then set timeouts
		if(oStart >= oEnd) { 
			for(var i = oStart; i >= oEnd; i--) { 
				timer++;
				if(!(i % 3)) { 
				oT = setTimeout("setOpac(" + i + ",'"+name+"')",(timer * speed));
				img[name].timers.push(oT);
				}
			} 			
		}
		else if(oStart < oEnd) { 
			for(var i = oStart; i <= oEnd; i++) { 
				timer++;
				if(!(i % 3))	{
				oT = setTimeout("setOpac(" + i + ",'"+name+"')",(timer * speed));
				img[name].timers.push(oT);
				}
			} 
		} 
} 
/*
Sets opacity of banner images; based on timers set from opacityTimer
*/
function setOpac(opacity,name){

		img[name].opac = opacity;
		var o=img[name].id.style;
		o.opacity=(opacity/100);
		o.MozOpacity=(opacity/100);
		o.KhtmlOpacity=(opacity/100);
		o.filter="alpha(opacity="+opacity+")";
		
		if(opacity >=99){
			if(!firstFade) setParentBkg();
			img[name].fading = false;
			for(var i in img) if(img[i].opac>=99 && !img[i].fading && i!=name) setOpac(0,i);
		} else if(opacity <=0) img[name].fading = false;
}

/**
Set's background of parent div to black so subsequent banner fades do not show parent bkg image
*/
function setParentBkg(){
		try{
				parentBkgDiv.style.background = "#000000";
				firstFade = true;
			} catch(e){alert(e.message)}
}

/**
Set's parent div bkg back to default image and fades out last banner
*/
function fadeInParentBkg(){
	if(mouseState=='out'){
		for(var i in img) if(img[i].fading) return false;
		opacityTimer(currImg,98,0,fadeBackSpeed);
		parentBkgDiv.style.background = "url("+parentBkgImg+") no-repeat top left";
		firstFade = false;
	}
}

/**
Function called by nav link mouseover/out to initiate banner fades
*/
function fade(name,dir){

	// check if initFade function has been called, if not page hasn't loaded
	if(zindex==null)
		return;
	
	if(bkgTimer) // clear bkg Fadeout
		window.clearTimeout(bkgTimer);
		
	/* FADE-IN/mousover: if direction is positive, and either fading in a new banner or it's the first fade */
	if(dir) { // fade in
	
		if(currImg!=name || !firstFade){
			mouseState = 'in';
			initOpac = img[name].opac > 0 ? img[name].opac : 0;
	
			o=img[name].id;
			o.style.opacity=(0);
			o.style.MozOpacity=(0);
			o.style.KhtmlOpacity=(0);
			o.style.filter="alpha(opacity="+0+")";
			o.style.zIndex=zindex;
			
			zindex++;
	
			initFade = true;
			opacityTimer(name,0,99,fadeSpeed);
		}
	}
	else { /* Mouseout*/
		bkgTimer = setTimeout(fadeInParentBkg,fadeBackTime);
		mouseState = 'out';
	}	
} 

function initFade(){
	
	parentBkgDiv = document.getElementById('banner');
	zindex = parseInt(parentBkgDiv.style.zIndex)+1;

	var len = img.length;
	
	for(i=0; i<len; i++){
		
		var oImg = new Image();
		oImg.src = "/images/"+img[i]+"_home.jpg";
		oImg.id = img[i];
		oImg.className = "fade";
		
		
		parentBkgDiv.appendChild(oImg);
	
		img[img[i]] = {'timers':[], 'opac':0, 'fading':false, 'id':document.getElementById(img[i])}
		
		
	}

}

addLoadFunc(initFade);