//This script will create and control the necessary tags to scroll the content.

var toptenmarquee = document.createElement("marquee");
document.getElementById("TopTenContainer").insertBefore(toptenmarquee, document.getElementById("TopTenDiv"));
var contentnode = document.getElementById("TopTenDiv");
toptenmarquee.appendChild(contentnode);
toptenmarquee.direction = "up";
toptenmarquee.scrollAmount = 1;
toptenmarquee.onmouseover = stopScrolling;
toptenmarquee.onmouseout = startScrolling;

//document.getElementById("TopTenContainer").removeChild(contentnode);
toptenmarquee.start();

topoffset = 30;
cliptop = 0;
clipbottom = 330;

document.getElementById("ScrollUp").onmouseover = beginScrollUp;
document.getElementById("ScrollDown").onmouseover = beginScrollDown;
document.getElementById("ScrollUp").onmouseout = endScrollUp;
document.getElementById("ScrollDown").onmouseout = endScrollDown;

function stopScrolling() {
	this.stop();
}

function startScrolling() {
	this.start();
}

function beginScrollUp() {
	scrollupinterval = setInterval("scrollUp()", 20);
}

function beginScrollDown() {
	scrolldowninterval = setInterval("scrollDown()", 20);
}

function endScrollUp() {
	clearInterval(scrollupinterval);
}

function endScrollDown() {
	clearInterval(scrolldowninterval);
}

function scrollUp() {
	var cliplayer = document.getElementById("MainContentDiv");
	
	if (clipbottom > 1) {
		cliptop -= 1;
	
		cliplayer.style.clip = "rect(" + cliptop + "px 330px " + (clipbottom + cliptop) + "px 0px)";
		cliplayer.style.top = (topoffset - cliptop) + "px";
		cliplayer.style.height = (clipbottom + cliptop) + "px";
	}
}

function scrollDown() {
	var cliplayer = document.getElementById("MainContentDiv");
	cliptop += 1;
	
	cliplayer.style.clip = "rect(" + cliptop + "px 330px " + (clipbottom + cliptop) + "px 0px)";
	cliplayer.style.top = (topoffset - cliptop) + "px";
	cliplayer.style.height = (clipbottom + cliptop) + "px";
}