// ===========================================================================
// PAGE LOAD SETUP
// ===========================================================================

$(document).ready(function () {
  // Triggers the animation
    animateThoseSlides();    
});

// ===========================================================================
// ANIMATION
// ===========================================================================

function animateThoseSlides() {
  var firstTransition = setTimeout(function() {
    
    var activeSlide = $("div#homepage-slides li:visible:first");
    $(activeSlide).css("z-index", "50");
    var nextSlide = $(activeSlide).next();
    
    slideTransition(activeSlide,nextSlide);
    
    var homepageAnimation = window.setInterval(function() {
    
      var activeSlide = $("div#homepage-slides li:visible:first");
      $(activeSlide).css("z-index", "50");
      var nextSlide = $(activeSlide).next();

      if (!$(nextSlide).length) {
        nextSlide = $("div#homepage-slides li:first");
      }
    
      slideTransition(activeSlide,nextSlide);
    
    }, 5000);
    
  }, 3000);
}

function slideTransition(activeSlide,nextSlide) {
  $(nextSlide).css({
      "display": "block",
    "z-index": "40",
    "opacity": "0"
  });
  
  $(nextSlide).animate({ opacity: "1" }, 2000);
  $(activeSlide).animate({ opacity: "0" }, 2000, function() {
    $(this).css("display", "none");
  });
}