/*
HANDLE SCROLLING OF HORIZONTAL SCROLLBAR

*/

	//this handler handles what we do when we move the generic slider
	//and what object the slider acts upon and how
	//we are going to use the generic slider object to move our sliding div of listings
	//Slider.js is the "class" for a generic slider knob.
	
	var sitepageLeft = 223;
	var knobLeft = 147;
	var knobSlidingLength = 300;
	var slideLeft = 0;
	//will need to pass a php variable with the count of the number of return records
	var records = 18;
	var visible = 5;
	var thumbTotalWidth = 70;
	
	function HANDLER_slideKnob(mouseX) {
		var slide = document.getElementById('slide');
		var minLeft = sitepageLeft + knobLeft;
		//alert("mouseX:"+ mouseX + ", minLeft:" + minLeft);
		var maxRight = minLeft + knobSlidingLength;
		if(mouseX < minLeft) return false;
		if(mouseX > maxRight) return false;
		
		//Now calculate the amount to scroll the sliding div
		//we multiple width of number of thumbs total width
		//first subtract the offset of the sliding knob min left
		var mouseOffset = mouseX - sitepageLeft - knobLeft;
		//then get the knob total sliding length
		
		//divide the mouseX by the total length to get it's location ratio
		var ratio = mouseOffset / knobSlidingLength;
		//now set the left of the sliding div to the mouseX * location ratio
		//we subtract the thumbwidth from the records*thumbwidth to compensate
		//for the width of the window, we don't need to scroll the last div all the way
		//over to the left hand side, we just need to see it on the right
		var slidingDivWidth = (records * thumbTotalWidth) - (visible * thumbTotalWidth) + thumbTotalWidth;
		ratio = slidingDivWidth * ratio;
		//ratio = ratio.toFixed(0);
		//now we set the sliding div to the knobX * the ratio
		//subtract the offset for the mouse position based on minLeft of knob. this is our mouseX relative to the slider left
		slide.style.left = -(ratio) + "px";
		//alert(slide.style.left);
		
		
		//based on the position of the sliding knob
		
		return true;
	
	}
	
	//We register a handler for an arbitrary html element we define as our knob.
		
	function REGISTER_slide() {
		//alert("REGISTER_scrollListingsLeft");
		var knob = document.getElementById('knob');
		var slideHandle = new Slider(knob,HANDLER_slideKnob,knobLeft,knobSlidingLength,"#9eb120");
		eventListenerAdd(knob, "mousedown", slideHandle.mousedown, true);
	
	}
 	runOnLoad(REGISTER_slide);