/*
* 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" : "Checkout our strategy services...",
		"image" : "analysis.jpg",
		"url" : "strategy-services.html",
		"firstline" : "What is action without strategy? Probably failure. Before we go off designing, coding or engaging we must always think. Here is a bit about what we offer.",
//		"secondline" : "Checkout our strategy services..."
	}, {
		"title" : "Checkout our creative services...",
		"image" : "creative.jpg",
		"url" : "creative-services.html",
		"firstline" : "At Ennovate Creativity is held very highly we believe that a healthy dose of creativity turns everyday projects into visual and logical masterpieces.",
//		"secondline" : "Checkout our creative services..."
	}, {
		"title" : "Checkout our technology services...",
		"image" : "custom.jpg",
		"url" : "technology-services.html",
		"firstline" : "Need something very custom? At Ennovate we believe that no two projects are the same.",
//		"secondline" : "active"
	}, {
		"title" : "Checkout our content services...",
		"image" : "content.jpg",
		"url" : "content-services.html",
		"firstline" : "Content has never been so important. If engagement is the finish line, Content is the starting gun. Ennovate's content service ensures that your brand is making the connection and keeping the connection alive for you.",
//		"secondline" : "nature"
	}//, {
//		"title" : "Italian pizza",
//		"image" : "food.jpg",
//		"url" : "#",
//		"firstline" : "Enjoy some delicious",
//		"secondline" : "food"
//	}
];



$(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);
	
});