$(document).ready(function() {
  positionFeaturedContents();

  // Show pagination
  $('.home .pagination .next, .home .pagination .previous').css({
    display: 'block'
  });

  // Scroll the featured contents to the right
  $('.home .pagination .next').click(function() {
    var target = $(this).find('a').attr('href');
    var targetNumber = target.substr(target.length - 1);

    $('#featured .feature').each(function(i) {
      var that = $(this);
      var left = that.position().left;
      var finalLeft = (left - 700);

      if (targetNumber == 1) {
        finalLeft = (i * 700)
      }

      if (finalLeft < 0) {
        that.find('.pagination').fadeOut(1000);
      } else {
        that.find('.pagination').fadeIn(1000);
      }

      that.animate({
        left: finalLeft + 'px'
      }, 1000)
    });

    return false;
  });

  // Scroll the featured contents to the left
  $('.home .pagination .previous').click(function() {
    var featureContainerLength = $('#featured .feature').length;
    var target = $(this).find('a').attr('href');
    var targetNumber = target.substr(target.length - 1);

    $('#featured .feature').each(function(i) {
      var that = $(this);
      var left = that.position().left;
      var finalLeft = (left + 700);

      if (targetNumber == featureContainerLength) {
        finalLeft = ((featureContainerLength - (i + 1)) * -700)
      }

      if (finalLeft < 0) {
        that.find('.pagination').fadeOut(1000);
      } else {
        that.find('.pagination').fadeIn(1000);
      }

      that.animate({
        left: finalLeft + 'px'
      }, 1000)
    });

    return false;
  });

  $("a[rel='lightbox']").colorbox();
  $(".gallery-icon a").colorbox({
    rel: 'lightbox-wp'
  });
});

function positionFeaturedContents() {
  var element = $('#featured .feature');
  var width = element.width();
  var height = element.height();

  // Redefine styles of parent container
  $('#featured').css({
    height: height + 30,
    overflow: 'hidden'
  });

  // Position every featured container
  element.each(function(i) {
    var left = 0;
    if (i > 0) {
      left = (i * width) + (i * 20);
    }
    
    $(this).css({
      position: 'absolute',
      top: 0,
      left: left + 'px',
      display: 'block'
    });
  });
}