// JavaScript Document
//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("inner").offsetHeight;
	scroller.contH = document.getElementById("outer").offsetHeight;
	scroller.scrollAreaH = document.getElementById("scrollArea").offsetHeight;
	if(scroller.docH <= scroller.contH)
	{
		var myScroll = document.getElementById("scrollArea");
		myScroll.style.visibility = "hidden";
	}
	//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,0,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("inner").style.top = docY + "px";
	}
  }
}
// Scroller #2...
var scroller2 = {
  init:   function() {
	//collect the variables
	scroller2.docH = document.getElementById("inner2").offsetHeight;
	scroller2.contH = document.getElementById("outer2").offsetHeight;
	scroller2.scrollAreaH = document.getElementById("scrollArea2").offsetHeight;
	if(scroller2.docH <= scroller2.contH)
	{
		var myScroll = document.getElementById("scrollArea2");
		myScroll.style.visibility = "hidden";
	}
	//calculate height of scroller and resize the scroller div
	//(however, we make sure that it isn't to small for long pages)
	scroller2.scrollH = (scroller2.contH * scroller2.scrollAreaH) / scroller2.docH;
	//if(scroller2.scrollH < 15) scroller2.scrollH = 15;
    document.getElementById("scroller2").style.height = Math.round(scroller2.scrollH) + "px";
	
	//what is the effective scroll distance once the scoller's height has been taken into account
	scroller2.scrollDist = Math.round(scroller2.scrollAreaH-scroller2.scrollH);
	
	//make the scroller div draggable
	Drag.init(document.getElementById("scroller2"),null,0,0,0,scroller2.scrollDist);
	
	//add ondrag function
	document.getElementById("scroller2").onDrag = function (x,y) {
	var scrollY = parseInt(document.getElementById("scroller2").style.top);
	var docY = 0 - (scrollY * (scroller2.docH - scroller2.contH) / scroller2.scrollDist);
	document.getElementById("inner2").style.top = docY + "px";
	}
  }
}
//Scroller #3
var scroller3 = {
  init:   function() {
	//collect the variables
	scroller3.docH = document.getElementById("inner3").offsetHeight;
	scroller3.contH = document.getElementById("outer3").offsetHeight;
	scroller3.scrollAreaH = document.getElementById("scrollArea3").offsetHeight;
	if(scroller3.docH <= scroller3.contH)
	{
		var myScroll = document.getElementById("scrollArea3");
		myScroll.style.visibility = "hidden";
	}
	//calculate height of scroller and resize the scroller div
	//(however, we make sure that it isn't to small for long pages)
	scroller3.scrollH = (scroller3.contH * scroller3.scrollAreaH) / scroller3.docH;
	//if(scroller3.scrollH < 15) scroller3.scrollH = 15;
    document.getElementById("scroller3").style.height = Math.round(scroller3.scrollH) + "px";
	
	//what is the effective scroll distance once the scoller's height has been taken into account
	scroller3.scrollDist = Math.round(scroller3.scrollAreaH-scroller3.scrollH);
	
	//make the scroller div draggable
	Drag.init(document.getElementById("scroller3"),null,0,0,0,scroller3.scrollDist);
	
	//add ondrag function
	document.getElementById("scroller3").onDrag = function (x,y) {
	var scrollY = parseInt(document.getElementById("scroller3").style.top);
	var docY = 0 - (scrollY * (scroller3.docH - scroller3.contH) / scroller3.scrollDist);
	document.getElementById("inner3").style.top = docY + "px";
	}
  }
}
//Scroller #4
var scroller4 = {
  init:   function() {
	//collect the variables
	scroller4.docH = document.getElementById("inner4").offsetHeight;
	scroller4.contH = document.getElementById("outer4").offsetHeight;
	scroller4.scrollAreaH = document.getElementById("scrollArea4").offsetHeight;
	if(scroller4.docH <= scroller4.contH)
	{
		var myScroll = document.getElementById("scrollArea4");
		myScroll.style.visibility = "hidden";
	}
	//calculate height of scroller and resize the scroller div
	//(however, we make sure that it isn't to small for long pages)
	scroller4.scrollH = (scroller4.contH * scroller4.scrollAreaH) / scroller4.docH;
	//if(scroller4.scrollH < 15) scroller4.scrollH = 15;
    document.getElementById("scroller4").style.height = Math.round(scroller4.scrollH) + "px";
	
	//what is the effective scroll distance once the scoller's height has been taken into account
	scroller4.scrollDist = Math.round(scroller4.scrollAreaH-scroller4.scrollH);
	
	//make the scroller div draggable
	Drag.init(document.getElementById("scroller4"),null,0,0,0,scroller4.scrollDist);
	
	//add ondrag function
	document.getElementById("scroller4").onDrag = function (x,y) {
	var scrollY = parseInt(document.getElementById("scroller4").style.top);
	var docY = 0 - (scrollY * (scroller4.docH - scroller4.contH) / scroller4.scrollDist);
	document.getElementById("inner4").style.top = docY + "px";
	}
  }
}