function start(imgArray){
	//Configuration
		  var retour = true;
		  var tempsTransition = 500;
		  var affichePlayPause = false;
		  var lectureAutomatique = true;
		  	var tempsAttente = 6000;
			
		  var icones = new Array();
		  		icones['play'] = 'img/play_slider.png';
		  		icones['pause'] = 'img/pause_slider.png';	
			
		  var currentPosition = 0;
		  var slides = $j('.slide');
		  var numberOfSlides = slides.length;
		  var interval;
		  var lectureEnCours = false;
		  var slideInnerW = 0;
  // Supprime la scrollbar en JS
  $j('#slidesContainer').css('overflow', 'hidden');
  
  // affiche les titres et nom d'artistes qui étaient cachés
	$j(".jsH").each(
		function(){
			$j(this).css('visibility', 'visible');
		}
	)
	
	//cache le noscript
	$j("#slideNs").css('display','none');
  
  //Affiche le slideshow (une fois loadé) et met une image transparente de fond
  var bgSrc = "img/display/descBar.png";
  $j("#slideshow").css('display', 'block');
  $j("#slideshow").css('backgroundImage', 'url('+bgSrc+')');

  

 
  // Attribue  #slideInner  à toutes les div .slide
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : 'auto',
	  'margin-left' : '20px',
	  'margin-right' : '20px',
	  'marginTop' : '10px'
    });
	
 
  // Longueur de #slideInner égale au total de la longueur de tous les slides
  //alert (slides[0].width());
  	for (var i =0; i < numberOfSlides; i++) {
	  slideInnerW += $j(slides[i]).width();
	}
	  slideInnerH = $j(slides[0]).height();
	
  //Ajuste le div slideshow à la taille de la première slide;
	$j("#slideshow").animate( { width: $j(slides[currentPosition]).width()+45}, { queue:false, duration:tempsTransition });
	$j("#slideshow").animate( { height: $j(slides[currentPosition]).height()+70 }, { queue:false, duration:tempsTransition });
	$j("#slidesContainer").animate( { width: $j(slides[currentPosition]).width()+45}, { queue:false, duration:tempsTransition });
	$j("#slidesContainer").animate( { height: $j(slides[currentPosition]).height()+70}, { queue:false, duration:tempsTransition });
	affichePlayBtn();
	
	//met une image dans le premier slideSpan
	var pathArray = imgArray.split(';');
	PreloadImage(pathArray[currentPosition], currentPosition);
	//var thisSlide = "#slideNo"+currentPosition;
	//$j(thisSlide).html("<img src='slideshow/"+pathArray[currentPosition]+"'>");
	//alert (pathArray[currentPosition]);

	
  $j('#slideInner').css({
						'width' : slideInnerW+(numberOfSlides*975)						  
	});

 
  // Insert controls in the DOM
  $j('#navBtn')
    .prepend('<span class="control" id="leftControl">Précédent</span>')
    .append('<span class="control" id="rightControl">Suivant</span>');
 
 
  
  // Hide left arrow control on first load
  manageControls(currentPosition);

  //Crée un écouteur d'évènement de type clic sur les classes .control
  $j('.control')
    .bind('click', function(){
							


	
	if (lectureEnCours == true) {
		clearInterval(interval);
		interval = setInterval(suivant, tempsAttente );	
	}
							
							
    // Determine la nouvelle position
	currentPosition = ($j(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	if(currentPosition == numberOfSlides && retour == false ){
		currentPosition--;
		pause();
	}
	
	// Cache ou montre les controles
    manageControls(currentPosition);
	var where = 0;
	for (var j =0; j < currentPosition; j++) {
		where += $j(slides[j]).width();
	}
    // Fais bouger le slide
    $j('#slideInner').animate({
      'marginLeft' : -where-(currentPosition*40)
    },tempsTransition);
	

	
	
	$j("#slideshow").animate( { width: $j(slides[currentPosition]).width()+45}, { queue:false, duration:tempsTransition });
	$j("#slideshow").animate( { height: $j(slides[currentPosition]).height()+70 }, { queue:false, duration:tempsTransition });
	$j("#slidesContainer").animate( { width: $j(slides[currentPosition]).width()+45}, { queue:false, duration:tempsTransition });
	$j("#slidesContainer").animate( { height: $j(slides[currentPosition]).height()+70}, { queue:false, duration:tempsTransition });

	
	//met une image dans le bon slideSpan
	PreloadImage(pathArray[currentPosition], currentPosition);
	//var thisSlide = "#slideNo"+currentPosition;
	//$j(thisSlide).html("<img src='slideshow/"+pathArray[currentPosition]+"'>");
	
	
//	document.getElementById('slideInner').style.marginTop = "20px";
	
  });
	
 
  // 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){ $j('#leftControl').css('visibility', 'hidden') } else{ $j('#leftControl').css('visibility', 'visible') }
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides-1 && retour == false){
		$j('#rightControl').css('visibility', 'hidden')
	} else {
		$j('#rightControl').css('visibility', 'visible')
	}
	if(position == numberOfSlides && retour == true){
		currentPosition = 0;
		 $j('#leftControl').css('visibility', 'hidden')
	}
  }
  
  function suivant(){

	$j('#rightControl').click();
	}
  function start() {
  	lectureEnCours = true;
    interval = setInterval(suivant, tempsAttente );
  }
  function pause() {
  	lectureEnCours = false;
   clearInterval(interval);
	if(lectureAutomatique == false){
		$j('#navDiapo').attr('src',icones['pause']);
	}else{
		$j('#navDiapo').attr('src',icones['play']);	
	}
  }
  
 //Si le diapo est activé 
if(lectureAutomatique == true){
  start();
}

function affichePlayBtn() {
	if(affichePlayPause == false){
		$j('#navBtn').append('<span id="navDiapo"><img id="navDiapoImg" src="" alt="Navigation diaporama" /></span>');
		if(lectureAutomatique == true){
			$j('#navDiapoImg').attr('src',icones['pause']);
		}else{
			$j('#navDiapoImg').attr('src',icones['play']);	
		}
		$j('#navDiapoImg').bind('click', function(){
			if(lectureEnCours == true){
				$j(this).attr('src',icones['play']);
				pause();
			}else{
				$j(this).attr('src',icones['pause']);
				start();
			}
		});
	}
	affichePlayPause = true;
	//document.getElementById('slideInner').style.marginTop = "200px";
}
 


function PreloadImage(imgSrc, where){
 	var there = "#slideNo"+where;
  	var img = new Image();   
	$j(there).css("background", "url(img/display/loading.gif) no-repeat center center");
	
	$j(img).load(function () {      
		clearInterval(interval);
		interval = setInterval(suivant, tempsAttente );
		$j(there).css("background", "url(img/display/blank.gif) no-repeat");
		//$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already    
		$j(there).html("<img src='slideshow/"+imgSrc+"'>");
		$j(there).css("opacity","0");            
		$j(there).animate({opacity:1},{duration:1000, queue:false});	
	}).error(function () {            
		// notify the user that the image could not be loaded        
	}).attr('src', "slideshow/"+imgSrc);    
}



  	
};