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

// Speed of the automatic slideshow
var slideshowSpeed = 10000;
// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [{
  "image": "mission_00.jpg",
  "url": "<a href='about'>Find out more...</a>",
  "firstline": "Specialist as standard...",
  "secondline": "UK General Insurance Group are a leading specialist insurer with real focus on technical excellence and innovation..."
}, {
  "image": "mission_01.jpg",
  "url": "<a href='trading/trading-options/schemes'>Find out more...</a>",
  "firstline": "A refreshing new approach to schemes...",
  "secondline": "A range of opportunities from &#8216;off the shelf&#8217; smart schemes through to bespoke scheme solutions..."
}];
$(document).ready(function () {
  // Backwards navigation
  $("#prev").click(function () {
    stopAnimation();
    navigate("prev");
  });
  // 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(assets/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 = -5;
  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
      $("#missionImg-" + activeContainer).css({
        "background-image": "url(assets/images/mission/" + photoObject.image + ")",
        "display": "block",
        "z-index": currentZindex
      });
      // Hide the header text
      $("#missionTxtInner").css({
        "display": "none"
      });
      // Set the new header text
      $("#firstline").html(photoObject.firstline);
      $("#secondline").html(photoObject.secondline);
      $("#url").html(photoObject.url); //$("#url").attr("href", photoObject.url);
      // Fade out the current container
      // and display the header text when animation is complete
      $("#missionImg-" + currentContainer).fadeOut(function () {
        setTimeout(function () {
          $("#missionTxtInner").css({
            "display": "block"
          });
          animating = false;
        }, 500);
      });
    };
  var stopAnimation = function () {
      // Change the background image to "play"
      $("#control").css({
        "background-image": "url(assets/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);
});