//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_scroller").offsetHeight;
    scroller.contH = document.getElementById("container_scroller").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;
	//La cuenta seria: Height del Scroller multiplicado por el Height del Contenedor dividido el height del texto. 
	//Debido a que el height final del texto no siempre es fijo, le puse que si es menor que 400 el restultado de la cuenta tome 
	//el height que yo necesito fijo. Es decir, 25.
    if(scroller.scrollH < 200) {
    	scroller.scrollH = 25;
    	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_scroller").style.top = docY + "px";
	    }
    }else{
    	document.getElementById("scrollArea").style.display="none";
    }
   
  }
}

onload = scroller.init;