var layerName = "stage";
var clipTop = 0;
var clipWidth = 546;
var clipBottom = 364;
var clipLeft = 0;
var topPosition = 0;
var layerHeight = 0;
var step = 2;
var timeInterval = 10;
var scrollTime, works4AnyBrowser;

function initialize() {
	works4AnyBrowser = (document.getElementById || document.all || document.layers);
	if (!works4AnyBrowser) return;
	var scrollingLayer = new createLayerObject(layerName);
	if (document.layers) {
		layerHeight = scrollingLayer.style.clip.bottom;
		layerHeight += 20;
		scrollLayer.style.clip.top = clipTop;
		scrollingLayer.style.clip.left = clipLeft;
		scrollingLayer.style.clip.right = clipWidth;
		scrollingLayer.style.clip.bottom = clipBottom;
	} else if (document.getElementById || document.all) {
		layerHeight = scrollingLayer.layerObject.offsetHeight;
		scrollingLayer.style.clip = "rect(" + clipTop + "px, " + clipWidth + "px, " + clipBottom + "px, 0px)";
	}
	if (layerHeight > clipBottom) {
		var layerId = "scroller";
		var scrollerLayer = new createLayerObject(layerId);
		scrollerLayer.style.visibility = "visible";
	}
	//alert("visible height: " + clipBottom + "\nlayer height: " + layerHeight + "\nvisibility: " + scrollerLayer.style.visibility);
}

function createLayerObject(name) {
  if (document.getElementById) {
    this.layerObject = document.getElementById(name);
	this.style = document.getElementById(name).style;
  } else if (document.all) {
    this.layerObject = document.all[name];
	this.style = document.all[name].style;
  } else if (document.layers) {
   	this.layerObject = document.layers[name];
   	this.style = document.layers[name];
  }
}

function scrollUp() {
	if (!works4AnyBrowser) return;
	currLayer = new createLayerObject(layerName);
	if (!currLayer) return;
	currDirection = step;
	realScroll();
}

function scrollDown() {
	if (!works4AnyBrowser) return;
	currLayer = new createLayerObject(layerName);
	if (!currLayer) return;
	currDirection = step * -1;
	realScroll();
}

function stopScroll() {
	if (scrollTime) clearTimeout(scrollTime);
}

function realScroll() {
	if (!works4AnyBrowser) return;
	clipTop += currDirection;
	clipBottom += currDirection;
	topPosition -= currDirection;
	if (clipTop < 0 || clipBottom > layerHeight) {
		clipTop -= currDirection;
		clipBottom -= currDirection;
		topPosition += currDirection;
		return;
	}
	if (document.getElementById || document.all) {
		clipString = "rect(" + clipTop + "px, " + clipWidth + "px, " + clipBottom + "px, 0px)";
		currLayer.style.clip = clipString;
		currLayer.style.top = topPosition + "px";
	} else if (document.layers) {
		currLayer.style.clip.top = clipTop;
		currLayer.style.clip.bottom = clipBottom;
		currLayer.style.top = topPosition;
	}
	scrollTime = setTimeout('realScroll()',timeInterval);
}
function setupScrollButtons() {
    document.open();
	document.write("<div id=\"arrows\">");
    document.write("<div id=\"arrowUp\">");
    document.write("<a href=\"#\" onMouseOver=\"scrollDown()\"");
	document.write(" onMouseOut=\"stopScroll()\">");
	document.write("<img src=\"assets/images/arrow_up.gif\">");
	document.write("</a></div>");
    document.write("<div id=\"arrowDown\">");
	document.write("<a href=\"#\" onMouseOver=\"scrollUp()\"");
	document.write(" onMouseOut=\"stopScroll()\">");
	document.write("<img src=\"assets/images/arrow_down.gif\">");
	document.write("</a></div></div>");
	document.close();
}

//setupScrollButtons();