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

    //collect the variables
    wrapper.docH = document.getElementById("content").offsetHeight;
    wrapper.contH = document.getElementById("container").offsetHeight;
    wrapper.scrollAreaH = document.getElementById("scrollArea").offsetHeight;
      
    //calculate height of wrapper and resize the wrapper div
    //(however, we make sure that it isn't to small for long pages)
    wrapper.scrollH = (wrapper.contH * wrapper.scrollAreaH) / wrapper.docH;
    //if(wrapper.scrollH < 15) wrapper.scrollH = 15;
    document.getElementById("wrapper").style.height = Math.round(wrapper.scrollH) + "px";
    
    //what is the effective scroll distance once the scoller's height has been taken into account
    wrapper.scrollDist = Math.round(wrapper.scrollAreaH-wrapper.scrollH);
    
    //make the wrapper div draggable
    Drag.init(document.getElementById("wrapper"),null,0,0,-1,wrapper.scrollDist);
    
    //add ondrag function
    document.getElementById("wrapper").onDrag = function (x,y) {
      var scrollY = parseInt(document.getElementById("wrapper").style.top);
      var docY = 0 - (scrollY * (wrapper.docH - wrapper.contH) / wrapper.scrollDist);
      document.getElementById("content").style.top = docY + "px";
    }
  }
}

onload = wrapper.init;