var scroller = {
  init:   function() {

    //global 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
    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";
    
    scroller.scrollDist = Math.round(scroller.scrollAreaH-scroller.scrollH);
  
    if (scroller.scrollDist>0)
        {
            //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";
            }
            
            var scrollAmount=30;
            
            document.getElementById("content").onmousewheel = function (x,y) {
                var scrollY = parseInt(document.getElementById("scroller").style.top);
                if (event.wheelDelta >= 120)
                    {
                        if (scrollY>0)
                        {
                            var docY = parseInt(document.getElementById("content").style.top);
                            docY=docY+scrollAmount;
                            document.getElementById("content").style.top = docY + "px";
                            scrollY = (0 - docY) * (scroller.scrollDist / (scroller.docH - scroller.contH));
                            if (scrollY<0) scrollY=0;
                            document.getElementById("scroller").style.top=scrollY + "px";
                        }
                    }
                else if (event.wheelDelta <= -120)
                    {
                        if (scrollY<scroller.scrollDist)
                        {
                        
                            var docY = parseInt(document.getElementById("content").style.top);
                            if (docY.toString()=="NaN") docY=0;
                            docY=docY-scrollAmount;
                            document.getElementById("content").style.top = docY + "px";
                            scrollY = (0 - docY) * (scroller.scrollDist / (scroller.docH - scroller.contH));
                            document.getElementById("scroller").style.top=scrollY + "px";
                        }
                    }  

            }
         }   
     else
        {
        //hide the scrollbar
        document.getElementById("scrollArea").style.display="none";
        } 
  }
}
onload = scroller.init;