// 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" : "Stairs",


		"image" : "vacation.jpg",


		"url" : "images/work.jpg",


		"firstline" : "Going on",


		"secondline" : "vacation?"


	}, {


		"title" : "Office Appartments",


		"image" : "work.jpg",


		"url" : "images/nature.jpg",


		"firstline" : "Or still busy at",


		"secondline" : "work?"


	}, {


		"title" : "Mountainbiking",


		"image" : "biking.jpg",


		"url" : "images/biking.jpg",


		"firstline" : "Get out and be",


		"secondline" : "active"


	}, {


		"title" : "Mountains Landscape",


		"image" : "nature.jpg",


		"url" : "images/vacation.jpg",


		"firstline" : "Take a fresh breath of",


		"secondline" : "nature"


	},


	 {


		"title" : "Mountains Landscape",


		"image" : "food.jpg",


		"url" : "images/vacation.jpg",


		"firstline" : "Take a fresh breath of",


		"secondline" : "nature"


	}


];











$(document).ready(function() {


	 $("#back").click(function() {


		stopAnimation();


		navigates("next1");


	});


	


	$("#next").click(function() {


		stopAnimation();


		navigates("next2");


	});


	


	$("#next1").click(function() {


		stopAnimation();


		navigates("next3");


	});


	


	$("#next2").click(function() {


		stopAnimation();


		navigates("next4");


	});


	


	$("#next3").click(function() {


		stopAnimation();


		navigates("next5");


	});


	


	var interval;


	var activeContainer = 1;	


	var currentImg = 0;


	var animating = false;


	var currentImg1;


	


	


	


	


	var navigate = function(direction) {


		// Check which current image we need to show


		if(direction == "next1") {


			currentImg=1;


			currentImg1=1;


			fornext("fornext1");


						


		} 


		


		else if(direction == "next2") {


			currentImg=2;


			fornext("fornext2");


			


		} 


		


		else if(direction == "next3") {


			currentImg=3;


			fornext("fornext3");


			


		} 


		


		else if(direction == "next4") {


			currentImg=4;


			fornext("fornext4");


			


		} 


		else if(direction == "next5") {


			currentImg=5;


			fornext("fornext5");


			


		}


		


		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 i=0;


	var showImage = function(photoObject, currentContainer, activeContainer) {


		animating = true;


		i++;


		


		if(i==6)


		{


			i=1;


		}


		var x="fornext"+i;


		 


		fornext(x);


		


		// 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


		});


		


		


		// 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 navigates = function(direction) {


		// Check if no animation is running. If it is, prevent the action


		


		


		// Check which current image we need to show


		if(direction == "next1") {


			currentImg=1;


			currentImg1=1;


			fornext("fornext1");


						


		} 


		


		else if(direction == "next2") {


			currentImg=2;


			fornext("fornext2");


			


		} 


		


		else if(direction == "next3") {


			currentImg=3;


			fornext("fornext3");


			


		} 


		


		else if(direction == "next4") {


			currentImg=4;


			fornext("fornext4");


			


		} 


		


		else if(direction == "next5") {


			currentImg=5;


			fornext("fornext5");


			


		} 


		


		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;


		}


		


		showImage1(photos[currentImg-1], currentContainer, activeContainer);


		


	};


	


	 currentZindex = -1;


	 i=0;


	var showImage1 = 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


		});


		


		


		// 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 navigatee = 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);


		


	};


	


	


	function fornext(disp)


		{


		if(disp=="fornext1") {


			$('#back').css({ "background-image" : "url(images/bg_img_button1.png)" });


			$('#next2,#next1,#next,#next3').css({ "background-image" : "url(images/bg_img_button2.png)" });


			


		}


		if(disp=="fornext2") {


			$('#next').css({ "background-image" : "url(images/bg_img_button1.png)" });


			$('#next2,#next1,#back,#next3').css({ "background-image" : "url(images/bg_img_button2.png)" });


		}


		if(disp=="fornext3") {


			$('#next1').css({ "background-image" : "url(images/bg_img_button1.png)" });


			$('#next,#next2,#back,#next3').css({ "background-image" : "url(images/bg_img_button2.png)" });


		}


		if(disp=="fornext4") {


					


			$('#next2').css({ "background-image" : "url(images/bg_img_button1.png)" });


			$('#next,#next1,#back,#next3').css({ "background-image" : "url(images/bg_img_button2.png)" });


			


		}


		if(disp=="fornext5") {


					


			$('#next3').css({ "background-image" : "url(images/bg_img_button1.png)" });


			$('#next,#next1,#back,#next2').css({ "background-image" : "url(images/bg_img_button2.png)" });


			


		}


		}


		


		


	


	


	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


	navigatee("next");


	


	// Start playing the animation


	interval = setInterval(function() {


		navigatee("next");


	}, slideshowSpeed);


	


});