// JavaScript Document


// horizontal slider control
var slider4;
	
	
// entire page loads before the slider gets created
	
Event.observe(window, 'load',

	function() {			
	
		slider4 = new Control.Slider('handle4', 'track4', {
			onSlide: function(v) { scrollHorizontal(v, $('scrollable2'), slider4);  },
			onChange: function(v) { scrollHorizontal(v, $('scrollable2'), slider4); }
		});

		// disable horizontal scrolling if text doesn't overflow the div
		if ($('scrollable2').scrollWidth <= $('scrollable2').offsetWidth) {
			slider4.setDisabled();
			$('wrap4').hide();
		}
		
		
	}
);



	
// on window resize recreate slider with new window size
	
 Event.observe(window,'resize',
			   
	function() {			
	
		slider4 = new Control.Slider('handle4', 'track4', {
			onSlide: function(v) { scrollHorizontal(v, $('scrollable2'), slider4);  },
			onChange: function(v) { scrollHorizontal(v, $('scrollable2'), slider4); }
		});

		// disable horizontal scrolling if text doesn't overflow the div
		if ($('scrollable2').scrollWidth <= $('scrollable2').offsetWidth) {
			slider4.setDisabled();
			$('wrap4').hide();
		}
		
		
	}
);

// scroll the element horizontally based on its width and the slider maximum value
function scrollHorizontal(value, element, slider) {
	element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
}