// JavaScript Document
$(document).ready(function() {
	$("#ul_menu a").hover(function(){  
		$(this).children("span").stop(true,true).fadeOut();  
	}, function(){  
		$(this).children("span").fadeIn();  
	})
	
	$("#onglets").tabs();
	
	//Configuration
	var retour = true;
	var tempsTransition = 1500;
	var affichePlayPause = false;
	var lectureAutomatique = true;
	var lectureAutomatique1 = false;
	var lectureAutomatique2 = false;
	var lectureAutomatique3 = false;
	var lectureAutomatique4 = false;
	var tempsAttente = 6000;
	
	var icones = new Array();
	icones['play'] = '../images/play_slider.png';
	icones['pause'] = '../images/pause_slider.png';	
	
	var currentPosition = 0;
	var currentPosition1 = 0;
	var currentPosition2 = 0;
	var currentPosition3 = 0;
	var currentPosition4 = 0;
	var slideWidth0 = 223;
	var slideWidth = 500;
	var slides = $('.slide');
	var slides1 = $('.slide1');
	var slides2 = $('.slide2');
	var slides3 = $('.slide3');
	var slides4 = $('.slide4');
	var numberOfSlides = slides.length;
	var numberOfSlides1 = slides1.length;
	var numberOfSlides2 = slides2.length;
	var numberOfSlides3 = slides3.length;
	var numberOfSlides4 = slides4.length;
	var interval;
	var interval1;
	var interval2;
	var interval3;
	var interval4;
	var lectureEnCours = false;

	// Supprime la scrollbar en JS
	$('#slidesContainer').css('overflow', 'hidden');
	$('#slidesContainer1').css('overflow', 'hidden');
	$('#slidesContainer2').css('overflow', 'hidden');
	$('#slidesContainer3').css('overflow', 'hidden');
	$('#slidesContainer4').css('overflow', 'hidden');

	// Attribue  #slideInner  à toutes les div .slide
	slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides1 width
	.css({
      'float' : 'left',
      'width' : slideWidth0
    });
	slides1
    .wrapAll('<div id="slideInner1"></div>')
    // Float left to display horizontally, readjust .slides1 width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });
	slides2
    .wrapAll('<div id="slideInner2"></div>')
    // Float left to display horizontally, readjust .slides1 width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });
	slides3
    .wrapAll('<div id="slideInner3"></div>')
    // Float left to display horizontally, readjust .slides1 width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });
	slides4
    .wrapAll('<div id="slideInner4"></div>')
    // Float left to display horizontally, readjust .slides1 width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

	// Longueur de #slideInner égale au total de la longueur de tous les slides1
	$('#slideInner').css('width', slideWidth0 * numberOfSlides);
	$('#slideInner1').css('width', slideWidth * numberOfSlides1);
	$('#slideInner2').css('width', slideWidth * numberOfSlides2);
	$('#slideInner3').css('width', slideWidth * numberOfSlides3);
	$('#slideInner4').css('width', slideWidth * numberOfSlides4);

	// Insert controls in the DOM
	$('#slideshow')
    .prepend('<span class="control" id="leftControl">Précédent</span>')
    .append('<span class="control" id="rightControl">Suivant</span>');
	$('#slideshow1')
    .prepend('<span class="control1" id="leftControl1">Précédent</span>')
    .append('<span class="control1" id="rightControl1">Suivant</span>');
	$('#slideshow2')
    .prepend('<span class="control2" id="leftControl2">Précédent</span>')
    .append('<span class="control2" id="rightControl2">Suivant</span>');
	$('#slideshow3')
    .prepend('<span class="control3" id="leftControl3">Précédent</span>')
    .append('<span class="control3" id="rightControl3">Suivant</span>');
	$('#slideshow4')
    .prepend('<span class="control4" id="leftControl4">Précédent</span>')
    .append('<span class="control4" id="rightControl4">Suivant</span>');

	// Hide left arrow control on first load
	manageControls(currentPosition);
	manageControls1(currentPosition1);
	manageControls2(currentPosition2);
	manageControls3(currentPosition3);
	manageControls4(currentPosition4);

	//Crée un écouteur d'évènement de type clic sur les classes .control
	$('.control')
    .bind('click', function(){		
    // Determine la nouvelle position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
	if(currentPosition == numberOfSlides && retour == false ){
		currentPosition--;
		pause();
	}	
	// Cache ou montre les controles
    manageControls(currentPosition);
    // Fais bouger le slide
    $('#slideInner').animate({
      'marginLeft' : slideWidth0*(-currentPosition)
    },tempsTransition);
  });

	$('.control1')
    .bind('click', function(){		
    // Determine la nouvelle position
	currentPosition1 = ($(this).attr('id')=='rightControl1') ? currentPosition1+1 : currentPosition1-1;
	if(currentPosition1 == numberOfSlides1 && retour == false ){
		currentPosition1--;
		pause1();
	}	
	// Cache ou montre les controles
    manageControls1(currentPosition1);
    // Fais bouger le slide
    $('#slideInner1').animate({
      'marginLeft' : slideWidth*(-currentPosition1)
    },tempsTransition);
  });
	
	$('.control2')
    .bind('click', function(){		
    // Determine la nouvelle position
	currentPosition2 = ($(this).attr('id')=='rightControl2') ? currentPosition2+1 : currentPosition2-1;
	if(currentPosition2 == numberOfSlides2 && retour == false ){
		currentPosition2--;
		pause2();
	}	
	// Cache ou montre les controles
    manageControls2(currentPosition2);
    // Fais bouger le slide
    $('#slideInner2').animate({
      'marginLeft' : slideWidth*(-currentPosition2)
    },tempsTransition);
  });

	$('.control3')
    .bind('click', function(){		
    // Determine la nouvelle position
	currentPosition3 = ($(this).attr('id')=='rightControl3') ? currentPosition3+1 : currentPosition3-1;
	if(currentPosition3 == numberOfSlides3 && retour == false ){
		currentPosition3--;
		pause3();
	}	
	// Cache ou montre les controles
    manageControls3(currentPosition3);
    // Fais bouger le slide
    $('#slideInner3').animate({
      'marginLeft' : slideWidth*(-currentPosition3)
    },tempsTransition);
  });

	$('.control4')
    .bind('click', function(){		
    // Determine la nouvelle position
	currentPosition4 = ($(this).attr('id')=='rightControl4') ? currentPosition4+1 : currentPosition4-1;
	if(currentPosition4 == numberOfSlides4 && retour == false ){
		currentPosition4--;
		pause4();
	}	
	// Cache ou montre les controles
    manageControls4(currentPosition4);
    // Fais bouger le slide
    $('#slideInner4').animate({
      'marginLeft' : slideWidth*(-currentPosition4)
    },tempsTransition);
  });

	// 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
	$('#leftControl').hide();
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    $('#rightControl').hide();
	if(position == numberOfSlides && retour == true){
		currentPosition = 0;
		 $('#leftControl').hide();
	}
  }
	function manageControls1(position){
    // Cache la fleche "précédent" si on est sur le premier slide
	if(position==0){ $('#leftControl1').hide() } else{ $('#leftControl1').show() }
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides1-1 && retour == false){
		$('#rightControl1').hide();
	} else {
		$('#rightControl1').show();
	}
	if(position == numberOfSlides1 && retour == true){
		currentPosition1 = 0;
		 $('#leftControl1').hide();
	}
  }
	function manageControls2(position){
    // Cache la fleche "précédent" si on est sur le premier slide
	if(position==0){ $('#leftControl2').hide() } else{ $('#leftControl2').show() }
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides2-1 && retour == false){
		$('#rightControl2').hide();
	} else {
		$('#rightControl2').show();
	}
	if(position == numberOfSlides2 && retour == true){
		currentPosition2 = 0;
		 $('#leftControl2').hide();
	}
  }
	function manageControls3(position){
    // Cache la fleche "précédent" si on est sur le premier slide
	if(position==0){ $('#leftControl3').hide() } else{ $('#leftControl3').show() }
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides3-1 && retour == false){
		$('#rightControl3').hide();
	} else {
		$('#rightControl3').show();
	}
	if(position == numberOfSlides3 && retour == true){
		currentPosition3 = 0;
		 $('#leftControl3').hide();
	}
  }
	function manageControls4(position){
    // Cache la fleche "précédent" si on est sur le premier slide
	if(position==0){ $('#leftControl4').hide() } else{ $('#leftControl4').show() }
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides4-1 && retour == false){
		$('#rightControl4').hide();
	} else {
		$('#rightControl4').show();
	}
	if(position == numberOfSlides4 && retour == true){
		currentPosition4 = 0;
		 $('#leftControl4').hide();
	}
  }
  
  function suivant(){
	$('#rightControl').click();
	}
  function suivant1(){
	$('#rightControl1').click();
	}
  function suivant2(){
	$('#rightControl2').click();
	}
  function suivant3(){
	$('#rightControl3').click();
	}
  function suivant4(){
	$('#rightControl4').click();
	}
	
  function start() {
  	lectureEnCours = true;
    interval = setInterval(suivant, tempsAttente );
  }
  function start1() {
  	lectureEnCours1 = true;
    interval1 = setInterval(suivant1, tempsAttente );
  }
  function start2() {
  	lectureEnCours2 = true;
    interval2 = setInterval(suivant2, tempsAttente );
  }
  function start3() {
  	lectureEnCours3 = true;
    interval3 = setInterval(suivant3, tempsAttente );
  }
  function start4() {
  	lectureEnCours4 = true;
    interval4 = setInterval(suivant4, tempsAttente );
  }
  function pause() {
  	lectureEnCours = false;
   clearInterval(interval);
  }
  function pause1() {
  	lectureEnCours1 = false;
   clearInterval(interval1);
  }
  function pause2() {
  	lectureEnCours2 = false;
   clearInterval(interval2);
  }
  function pause3() {
  	lectureEnCours3 = false;
   clearInterval(interval3);
  }
  function pause4() {
  	lectureEnCours4 = false;
   clearInterval(interval4);
  }
  
	//Si le diapo est activé 
	if(lectureAutomatique == true){
	  start();
	}
	if(lectureAutomatique1 == true){
	  start1();
	}
	if(lectureAutomatique2 == true){
	  start2();
	}
	if(lectureAutomatique3 == true){
	  start3();
	}
	if(lectureAutomatique4 == true){
	  start4();
	}
	
	if(affichePlayPause == true){
		$('#slidesContainer').prepend('<img class="navDiapo" src="" alt="Navigation diaporama" />');
		$('#slidesContainer1').prepend('<img class="navDiapo" src="" alt="Navigation diaporama" />');
		$('#slidesContainer2').prepend('<img class="navDiapo" src="" alt="Navigation diaporama" />');
		$('#slidesContainer3').prepend('<img class="navDiapo" src="" alt="Navigation diaporama" />');
		$('#slidesContainer4').prepend('<img class="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();
			}
			if(lectureEnCours1 == true){
				$(this).attr('src',icones['play']);
				pause1();
			}else{
				$(this).attr('src',icones['pause']);
				start1();
			}
			if(lectureEnCours2 == true){
				$(this).attr('src',icones['play']);
				pause2();
			}else{
				$(this).attr('src',icones['pause']);
				start2();
			}
			if(lectureEnCours3 == true){
				$(this).attr('src',icones['play']);
				pause3();
			}else{
				$(this).attr('src',icones['pause']);
				start3();
			}
			if(lectureEnCours4 == true){
				$(this).attr('src',icones['play']);
				pause4();
			}else{
				$(this).attr('src',icones['pause']);
				start4();
			}
		});
	}
});


function onglet_actif(id_onglet) {
	
	for(i=1;i<=4;i++)
	{
		if(document.getElementById('a_onglet_'+i))
			document.getElementById('a_onglet_'+i).className = '';
	}

	document.getElementById('a_onglet_'+id_onglet).className='onglet_actif';
}

function afficher_onglet(id_onglet) {
	onglet_actif(id_onglet);
	self.location.hash='#a_onglet_'+(id_onglet);
	id_onglet = id_onglet-1;
	$(function() {
		$("#onglets").tabs('select', id_onglet);
	});
}