this.onload = init;
var tickerIndex = 0; // indicates the first bit of info to show
var maxTicker = 3; // indicates the total number of UL's +1

var startInterval = 3000; // number of milliseconds to wait before clearing the first UL
var maskDirection = 0; // direction of the mask element. 0: left; 1: right;
var maskIncrement = 5; // number of pixels to move the mask element at a time

function init() {
	// hide H2's and UL's that arent the first 
	for(i=0;i<maxTicker;i++) {
		document.getElementById("data" + i).style.display = "none";
		document.getElementById("data" + i + "_ul").style.display = "none";
	}
	// create the div element used for the mask;
	msk = document.getElementById("mContainer").appendChild(document.createElement("div"));
	msk.id = "mask";

	// display the first UL and H2
	document.getElementById("data" + tickerIndex).style.display = "block";
	document.getElementById("data" + tickerIndex + "_ul").style.display = "block";
	t = document.getElementById("data" + tickerIndex).offsetTop;
	// hack for Opera which calculates offsetTop from the BODY and not the parent element. the 5 is the margin height of the body.
	if(navigator.userAgent.indexOf("Opera")>-1)t = (document.getElementById("data" + tickerIndex).offsetTop - document.getElementById("data" + tickerIndex).parentNode.offsetTop)+5;
	msk.style.top = (t+1) + "px";
	l = document.getElementById("data" + tickerIndex).offsetWidth;
	l-=16;
	msk.style.left = l + "px";
	// call the beginTicker function in 2 seconds.
	zInterval = setTimeout("beginTicker()",2000);

}

function beginTicker() {
	clearInterval(zInterval);
	maskDirection = 0;
	// begin the mask animation interval
	zInterval = setInterval("animateSlide()",20);
}

function animateSlide() {
	// get the current width and left of the mask
	curWidth = document.getElementById("mask").offsetWidth;
	curLeft = document.getElementById("mask").offsetLeft;

	// increment/decrement those values based on maskDirection
	// define a border in #mask to see whats happening here if the code isnt clear
	if(!maskDirection) {
		curWidth+=maskIncrement; curLeft-=maskIncrement;
	} else {
		curWidth-=maskIncrement; curLeft+=maskIncrement;
	}

	document.getElementById("mask").style.width = curWidth+ "px";
	document.getElementById("mask").style.left = curLeft + "px";
	t = document.getElementById("data" + tickerIndex).offsetTop;
	// hack for Opera which calculates offsetTop from the BODY and not the parent element. the 5 is the margin height of the body.
	if(navigator.userAgent.indexOf("Opera")>-1)t = (document.getElementById("data" + tickerIndex).offsetTop - document.getElementById("data" + tickerIndex).parentNode.offsetTop)+5;
	document.getElementById("mask").style.top = (t+1) + "px";
	if(curLeft<=0)  {
		// the mask is at the full left of the ticker. hide the current H2 and UL
		document.getElementById("data" + tickerIndex).style.display = "none";
		document.getElementById("data" + tickerIndex + "_ul").style.display = "none";
		// increment tickerIndex. if its higher than maxTicker, reset it to zero.
		tickerIndex++;
		if(tickerIndex>=maxTicker)tickerIndex = 0;
		// show the next set of H2 and UL's
		document.getElementById("data" + tickerIndex).style.display = "block";
		document.getElementById("data" + tickerIndex + "_ul").style.display = "block";

		// set maskDirection to 1 so it will animate to the right
		maskDirection = 1;
	} else if (curWidth<=15) {
		// the mask element is all the way to the right of the ticker.
		// clear the animation interval and start over again.
		clearInterval(zInterval);
		zInterval = setTimeout("beginTicker()",2000);
	}
}

function degrade() {
	clearInterval(zInterval);
	for(i=0;i<maxTicker;i++) {
		document.getElementById("data" + i).style.display = "block";
		document.getElementById("data" + i + "_ul").style.display = "block";
	}
	document.getElementsByTagName("link")[0].href = "foo.css"; // bogus style sheet
}