BB Carousel

CarouselView.js

/*
 * CarouselView.js
 *
 */

var CarouselView = Backbone.View.extend({
	//define carousel template
	//'template': _.template(),
	
	//define default values for carousel
	'defaults': {
		'timer' : 500,
		'currentSlide': 1,
		'carouselHeight': 373,
		'carouselWidth': 950,
		'loopCarousel': true
	},
	
	//establish events for carousel
	'events': {
		'click .carousel_right' : 'shiftRight',
		'click .carousel_left' : 'shiftLeft',
		'click .carousel_num' : 'selectedItem'
	},

	'initialize': function(options) {
		_.bindAll(this);

		var view = this;
		view.o = $.extend(true, view.defaults, options);
		
		App.bind('show:index', this.render);

		log('Backbone : CarouselView : Initialized');
	},

	'render': function() {
		this.generateSlides();
		this.generateNavButtons();
		this.updateSelectedNav();
		return this;
	},
	'generateSlides': function(){
		var view = this;
		var slidesTemplate = _.template($('#carouselSlide_template').html(), {slide : view.o.slideDataArray});
		view.$el.append(slidesTemplate);
		
		var $carousel = view.$el.find('.carousel');
		view.$carouselPieces = $carousel.find('li');
		
		$.each(view.$carouselPieces, function(i, val){
			$(val).css({
				'backgroundColor': 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')',
				'height': view.o.carouselHeight + 'px',
				'left': ( view.o.carouselWidth * i ) + 'px',
				'position': 'absolute',
				'top': '0px',
				'width': view.o.carouselWidth + 'px'
			});
		})
	},
	'generateNavButtons': function(){
		//based on params, either generate just a leftButton + rightButton or an OL of All Nums
		var navTemplate = _.template($('#carouselNav_template').html(), {slide : this.o.slideDataArray});
		this.$el.append(navTemplate);
	},
	'jumpToItem': function( selectedItem ){
		//move the carousel to a specific item
		var view = this;
		
		if(selectedItem == 0){
			//rotate to the last element in the carsousel
			selectedItem = view.$carouselPieces.length;
		}
		if((selectedItem + 1) > (view.$carouselPieces.length + 1)){
			//rotate to the first element in the carousel
			selectedItem = 1;
		}
		
		var leftPos = parseInt($(view.$carouselPieces[selectedItem-1]).css('left'));
		
		if(leftPos > 0){
			var diffToCenter = leftPos;
			$.each(view.$carouselPieces, function(i, val){
				$(val).animate({
					'left': '-=' + diffToCenter + 'px'
				}, 500);
			});
		} else {
			var diffToCenter = (-1) * leftPos;
			$.each(view.$carouselPieces, function(i, val){
				$(val).animate({
					'left': '+=' + diffToCenter + 'px'
				}, 500);
			});
		}
		view.o.currentSlide = selectedItem;
		view.updateSelectedNav();
	},
	'selectedItem': function(slide){
		//go to the carousel position based on the number clicked
		var view = this;
		view.jumpToItem(parseInt($(slide.currentTarget).text()));
	},
	'shiftLeft': function( e ){
		//move all items in the carousel to the right
		var view = this;
		view.jumpToItem((view.o.currentSlide - 1));
	},
	'shiftRight': function( e ){
		//move all items in the carousel to the right
		var view = this;
		view.jumpToItem((view.o.currentSlide + 1));
	},
	'updateSelectedNav': function(){
		$(this.$el.find('.carousel_select').find('li')).removeClass('selected');
		$(this.$el.find('.carousel_select').find('li')[this.o.currentSlide - 1]).addClass('selected');
	}

});