var slideshowSpeed = 8000;
var photos = [ {
		"title" : "DJ Dan Browne",
		"image" : "portfolio-example.jpg",
		"url" : "http://www.djdanbrowne.com",
		"firstline" : "...The communication and personal interaction were second to none. Snap Frost are creative, efficient, and reliable and I would highly recommend their services to any other business.",
		"secondline" : "Dan Browne, www.djdanbrowne.com"
	}, {
		"title" : "Ellie Bartlett - Wildlife Photography",
		"image" : "portfolio-example2.gif",
		"url" : "http://www.elliebartlett.com",
		"firstline" : "...They took me through the design stage with ease; presenting me with several concepts and allowing me great freedom to mix and match the elements that I liked from the different designs...",
		"secondline" : "Ellie Bartlett, www.elliebartlett.com"
	}
];
$(document).ready(function() {
	$("#brief").css({"background-image" : "url(images/Front%20Page/process-box-brief-hover.gif)" });
		$("#concept").css({"background-image" : "url(images/Front%20Page/process-box-concept.gif)" });
		$("#proc-image").css({"background-image" : "url(images/Front%20Page/process-box-bulb.jpg)" });
		$("#development").css({"background-image" : "url(images/Front%20Page/process-box-development.gif)" });
		$("#completion").css({"background-image" : "url(images/Front%20Page/process-box-completion.gif)" });
		$("#revisions").css({"background-image" : "url(images/Front%20Page/process-box-revisions.gif)" });
		$("#proc-text").html("Just send us your requirements! Let us know absolutely everything you can about your vision for the project, so we can get as close as possible to working on your dream website. You can do this via email, phone, or - easiest of all the automated online form which can be found on our website.");
		
	$('#brief').click(function() {
		$("#proc-text").html("Just send us your requirements! Let us know absolutely everything you can about your vision for the project, so we can get as close as possible to working on your dream website. You can do this via email, phone, or - easiest of all the automated online form which can be found on our website.");
		$("#brief").css({"background-image" : "url(images/Front%20Page/process-box-brief-hover.gif)" });
		$("#concept").css({"background-image" : "url(images/Front%20Page/process-box-concept.gif)" });
		$("#development").css({"background-image" : "url(images/Front%20Page/process-box-development.gif)" });
		$("#completion").css({"background-image" : "url(images/Front%20Page/process-box-completion.gif)" });
		$("#revisions").css({"background-image" : "url(images/Front%20Page/process-box-revisions.gif)" });
		$("#proc-image").css({"background-image" : "url(images/Front%20Page/process-box-bulb.jpg)" });
	});
	$('#concept').click(function() {
		$("#proc-text").html("Once the basic premise for the website has been agreed, we can get to work drafting up some rough concept ideas. For most websites we will typically create around 4-5 basic concept ideas for you to have a look at and choose from. We believe in experimentation and providing a wide range of choice to truly achieve the best look to be had for your website.");
		$("#brief").css({"background-image" : "url(images/Front%20Page/process-box-brief.gif)" });
		$("#concept").css({"background-image" : "url(images/Front%20Page/process-box-concept-hover.gif)" });
		$("#development").css({"background-image" : "url(images/Front%20Page/process-box-development.gif)" });
		$("#completion").css({"background-image" : "url(images/Front%20Page/process-box-completion.gif)" });
		$("#revisions").css({"background-image" : "url(images/Front%20Page/process-box-revisions.gif)" });
		$("#proc-image").css({"background-image" : "url(images/Front%20Page/process-box-wireframe.jpg)" });
	});
	$('#development').click(function() {
		$("#proc-text").html("Settle on one (or a combination!) of the concept ideas and we will take the website into the development stage. Once again all clients have constant access to see the work being carried out on their website, so you can offer feedback quickly and easily at any stage of the process.");
		$("#brief").css({"background-image" : "url(images/Front%20Page/process-box-brief.gif)" });
		$("#concept").css({"background-image" : "url(images/Front%20Page/process-box-concept.gif)" });
		$("#development").css({"background-image" : "url(images/Front%20Page/process-box-development-hover.gif)" });
		$("#completion").css({"background-image" : "url(images/Front%20Page/process-box-completion.gif)" });
		$("#revisions").css({"background-image" : "url(images/Front%20Page/process-box-revisions.gif)" });
		$("#proc-image").css({"background-image" : "url(images/Front%20Page/process-box-cone.jpg)" });
	});
	$('#completion').click(function() {
		$("#proc-text").html("Upon completion of your web design we will upload it to the relevant server and take any extra steps necessary to get everything up and running. For complete peace of mind, check out our extensive maintenance packages to keep your web design running smoothly for years to come. Also take advantage of our content management system to keep your content up to date.");
		$("#brief").css({"background-image" : "url(images/Front%20Page/process-box-brief.gif)" });
		$("#concept").css({"background-image" : "url(images/Front%20Page/process-box-concept.gif)" });
		$("#development").css({"background-image" : "url(images/Front%20Page/process-box-development.gif)" });
		$("#completion").css({"background-image" : "url(images/Front%20Page/process-box-completion-hover.gif)" });
		$("#revisions").css({"background-image" : "url(images/Front%20Page/process-box-revisions.gif)" });
		$("#proc-image").css({"background-image" : "url(images/Front%20Page/process-box-jumpingman.jpg)" });
	});
	$('#revisions').click(function() {
		$("#proc-text").html("Your happiness is of the utmost importance to us, which is why we are always more than happy to make any revisions to the design that you may deem necessary to ensure that you are totally satisfied with the end result.");
		$("#brief").css({"background-image" : "url(images/Front%20Page/process-box-brief.gif)" });
		$("#concept").css({"background-image" : "url(images/Front%20Page/process-box-concept.gif)" });
		$("#development").css({"background-image" : "url(images/Front%20Page/process-box-development.gif)" });
		$("#completion").css({"background-image" : "url(images/Front%20Page/process-box-completion.gif)" });
		$("#revisions").css({"background-image" : "url(images/Front%20Page/process-box-revisions-hover.gif)" });
	});
});
$(document).ready(function() {
						
		
	// Backwards navigation
	$("#back").click(function() {
		navigate("back");
	});
	
	// Forward navigation
	$("#next").click(function() {
		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);
	
});