/*--------------------------------------
		SLIDE D'IMAGES JQUERY

- developpeur : Pierre Bonnin




- PREREQUIS :


------------------------------------------------
. jquery v1.4.4 minimum >> site/js/jquery.js
------------------------------------------------

------------------------------------------------
.configuration
------------------------------------------------
au sein du HTML, il faut spécifier :
. le nombre d'images (commence à 0, donc si il y a 6 images, indiquer 5)
ex : <div id="nb_images" style="display:none;">5</div>

au sein du css il faut spécifier :
. la largeur de la div #conteneur_bandeau en pixels
ex : 
#conteneur_bandeau
{
	width:980px;
	height:585px;
	overflow:hidden;
	position:relative;
}

au sein du javascript :
- durée de l'animation : voir variable duree_animation
- interval entre chaque slide : voir variable temps_timer

------------------------------------------------
.la structure html suivante :
------------------------------------------------
<div id="nb_images" style="display:none;">5</div>

<div id="conteneur_bandeau">
	<div id="images_bandeau">
		<img src="site/images/images_bandeau/img1.jpg" alt="/" />
		<img src="site/images/images_bandeau/img2.jpg" alt="/" />
		<img src="site/images/images_bandeau/img3.jpg" alt="/" />
		<img src="site/images/images_bandeau/img4.jpg" alt="/" />
		<img src="site/images/images_bandeau/img5.jpg" alt="/" />
		<img src="site/images/images_bandeau/img6.jpg" alt="/" />
	</div>
</div>


------------------------------------------------
.le css suivant :
------------------------------------------------
#images_bandeau > img
{
	padding:0;
	margin:0;
	position:relative;
	float:left;
}

#conteneur_bandeau
{
	width:980px;
	height:585px;
	overflow:hidden;
	position:relative;
}

#images_bandeau
{
	width:10000px;
	margin-left:0;
}


------------------------------------------------
.pour provoquer un slide, les boutons appellent
------------------------------------------------
slidePlus(); >> avance
slideMoins(); >> recule

---------------------------------------*/

//------------------------------
// Variables de configuration
//------------------------------

// le temps que dure un slide (millisecondes)
var duree_animation = 400;

// le temps avant que le slide ne se reproduise
var temps_timer = 6000;

// nombre d'images (ne pas toucher, info fournie par le html)
var nb_images = 0;
// largeur de l'image (ne pas remplir, fourni par le html)
var largeur_image = 0;

// si le jquery est chargé
var jquery_ready = false;

// variable qui contiendra le timer
var minuteur = "";

//position actuelle du slide
var actuel = 0;

// Lorsque jquery est chargé
$(document).ready(function(){
	jquery_ready = true;
	//récup. le nombre d'images
	nb_images = $("#nb_images").html();
	//récup. la largeur d'une image
	largeur_image = $("#conteneur_bandeau").css('width');
	largeur_image = largeur_image.substr(0, largeur_image.length-2);
	//modifie le temps du timer en fonction du temps du slide
	temps_timer += duree_animation;
	
	$("#nb_images").hide(0);
	
	//démarrage du timer
	timer('slidePlus()');
 });
 

 // Minuteur
function timer(sens)
{
	minuteur = setTimeout(sens, temps_timer);
}


function goToSlide(num)
{
	//réinitialise le timer
	clearTimeout(minuteur);
	
	if(jquery_ready == true)
	{	
		$('#images_bandeau').animate({marginLeft:0 - (largeur_image*parseInt(num))},{queue:false,duration:duree_animation});
	}
	
	// enregistre la position du slide
	$('#position').html(num);
	// appel du minuteur
	timer('slidePlus()');
}


// Avancer le slide
function slidePlus()
{
	//réinitialise le timer
	clearTimeout(minuteur);
	
	if(jquery_ready == true)
	{		
		//si on est au bout
		if(actuel == nb_images)
		{
			//rembobine
			actuel = 0;
			$('#images_bandeau').animate({marginLeft:0},{queue:false,duration:duree_animation*2});
		}
		else
		{
			actuel++;
			//animation du slide
			$('#images_bandeau').animate({marginLeft:0 - (largeur_image*actuel)},{queue:false,duration:duree_animation});
		}
		
		// enregistre la position du slide
		$('#position').html(actuel);
		// appel du minuteur
		timer('slidePlus()');
	}
}


//Reculer le slide
function slideMoins()
{
	//réinitialise le timer
	clearTimeout(minuteur);
	
	if(jquery_ready == true)
	{
		//si on est au début
		if(actuel == 0)
		{
			//retour au bout
			actuel = nb_images;
			$('#images_bandeau').animate({marginLeft:0-(largeur_image*actuel)},{queue:false,duration:duree_animation*2});
		}
		else
		{
			actuel--;
			// animation du slide
			$('#images_bandeau').animate({marginLeft:0-(largeur_image*actuel)},{queue:false,duration:duree_animation});
		}
		
		
		// enregistre la position du slide
		$('#position').html(actuel);
		// appel du minuteur
		timer('slideMoins()');
	}
}