/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/

// Speed of the automatic slideshow
var slideshowSpeed = 6000;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
		"title" : "",
		"image" : "slides/01.jpg",
		"url" : "http://essexboats.com/28-fusion.html",
		"firstline" : "<h2>28&#39; <br /><span>Fusion</span></h2> Somewhere along the way in the creation of the 28 Fusion, Essex lost track of their mission to build a great deck boat andV committed to a much larger picture: the creation of a truly spectacular Performance Cat whose topside happens to embrace the deck boating lifestyle to the fullest possible capacity.",
		"secondline" : "&raquo; learn more"
	}, {
		"title" : "",
		"image" : "slides/02.jpg",
		"url" : "http://essexboats.com/27-raven.html",
		"firstline" : "<h2>27&#39; <br /><span>Raven</span></h2> Hovering through the water with grace and speed, moving with confidence throughout the most demanding conditions; Offering your choice of a closed bow or open bow rider option while maintaining no compromise to the spacious cuddy cabin and roomy cockpit layout - Feel free to explore new worlds with the power of the Raven.",
		"secondline" : "&raquo; learn more"
	}, {
		"title" : "",
		"image" : "slides/03.jpg",
		"url" : "http://essexboats.com/24-valor.html",
		"firstline" : "<h2>24&#39; <br /><span>Valor</span></h2> Welcome the newest member of our distinctly accomplished bowrider series performance boats, Valor - our most progressive design to date. The aesthetically rich Euro design brings refined excellence, and unparalleled pleasure, to this high-quality machine.",
		"secondline" : "&raquo; learn more"
	}, {
		"title" : "",
		"image" : "slides/04.jpg",
		"url" : "http://essexboats.com/22-vortex.html",
		"firstline" : "<h2>22&#39; <br /><span>Vortex</span></h2> The days of having to choose between speed or handling are now over. The 22' Vortex's all new hull design gives you air entrapment only when needed, allowing you to glide resistant free while keeping a consistent grip for high speed tracking. This new design allows you incredible top end speeds without drifting.",
		"secondline" : "&raquo; learn more"
	}, {
		"title" : "",
		"image" : "slides/05.jpg",
		"url" : "http://essexboats.com/boat-factory.html",
		"firstline" : "<br><br><br><br><br><br><br><br><br><br><br><br><br>",
		"secondline" : "Learn More"
	}/*, {
		"title" : "",
		"image" : "slides/05.jpg",
		"url" : "http://essexboats.com",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "",
		"image" : "slides/06.jpg",
		"url" : "http://essexboats.com",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "Learn More",
		"image" : "slides/01.jpg",
		"url" : "http://essexboats.com",
		"firstline" : "",
		"secondline" : ""
	},
	*/
];



$(document).ready(function() {
		
	// Backwards navigation
	$("#back").click(function() {
		stopAnimation();
		navigate("back");
	});
	
	// Forward navigation
	$("#next").click(function() {
		stopAnimation();
		navigate("next");
	});
	
	var interval;
	$("#control").toggle(function(){
		stopAnimation();
	}, function() {
		// Change the background image to "pause"
		$(this).css({ "background-image" : "url(images/btn_pause.png)" });
		
		// Show the next image
		navigate("next");
		
		// Start playing the animation
		interval = setInterval(function() {
			navigate("next");
		}, slideshowSpeed);
	});
	
	
	var activeContainer = 1;	
	var currentImg = 0;
	var animating = false;
	var navigate = function(direction) {
		// Check if no animation is running. If it is, prevent the action
		if(animating) {
			return;
		}
		
		// Check which current image we need to show
		if(direction == "next") {
			currentImg++;
			if(currentImg == photos.length + 1) {
				currentImg = 1;
			}
		} else {
			currentImg--;
			if(currentImg == 0) {
				currentImg = photos.length;
			}
		}
		
		// Check which container we need to use
		var currentContainer = activeContainer;
		if(activeContainer == 1) {
			activeContainer = 2;
		} else {
			activeContainer = 1;
		}
		
		showImage(photos[currentImg - 1], currentContainer, activeContainer);
		
	};
	
	var currentZindex = -1;
	var showImage = function(photoObject, currentContainer, activeContainer) {
		animating = true;
		
		// Make sure the new container is always on the background
		currentZindex--;
		
		// Set the background image of the new active container
		$("#headerimg" + activeContainer).css({
			"background-image" : "url(images/" + photoObject.image + ")",
			"display" : "block",
			"z-index" : currentZindex
		});
		
		// Hide the header text
		$("#headertxt").css({"display" : "none"});
		
		// Set the new header text
		$("#firstline").html(photoObject.firstline);
		$("#secondline")
			.attr("href", photoObject.url)
			.html(photoObject.secondline);
		$("#pictureduri")
			.attr("href", photoObject.url)
			.html(photoObject.title);
		
		
		// Fade out the current container
		// and display the header text when animation is complete
		$("#headerimg" + currentContainer).fadeOut(function() {
			setTimeout(function() {
				$("#headertxt").css({"display" : "block"});
				animating = false;
			}, 500);
		});
	};
	
	var stopAnimation = function() {
		// Change the background image to "play"
		$("#control").css({ "background-image" : "url(images/btn_play.png)" });
		
		// Clear the interval
		clearInterval(interval);
	};
	
	// We should statically set the first image
	navigate("next");
	
	// Start playing the animation
	interval = setInterval(function() {
		navigate("next");
	}, slideshowSpeed);
	
});