// Slider:
// Config:
var options = {
	'imgdir' : 'assets/images/slider/',		// Directory holding the images
	'duration' : 5,							// Number of seconds between slides
	'container' : 'homepage-slider',		// ID of the container
	'captionCls' : 'caption',				// Class assigned to the caption DIV
	'content' : [							// Array holding the content in format: { 'img' : '', 'title' : '', 'caption' : '', 'link' : '' }
		{'img' : 'fins.jpg', 'title' : 'Futures Fins - <span>UK Sales Manager!</span>', 'caption' : '', 'link' : '#' },
		{'img' : 'joel_bike.jpg', 'title' : 'Surftech <span>Joel Tudor - World famous shapes: Tuflite technology</span>', 'caption' : '', 'link' : '#' },
		{'img' : 'a_surfer.jpg', 'title' : 'UltraFlx - <span>New high performance technology from Surftech</span>', 'caption' : '', 'link' : '#' },
		{'img' : 'gehret.jpg', 'title' : 'Surftech - <span>Céline Gehret - Surftech Team Rider</span>', 'caption': '', 'link' : '#' },
		{'img' : 'paddling.jpg', 'title' : 'Chris "Guts" Griffiths - <span>SUP Team Rider</span>', 'caption' : '', 'link' : '#' },
	],
	'pauseOnMouseover' : false
};

// An object of global vars:
var global = {
	'timer' : null,
	'currslide' : 0,
	'maxSlides' : (options.content.length - 1),
	'slider' : null,
	'image' : null,
	'caption' : null,
	'title' : null,
	'anchor' : null,
	'captionContent' : null,
	'isHovered' : false
};

$(document).ready(function() {
	if(options.content.length > 0)
	{
		global.slider = the_slider = $('#' + options.container);
		
		// When they hover on it, set the global as true:
		if(options.pauseOnMouseover)
			global.slider.mouseenter(function() { global.isHovered = true }).mouseleave(function() { global.isHovered = false });
		
		// Get the elements:
		global.image 	= global.slider.find('img').eq(0);
		global.caption 	= global.slider.find('.' + options.captionCls);
		global.captionContent = global.caption.find('p').eq(0);
		global.title 	= global.caption.find('h3').eq(0);
		global.anchor 	= global.slider.find ('a').eq(0);
		
		var firstslide = options.content[0];
		
		// When the page first loads, set the first image:
		global.image.attr('src', options.imgdir + firstslide.img);
		global.title.html(firstslide.title);
		global.captionContent.html(firstslide.caption);
		global.anchor.attr('href', firstslide.link);
		
		// Set the timer to run:
		global.timer = window.setTimeout(function() { change_slide(global.currslide + 1) }, (options.duration * 1000));
	}
});

// Function to change the slide:
function change_slide(slide_num)
{
	// Do a bounds check to make sure we don't overflow the array:
	var next_slide_index = (slide_num > global.maxSlides) ? 0 : slide_num;
	var slide = options.content[next_slide_index];
		
	// Are they mouseover?
	if(!global.isHovered)
	{
		global.currslide = next_slide_index;
		
		// Slide down the caption first:
		global.caption.slideUp('fast', function() {
			// Update the caption and title:
			global.title.html(slide.title);
			global.captionContent.html(slide.caption);
			
			// Create the next image:
			var next_image = $('<img src="' + options.imgdir + slide.img + '" />').prependTo(global.anchor).css('zIndex', 20).hide();
			var prev_image = global.image;
			
			// Fade out the current image and fade in the existing one:
			global.image.fadeOut('slow');
			
			// Fade in the new image and update everything:
			next_image.fadeIn('slow', function() {
				global.anchor.attr('href', slide.link);
				global.image = next_image;
				global.image.css('zIndex', 'auto');
				prev_image.remove();
				global.caption.slideDown('fast', function() {
					// Clear the Interval, and set up a timeout:
					window.clearTimeout(global.timer);
					global.timer = window.setTimeout(function() { change_slide(global.currslide + 1) }, (options.duration * 1000));
				});
			});
		});
	}
	
	if(options.pauseOnMouseover)
		global.slider.mouseleave(function() { change_slide(next_slide_index) });
}