//We wrap all the code in an object so that it doesn't interfere with any other code
var scroller = {
  init:   function() {

    // collect the variables
    scroller.docH = document.getElementById("content").offsetHeight + 20;
    scroller.contH = document.getElementById("container").offsetHeight;
    scroller.scrollAreaH = document.getElementById("scrollArea").offsetHeight;
	
	// alert("scroller.docH = " + scroller.docH + "\nscroller.contH = " + scroller.contH + "\nscroller.scrollAreaH = " + scroller.scrollAreaH);
	
	// scroller ausblenden, wenn nicht benötigt
	if ( ( scroller.docH - 20 ) <= scroller.contH) {
		document.getElementById("scrollBox").style.visibility = "hidden";
		document.getElementById("content").style.top = "0px";
	} else {
		document.getElementById("scrollBox").style.visibility = "visible";
	}

    // calculate height of scroller and resize the scroller div
    // (however, we make sure that it isn't to small for long pages)
    scroller.scrollH = (scroller.contH * scroller.scrollAreaH) / scroller.docH;
    
	// if(scroller.scrollH < 15) scroller.scrollH = 15;
    document.getElementById("scroller").style.height = Math.round(scroller.scrollH) + "px";

    // what is the effective scroll distance once the scoller's height has been taken into account
    scroller.scrollDist = Math.round(scroller.scrollAreaH-scroller.scrollH);

    // make the scroller div draggable
    Drag.init(document.getElementById("scroller"),null,0,0,-1,scroller.scrollDist);

    // add ondrag function
    document.getElementById("scroller").onDrag = function (x,y) {
      var scrollY = parseInt(document.getElementById("scroller").style.top);
      var docY = 0 - (scrollY * (scroller.docH - scroller.contH) / scroller.scrollDist);
      document.getElementById("content").style.top = docY + "px";
    }
	
	document.getElementById("scroller").onmouseover = function () {
		document.getElementById("scroller").className = "dragElement-active";
	}
	
	document.getElementById("scroller").onmouseout = function () {
		document.getElementById("scroller").className = "dragElement";
	}

	document.getElementById("scrollbtn_up").onmousedown = function () {
		var yPos = document.getElementById("scroller").style.top;
		yPos = yPos.replace(/px/, '');
		var newYPos = yPos - 20;
		if( newYPos < 0 ) newYPos = 0;
		document.getElementById("scroller").style.top = newYPos + "px";
      	var scrollY = parseInt(document.getElementById("scroller").style.top);
      	var docY = 0 - (scrollY * (scroller.docH - scroller.contH) / scroller.scrollDist);
      	document.getElementById("content").style.top = docY + "px";
	}
	
	document.getElementById("scrollbtn_up").onmouseover = function () {
		document.getElementById("scrollbtn_up").className = "scrollUp_btn-active";
	}
	
	document.getElementById("scrollbtn_up").onmouseout = function () {
		document.getElementById("scrollbtn_up").className = "scrollUp_btn";
	}

	document.getElementById("scrollbtn_dn").onmousedown = function () {
		var yPos = document.getElementById("scroller").style.top;
		yPos = yPos.replace(/px/, '');
		var newYPos = yPos - 0 + 20;
		if( newYPos > scroller.scrollDist) newYPos = scroller.scrollDist;
		document.getElementById("scroller").style.top = newYPos + "px";
      	var scrollY = parseInt(document.getElementById("scroller").style.top);
      	var docY = 0 - (scrollY * (scroller.docH - scroller.contH) / scroller.scrollDist);
      	document.getElementById("content").style.top = docY + "px";
	}
	
	document.getElementById("scrollbtn_dn").onmouseover = function () {
		document.getElementById("scrollbtn_dn").className = "scrollDn_btn-active";
	}
	
	document.getElementById("scrollbtn_dn").onmouseout = function () {
		document.getElementById("scrollbtn_dn").className = "scrollDn_btn";
	}

  }
}