jQuery(document).ready(function($) {
	
	var container = $('#header-snippet');
	
	// Hide the snippet to begin with; fade it in when the page loads
	container.hide();
	
	// Show the slideshow
	$('#page-image').show();

	// Kick the slideshow off
	$('.slides').cycle({
		fx: 'cover',
		timeout: 8000,
		pause: 1,
		before: onBefore,
		after: onAfter,
		pager: '.preview-links'
	});
	
	
	// Creates and updates the paragraph which updates when the user mouses over a page link
	function previewpage() {
		// The initial title comes from the first img
		if($('.slides').length > 0) {
			$('.preview-links.preview-titles').prepend('<p id="page-preview">' + $('.slides img')[0].title + '</p>');
		}
	}
	previewpage();
	
	// Set the titles on the nav bar to the titles in the images
	function setlinktitles() {
		var titles = new Array();

		$('.slides img').each( function() {
			titles.push(this.title);
		});

		// Reverse the order of the array for easy popping
		titles.reverse();

		$('.preview-links a').each( function() {
			$(this).attr('title', titles.pop());
			// Set up the mouse-over behaviour
			$(this).hover(
			function(event) {
				$('#page-preview').text($(this).attr('title'));
				$('.slides').cycle('pause');
			},
			function(event) {
				$('#page-preview').text($('.activeSlide').attr('title'));
				$('.slides').cycle('resume');
			});
		});
	}
	setlinktitles();
	
	// Before the image transitions, fade out the description
	function onBefore() { 
		container.fadeOut("slow");
	}
	
	// When the image has faded back in, fade in the description	
	function onAfter() { 
		container.fadeIn("slow");
		// The script needs the details from the image
		// $(this) refers to the a tag wrapping the image
		// Therefore get the first child
		var img = $(this).children();
		var description = img[0].alt;
		var title       = img[0].title;
		
		// Add the description
		$(".snippet-description").text(description);
		// Replace the text in the link
		$(".snippet-link").text(title);
		// Update the href of the link
		$(".snippet-link").attr("href", this.href);
		
		// Also update the page preview
		$('#page-preview').text(title);
	}
	
	// Pauses the slideshow on hover, resumes on out
	container.hover(
		function() {
			$('.slides').cycle('pause');
		},
		function() {
			$('.slides').cycle('resume');
		}
	);
	
	function setdimensions() {
		// Get the dimensions settings
		var imageheight = $('.header-image').attr('height');
		var imagewidth  = $('.header-image').attr('width');
		// The image has class padding-xxx so split the string to extract the value
		var paddingclass = $('.header-image').attr('class');
		paddingclass = paddingclass.substring(paddingclass.indexOf(' '), paddingclass.length);
		var imagepadding = paddingclass.substring(paddingclass.indexOf('-')+1, paddingclass.length);


		// Set the container's dimensions
		$('#page-image').height((parseInt(imageheight) + parseInt(imagepadding))+'px');
		$('#page-image').width((parseInt(imagewidth) + parseInt(imagepadding))+'px');
	}
	if($('.slides').length > 0) {
		setdimensions();
	}
});