/**
         * Note that we have to use window.onload because $(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.
         */
		 
		var arrowClickOffset = 4;
		
			
        window.onload = function () {
			
            var container = $('div.sliderGallery');
            var ul = $('ul', container);
            
            var itemsWidth = ul.innerWidth() - container.outerWidth();
            
            $('.slider', container).slider({
                min: 0,
                max: itemsWidth,
                handle: '.handle',
                stop: function (event, ui) {
                    ul.animate({'left' : ui.value * -1}, 500);
                },
                slide: function (event, ui) {
                    ul.css('left', ui.value * -1);
                }
            });
			
			/*
			$('.slider', container).slider("moveTo", itemsWidth/2);
			$('.handle').css('left','0px');
			$('.handle').animate({'left':($('.slider').width()/4)-$('.handle').width()/4});
			*/
			$('#product-line .slide-left').click(function(){				
				$('.slider', container).slider("moveTo",$('.slider', container).slider("value")-itemsWidth/arrowClickOffset );
			});
			
			
			$('#product-line .slide-right').click(function(){				
				$('.slider', container).slider("moveTo",$('.slider', container).slider("value")+itemsWidth/arrowClickOffset );
			});
			
        };