jQuery Carousel

gistfile1.js

;(function($) {
	$.fn.carousel = function(options) {
		
		return this.each(function() {
			var carousel = {};

			carousel.opts = $.extend({}, $.fn.carousel.defaults, options);

			carousel.init = function($base) {
				var _this = this,
					pagingHtml = '';

				_this.$base = $base;
				_this.$wrapper = _this.$base.find('.carousel-wrapper');
				_this.$pages = _this.$base.find('.page');
				_this.$current = _this.$pages.eq(0);
				_this.$current.siblings().css('left', '9999px');
				_this.inAction = false;

				//If we actually have pages
				if(_this.$pages.length > 1) {

					//Build the pager and append it
					if(_this.opts.pager) {

						pagingHtml += '<div class="nav-pager"><a href="#1" class="alt current">1</a>';

						for(var i = 2; i < _this.$pages.length + 1; i++) {
							pagingHtml += '<a href="#'+i+'" class="alt">'+i+'</a>';
						}

						pagingHtml += '</div>';

						//Append the paging
						_this.$pager = $(pagingHtml);
						_this.$base.append(_this.$pager);

						//Bind clicks to paging links
						_this.$pager.delegate('a', 'click', _this.paging);
					}

					//Bind prev next clicks
					_this.$base.find('.nav-prev-next').delegate('a', 'click', _this.prevNext);

				}

			};

			carousel.prevNext = function(e) {
				var $this = $(this),
					_this = carousel,
					direction = 1,
					$next = '';

				//As long as it's not already moving
				if(!_this.inAction) {

					_this.inAction = true;

					if(_this.opts.pager) {
						var $pagerCurrent = _this.$pager.find('a.current'),
							pagerCurrentSpot = $pagerCurrent.prevAll().length,
							newPagerCurrent = 0;
					}

					//If the previous button is clicked
					if($this.hasClass('prev')) {
						$next = _this.$current.prev();

						if(_this.opts.pager) {
							newPagerCurrent = pagerCurrentSpot - 1;
						}

						//If there is no previous, go to the end
						if($next.length === 0) {
							$next = _this.$pages.eq(-1);

							if(_this.opts.pager) {
								newPagerCurrent = _this.$pages.length - 1;
							}
						}
						direction = -1;
					} else { //If the next button is clicked
						$next = _this.$current.next();

						if(_this.opts.pager) {
							newPagerCurrent = pagerCurrentSpot + 1;
						}

						//If there is no next, go to the beginning
						if($next.length === 0) {
							$next = _this.$pages.eq(0);

							if(_this.opts.pager) {
								newPagerCurrent = 0;
							}
						}
					}

					//Move the page and adjust the paging position
					_this.move($next, direction);

					if(_this.opts.pager) {
						_this.adjustPaging($pagerCurrent, newPagerCurrent);
					}
				}

				e.preventDefault();
			};

			carousel.adjustPaging = function($pagerCurrent, newPagerCurrent) {
				var _this = this;

				$pagerCurrent.removeClass('current');
				_this.$pager.find('a').eq(newPagerCurrent).addClass('current');
			};

			carousel.paging = function(e) {
				var $this = $(this),
					_this = carousel,
					$pagerCurrent = _this.$pager.find('a.current'),
					pagerCurrentSpot = $pagerCurrent.prevAll().length,
					newPagerCurrent = $this.prevAll().length,
					direction = (newPagerCurrent > pagerCurrentSpot) ? 1 : -1;

				if(!$this.hasClass('current')) { //If it's not the current page, then go to that page
					//As long as it's not already moving
					if(!_this.inAction) {

						_this.inAction = true;

						_this.move(_this.$pages.eq(newPagerCurrent), direction);
						_this.adjustPaging($pagerCurrent, newPagerCurrent);
					}
				}

				e.preventDefault();
			};

			carousel.move = function($next, direction) {
				var _this = this,
					delta = direction * 100,
					newHeight = $next.height();

				$next.css('left', delta + '%');

				//Move the current one of the screen and fade it out
				_this.$current.animate({
					left: '-='+delta+'%',
					opacity: 0
				}, 750);

				//Move the new one in and fade it in
				$next.animate({
					left: '-='+delta+'%',
					opacity: 1.0
				}, 750);

				//Adjust the height if necessary
				_this.$wrapper.animate({
					height: newHeight
				}, 750);

				//Adjust the classes on the pages
				_this.$current.removeClass('current-page');
				_this.$current = $next;
				_this.$current.addClass('current-page');

				//Ok, now we can move again
				setTimeout(function() {
					_this.inAction = false;
				}, 750);
			};
			
			carousel.init($(this));
		});
	};
	
	// default options
	$.fn.carousel.defaults = {
		pager: true
	};
})(jQuery);