/**
	 * Note that we have to use window.onload because jQuery(document).ready() fires before images are loaded
	 * and ul.innerWidth() - container.outerWidth(); doesn't give the correct width because the width
	 * of the UL hasn't expanded out until the images have finished rendering.
	 */
	window.onload = function () {
		var container = jQuery('div.sliderGallery');
		var ul = jQuery('ul', container);
		
		var itemsWidth = ul.innerWidth() - container.outerWidth();
		
		jQuery('.slider').slider({
			min: 0,
			max: itemsWidth,
			handle: '.handle',
			stop: function (event, ui) {
				ul.animate({'left' : ui.value * -1}, 700);
			},
			slide: function (event, ui) {
				ul.css('left', ui.value * -1);
			}
		});
	};