/* ------------------------------------------------------------------------
 * 
 * SLIDESHOW
 * 
 ----------------------------------------------------------------------- */

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

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [];

$(document).ready(function() {

  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 navigateTo = function(imgIndex) {
    // Check if no animation is running. If it is, prevent the action
    if(animating) {
      return;
    }
    
    // Check which current image we need to show
    currentImg = imgIndex;
    
    // 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
    $("#bgSlideshowImg" + activeContainer).css({
      "background-image" : "url(" + photoObject.image + ")",
      "display" : "block",
      "z-index" : currentZindex
    });

    // Change link href // Ubik
    $("#pictureLink").attr("href",photoObject.url).attr("title",photoObject.title);

    // Activate current navigation item
    $("#bgSlideshowNav ul li a").removeClass("active");
    $("#bgSlideshowNavItem"+currentImg).addClass("active");
    
    // Fade out the current container
    // and display the header text when animation is complete
    $("#bgSlideshowImg" + currentContainer).fadeOut(function() {
      setTimeout(function() {
        $("#headertxt").css({"display" : "block"});
        animating = false;
      }, 500);
    });
  };
  
  var stopAnimation = function() {
    // Clear the interval
    clearInterval(interval);
  };
  
  // We should statically set the first image
  navigate("next");
  
  // Start playing the animation
  var interval = setInterval(function() {
    navigate("next");
  }, slideshowSpeed);
  
  // Click on navigation buttons
  $("#bgSlideshowNav ul li a").click(function(){
    navigateTo($(this).attr("rel"));
    clearInterval(interval);
    interval = setInterval(function() {
      navigate("next");
    }, slideshowSpeed);
  });
  
});

/* ------------------------------------------------------------------------
 *
 * JCAROUSEL
 * 
 ----------------------------------------------------------------------- */
function mycarousel_initCallback(carousel) {
  $('.jcarousel-nav a').bind('click', function() {
    $('.jcarousel-nav a').removeClass("active");
    $(this).addClass("active");
    carousel.scroll(jQuery.jcarousel.intval($(this).attr("rel")));
    return false;
  });
};
function mycarousel_animationStepCallback(carousel,li,index,state) {
  var itemCount = carousel.size();
  if (index % itemCount == 0) { var i = itemCount; } else { var i = index % itemCount; }  
  $('.jcarousel-nav a').removeClass("active");
  $('.jcarousel-nav a[rel='+i+']').addClass("active");
};
$(document).ready(function() {
  $('#newsCarousel').jcarousel({
    initCallback: mycarousel_initCallback,
    itemVisibleInCallback: mycarousel_animationStepCallback,
    scroll: 1,
    auto: 4,
    wrap: "circular",
    buttonNextHTML: null,
    buttonPrevHTML: null
  });
});