/*
 * jQuery Infinite Carousel
 * @author admin@catchmyfame.com - http://www.catchmyfame.com
 * @version 2.0.2
 * @date June 12, 2010
 * @category jQuery plugin
 * @copyright (c) 2009 admin@catchmyfame.com (www.catchmyfame.com)
 * @license CC Attribution-Share Alike 3.0 - http://creativecommons.org/licenses/by-sa/3.0/
 */

(function($){
	$.fn.extend({ 
		infiniteCarousel: function(options)
		{
			var defaults = 
			{
				transitionSpeed: 400,
				displayTime: 11000,
				displayProgressBar: true,
				displayThumbnails: true,
				displayThumbnailNumbers: true,
				thumbnailHeight: '20px',
				thumbnailFontSize: '12px',
				marginLeft: '107',
				easeLeft: 'linear',
				easeRight: 'linear',
				inView: 1,
				padding: '0px',
				advance: 1,
				autoStart: true,
				onSlideStart: function(){},
				onSlideEnd: function(){}
			}; 
		var options = $.extend(defaults, options); 
	
    		return this.each(function() {
    			var randID = Math.round(Math.random()*100000000); 
			var o=options; 
			var obj = $(this); 
			var autopilot = o.autoStart; 

			var numImages = $('ul.carousel > li', obj).length; // Number of images
			var imgHeight = $('ul.carousel li:first div', obj).height(); 
			var imgWidth = $('ul.carousel li:first div', obj).width();
			var marginLeft = o.marginLeft;
			
			if(o.inView > numImages-1) o.inView=numImages-1; // check to make sure inview isnt greater than the number of images. inview should be at least two less than numimages (otherwise hinting wont work and animating left may catch a flash), but one less can work
			$('h2.carousel', obj).hide(); // Hide any text paragraphs in the carousel
			$('p.carousel', obj).hide(); // Hide any text paragraphs in the carousel
			$(obj).css({'position':'relative','overflow':'hidden'}).width((imgWidth*o.inView)+(o.inView*parseInt(o.padding)*2)).height(imgHeight+(parseInt(o.padding)*2)); //,'overflow':'hidden'
			$('ul.carousel', obj).css({'list-style':'none','margin':'0','padding':'0','position':'relative'}).width(imgWidth*numImages); 
			$('ul.carousel > li', obj).css({'display':'inline','float':'left','padding':o.padding}); 

			// Move rightmost image over to the left
			$('ul.carousel > li:last', obj).prependTo($('ul.carousel', obj)); 
			$('ul.carousel', obj).css('left',-imgWidth-(parseInt(o.padding)*2)+'px').width(9999); 

			// Animate progress bar
			function startProgressBar(barTime)
			{
				barTime = (barTime==null)? o.displayTime:barTime; 

				for (i=0; i<=numImages; i++) {
				  $("#test"+i).width('0').height(20).css({'background-color':'#FFF16E','border-top':'1px solid #DDDDDD'}); 
				  $("#test"+i).animate({'width':'100%'},barTime); 	
				  }
			}

			// Build textholder div(s) as wide as one image and as tall as the textholderHeight option
			
			var containerBorder = parseInt($(obj).css('border-bottom-width')) + parseInt($(obj).css('border-top-width')); 
			if(isNaN(containerBorder)) containerBorder = 0; // IE returns NaN for $(obj).css('border-bottom-width')
			var containerPaddingLeft = parseInt($(obj).css('padding-left')); // Normally we'd do both left and right but only left matters here

			if(o.displayThumbnails)
			{
				function thumbclick(event)
				{
					target_num = this.id.split('_'); // we want target_num[1]
					if(viewable[0] != target_num[1])
					{
						status='pause'; 
						$('#progress'+randID).stop().fadeOut(); 
						clearTimeout(clearInt); 
						$('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click'); // Unbind the thumbnail click event until the transition has ended
						autopilot = 0; 
						setTimeout(function(){$('#play_pause_btn'+randID).css('background-position','0 -16px')},o.transitionSpeed); 
					}
					if(target_num[1] > viewable[0])
					{
						diff = target_num[1] - viewable[0]; 
						moveLeft(diff); 
					}
					if(target_num[1] < viewable[0])
					{
						diff = viewable[0]- target_num[1]; 
						moveRight(diff); 
					}
				}

				var viewable = []; // track which images are being displayed
				var unviewable = []; // track which images are being displayed
				
				// Build thumbnail viewer and thumbnail divs
				$(obj).after('<div id="thumbs'+randID+'" style="position:relative; overflow:auto; clear:left; text-align:left; padding: 15px 0 30px;"></div>'); 
				for(i=0; i<=(numImages-1); i++)
				{
					thumb = $('img:eq('+(i+1)+')', obj).attr('src'); 
					$('#thumbs'+randID).append('<div class="thumb" id="thumb'+randID+'_'+(i+1)+'" style="cursor:pointer; display:inline; float:left; width:'+parseFloat(imgWidth-marginLeft)/numImages+'px; height:'+o.thumbnailHeight+'; line-height:'+o.thumbnailHeight+'; padding:0; overflow:hidden; text-align:center; border:1px solid #DDDDDD; color: #7F7F7F; font-weight: normal; background-color:transparant; margin-right:-1px; font-size:'+o.thumbnailFontSize+'; font-family:Arial;"><span style="position: relative; float: left; z-index: 1; clear: both; left: 0; width:'+parseFloat(imgWidth-marginLeft)/numImages+'px; background-color: #FFFFFF;">'+($('ul.carousel > li:eq('+(i+1)+') p.carousel', obj).html())+'</span><div style="float: left; position: relative; left: 0; top: -21px; z-index: 0; " id="test'+(i+1)+'"></div></div>'); 
					
					if(i<=o.inView) {
						// start actieve tab
						$('#thumb'+randID+'_'+i).css({'color':'#000000','font-weight':'bold','background-color':'#FFFFFF'}); 
						$('#thumb'+randID+'_'+i+' span').css({'background-color':'transparent'}); 
						}
					unviewable.push(i+1); 
				}
				// Initialize viewable/unviewable arrays
				for(i=1; i<=o.inView; i++) viewable.push(unviewable.shift()); 

				// Next two lines are a special case to handle the first list element which was originally the last
				thumb = $('img:first', obj).attr('src'); 
				$('#thumb'+randID+'_'+numImages).html('<span style="position: relative; float: left; z-index: 1; clear: both; left: 0; width:'+parseFloat(imgWidth-marginLeft)/numImages+'px; background-color: #FFFFFF;">'+$('ul.carousel > li:first p.carousel', obj).html()+'</span><div style="float: left; position: relative; left: 0; top: -21px; z-index: 0; " id="test'+numImages+'"></div></div>'); 	
			
				$('#thumbs'+randID+' div.thumb').hover(function(){$(this).animate({'opacity':1},0)},function(){if(viewable[0]!=this.id.split('_')[1]) $(this).animate({'opacity':1},0)}); // add hover to thumbs
				// Assign click handler for the thumbnails. Normally the format $('.thumb') would work but since it's outside of our object (obj) it would get called multiple times
				$('#thumbs'+randID+' div').bind('click', thumbclick); // We use bind instead of just plain click so that we can repeatedly remove and reattach the handler
				
				if(!o.displayThumbnailNumbers) $('#thumbs'+randID+' div').text(''); 
			}

			function preMove()
			{
				if(o.displayThumbnails) for(i=1; i<=numImages; i++) {
					$('#thumb'+randID+'_'+i).css({'border-color':'#DDDDDD','color':'#7F7F7F','font-weight':'normal','background-color':'transparent'}).animate({'opacity':1},0); 
					$('#thumb'+randID+'_'+i+' span').css({'background-color':'#FFFFFF'}); 
					}
			}

			function postMove()
			{
				if(o.displayThumbnails) for(i=0; i<viewable.length; i++) {
					// (variabele) actieve tab
					$('#thumb'+randID+'_'+viewable[i]).css({'color':'#000000','font-weight':'bold','background-color':'#FFFFFF'}); 	
					$('#thumb'+randID+'_'+viewable[i]+' span').css({'background-color':'transparent'}); 	
					}
				if(o.displayThumbnails) $('#thumbs'+randID+' div').unbind('click').bind('click', thumbclick).css({'cursor':'pointer'}); 
				ary=[]; 
				for(x=1; x<=o.inView; x++){ary.push($('img:eq('+x+')',obj).attr('src'))}
				o.onSlideEnd.call(this,ary); 
			}

			function moveLeft(dist)
			{
				if(dist==null) dist=o.advance; 
				preMove(); 
				if(o.displayThumbnails)
				{
					for(i=1; i<=dist; i++){
						viewable.push(unviewable.shift()); 
						unviewable.push(viewable.shift()); 
					}
				}
				if(o.displayTime == 0){clearInterval(clearInt); } // If running a contonuous show with no display time, fist clear the interval. Then below, recursively call moveLeft
				$('ul.carousel > li:lt('+dist+')', obj).clone(true).insertAfter($('ul.carousel > li:last', obj)); // Copy the first image (offscreen to the left) to the end of the list (offscreen to the right)
				o.onSlideStart.call(this,viewable,'left'); 
				$('ul.carousel', obj).animate({left:-imgWidth*(dist+1)-(parseInt(o.padding)*(dist+1))*2},o.transitionSpeed,o.easeLeft,function(){ // Animate the entire list to the left
					$('ul.carousel > li:lt('+dist+')', obj).remove(); // When the animation finishes, remove the first image (on the left). It has already been copied to the end of the list (right)
					$(this).css({'left':-imgWidth-parseInt(o.padding)*2}); 
					if(o.displayProgressBar && autopilot) startProgressBar(); 
					postMove(); 
					if(o.displayTime == 0){moveLeft(); }
				}); 
			}
			function moveRight(dist)
			{
				if(dist==null) dist=o.advance; 
				preMove(); 
				if(o.displayThumbnails)
				{
					for(i=1; i<=dist; i++){
						viewable.unshift(unviewable.pop()); 
						unviewable.unshift(viewable.pop()); 
					}
				}
				$('ul.carousel > li:gt('+(numImages-(dist+1))+')', obj).clone(true).insertBefore($('ul.carousel > li:first', obj)); // Copy rightmost (last) li and insert it after the first li
				o.onSlideStart.call(this,viewable,'right'); 
				$('ul.carousel', obj).css('left',-(imgWidth*(dist+1))-(parseInt(o.padding)*((dist+1)*2)))
					.animate({left:-imgWidth-(parseInt(o.padding)*2)},o.transitionSpeed,o.easeRight,function(){
						$('ul.carousel > li:gt('+(numImages-1)+')', obj).remove(); 
						postMove(); 
					}); 
			}

			// Kickoff the show
			if(autopilot)
			{
				$("#carousel").show();

				var clearInt = setInterval(function(){moveLeft(); },o.displayTime+o.transitionSpeed); 
				if(o.displayProgressBar) startProgressBar(o.displayTime+o.transitionSpeed); 
				} 
				else {status='pause'; $('#play_pause_btn'+randID).css({'background-position':'0 -16px'}); }
 		}); 
	}
	}); 
})(jQuery);