// Controls state and offset of multiple adjacent items within the DOM

function with_carousel() {

  this.defaultAttrs({

    transport: '.js-carousel__transport',

    items: '.js-carousel__item',

    currentItemIndex: 0,

    movedEvent: 'uiCarouselMoved',

    itemWidth: 600

  });

​

  this.goToNextItem = function(e, data) {

    if(this.attr.currentItemIndex === this.attr.maxIndex) this.attr.currentItemIndex = 0;

    else this.attr.currentItemIndex ++;

    this.moveTransport();

    this.trigger(this.attr.movedEvent, {

      index: this.attr.currentItemIndex

    });

  };

​

  this.moveTransport = function() {

    var left = 0 - (this.attr.currentItemIndex * this.attr.itemWidth);

    this.select('transport').css({

      'left': left

    });

  };

​

  this.cacheMaxIndex = function() {

    this.attr.maxIndex = this.select('items').length - 1;

  };

​

  this.after('initialize', function() {

    this.on('click', this.goToNextItem);

    this.cacheMaxIndex();

    this.trigger(this.attr.movedEvent, {

      index: 0

    });

  });

}

​

// Indicates which particular item is current

function with_pagination() {

  this.defaultAttrs({

    indicators: '.js-pagination__indicator',

    currentClass: 'is-current'

  });

​

  this.changeCurrentIndicator = function(e, data) {

    var _this = this;

    this.select('indicators').removeClass(this.attr.currentClass);

    this.select('indicators').each(function(k, v) {

      if(k === data.index) {

        $(this).addClass(_this.attr.currentClass);

        return false;

      }

    });

  };

​

  this.after('initialize', function() {

    this.on('uiCarouselMoved', this.changeCurrentIndicator);

  });

}

​

var Carousel = flight.component(with_carousel, with_pagination);

​

(function() {

  Carousel.attachTo('.outer');

}());