// Code JQuery pour le slider
$(document).ready(function(){
	var currentPosition = 0;
	var slideWidth = document.documentElement.clientWidth; // finally moved to clientWidth!
	var slides = $('.slide');
	var numberOfSlides = slides.length;
	
	// on fait apparaitre .slidesContainer
	$('#slidesContainer').css('visibility', 'visible');
	
	// Remove scrollbar in JS
	$('#slidesContainer').css('overflow', 'hidden');
	
	// Wrap all .slides with #slideInner div
	slides
	.wrapAll('<div id="slideInner"></div>')
	// Float left to display horizontally, readjust .slides width
	.css({
	  'float' : 'left',
	  'width' : slideWidth
	});
	
	// Set #slideInner width equal to total width of all slides
	$('#slideInner').css('width', slideWidth * numberOfSlides);
	
	// Insert controls in the DOM
	$('#slideshow')
	.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
	.append('<span class="control" id="rightControl">Clicking moves right</span>');
	
	// Hide left arrow control on first load
	manageControls(currentPosition);

	// Create event listeners for .controls clicks
	$('.control')
		// controle avec les boutons
		.bind('click', function(){
			    // Determine new position
				currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;		   		   
			   
				// Hide / show controls
			    manageControls(currentPosition);
			    
				// réinitialise le compteur
				clearInterval(intervalID);
			    
			    // Move slideInner using margin-left
			    $('#slideInner').animate({
			      'marginLeft' : slideWidth*(-currentPosition)
			});
		});
		    			  
	// manageControls: Hides and Shows controls depending on currentPosition
	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-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
	}
	
	// auto slide
	intervalID = setInterval(next, 7000);
	
	// gestion des touches flechees ; ici attente d'un evenement
	// bug avec IE ?
	document.addEventListener('keyup', function(e) {
		//si l'évènement touche flèche droite relâchée
		if(e.which==39 && currentPosition!=(numberOfSlides-1)){
			currentPosition = currentPosition+1;
		};
		//si l'evenement touche flèche gauche relâchée
		if(e.which==37 && currentPosition!=0){
			currentPosition = currentPosition-1;
		};
		
		// Hide / show controls
		manageControls(currentPosition);
		
		// reinitialise le compteur
		clearInterval(intervalID);
		    
		 // Move slideInner using margin-left	
		$('#slideInner').animate({
		  'marginLeft' : slideWidth*(-currentPosition)
		});
	}, false);
	
	function next(){
	    // Determine new position
		currentPosition = (currentPosition!=(numberOfSlides-1)) ? currentPosition+1 : 0;		   		   
	   
		// Hide / show controls
	    manageControls(currentPosition);
	    
	    // Move slideInner using margin-left
	    $('#slideInner').animate({
	      'marginLeft' : slideWidth*(-currentPosition)
		});				
	}
});