carousel (in progress)

gistfile1.js

/**
 * @class Carousel
 */
NS('GT.src').Carousel = GT.src.IndexController.extend(function () {
    'use strict';
	
	/** @const */
	var ROTATE_DURATION = 1000,
		/** @const */
		ANIMATION_SPEED = 500;
	
	/**
	 * @private
	 * @param {number} value
	 * @return {string}
	 */
	function movementValue(value) {
		return value * 100 * -1 + '%';
	}
	
	return {
		/**
		 * @constructor
		 * @param {jQuery} container jQuery instance for the target container
		 */
		init: function (container) {
			// parent constructor
			this._super();
			
			// properties with defaults
			this.timer = null;
			this.container = container;
			this.slides = container.children('li');
			this.animationSpeed = ANIMATION_SPEED;
			
			// get max children
			this.maxIndex = this.slides.length - 1;
		},
		/**
		 * Update UI as necessary
		 * @return {undefined}
		 */
		render: function () {
			var maxCount = this.slides.length;
			// update container width
			this.container.width((maxCount * 100) + '%');
			// update LI widths
			this.slides.width((1 / maxCount * 100) + '%');
		},
		/**
		 * Animation for every index change
		 * @return {undefined}
		 */
		action: function () {
			var _this = this;
				
			if (this.isInfinite === true && this.lastIndex === 0 && this.index === this.maxIndex) {
				
				this.container.css({marginLeft: movementValue(this.maxIndex + 1)});
				this.animate(this.maxIndex);

			} else if (this.isInfinite === true && this.lastIndex === this.maxIndex && this.index === 0) {

				this.animate(this.maxIndex + 1, function () {
					_this.container.css({marginLeft: movementValue(0)});
				});

			} else {
				this.animate(this.index);
			}
		},
		/**
		 * Set events for back/next elements
		 * @param {jQuery} backNode Element reference for previous button
		 * @param {jQuery} nextNode Element reference for next button
		 * @return {Carousel} "this" instance
		 */
		setEvents: function (backNode, nextNode) {
			var _this = this;
			
			// click event for back button
			backNode.bind('click', function (e) {
				e.preventDefault();
				if (_this.isInfinite === true) {
					_this.timer.reset();
				}
				_this.back();
			});
			
			// click event for back button
			nextNode.bind('click', function (e) {
				e.preventDefault();
				if (_this.isInfinite === true) {
					_this.timer.reset();
				}
				_this.next();
			});
			
			// click event for next button
			return this;
		},
		/**
		 * Sets animation speed (does not account for timer)
		 * @param {number} animationSpeed
		 * @return {undefined}
		 */
		setAnimationSpeed: function (animationSpeed) {
			this.animationSpeed = animationSpeed;
		},
		/**
		 * Enables auto rotation
		 * @param {number} duration
		 * @return {Carousel} "this" instance
		 */
		enableAutoRotate: function (duration) {
			// set scope context
			var _this = this;
			// set new timer instance using default or defined duration
			this.timer = new util.Timer(duration || ROTATE_DURATION);
			
			// set tick event using current context
			this.timer.setTickAction(function () {
				_this.next();
			});
			
			// initiate terror!
			this.timer.start();
			// return context
			return this;
		},
		/**
		 * Enables/Disables infinite next/back methods
		 * @return {Carousel} "this" instance
		 */
		enableInfinity: function () {
			this.isInfinite = true;
			// clone the last slide
			this.cloneFirstSlide();
			// update slide counter
			this.slides = this.container.children('li');
			// re-render widths
			this.render();
			// return context
			return this;
		},
		/**
		 * Clone first slide for infinity support
		 * @return {undefined}
		 */
		cloneFirstSlide: function () {
			// remove any cloned items
			this.container.children('cloned').remove();
			// add clone from 1st slide
			this.slides.eq(0).clone().addClass('cloned').appendTo(this.container)
		},
		/**
		 * Return Timer
		 * @return {?Timer} `Timer` or `null`
		 */
		getTimer: function () {
			return this.timer;
		},
		/**
		 * Animates container
		 * @param {number} value Index
		 * @param {Function} callback
		 * @return {jQuery} `this.container` context
		 */
		animate: function (value, callback) {
			// set default
			callback = callback || function () {};
			// animate
			this.container.stop(true, true).animate({marginLeft: movementValue(value)}, this.animationSpeed, callback);
			// return context of container
			return this.container;
		}
	};
}());