window.onload = function () {
            
			var container = $('div.sliderGallery');
            var ul = $('ul', container);
         	
			//get the browser window size as we want our images to be that high
   			var myView = $(window).height();
			var myViewWidth = $(window).width();
			
			
			//set the gallery image so they are the same size as browswer window
			$(".galleryImage").height(myView);
			$(".sliderGallery").width(myViewWidth);
			$(".sliderGallery").height(myView);
			
			var itemsWidth = ul.innerWidth() - container.outerWidth();

			
			
			//Check when browswer resizes and run function 
			$(window).bind("resize", resizeWindow);
			
			
			//This is run once browser is resized
			function resizeWindow( e ) {
				
				myView = $(window).height();
				myViewWidth = $(window).width();
			
				$(".galleryImage").height(myView);
				$(".sliderGallery").width(myViewWidth);
				$(".sliderGallery").height(myView)
			};
			
			
			
			//This check for images within containter and then loads them
			$(function(){ 
				//attach onImagesLoad to the entire body 
        		$('#container').onImagesLoad({ 
										 
            		selectorCallback: selectorImagesLoaded 
			
       			 }); 
			
        	//the selectorCallback function, invoked once when all images contained within $('body') have loaded 
        		function selectorImagesLoaded($selector){ 
		
           			$('#wrapper').removeClass('loading');
		  			$('#wrapper').addClass('loaded');
        		} 
    		}); 
			
			
			//This does the magic for the gallery
            $('.slider', container).slider({
                min: 0,
                max: itemsWidth,
                handle: '.handle',
                stop: function (event, ui) {
                    ul.animate({'left' : ui.value * -1}, 100);
               		 },
                slide: function (event, ui) {
                    ul.css('left', ui.value * -1);
               		 }
            });
			
	};