var layerName = "stageUc";
var clipTop = 0;
var clipWidth = 523;
var clipBottom = 338;
var clipLeft = 0;
var topPosition = 0;
var layerHeight = 0;
var slowStep = 2;
var quickStep = 10;
var timeInterval = 10;
var scrollTime, works4AnyBrowser, autoRepeat;

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;
		scrollingLayer.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);
		var scrollerContent = "<div id=\"arrowUp\">";
        scrollerContent += "<a href=\"#\" ";
		scrollerContent += "onmouseover=\"scrollDown(" + slowStep + ")\" ";
	    scrollerContent += "onmouseout=\"stopScroll()\" ";
		scrollerContent += "title=\"Benutzen Sie die Pfeiltasten oder das Mausrad, um schneller zu scrollen\">";
	    scrollerContent += "<img src=\"http://www.silex-silikon.de/assets/images/arrow_up.gif\">";
	    scrollerContent += "</a></div>";
        scrollerContent += "<div id=\"arrowDown\">";
	    scrollerContent += "<a href=\"#\" ";
		scrollerContent += "onmouseover=\"scrollUp(" + slowStep + ")\" ";
	    scrollerContent += "onmouseout=\"stopScroll()\" ";
		scrollerContent += "title=\"Benutzen Sie die Pfeiltasten oder das Mausrad, um schneller zu scrollen\">";
	    scrollerContent += "<img src=\"http://www.silex-silikon.de/assets/images/arrow_down.gif\">";
	    scrollerContent += "</a></div>";
		document.getElementById("scroller").innerHTML = scrollerContent;
		window.onkeydown = document.onkeydown = scrollByKeys;
        window.onkeyup = document.onkeyup = stopScroll;
		if (window.addEventListener) window.addEventListener('DOMMouseScroll', scrollByWheel, false);
        window.onmousewheel = document.onmousewheel = scrollByWheel;
		scrollerLayer.style.visibility = "visible";
	}
}

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(step) {
	autoRepeat = true;
	currDirection = step;
	scrollLayer();
}

function scrollDown(step) {
	autoRepeat = true;
	currDirection = step * -1;
	scrollLayer();
}

function stopScroll() {
	if (scrollTime) {
		autoRepeat = false;
		clearTimeout(scrollTime);
	}
}

function scrollLayer() {
	currLayer = new createLayerObject(layerName);
	if (!currLayer) 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;
	}
	if (autoRepeat) scrollTime = setTimeout('scrollLayer()',timeInterval);
}

function scrollByKeys(event) {
	if (!event) event = window.event;
	var currKey = (event.charCode) ? event.charCode : ((event.keyCode) ? event.keyCode : ((event.which) ? event.which : 0));
	if (currKey == 40) scrollUp(quickStep);
    if (currKey == 38) scrollDown(quickStep); 
}

function scrollByWheel(event) {
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta * quickStep / 100 * -1;
    } else if (event.detail) { 
        delta = event.detail * quickStep / 2;
    }
	autoRepeat = false;
	currDirection = delta;
	scrollLayer();
	if (event.preventDefault) event.preventDefault();
	event.returnValue = false;
}