var gallery = $('gallery');

// Set the variable handle width
var handleWidth = gallery.offsetWidth * ( gallery.offsetWidth / gallery.scrollWidth );
handleWidth =  Math.min( Math.max( ( Math.floor( ( handleWidth - 16 ) / 3 ) * 3 ) + 16, 39 ), 742 );
handleWidth = new String( handleWidth ) + "px";

Element.setStyle( $( 'gallerySliderHandle' ), { width: handleWidth } );
Element.setStyle( $$( '#gallerySliderHandle .right' )[ 0 ], { width: handleWidth } );	

// horizontal slider control
var gallerySlider = new Control.Slider('gallerySliderHandle', 'gallerySliderTrack', {
	onSlide: function(v) { scrollHorizontal(v, gallery, gallerySlider);  },
	onChange: function(v) { scrollHorizontal(v, gallery, gallerySlider); }
});

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