$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 165;
var slides = $('.affichage_prod');
var numberOfSlides = slides.length;

var retour = true;
var tempsTransition = 1000;
var affichePlayPause = true;
var lectureAutomatique = false;
var tempsAttente = 6000;

var icones = new Array();
	icones['play'] = '/images/cbody/page_evenementiel/play.png';
	icones['pause'] = '/images/cbody/page_evenementiel/pause.png';
var interval;
var lectureEnCours = false;	

// Supprime la scrollbar en JS
$('#detail_prod_contain').css('overflow', 'hidden');

slides
.wrapAll('<div id="slideInner"></div>')
// on met tous les slides en float:left pour qu'il s'affichent de manière horizontale
.css({
'float' : 'left',
'width' : slideWidth
});

// La longueur de #slideInner équivaut à la somme de la longueur de tous les slides
$('#slideInner').css('width', slideWidth * numberOfSlides);

// Insert les flèches de gauche et de droite
$('#detail_prod')
.prepend('<span class="control" id="leftControl">Move left</span>')
.append('<span class="control" id="rightControl">Move right</span>');

// Cache la flèche de gauche au début
manageControls(currentPosition);

// crée un écouteur pour l'évènement de type clic sur les div qui ont la classe .control
$('.control')
.bind('click', function(){
// Determine une nouvelle position
  currentPosition = ($(this).attr('id')=='rightControl')
? currentPosition+1 : currentPosition-1;

  //Cache ou montre les flèches
  manageControls(currentPosition);
  // Move slideInner using margin-left
  $('#slideInner').animate({
	'marginLeft' : slideWidth*(-currentPosition)
  });
});
/*
// manageControls: Cache ou montre les flèches de contrôles en fonction de la position
function manageControls(position){
	// Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() }
	else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
	if(position==numberOfSlides-4){ $('#rightControl').hide() }
	else{ $('#rightControl').show() }
	}
}
*/
 // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
  function manageControls(position){
    // Cache la fleche "précédent" si on est sur le premier slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides-4 && retour == false){
		$('#rightControl').hide();
	} else {
		$('#rightControl').show();
	}
	if(position == numberOfSlides-3 && retour == true){
		currentPosition = 0;
		 $('#leftControl').hide();
	}
	if(numberOfSlides < 5){
		 $('#leftControl').hide();
		 $('#rightControl').hide();
	}
  }
/*
function start() {
  	lectureEnCours = true;
        interval = setInterval(suivant, tempsAttente );
}

function suivant(){
	$('#rightControl').click();
}

function pause() {
  	lectureEnCours = false;
        clearInterval(interval);
}

//Si le diapo est activé 
if(lectureAutomatique == true){
  start();
}

if(affichePlayPause == true){
	$('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
	if(lectureAutomatique == true){
		$('#navDiapo').attr('src',icones['pause']);
	}else{
		$('#navDiapo').attr('src',icones['play']);	
	}
	$('#navDiapo').bind('click', function(){
		if(lectureEnCours == true){
			$(this).attr('src',icones['play']);
			pause();
		}else{
			$(this).attr('src',icones['pause']);
			start();
		}
	});
}*/
});