$(document).ready(function() {		 
			
			// sets up slideshow and caption box
			$('#slideshow').cycle({ 
				fx:     'fade', 
				speed:  'fast', 
				timeout: 0, 
				next:   '.next', 
				prev:   '.prev',
				before: function() {  
				$('#caption').html(this.title); 
			}  ,
				after: function () {
				// centres the image correctly		
		    $('.pics img').each(function() {
					$(this).css({left: '50%', marginLeft: -$(this).width()/2});
			});	
				}
			});
			
			// sets up tabbed sub navigation
            $('#subnav ul').tabs();				
			
			// centres the image correctly		
		    $('.pics img').each(function() {
					$(this).css({left: '50%', marginLeft: -$(this).width()/2});
			});
			
			
			// fades in left work arrow buttons
			$('#left_nav').hover(function() {
				// on hovering over, find the element we want to fade *up*
				var fade = $('> div', this);
				
				// if the element is currently being animated (to a fadeOut)...
				if (fade.is(':animated')) {
				  // ...take it's current opacity back up to 1
				  fade.stop().fadeTo(650, 1);
				} else {				  
				  fade.fadeIn(650);
				}
			  }, function () {
				// on hovering out, fade the element out
				var fade = $('> div', this);
				if (fade.is(':animated')) {
				  fade.stop().fadeTo(650, 0);
				} else {				  
				  fade.fadeOut(650);
				}
			  });
			  
			  // fades in right work arrow buttons
			$('#right_nav').hover(function() {
				// on hovering over, find the element we want to fade *up*
				var fade = $('> div', this);
				
				// if the element is currently being animated (to a fadeOut)...
				if (fade.is(':animated')) {
				  // ...take it's current opacity back up to 1
				  fade.stop().fadeTo(650, 1);
				} else {				  
				  fade.fadeIn(650);
				}
			  }, function () {
				// on hovering out, fade the element out
				var fade = $('> div', this);
				if (fade.is(':animated')) {
				  fade.stop().fadeTo(650, 0);
				} else {				  
				  fade.fadeOut(650);
				}
			  });
			
			 // Navigation hover effect
			  $('ul.navigation li').ahover();   
			
			// Centre the first image to load
			    $('.pics img').each(function() {
					$(this).css({left: '50%', marginLeft: -$(this).width()/2});
			});	
				
            });