var FADE_AR_LENGTH = fade_ar.length;

var fade_ar_index = 0;
var fade_level = 0;
					 
function getElm(eID) {
	//alert(document.getElementById(eID));
	return document.getElementById(eID);
}
function show(eID) {
	getElm(eID).style.display='block';
}
function hide(eID) {
	getElm(eID).style.display='none';
}
function setOpacity(eID, opacityLevel) {
	var eStyle = getElm(eID).style;
	eStyle.opacity = opacityLevel / 100;  
	eStyle.filter = 'alpha(opacity='+opacityLevel+')';
}

function fadeIn(eID) {

	if (getElm(eID).style.display == 'none') {
		show(eID); 
	}
	
	if (fade_level == 100) {
		//alert("fade_level is 100");
		setTimeout("fadeOut('" +eID+ "')", FADE_PAUSE);
		return;
	}
	
	fade_level += FADE_STEP;
	
	setOpacity(eID, fade_level);
	setTimeout("fadeIn('" +eID+ "')", FADE_SPEED);

}

function fadeOut(eID) {
	
	if (fade_level == 0) {

		hide(eID);
		
		fade_level = 0; //reset the opacity level

		//update the array index
		fade_ar_index +=2;
		if (fade_ar_index >= FADE_AR_LENGTH)
			fade_ar_index = 0;
		
		//call fadeIn with the new element referenced from the new array index
		fadeIn('fade_' +fade_ar_index);

		return;
	}
	
	fade_level -= FADE_STEP;
	
	setOpacity(eID, fade_level);
	setTimeout("fadeOut('" +eID+ "')", FADE_SPEED);
}


function buildFadeTree(container) {
	var fade_element = getElm(container); 
	
	//loop through the array and build the fading text elements
	var fade_inner_html = "";
	var fade_color;
	
	for (i=0; i<fade_ar.length; i++) {
		fade_color = fade_ar[i+1];
		fade_inner_html += "<div class='fade_container' id='fade_" +i+ "' style='display: none; color: " +fade_color+ ";'>" +fade_ar[i]+ "</div>";
		i++
	}

	fade_element.innerHTML = fade_inner_html;
}

//buildFadeTree('fade_top_right');
//fadeIn('fade_' +fade_ar_index);
	//alert(getElm('fade_0').innerHTML);
	//fadeIn('fade_0');