function topcarousel_initcallback(carousel) {
  jQuery('#top-container-buttons > li').bind('click', function() {
    carousel.startAuto(0);
    carousel.scroll($(this).parent().children().length - $(this).index());
    return false;
  });

  carousel.buttonNext.bind('click', function() {
      carousel.startAuto(0);
  });

  carousel.buttonPrev.bind('click', function() {
      carousel.startAuto(0);
  });
  carousel.clip.hover(function() {
      carousel.stopAuto();
  }, function() {
      carousel.startAuto();
  });
};

function topcarousel_itemchanged(carousel, item, idx, state) {
  $('#top-container-buttons > li').removeClass().addClass('top-container-button-disabled');
  $('#top-container-button-' + idx).removeClass().addClass('top-container-button-enabled');
};

jQuery(document).ready(function() {
  jQuery('#bottom-carousel').jcarousel({
    scroll: 4
  });


  // Create the buttons
  $('#top-carousel').each(function() {
    var n_item = $(this).children().length;
    var btn_container = $('<ul id="top-container-buttons"></ul>');
    var i;
    for (i = 0; i < n_item; i ++) {
      $(btn_container).prepend('<li id="top-container-button-' + (i + 1) + '" class="top-container-button-disabled"></li>');
    }
    $(this).after(btn_container);
  });

  jQuery('#top-carousel').jcarousel({
    scroll: 1,
    auto: 5,
    wrap: "last",
    initCallback: topcarousel_initcallback,
    itemVisibleInCallback: {
      onAfterAnimation:  topcarousel_itemchanged
    },
    buttonNextHTML: null,
    buttonPrevHTML: null
  });
});