/*
* 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 = [{
  "title": "Hit-It Boxing",
  "image": "banner_hitit.jpg",
  "url": "/fitness.aspx",
  "firstline": "Need to let off some steam?"
}, {
  "title": "Reformer Pilates",
  "image": "banner_reformer.jpg",
  "url": "/reformerpilates.aspx",
  "firstline": "A stretch in the right direction"
}, {
  "title": "Refer a Friend",
  "image": "banner_potatohead.jpg",
  "url": "/pages/referafriend.aspx",
  "firstline": "Bring in your BFF for some Genesis TLC"
}, {
  "title": "Expert Help",
  "image": "banner_signup.jpg",
  "url": "/howwehelp.aspx",
  "firstline": "Making it easy from the start"
}
];



	$(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").hide();

	    // Set the new header text
	    $("#firstline").html(photoObject.firstline);
//	    $("#secondline")
//			.attr("href", photoObject.url)
//			.html(photoObject.secondline);
	    $("#pictureduri").html(photoObject.title);
	    $("#tagLine").html(photoObject.firstline);
	    $(".bannerUrl").attr("href", photoObject.url)


	    // Fade out the current container
	    // and display the header text when animation is complete
	    $("#headerimg" + currentContainer).fadeOut(function () {

	    });

	    $("#headertxt").fadeIn('fast');
	    animating = false;
	  };

	  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);

	});