//initalize variables that will be needed...var secs;
var timerID = null;
var timerRunning = false;
var delay = 1000;
var secs;
var currentImage = 0;
var imageCount = 11;
var bannerImages = new Array(); 

// set the event handler
window.onload = initDocument;

// the value for the current image
var currentBanner = "";

// this is what is done when the document is fully loaded...
function initDocument()
{		
	bannerImages[0] = document.getElementById('banner[0]');
	bannerImages[1] = document.getElementById('banner[1]');
	bannerImages[2] = document.getElementById('banner[2]');
	bannerImages[3] = document.getElementById('banner[3]');
	bannerImages[4] = document.getElementById('banner[4]');
	bannerImages[5] = document.getElementById('banner[5]');
	bannerImages[6] = document.getElementById('banner[6]');
	bannerImages[7] = document.getElementById('banner[7]');
	bannerImages[8] = document.getElementById('banner[8]');
	bannerImages[9] = document.getElementById('banner[9]');
	bannerImages[10] = document.getElementById('banner[10]');
	InitializeTimer();
	
	
}


		
	
	
	function InitializeTimer()
	{
		// Set the length of the timer, in seconds
		secs = 4;
		StopTheClock();
		StartTheTimer();
	}
	
	function StopTheClock()
	{
		if(timerRunning)
			clearTimeout(timerID)
		timerRunning = false;
	}
	
	function swapImaage()
	{
		//alert('just changed');
		//alert(bannerImages[0].name);
		
		opacity(bannerImages[currentImage].id, 100, 0, 1000);
		currentImage++;
		currentImage = currentImage % imageCount;
		opacity(bannerImages[currentImage].id, 0, 100, 1000);
		
	}
	
	
	function StartTheTimer()
	{
		if (secs==0)
		{
			StopTheClock()
			// Here's where you put something useful that's
			// supposed to happen after the allotted time.
			// For example, you could display a message:
			//alert("This is when I would change the image on the page.")
			
			swapImaage();
			
			InitializeTimer()
		}
		else
		{
			self.status = secs
			secs = secs - 1
			timerRunning = true
			timerID = self.setTimeout("StartTheTimer()", delay)
		}
	}



	
function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for( var i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
} 

function shiftOpacity(id, millisec) {
    //if an element is invisible, make it visible, else make it ivisible
    if(document.getElementById(id).style.opacity == 0) {
        opacity(id, 0, 100, millisec);
    } else {
        opacity(id, 100, 0, millisec);
    }
} 

function currentOpac(id, opacEnd, millisec) {
    //standard opacity is 100
    var currentOpac = 100;
    
    //if the element has an opacity set, get it
    if(document.getElementById(id).style.opacity < 100) {
        currentOpac = document.getElementById(id).style.opacity * 100;
    }

    //call for the function that changes the opacity
    opacity(id, currentOpac, opacEnd, millisec)
}