//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;
    if(scroller.docH<scroller.contH){
        document.getElementById("scroller").style.background='#ffffff';
        document.getElementById("scroller").style.border='0px';
    }
    //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";
    }
  }
}

var scroller1 = {
  init:   function() {
  if(document.getElementById("content1"))
{

    //collect the variables
    scroller1.docH = document.getElementById("content1").offsetHeight;
    scroller1.contH = document.getElementById("container1").offsetHeight;
    scroller1.scrollAreaH = document.getElementById("scrollArea1").offsetHeight;
    if(scroller1.docH<scroller1.contH){
        document.getElementById("scroller1").style.background='#ffffff';
        document.getElementById("scroller1").style.border='0px';
    }

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

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

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

    //add ondrag function
    document.getElementById("scroller1").onDrag = function (x,y) {
      var scrollY = parseInt(document.getElementById("scroller1").style.top);
      var docY = 0 - (scrollY * (scroller1.docH - scroller1.contH) / scroller1.scrollDist);
      document.getElementById("content1").style.top = docY + "px";
    }
  }
  

}
}