Dots.js

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

    var Dots = View.extend({
        defaults: {
            spacing : 0,
            diameter : 0,
            numDots : 0,
            fadeIn : false,
            fadeOut : false
        },
        initialize: function (options) {

            this.position = new Transitionable(0);

            this.opacity = new Transitionable(1);

            var dotLayout = new SequentialLayout({
                spacing: options.spacing,
                direction : SequentialLayout.DIRECTION.X
            });

            var dots = [];
            for (var i = 0; i < options.numDots; i++){
                var dot = new Surface({
                    size: [options.diameter, options.diameter],
                    classes : ['dot']
                });
                dots.push(dot);
            }

            dotLayout.addItems(dots);

            var mainDot = new Surface({
                size: [options.diameter, options.diameter],
                classes : ['main-dot']
            });

            this.add(dotLayout);
            this.add({
                transform: this.position.map(function (x) {
                    return Transform.translateX(x);
                }),
                opacity: this.opacity
            }).add(mainDot);
        },

        goTo : function(index){
            var length = this.options.diameter + this.options.spacing;
            this.opacity.set(0, this.options.fadeOut, function () {
                this.position.set(index * length);
                this.opacity.set(1, this.options.fadeIn);
            }.bind(this));
        }
    });

    module.exports = Dots;
});