//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;
    scroller.contH = document.getElementById("container").offsetHeight;
    scroller.scrollAreaH = document.getElementById("scrollArea").offsetHeight;
      
    //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";
    }
  }
}
onload = scroller.init;

/** This is high-level function; REPLACE IT WITH YOUR CODE.
 * It must react to delta being more/less than zero.
 */
function handle(delta) {
    var freeSpace = scroller.scrollAreaH - parseInt(document.getElementById("scroller").style.height);
	if(freeSpace>0)
	{
	    var scrollY = parseInt(document.getElementById("scroller").style.top) + (delta * -10);
	    if (scrollY<0)
	        scrollY = 0;
	    else if (scrollY>freeSpace)
	        scrollY = freeSpace;
        var docY = 0 - (scrollY * (scroller.docH - scroller.contH) / scroller.scrollDist);
        document.getElementById("content").style.top = docY + "px";
        document.getElementById("scroller").style.top = scrollY + "px";
    }
}

function wheel(event){
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;