//configuration possible
var exemple = {
	mode: 'slide',				//SLIDE ou FADE
	direction: 'horizontal',	//HORIZONTAL ou VERTICAL [defaut : HORIZONTAL]		UNIQUEMENT en mode SLIDE
	range: 3,					//NB d'items à scroller [default : 1]				UNIQUEMENT en mode SLIDE
	viewport: {					//Dimensions du carousel							OBLIGATOIRE
		width: 680,				//Largeur											OBLIGATOIRE
		height: 240				//Hauteur
	},
	pagination: true,			//Pagination complète [default : false]
	duration: 0.6,				//Durée totale de l'animation
	autoDefil: 1,				//Vitesse de défilement automatique
	lang: {						//Traductions										OBLIGATOIRE
		next: 'next',			//next												OBLIGATOIRE
		prev: 'previous'		//previous											OBLIGATOIRE
	}
}
/******/
function makeCarousel(divID, config){
	if(typeof(config.direction) != 'undefined' && config.direction == 'vertical'){
		var cumulativeHeight = 0;
		$('#'+divID+' > li').each(function(){
			$(this).attr('offset', cumulativeHeight);
			cumulativeHeight += $(this).outerHeight(true);
		});
	}
	else{
		config.direction = 'horizontal';
		var cumulativeWidth = 0;
		$('#'+divID+' > li').each(function(){
			$(this).attr('offset', cumulativeWidth);
			cumulativeWidth += $(this).outerWidth(true);
		});
	}
	var width = '';
	var height = '';
	//Si viewport est défini
	if(typeof(config.viewport) != 'undefined'){
		//Si on veut forcer la largeur du viewport
		if(typeof(config.viewport.width) != 'undefined'){
			width = 'width:'+config.viewport.width+'px;';
		}
		//Si on veut forcer la hauteur du viewport
		if(typeof(config.viewport.height) != 'undefined'){
			height = 'height:'+config.viewport.height+'px;';
		}
	}
	//Le nombre d'item à faire défiler (par défaut : 1)
	if(typeof(config.range) != 'undefined'){
		$('#'+divID).attr('range', config.range);
	}
	else{
		config.range = 1;
		$('#'+divID).attr('range', 1);
	}
	//On choisi le mode de diffusion du diaporama si il na pas été défini (par défaut : fondu)
	if(typeof(config.mode) == 'undefined'){
		config.mode = 'fade';
	}
	//On applique des propriétés CSS
	/***par défaut, le flottement est à gauche***/
	var floatSide = 'left';
	if(typeof($('#'+divID).css('float')) != 'undefined'){
		floatSide = $('#'+divID).css('float');
	}
	switch(config.mode){
		case 'fade':
			$('#'+divID+' > li').hide();
			$('#'+divID+' > li:eq(0)').show();
			var pTop = parseInt($('#'+divID).css('padding-top'));
			var pLeft = parseInt($('#'+divID).css('padding-left'));
			var pRight = parseInt($('#'+divID).css('padding-top'));
			var pBottom = parseInt($('#'+divID).css('padding-left'));
			$('#'+divID).css('width', (config.viewport.width-pLeft-pRight)+'px').css('height', (config.viewport.height-pTop-pBottom)+'px');
			$('#'+divID+' > li').css('position', 'absolute').css('left', pLeft+'px').css('top', pTop+'px');
			break;
		case 'slide':
			if(typeof(config.direction) != 'undefined' && config.direction == 'vertical'){
				$('#'+divID).css('float', 'left').css('position', 'relative').css('left', '0').css('height', cumulativeHeight+'px');
				$('#'+divID+' > li').css('float', 'left');
			}
			else{
				$('#'+divID).css('float', 'left').css('position', 'relative').css('left', '0').css('width', cumulativeWidth+'px');
				$('#'+divID+' > li').css('float', 'left');
			}
			break;
	}
	//Si on a au moins 2 éléments dans le carousel
	if($('#'+divID+' > li').length > 1){
		//Si on veut une pagination complete
		if(config.type != 'special')
		{
			if(typeof(config.pagination) != 'undefined' && config.pagination){$('#'+divID).after(makeCarouselPagination('full', config.mode, divID, config.lang, config.duration, config.direction));}
			else{$('#'+divID).after(makeCarouselPagination('simple', config.mode, divID, config.lang, config.duration, config.direction));}
		}
		else
		{
			$('.carousel li .content_slide .etape').after('<div id="pagination"><a href="#" class="prev step" onclick="carouselPrev(\''+config.mode+'\', \''+divID+'\', \''+config.duration+'\'); return false;">'+config.lang.prev+'</a><a href="#" class="next step" onclick="carouselNext(\''+config.mode+'\', \''+divID+'\', \''+config.duration+'\'); return false;">'+config.lang.next+'</a></div>');	
		}
		
		//On entoure la liste d'un div faisant la fenêtre
		$('#'+divID).wrap('<div class="carouselWindow" style="float:'+floatSide+';position:relative;overflow:hidden;'+width+height+'" />');
		//on indique la longueur, et l'item en cours du carousel et le statut
		$('#'+divID).attr('length', $('#'+divID+' > li').length).attr('current', 0).attr('status', 'ok');
		//Si on a choisi un défilement automatique (par défaut : manuel)
		$('#'+divID).attr('mode', 'manual');
		if(typeof(config.autoDefil) != 'undefined'){
			$('#'+divID).attr('mode', 'auto');
			var timer = config.autoDefil*1000;
			setTimeout(function(){
				carouselRecursiveNext(config.mode, divID, config.duration, timer, config.direction);
			}, timer);
		}
	}
}
function makeCarouselPagination(pagintationType, mode, divID, lang, duration, direction){
	var pagination = '<ul id="'+divID+'Pagination" class="pagination">';
	pagination += '<li class="prev" onclick="carouselPrev(\''+mode+'\', \''+divID+'\', \''+duration+'\', \''+direction+'\');">'+lang.prev+'</li>';
	if(pagintationType == 'full'){
		var ctp = 0;
		$('#'+divID+' > li').each(function(){
			var className = '';
			if(ctp == 0){className = ' class="current"';}
			pagination += '<li'+className+' onclick="carouselAccess(\''+mode+'\', \''+divID+'\', '+duration+', '+ctp+', \''+direction+'\');">'+(ctp+1)+'</li>';
			ctp++;
		});
	}
	pagination += '<li class="next" onclick="carouselNext(\''+mode+'\', \''+divID+'\', \''+duration+'\', false, \''+direction+'\');">'+lang.next+'</li>';
	pagination += '</ul>';
	return pagination;
}
function carouselRecursiveNext(mode, divID, duration, timer, direction){
	if($('#'+divID).attr('mode') == 'auto'){
		carouselNext(mode, divID, duration, true, direction);
		setTimeout(function(){
			carouselRecursiveNext(mode, divID, duration, timer, direction);
		}, timer);
	}
}
function carouselAccess(mode, divID, duration, id, direction){
	$('#'+divID).attr('mode', 'manual');
	if($('#'+divID).attr('status') != 'running'){
		$('#'+divID).attr('status', 'running');
		var previous = $('#'+divID).attr('current');
		$('#'+divID).attr('current' , id);
		carouselReachItem(previous, id, divID, mode, duration, direction);
	}
}
function carouselPrev(mode, divID, duration, direction){
	$('#'+divID).attr('mode', 'manual');
	if($('#'+divID).attr('status') != 'running'){
		$('#'+divID).attr('status', 'running');
		var current = parseInt($('#'+divID).attr('current'));
		var length = parseInt($('#'+divID).attr('length'));
		var range = parseInt($('#'+divID).attr('range'));
		var previous = current;
		current -= range;
		if(current < 0 && previous == 0){
			current = $('#'+divID+' > li').length - range;
		}
		else if(current < 0 && previous > 0){
			current = 0;
		}
		$('#'+divID).attr('current' , current);
		var next = current;
		carouselReachItem(previous, next, divID, mode, duration, direction);
	}
}
function carouselNext(mode, divID, duration, defilAuto, direction){
	if(!defilAuto){
		$('#'+divID).attr('mode', 'manual');
	}
	if($('#'+divID).attr('status') != 'running'){
		$('#'+divID).attr('status', 'running');
		var current = parseInt($('#'+divID).attr('current'));
		var length = parseInt($('#'+divID).attr('length'));
		var range = parseInt($('#'+divID).attr('range'));
		var previous = current;
		current += range;
		if(current > ($('#'+divID+' > li').length - range) && current < $('#'+divID+' > li').length){
			current = $('#'+divID+' > li').length - range;
		}
		if(current >= $('#'+divID+' > li').length){
			current = 0;
		}
		$('#'+divID).attr('current' , current);
		var next = current;
		carouselReachItem(previous, next, divID, mode, duration, direction);
		if(current > ($('#'+divID+' > li').length - range)){
			$('#'+divID).attr('current' , ($('#'+divID+' > li').length));
		}
	}
}
function carouselReachItem(previous, next, divID, mode, duration, direction){
	if($('#'+divID+'Pagination li:not(.prev, .next):eq('+next+')').length){
		$('#'+divID+'Pagination li:not(.prev, .next)').removeClass('current');
		$('#'+divID+'Pagination li:not(.prev, .next):eq('+next+')').addClass('current');
	}
	switch(mode){
		case 'fade':
			duration = Math.floor((duration*1000)/2);
			$('#'+divID+' > li:eq('+previous+')').fadeOut(duration, function(){
				$('#'+divID+' > li:eq('+next+')').fadeIn(duration, function(){
					$('#'+divID).attr('status', 'ok');
				});
			});
			break;
		case 'slide':
			duration = duration*1000;
			var offset = $('#'+divID+' > li:eq('+next+')').attr('offset');
			if(direction == 'vertical'){
				$('#'+divID).animate({
					'top': '-'+offset+'px'
				}, duration, function(){
					$('#'+divID).attr('status', 'ok');
				});
			}
			else{
				$('#'+divID).animate({
					'left': '-'+offset+'px'
				}, duration, function(){
					$('#'+divID).attr('status', 'ok');
				});
			}
			break;
	}
}