//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("content").offsetWidth;
    scroller.contW = document.getElementById("thumbdiv").offsetWidth;
    scroller.scrollAreaW = document.getElementById("scrollArea").offsetWidth;
    //calculate height 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.scrollH < 15) scroller.scrollH = 15;
    document.getElementById("scroller").style.width = Math.round(scroller.scrollW) + "px";
    
    //what is the effective scroll distance once the scoller's height has been taken into account
    scroller.scrollDist = Math.round(scroller.scrollAreaW-scroller.scrollW);
    
    //make the scroller div draggable
    Drag.init(document.getElementById("scroller"),null,-1,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("content").style.left = docX + "px";
    }
	
	//alert(document.getElementById("thumbdiv").offsetWidth + ' - ' + document.getElementById("content").offsetWidth);
	
	if(document.getElementById("thumbdiv").offsetWidth < document.getElementById("content").offsetWidth){
	
	//if(parseInt(document.getElementById("scroller").style.width) < parseInt(document.getElementById("thumbdiv").style.width)){
		 document.getElementById("scroller").style.background = "#AAA";
		 document.getElementById("scroller").style.borderTop = "1px solid #a7a9ac";
		 document.getElementById("scroller").style.borderBottom = "1px solid #a7a9ac";
		 document.getElementById("scrollArea").style.border = "1px solid #a7a9ac";
	 
	 } else {
		 document.getElementById("content").style.left = "0px";
		 document.getElementById("scroller").style.background = "none";
		 document.getElementById("scroller").style.border = "none";
		 document.getElementById("scrollArea").style.border = "none";
	 }
  }
}

//onload = scroller.init;
scrollsize = scroller.init;


/** This is high-level function; REPLACE IT WITH YOUR CODE.
 * It must react to delta being more/less than zero.
 */
function handle(delta) {
	if (delta < 0){	
		if(parseInt(document.getElementById("scroller").style.left) <= scroller.scrollDist){
			document.getElementById("scroller").style.left = (parseInt(document.getElementById("scroller").style.left)+((parseInt(document.getElementById("scroller").style.width)*0.1)))+"px";
			var scrollX = parseInt(document.getElementById("scroller").style.left);
			var docX = 0 - (scrollX * (scroller.docW - scroller.contW) / scroller.scrollDist);
			document.getElementById("content").style.left = (docX-(document.getElementById("content").style.width*0.1)) + "px";
		}
	} else {
		if(parseInt(document.getElementById("scroller").style.left) >= 0){
			
			//alert(parseInt(document.getElementById("scroller").style.left));
			document.getElementById("scroller").style.left = (parseInt(document.getElementById("scroller").style.left)-((parseInt(document.getElementById("scroller").style.width)*0.1)))+"px";
			var scrollX = parseInt(document.getElementById("scroller").style.left);
			var docX = 0 - (scrollX * (scroller.docW - scroller.contW) / scroller.scrollDist);
			document.getElementById("content").style.left = (docX+(document.getElementById("content").style.width*0.1)) + "px";
			if((docX+(document.getElementById("content").style.width*0.1)) > 5)
			{
				document.getElementById("content").style.left = "5px";
				document.getElementById("scroller").style.left = "0px"
			}
	  	}
	}
}

function wheel(event){
	if(parseInt(document.getElementById("scroller").style.width) < parseInt(document.getElementById("thumbdiv").style.width)){
		var delta = 0;
		if (!event) event = window.event;
		if (event.wheelDelta) {
			delta = event.wheelDelta/120; 
			if (window.opera) delta = -delta;
		} else if (event.detail) {
			delta = -event.detail/3;
		}
		if (delta)
			handle(delta);
			if (event.preventDefault)
					event.preventDefault();
			event.returnValue = false;
	}
}

/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;