(function($, s4ntc) {

  s4ntc.vem.VemJCarouselCollectionPlayer = function(viewport, controller, options) {
    var defaults = {
      jcarousel: {},
      carousel_skin: 'jcarousel-skin-vem'
    };
    s4ntc.vem.VemCollectionPlayer.call(this, viewport, controller, $.extend(true, {}, defaults, options));

    this.$carousel_prototype = $('<ul></ul>').addClass('jcarousel-skin-vem');
    this._carousel_set = false;
    this.$carousel = this.$carousel_prototype.clone().appendTo(this._vemViewport._element);
  };
  s4ntc.vem.VemJCarouselCollectionPlayer.prototype = new s4ntc.vem.VemCollectionPlayer();

  s4ntc.vem.VemJCarouselCollectionPlayer.prototype.empty = function() {
    this._collectionElements = [];
    this.resetCarousel();
  };

  s4ntc.vem.VemJCarouselCollectionPlayer.prototype.initCarousel = function() {
    this.$carousel.jcarousel(this._options.jcarousel);
    this._carousel_set = true;
  };
  s4ntc.vem.VemJCarouselCollectionPlayer.prototype.resetCarousel = function() {
    if(this._carousel_set){
      this._vemViewport._element.find('.'+this._options.carousel_skin).remove();
      this.$carousel = this.$carousel_prototype.clone().appendTo(this._vemViewport._element);
    }
  };

  s4ntc.vem.VemJCarouselCollectionPlayer.prototype.drawCollection = function(collection, append) {
    if(append !== true) {
      this.resetCarousel();

      for(var elid in collection) {
        var element = collection[elid];
        var internal_id = this._collectionElements.length;

        this._collectionElements.push(element);

        var $el = this.drawElement(element, internal_id);

        this.$carousel.append($el);
      }
      this.initCarousel();
    }
  };

  s4ntc.vem.VemJCarouselCollectionPlayer.prototype.drawElement = function() {
    var $el = s4ntc.vem.VemCollectionPlayer.prototype.drawElement.apply(this, arguments);
    return $('<li></li>').append($el);
  }

})(jQuery, window.s4ntc !== undefined ? window.s4ntc : (window.s4ntc = {}));