/**
 * jQuery carrousel plugin
 * @name jquery-carrousel.js
 * @author DUPOUY Jérôme
 * @version 0.1
 * @date June 29, 2011
 * @category jQuery plugin
 * @copyright 
 * @license
 
 
=== CSS ===

.carrousel {
    overflow: hidden;
	width: 400px;
}
.carrousel .carrousel-content .carrousel-diapo {
    width: 400px;
    height: 300px;
    float: left;
    position: relative;
}
.carrousel .carrousel-content #diapo-1 { background-color: #8ECCED; }
.carrousel .carrousel-content #diapo-2 { background-color: #70B9E0; }
.carrousel .carrousel-content #diapo-3 { background-color: #55A7D4; }
.carrousel .carrousel-content #diapo-4 { background-color: #3B94C4; }
.carrousel .carrousel-content #diapo-5 { background-color: #247DAD; }

.carrousel .carrousel-content #diapo-2-1 { background-color: #8ECCED; }
.carrousel .carrousel-content #diapo-2-2 { background-color: #70B9E0; }
.carrousel .carrousel-content #diapo-2-3 { background-color: #55A7D4; }
.carrousel .carrousel-content #diapo-2-4 { background-color: #3B94C4; }
.carrousel .carrousel-content #diapo-2-5 { background-color: #247DAD; }

.carrousel .carrousel-content p {
    padding: 20px;
}
.carrousel a.carrousel-nav {
    padding: 5px;
}
.carrousel a.carrousel-nav.current {
    color: red;
}

=== HTML ===

======= HEAD =======
	
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery-carrousel.js"></script>
	<script type="text/javascript">
		<!--
		$(document).ready(function() {
			$('div.carrousel').carrousel(); 
		});
		-->
	</script>

======= BODY =======
	
	<div class="carrousel">
		<div class="carrousel-content">
			<div class="carrousel-diapo" id="diapo-1">
				<p>Diapo 1</p>
			</div>
			<div class="carrousel-diapo" id="diapo-2">
				<p>Diapo 2</p>
			</div>
			<div class="carrousel-diapo" id="diapo-3">
				<p>Diapo 3</p>
			</div>
			<div class="carrousel-diapo" id="diapo-4">
				<p>Diapo 4</p>
			</div>
			<div class="carrousel-diapo" id="diapo-5">
				<p>Diapo 5</p>
			</div>
		</div>
		<a href="#" class="carrousel-nav-previous">&#060;&#060;</a>
		<a href="#diapo-1" class="carrousel-nav current">1</a>
		<a href="#diapo-2" class="carrousel-nav">2</a>
		<a href="#diapo-3" class="carrousel-nav">3</a>
		<a href="#diapo-4" class="carrousel-nav">4</a>
		<a href="#diapo-5" class="carrousel-nav">5</a>
		<a href="#" class="carrousel-nav-next">&#062;&#062;</a>
	</div>
*/
(function($) {
	$.fn.carrousel=function(settings) {
		// Options
		settings = jQuery.extend({
			previous:	'a.carrousel-nav-previous',
			pager:		'',
			next: 		'a.carrousel-nav-next',
			//Si on a une navigation next/previous en place
			//		- Si lien dans structure de départ (<div class="carrousel"><a class="a.carrousel-nav-next"></a></div>) : rien de plus à faire
			//		- Si structure différente (liens déportés), on doit spécifier un sélecteur DIFFERENT de 'a.carrousel-nav-next' !!!!
			//Si pas de navigation en next/previous : rien de plus à faire
			timer:		5000,
			withAnchor: false
		},settings);
		
		$(this).each(function () {
			var self=$(this);
			
			var content=self.children('.carrousel-content');
			var section=content.find('.carrousel-diapo');
			var w=section.width();
			
			self.data('settings',settings);
			
			if (self.data('settings').withAnchor) {
				self.data('anchor',$('<a href="#" class="carrousel-diapo-hover-anchor"></a>'));
				self.after(self.data('anchor'));
			}
			
			if (self.find(self.data('settings').next).size()==0) {
				if (self.data('settings').next=='a.carrousel-nav-next' || $(self.data('settings').next).size()==0) {
					if (self.find('a.carrousel-nav-next').size()==0) {
						self.data('settings').next=$('<a class="carrousel-nav-next" href="#next">Next</a>');
						self.append(self.data('settings').next);
					}
					else self.data('settings').next=self.find('a.carrousel-nav-next');
				}
				else self.data('settings').next=$(self.data('settings').next);
			}
			else self.data('settings').next=self.find(self.data('settings').next);
			
			
			if (self.find(self.data('settings').previous).size()==0) {
				if (self.data('settings').previous=='a.carrousel-nav-previous' || $(self.data('settings').previous).size()==0) {
					self.data('settings').previous='';
				}
				else self.data('settings').previous=$(self.data('settings').previous);
			}
			else self.data('settings').previous=self.find(self.data('settings').previous);
			
			if (self.data('settings').pager!='') {
				if ($(self.data('settings').pager).size()==0) self.data('pager','');
				else self.data('pager',$(self.data('settings').pager));
			}
			if (self.data('settings').pager=='') {
				if (self.find('a.carrousel-nav').size()>0) {
					self.data('pager',$(self.find('a.carrousel-nav')));
				}
			}
			
			
			content.width(w*section.size());
			content.data('onMove',false);
			self.data('settings').next.click(function (e) {
				e.preventDefault();
				
				if (!content.data('onMove')) {
					(self.data('clearInterval'))();
					
					if (self.data('pager')!='') {
						self.data('pager').removeClass('current');
						self.data('pager').filter('[href="#'+section.eq(1).attr('id')+'"]').addClass('current');
					}
					
					content.animate({ marginLeft: '-='+w }, 500, function() {
						$(this).append(section.first());
						$(this).animate({ marginLeft: '+='+w }, 0);
						section=$(this).find('.carrousel-diapo');
						$(this).data('onMove',false);
						(self.data('setInterval'))();
					});
				}
				
				return false;
			});
			
			if (self.data('settings').previous!='') self.data('settings').previous.click(function (e) {
				e.preventDefault();
				
				if (!content.data('onMove')) {
					(self.data('clearInterval'))();
					
					if (self.data('pager')!='') {
						self.data('pager').removeClass('current');
						self.data('pager').filter('[href="#'+section.last().attr('id')+'"]').addClass('current');
					}
					
					content.prepend(section.last());
					content.animate({ marginLeft: '-='+w }, 0);
					
					content.animate({ marginLeft: '+='+w }, 1000, function () {
						section=$(this).find('.carrousel-diapo');
						
						$(this).data('onMove',false);
						(self.data('setInterval'))();
					});
				}
				
				return false;
			});
			
			
			if (self.data('pager')!='') {
				self.data('pager').removeClass('current').first().addClass('current');
				self.data('pager').click(function (e) {
					e.preventDefault();
					
					if (!content.data('onMove')) {
						(self.data('clearInterval'))();
						
						self.data('pager').removeClass('current');
						$(this).addClass('current');
						
						var targetPosition=section.size()-$($(this).attr('href')+' ~ .carrousel-diapo').size()-1;
						
						content.animate({ marginLeft: '-='+(w*targetPosition) }, 1000, function() {
							$(this).find('.carrousel-diapo:lt('+targetPosition+')').each(function () {
								content.append($(this));
							});
							
							$(this).animate({ marginLeft: 0 }, 0);
							section=$(this).find('.carrousel-diapo');
							
							$(this).data('onMove',false);
							(self.data('setInterval'))();
						});
					}
					
					return false;
				});
			}
			
			self.data(
				'setInterval',
				function () {
					self.data(
						'interval',
						window.setInterval(
							function () {
								self.data('settings').next.click();
							},
							self.data('settings').timer
						)
					);
					
					if (self.data('settings').withAnchor) {
						if (section.first().find('a').size()>0) {
							self.data('anchor').attr('href',section.first().find('a').attr('href'));
							self.data('anchor').css('display','block');
						}
					}
				}
			);
			
			self.data(
				'clearInterval',
				function () {
					window.clearInterval(self.data('interval'));
					content.data('onMove',true);
					
					if (self.data('settings').withAnchor) {
						self.data('anchor').css('display','none');
					}
				}
			);
			
			(self.data('setInterval'))();
		});
		
		//Retourne l'objet jQuery pour chaînage.
		return this;
	};
})(jQuery);