//configure the below five variables to change the style of the scroller
var scrollerdelay='4000' //delay between msg scrolls. 3000=3 seconds.
var scrollerwidth='499'
var scrollerheight='331'
var scrollerbgcolor='#9edb25'
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 fade(){
	if (stopped == 1){
		switchButton(1);
		return;
	}
	if (!blendDone){
		setTimeout("fade()",1)
	}else{
		setTimeout("fade()",scrollerdelay);
		if (i==messages.length-1){
			i=0;
		}else{
			i++;
		}
		blendimage(i);
	}
}

function startscroll(){
	// make sure function doesn't fun twice
	if (running != 0){
		return;
	}
	i=messages.length-1;
	running++
	fade();
	switchButton(0);
	document.getElementById("itemStatus").innerHTML = '<span id="itemStatus" class="scroll_status">1 of ' + messages.length + '</span>';
	document.getElementById("slideshow_text").innerHTML=messages[0].split("|")[1];
	MM_preloadImages("../../includes/site_images/experience/wait.gif","../../includes/site_images/experience/next_1.gif","../../includes/site_images/experience/back_1.gif","../../includes/site_images/experience/play_0.gif","../../includes/site_images/experience/play_1.gif","../../includes/site_images/experience/stop_1.gif");
	for(var j=0;j<messages.length;j++){
		MM_preloadImages("../../images/features/"+messages[i].split("|")[0]);
	}
}

function stopScroll() {
	stopped = 1;
	switchButton(2);
}

function restartScroll() {
	if (stopped == 0 ) {return;}
	stopped = 0;
	fade();

	switchButton(0);
	scrollForward = 1;
	stopCompleted = 0;
}

function switchButton(what) {
	if (what==0) {
		document.getElementById("startstop").innerHTML = '<a href="javascript:stopScroll();"><img src="../../includes/site_images/experience/stop_0.gif" name="stop" border="0" align="absmiddle" width="23" height="21" alt="Pause Scroll" onMouseOver="scrollIconSwap(\'stop\',this,0);" onMouseOut="scrollIconSwap(\'stop\',this,1);"></a>';
		document.getElementById("nextbutton").innerHTML = '<a href="javascript:nextScroll();"><img src="../../includes/site_images/experience/next_0.gif" name="next" border="0" align="absmiddle" width="23" height="21"  onMouseOver="scrollIconSwap(\'next\',this,0);" onMouseOut="scrollIconSwap(\'next\',this,1);"></a>';
		document.getElementById("backbutton").innerHTML = '<a href="javascript:backScroll();"><img src="../../includes/site_images/experience/back_0.gif" name="back" border="0" align="absmiddle" width="23" height="21"  onMouseOver="scrollIconSwap(\'back\',this,0);" onMouseOut="scrollIconSwap(\'back\',this,1);"></a>';
	} else if (what==1) {
		if (!blendDone) {
			setTimeout("switchButton(1)",50)
			return;
		}
		document.getElementById("startstop").innerHTML = '<a href="javascript:restartScroll();"><img src="../../includes/site_images/experience/play_0.gif" name="play" border="0" align="absmiddle" width="23" height="21" alt="Resume Scroll" onMouseOver="scrollIconSwap(\'play\',this,0);" onMouseOut="scrollIconSwap(\'play\',this,1);"></a>';
		document.getElementById("nextbutton").innerHTML = '<a href="javascript:nextScroll();"><img src="../../includes/site_images/experience/next_0.gif" name="next" border="0" align="absmiddle" width="23" height="21"  onMouseOver="scrollIconSwap(\'next\',this,0);" onMouseOut="scrollIconSwap(\'next\',this,1);"></a>';
		document.getElementById("backbutton").innerHTML = '<a href="javascript:backScroll();"><img src="../../includes/site_images/experience/back_0.gif" name="back" border="0" align="absmiddle" width="23" height="21"  onMouseOver="scrollIconSwap(\'back\',this,0);" onMouseOut="scrollIconSwap(\'back\',this,1);"></a>';
		stopCompleted = 1;
	} else if (what==2) {
		document.getElementById("startstop").innerHTML = '<img src="../../includes/site_images/experience/wait.gif" border="0" align="absmiddle" width="23" height="21" alt="Wait">';
		document.getElementById("nextbutton").innerHTML = '<img src="../../includes/site_images/experience/next_0.gif" name="next" border="0" align="absmiddle" width="23" height="21" >';
		document.getElementById("backbutton").innerHTML = '<img src="../../includes/site_images/experience/back_0.gif" name="back" border="0" align="absmiddle" width="23" height="21" >';
	}
}

function nextScroll() {
	if (stopped == 0) {	stopScroll(); }
	if (stopCompleted == 0) {
		setTimeout("nextScroll()",50)
		return;
	}
	if(i==messages.length-1){
		i=0;
	}else{
		i++;
	}
	blendimage(i);
}

function backScroll() {
	if (stopped == 0) {	stopScroll(); }
	if (stopCompleted == 0) {
		setTimeout("backScroll()",50)
		return;
	}
	if (i==0) {
		i=messages.length-1;
	} else {
		i--;
	}
	blendimage(i);
}

function scrollIconSwap(iconImg, what, which) {
	var imgPath = "../../includes/site_images/experience/";
	if (which == 0) {
		what.src = imgPath + iconImg + "_1.gif";
	} else {
		what.src = imgPath + iconImg + "_0.gif";
	}
}

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/"+messages[theIndex].split("|")[0];
    document.getElementById('blendimage').alt = messages[theIndex].split("|")[1];
	document.getElementById("itemStatus").innerHTML = '<span id="itemStatus" class="scroll_status">' + (theIndex+1) + ' of ' + messages.length + '</span>';
	document.getElementById("slideshow_text").innerHTML=messages[theIndex].split("|")[1];
    //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/'+messages[0].split("|")[0]+'); background-repeat: no-repeat; width: 499px; height: 331px;" id="blenddiv">');
document.write('<img src="../../images/features/'+messages[0].split("|")[0]+'" alt="'+messages[0].split("|")[1]+'" width="499" height="331" border="0" id="blendimage" style="filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;">')
document.write('</div>');