//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("scrollitem").offsetWidth + 0;
		scroller.contW = document.getElementById("scrollcontainer").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 = (scroller.contW * scroller.scrollAreaW) / scroller.docW;
		//if(scroller.scrollW < 15) scroller.scrollW = 15;
		document.getElementById("scroller").style.width = Math.round(scroller.scrollW -4) + "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,scroller.scrollDist,0,0);
		
		// make the scrollbar disappear if it isn't needed
		if(scroller.scrollW >= (scroller.scrollAreaW) ) {
			document.getElementById("scrollArea").style.display = 'none';
		}
		
		//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("scrollcontent").style.left = docX + "px";
		}
	  }
	}
	
	onload = scroller.init;