		jQuery(document).ready(function($) {
			// make document ready for JS browsers
			$('div.slideshow-container').css('z-index','15');
			$('div.slideshow-container').css('display','inline');
			
			var onMouseOutOpacity = 1.0;
			$('#thumbContainer div').opacityrollover({
				mouseOutOpacity:   onMouseOutOpacity,
				mouseOverOpacity:  0.67,
				fadeSpeed:         'fast',
				exemptionSelector: '.selected'
			});


			// this lot should be in CSS
			$('#controls1').css('display','none');
			$('#controls2').css('display','none');
			$('#controls3').css('display','none');
			$('#controls4').css('display','none');
			$('#controls5').css('display','none');
			$('#controls6').css('display','none');
			$('#controls7').css('display','none');
			$('#controls8').css('display','none');
			
			$('.slideshow-container').css('display','none');
			$('.hiddenThumb').css('display','none');
			
			$('div.content').css('display', 'block');
			var onMouseOutOpacity = 0.67;
			
			//=============================================
			//          General usefull functions
			//=============================================
			
			function pauseAll(){
				gallery1.pause();
				gallery2.pause();
				gallery3.pause();
				gallery4.pause();
				gallery5.pause();
				gallery6.pause();
				gallery7.pause();
				gallery8.pause();
			};
			
			function hideAll(){
				$('#controls1').css('display','none');
				$('#controls2').css('display','none');
				$('#controls3').css('display','none');
				$('#controls4').css('display','none');
				$('#controls5').css('display','none');
				$('#controls6').css('display','none');
				$('#controls7').css('display','none');
				$('#controls8').css('display','none');
			};
			
			function genericThumbFunctions(){
				hideAll();
				pauseAll();
				
				// if this is the first time a gallery has been 
				// activated set skip fade to true
				
				if(firstLoad == true)
				{
					skipFade = true;
					firstLoad = false;
				}
				
				// if skip fade is true dont fade gallery in yet
				// wait for transitions then do it
				
				if(skipFade != true)
				{
					$('.slideshow-container').css('display','block');
					
				}
			};
			//=============================================
			//            Play Slideshow Functions
			//=============================================
			
			$('#controls1 .play').click(function(){
				pauseAll();
				gallery1.play();
			});
			
			$('#controls2 .play').click(function(){
				pauseAll();
				gallery2.play();
			});
			
			$('#controls3 .play').click(function(){
				pauseAll();
				gallery3.play();
			});
			
			$('#controls4 .play').click(function(){
				pauseAll();
				gallery4.play();
			});
			
			$('#controls5 .play').click(function(){
				pauseAll();
				gallery5.play();
			});
			
			$('#controls6 .play').click(function(){
				pauseAll();
				gallery6.play();
			});
			
			$('#controls7 .play').click(function(){
				pauseAll();
				gallery7.play();
			});
			
			$('#controls8 .play').click(function(){
				pauseAll();
				gallery8.play();
			});
			
			//=============================================
			//            Open Gallery Functions
			//=============================================
			
			$('#gallery1 .thumb').click(function(){
				genericThumbFunctions()
				$('#controls1').css('display','block');
				
			});
			
			$('#gallery2 .thumb').click(function(){
				genericThumbFunctions()
				$('#controls2').css('display','block');
			});
			
			$('#gallery3 .thumb').click(function(){
				genericThumbFunctions()
				$('#controls3').css('display','block');
			});
			
			$('#gallery4 .thumb').click(function(){
				genericThumbFunctions()
				$('#controls4').css('display','block');
			});
			
			$('#gallery5 .thumb').click(function(){
				genericThumbFunctions()
				$('#controls5').css('display','block');
			});
			
			$('#gallery6 .thumb').click(function(){
				genericThumbFunctions()
				$('#controls6').css('display','block');
			});
			
			$('#gallery7 .thumb').click(function(){
				genericThumbFunctions()
				$('#controls7').css('display','block');
			});
			
			$('#gallery8 .thumb').click(function(){
				genericThumbFunctions()
				$('#controls8').css('display','block');
			});
		
			$('#close').click(function(){
				pauseAll();
				
				$('.slideshow-container').css('display','none');
				
				// make sure we skip transititions next time we 
				// open a gallery
				skipFade = true;
				
			});
			


			// Initailise which controls which gallery gets (rest of controls set as defaults in js lib)
			
			var GalleryOptions1 = {controlsContainerSel : '#controls1'};
			var GalleryOptions2 = {controlsContainerSel : '#controls2'};
			var GalleryOptions3 = {controlsContainerSel : '#controls3'};
			var GalleryOptions4 = {controlsContainerSel : '#controls4'};
			var GalleryOptions5 = {controlsContainerSel : '#controls5'};
			var GalleryOptions6 = {controlsContainerSel : '#controls6'};
			var GalleryOptions7 = {controlsContainerSel : '#controls7'};
			var GalleryOptions8 = {controlsContainerSel : '#controls8'};

			
			// Initialize Advanced Galleriffic Gallery
			// Gallery 9 exsists only due the the fact that when the gellery panel
			// is loaded in slower browsers on slower computers the last gallery
			// loaded is seen before the fade to the first image, gallery 9 contains
			// a blank image so is therefore seen first instead of another image
			
			var gallery1 = $('#gallery1').galleriffic(GalleryOptions1);
			var gallery2 = $('#gallery2').galleriffic(GalleryOptions2);
			var gallery3 = $('#gallery3').galleriffic(GalleryOptions3);
			var gallery4 = $('#gallery4').galleriffic(GalleryOptions4);
			var gallery5 = $('#gallery5').galleriffic(GalleryOptions5);
			var gallery6 = $('#gallery6').galleriffic(GalleryOptions6);
			var gallery7 = $('#gallery7').galleriffic(GalleryOptions7);
			var gallery8 = $('#gallery8').galleriffic(GalleryOptions8);
			
		});