var mycarousel_itemList = [
  {url: "/uploads/person/thumbnail/34382.png", title: "AnaLuisa", link: "/users/analuisa"},  {url: "/uploads/person/thumbnail/27136.png", title: "joaomartins", link: "/users/joaomartins"},  {url: "/uploads/person/thumbnail/137.png", title: "pedrosoares", link: "/users/pedrosoares"},  {url: "/uploads/person/thumbnail/aaumdigital/default.png", title: "Luisana", link: "/users/luisana"}];

function mycarousel_initCallback(carousel) {
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

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

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });

    jQuery('#next').bind('click', function() {
        carousel.next();
        return false;
    });

    jQuery('#prev').bind('click', function() {
        carousel.prev();
        return false;
    });
};

function mycarousel_itemLoadCallback(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {

        if (carousel.has(i)) {
            continue;
        }

        if (i > mycarousel_itemList.length) {
            break;
        }

        carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
    }
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    return '<a href="' + item.link + '"><img src="' + item.url + '" width="40" height="40" alt="' + item.url + '" /></a>';
};

jQuery(document).ready(function() {
  jQuery('#attendance-carousel').jcarousel({
      auto: 3,
      scroll: 1,
      animation: "slow",
      size: mycarousel_itemList.length,
      initCallback: mycarousel_initCallback,
      itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
  });
});