//configure the below five variables to change the style of the scroller
var scrollerdelay='8000' //delay between msg scrolls. 3000=3 seconds.
var scrollerbackground=''
var running = 0;
var stopped = 0;
var stopCompleted = 0;
var scrollForward = 1;
var topLayer;
var bottomLayer;
var blendDone=true;
var i=0;

function jump(storyNumber){
	i=storyNumber-1;
	blendimage(i);
}

function fade(){
	if (!blendDone){
		setTimeout("fade()",1)
	}else{
		setTimeout("fade()",scrollerdelay);
		if (i==home_features.length-1){
			i=0;
		}else{
			i++;
		}
		blendimage(i);
	}
}


function init(){
	// make sure function doesn't run twice
	if (running != 0 || document.getElementById("slideshow_text").cloneNode == null){
		return;
	}
	//Determine the largest feature text blurb
	var test = document.getElementById("slideshow_text").cloneNode(true);
	test.style.visibility = 'hidden'; test.style.top = '0px'; test.style.left = '0px'; test.style.position = 'absolute'; test.id='slideshow_test';
	test.style.width = '539px';
	document.getElementsByTagName('body')[0].appendChild(test);
	test = document.getElementById('slideshow_test');
	var max_height = 0, max_test= 0, longestItem=-1;
	for(var i = 0; i<home_features.length;i++){		
		//Set up invisible but flow-included DOM node to be temporarily implanted in order to determine height, capture height, and remove.
		//Fix tables below: elements in primary feature do not respect box model, so apply more margin-top to secondary features.
		test.innerHTML = home_features[i].split('|')[4];
		document.getElementsByTagName('body')[0].appendChild(test);
		max_test = test.offsetHeight;
		test = document.getElementsByTagName('body')[0].removeChild(test);
		max_height = Math.max(max_height,max_test);
		if(max_test > max_height)
			longestItem = i;
	}
	var h = max_height;
	document.getElementById("slideshow_text").style.height = h;
	//This hacks teamsite's layout - will break if the page layout changes significantly either if the page is restructured, or Teamsite generates code differently. The 2 secondary features are stored in different table hierarchies, which only have IDs as close to the needed tables to move as used below. The tables are found as they exist currently in the HTML DOM hierarchy when extracted among all tables, as they have no other identifying information when generated by Teamsite. The right col. is 1 pix lower than the left col.
	document.getElementById('main_content').getElementsByTagName('table')[6].style.cssText = "margin-top:"+(h - 99)+"px";
	document.getElementById('col3_content').getElementsByTagName('table')[1].style.cssText = "margin-top:"+(h - 101)+"px";
	//Continue with initialization
	i=home_features.length-1;
	running++;
	jump(1);
	setTimeout("fade()",scrollerdelay);
	document.getElementById("slideshow_text").innerHTML=home_features[0].split("|")[4];
	MM_preloadImages("../../images/features/home/button1_1.gif","../../images/features/home/button2_1.gif","../../images/features/home/button3_1.gif","../../images/features/home/button4_1.gif");
	for(var j=0;j<home_features.length;j++){
		MM_preloadImages("../../images/features/"+home_features[i].split("|")[0]);
	}
	//This is being called more than once.
	if(document.removeEventListener)
		document.removeEventListener('load',init,true);
}

function blendimage(theIndex) {
	blendDone=false;
    var speed = 6;
    var timer = 0;
    
    //set the current image as background
    document.getElementById('blenddiv').style.backgroundImage = "url(" + document.getElementById('blendimage').src + ")";
    
    //make image transparent
    changeOpac(0, 'blendimage');
    
    //make new image
    document.getElementById('blendimage').src = "../../images/features/home/"+home_features[theIndex].split("|")[0];
    document.getElementById('blendimage').alt = home_features[theIndex].split("|")[2];
	document.getElementById("itemTitle").src = "../../images/features/home/"+home_features[theIndex].split("|")[1];
	document.getElementById("itemTitle").alt=home_features[theIndex].split("|")[2]
	document.getElementById("itemLink").href=home_features[theIndex].split("|")[3]
	document.getElementById("slideshow_text").innerHTML=home_features[theIndex].split("|")[4];
	for(var i=0;i<home_features.length;i++){
		document.getElementById("featureButton_"+(i+1)).src='../../images/features/home/button'+(i+1)+'_0.gif';
	}
	document.getElementById("featureButton_"+(theIndex+1)).src='../../images/features/home/button'+(theIndex+1)+'_1.gif';
    //fade in image
    for(var t = 0; t <= 100; t++) {
        setTimeout("changeOpac(" + t + ",'blendimage')",(timer * speed));
        timer++;
        if(t==100){
	        blendDone=true;
        }
    }
}
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
	opacity = (opacity == 100)?99.999:opacity;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}
document.write('<div style="background-image: url(../../images/features/home/'+home_features[0].split("|")[0]+'); background-repeat: no-repeat; width: 559px; height: 198px;" id="blenddiv">');
document.write('<img src="../../images/features/home/'+home_features[0].split("|")[0]+'" alt="'+home_features[0].split("|")[2]+'" width="559" height="198" border="0" id="blendimage" style="filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;">')
document.write('</div>');