// JavaScript Document

/**
         * 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.
         */
function Slider_Gallery(){
	 var container = $('div.sliderGallery');
            var divMask = $('div.sliderGalleryMask', container);
            var itemsWidth = divMask.innerWidth() - container.outerWidth();
            $('.slider', container).slider({
                min: 0,
                max: itemsWidth,
                handle: '.handle',
                stop: function (event, ui) {
                    divMask.animate({'left' : ui.value * -1}, 1000);
                },
                slide: function (event, ui) {
                    divMask.css('left', ui.value * -1);
                }
            });
			
}