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

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

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
		"title" : "Autobse",
		"image" : "bg-1.jpg",
		"url" : "",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "Autobse",
		"image" : "bg-2.jpg",
		"url" : "",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "Autobse",
		"image" : "bg-3.jpg",
		"url" : "",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "Autobse",
		"image" : "bg-4.jpg",
		"url" : "",
		"firstline" : "",
		"secondline" : ""
	},{
		"title" : "Autobse",
		"image" : "bg-5.jpg",
		"url" : "",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "Autobse",
		"image" : "bg-6.jpg",
		"url" : "",
		"firstline" : "",
		"secondline" : ""
	},{
		"title" : "Autobse",
		"image" : "bg-7.jpg",
		"url" : "",
		"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(img/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--;

	    relPath = window.location.pathname.length > 0 ? window.location.pathname.substring(window.location.pathname.length - 1, window.location.pathname.length) : "";
	    lang = relPath == "/" ? window.location.href.substring(window.location.href.length - 3, window.location.href.length) : window.location.href.substring(window.location.href.length - 2, window.location.href.length);
	    relPath = window.location.href.replace(window.location.pathname, window.location.pathname.replace(lang, ''));

	    // Set the background image of the new active container
	    $("#headerimg" + activeContainer).css({
	      "background-image": "url(" + relPath + "img/" + 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(img/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);

	});