//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.docW = document.getElementById("thumbContent").offsetWidth;
    scroller.contW = document.getElementById("thumbContainer").offsetWidth;
    scroller.scrollAreaW = document.getElementById("scrollArea").offsetWidth;
   
    //calculate width of scroller and resize the scroller div
    //(however, we make sure that it isn't to small for long pages)
    scroller.scrollW = 30;
    //scroller.scrollW = (scroller.contW * scroller.scrollAreaW) / scroller.docW;
    //if(scroller.scrollW < 15) scroller.scrollW = 15;
    document.getElementById("scroller").style.width = Math.round(scroller.scrollW) + "px";
    //document.getElementById("scroller").style.width = 25+"px";
    //what is the effective scroll distance once the scoller's width has been taken into account
    scroller.scrollDist = Math.round(scroller.scrollAreaW-scroller.scrollW);
    
    //make the scroller div draggable
    //Drag.init(document.getElementById("scroller"),null,0,0,-1,scroller.scrollDist);
    //function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
    
    Drag.init(document.getElementById("scroller"),null,0,scroller.scrollDist,0,0);
    
    //add ondrag function
    document.getElementById("scroller").onDrag = function (x,y) {
      var scrollX = parseInt(document.getElementById("scroller").style.left);
      var docX = 0 - (scrollX * (scroller.docW - scroller.contW) / scroller.scrollDist);
      document.getElementById("thumbContent").style.left = docX + "px";
    }
  }
}

window.onload = scroller.init;