Carousel.js

define(function (require, exports, module) {
    var View = require('samsara/core/View');
    var Surface = require('samsara/dom/Surface');
    var Scrollview = require('samsara/layouts/Scrollview');

    var Dots = require('./Dots');
    var Arrows = require('./Arrows');

    var Carousel = View.extend({
        defaults: {
            pages: 10
        },
        initialize: function (options) {

            this.currentPage = 0;

            this.createArrows(options.arrows);
            this.createDots(options.dots);
            this.createScrollview();

            var hue = 0;
            var surfaces = [];
            for (var i = 0; i < options.pages; i++) {
                var surface = new Surface({
                    content: i,
                    classes: ['page'],
                    properties: {
                        background: 'hsl(' + hue + ',80%,50%)'
                    }
                });

                surfaces.push(surface);
                hue += 360 / options.pages;
            }

            this.addItems(surfaces);
        },
        createArrows : function(options){
            this.arrows = new Arrows(options);

            this.arrows.on('next', function () {
                if (this.currentPage < this.options.pages - 1)
                    this.scrollview.goTo(++this.currentPage);
            }.bind(this));

            this.arrows.on('prev', function () {
                if (this.currentPage > 0)
                    this.scrollview.goTo(--this.currentPage);
            }.bind(this));

            this.add(this.arrows);
        },
        createScrollview : function(options){

            options = options || {};
            options.direction = Scrollview.DIRECTION.X;
            options.paginated = true;

            this.scrollview = new Scrollview(options);

            this.scrollview.on('page', function (index) {
                this.currentPage = index;
                this.dots.goTo(index);
            }.bind(this));

            this.scrollview.on('update', function (data) {
                (data.index == 0 && data.progress < .5)
                    ? this.arrows.hideLeft()
                    : this.arrows.showLeft();

                (data.index == this.options.pages - 1 && data.progress > .5)
                    ? this.arrows.hideRight()
                    : this.arrows.showRight();
            }.bind(this));

            this.add(this.scrollview);
        },
        createDots : function(options){
            this.dots = new Dots(options);

            var N = options.numDots;
            var spacing = options.spacing;
            var diameter = options.diameter;
            var size = [N * diameter + (N - 1) * spacing, diameter];

            this.add({align: [.5, .9]})
                .add({size: size, origin: [.5, .5]}) // define origin point and size of dots view
                .add(this.dots);
        },
        addItems : function(items){
            this.scrollview.addItems(items);
        }
    });

    module.exports = Carousel;
});