function carouselItemLoadCallback(carousel, action) {
  if(action == 'next' || action == 'prev') {
    if(action == 'next') {
      id = activeButton + 1;
      if(id > buttonLength) { id = 1; }
    } else {
      id = activeButton - 1;
      if(id < 1) { id = buttonLength; }
    }

    updateActiveButton(id);
  } else if(action == 'init') {
    $('a[id^=carouselButton]').click(function() {
      var id = $(this).attr('id').replace('carouselButton', '');
      carousel.scroll($.jcarousel.intval(id));

      updateActiveButton(id);
    });

    $('#carouselPrev').click(function() {
      carousel.prev();
      return false;
    });

    $('#carouselNext').click(function() {
      carousel.next();
      return false;
    });
  }
}

function updateActiveButton(id) {
  $('a#carouselButton' + activeButton).removeClass('selected');
  $('a#carouselButton' + id).addClass('selected');

  activeButton = id;
}

var activeButton = 1;
var buttonLength = 0;

$(document).ready(function() {
  buttonLength = $('a[id^=carouselButton]').size();

  $('#carouselContainer').jcarousel({
    auto: 5,
    scroll: 1,
    wrap: 'circular',
    itemLoadCallback: carouselItemLoadCallback,
    buttonNextHTML: null,
    buttonPrevHTML: null
  });
})