// JavaScript Document 
// Written using the tutorial from: http://jqueryfordesigners.com/video.php?f=infinite-carousel.flv
// TSJ - June 2010

(function($){
	$.fn.ddCarousel = function(options){
		
		var defaults = {  
			speed: 2000,  
			easingName : 'easeOutBack' 
		}  
		
		var options =  $.extend(defaults, options);		
		
		function repeat(str, n){
			return new Array(n + 1).join(str);	//used instead of a for loop to repeat a string n number of times
		}
		
		return this.each(function(){
			var o = options; 								  
			// > = direct descendant only, and not going further in - TSJ								  
			var $wrapper = $('> div', this).css('overflow', 'hidden'),
				$slider = $wrapper.find('> ul').width(99999),
				$items = $slider.find('> li'),
				$single = $items.filter(':first')
				
				singleWidth = $single.outerWidth(), //outerWidth = width inluding padding
				visible = Math.floor($wrapper.innerWidth() / singleWidth),
				currentPage = 1,
				pages = Math.ceil($items.length / visible);
				
				//console.log('singleWidth', singleWidth);
				//console.log('visible', visible);
				//console.log('pages', pages);

				//1. pad the pages with empty elements if required
				if($items.length % visible != 0){					
					$slider.append(repeat('<li class="empty">&nbsp;</li>', visible - ($items.length % visible)));
					$items = $slider.find('> li'); //reselect
				}

				//2 create the carousel padding on the left and right (cloned)
				$items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));			
				$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
				$items = $slider.find('> li'); //reselect
				
				//3.  reset the scroll positon
				$wrapper.scrollLeft(singleWidth * visible);
				
				//4. paging function get to all pages an loops back to page one at the end. (infinate loop)
				function gotoPage(page){
					var dir = page < currentPage	? -1 : 1,
						n = Math.abs(currentPage - page),
						left = singleWidth * dir * visible * n;
						
					$wrapper.filter(':not(:animated)').animate({
						scrollLeft : '+=' + left									   
					}, o.speed, o.easingName, function(){
						if(page>pages){
							$wrapper.scrollLeft(singleWidth * visible);
							page = 1;
						}else if(page==0){
							page = pages;
							$wrapper.scrollLeft(singleWidth * visible * pages);
						}
						currentPage = page;	
					});
				}
				//make this function global. That way it can be run from the firebug console
				//window.gotoPage = gotoPage;
				
				//5. insert the back and forward images
				$wrapper.before('<a href="#"><img id="scroll-next" class="scroll-buttons" src="/img/arrow-next.gif" alt="next" /></a><a href="#"><img id="scroll-prev" class="scroll-buttons" src="/img/arrow-prev.gif" alt="next" /></a>');
				
				//6. bind the back and forward links
				$('#scroll-prev', this).click(function(e){
					gotoPage(currentPage-1);													   
					e.preventDefault();	
				});
				
				$('#scroll-next', this).click(function(e){
					gotoPage(currentPage+1);
					e.preventDefault();										   
				});
		});
	};
	
})(jQuery);