// Ride the carousel...
jQuery(document).ready(function() {
  jQuery('.viewscarousel').each(function() {
    new Drupal.viewscarousel(this, Drupal.settings['viewscarousel'][this.id]);
  });
});

Drupal.viewscarousel = function(element, settings) {
  this.currentPage = 0;
  this.totalItems = settings.total;
  this.viewName = settings.view;

  var config = {
    orientation: settings.orientation,
    itemVisible: parseInt(settings.visible_items),
    itemScroll: parseInt(settings.scroll_items),
    autoScroll: parseInt(settings.auto_scroll),
    itemWidth: settings.item_width,
    itemHeight: settings.item_height,
    wrap: settings.wrap,
    loadItemHandler: function(carousel, start, last, available) {
      viewscarousel.loadItems.apply(viewscarousel, arguments);
    },
    buttonNextHTML: '<button>»</button>',
    buttonPrevHTML: '<button>«</button>'
  };

  var viewscarousel = this;

  jQuery(element).jcarousel(config);
}

Drupal.viewscarousel.prototype = {
  loadItems: function(carousel, start, last, available) {
    if (available || carousel.size() >= this.totalItems) {
      // Trigger loaded
      carousel.loaded();
      return;
    }

    var viewscarousel = this;

    var params = {
      view: this.viewName,
      page: this.currentPage+1
    };

    //alert('Start loading...');

    jQuery.get('viewscarousel/js', params, function(data) {
      viewscarousel.appendItems(carousel, start, last, data);
    });

    // Increase page number.
    this.currentPage++;
  },

  appendItems: function(carousel, start, last, data) {
    //alert('Loaded! Drawing...');

    var items = Drupal.parseJson(data).data;

    for (i = 0; i < items.length; i++) {
      var item = carousel.add(last+i, items[i]);
    }

    // Trigger loaded
    carousel.loaded();

    //alert('Done!');
  }
}