//configure the below five variables to change the style of the bannerFader
var bannerImages = new Array();
bannerImages[0] = 'banner_mid_0.jpg|Photo of people stretching';
bannerImages[1] = 'banner_mid_1.jpg|Photo of people biking and walking on the street';
bannerImages[2] = 'banner_mid_2.jpg|Photo of police directing traffic';
bannerImages[3] = 'banner_mid_3.jpg|Photo of people biking and walking on the street';
bannerImages[4] = 'banner_mid_4.jpg|Photo of people biking and walking on the street';


var bannerFaderdelay='5000' //delay between msg scrolls. 3000=3 seconds.
var bannerFaderwidth='769'
var bannerFaderheight='269'
var bannerFaderbgcolor='#FFFFFF'
var bannerFaderbackground=''
var bannerRunning = 0;
var bannerStopped = 0;
var bannerStopCompleted = 0;
var bannerScrollForward = 1;
var bannerTopLayer;
var bannerBottomLayer;
var bannerBlendDone=true;
var bannerIndex=0;

function bannerFade(){
	if (bannerStopped == 1){
		bannerSwitchButton(1);
		return;
	}
	if (!bannerBlendDone){
		setTimeout("bannerFade()",1)
	}else{
		setTimeout("bannerFade()",bannerFaderdelay);
		if (bannerIndex==bannerImages.length-1){
			bannerIndex=0;
		}else{
			bannerIndex++;
		}
		bannerBlendImage(bannerIndex);
	}
}

function bannerStartscroll(){
	// make sure function doesn't fun twice
	if (bannerRunning != 0){
		return;
	}
	bannerIndex=bannerImages.length-1;
	bannerRunning++
	bannerFade();
	for(var j=0;j<bannerImages.length;j++){
		MM_preloadImages("../../includes/site_images/branding/"+bannerImages[bannerIndex].split("|")[0]);
	}
}

function bannerStopScroll() {
	bannerStopped = 1;
	bannerSwitchButton(2);
}

function bannerRestartScroll() {
	if (bannerStopped == 0 ) {return;}
	bannerStopped = 0;
	bannerFade();

	bannerSwitchButton(0);
	bannerScrollForward = 1;
	bannerStopCompleted = 0;
}

function bannerNextScroll() {
	if (bannerStopped == 0) {	bannerStopScroll(); }
	if (bannerStopCompleted == 0) {
		setTimeout("bannerNextScroll()",50)
		return;
	}
	if(bannerIndex==bannerImages.length-1){
		bannerIndex=0;
	}else{
		bannerIndex++;
	}
	bannerBlendImage(bannerIndex);
}

function bannerBackScroll() {
	if (bannerStopped == 0) {	bannerStopScroll(); }
	if (bannerStopCompleted == 0) {
		setTimeout("bannerBackScroll()",50)
		return;
	}
	if (bannerIndex==0) {
		bannerIndex=bannerImages.length-1;
	} else {
		bannerIndex--;
	}
	bannerBlendImage(bannerIndex);
}

function bannerScrollIconSwap(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 bannerBlendImage(theIndex) {
	bannerBlendDone=false;
    var speed = 6;
    var timer = 1;
    
    //set the current image as background
    document.getElementById('bannerBlenddiv').style.backgroundImage = "url(" + document.getElementById('bannerBlendImage').src + ")";
    
    //make image transparent
    bannerChangeOpac(0, 'bannerBlendImage');
    
    //make new image
    document.getElementById('bannerBlendImage').src = "../../includes/site_images/branding/"+bannerImages[theIndex].split("|")[0];
    document.getElementById('bannerBlendImage').alt = bannerImages[theIndex].split("|")[1];
    for(var t = 0; t <= 100; t++) {
        setTimeout("bannerChangeOpac(" + t + ",'bannerBlendImage')",(timer * speed));
        timer++;
        if(t==100){
	        bannerBlendDone=true;
        }
    }
}
function bannerChangeOpac(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(../../includes/site_images/branding/'+bannerImages[0].split("|")[0]+'); background-repeat: no-repeat; width: '+bannerFaderwidth+'px; height: '+bannerFaderheight+'px;" id="bannerBlenddiv">');
document.write('<img src="../../includes/site_images/branding/'+bannerImages[0].split("|")[0]+'" alt="'+bannerImages[0].split("|")[1]+'" width="'+bannerFaderwidth+'" height="'+bannerFaderheight+'" border="0" id="bannerBlendImage" style="filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;">')
document.write('</div>');