/*
* Source: Marco Kuiper (http://www.marcofolio.net/)
*/

// Vitesse du slideshow
var slideshowSpeed = 6000;

// Est-ce que les images sont loadées
var imagesloads = false;

// Tableau des images qui seront utilisées comme background dans le slideshow
var photos = ["images/slideshow_bg/the_roots.jpg","images/slideshow_bg/p_watson.jpg","images/slideshow_bg/d_dufresne.jpg","images/slideshow_bg/y_perreau.jpg","images/slideshow_bg/orange_orange.jpg","images/slideshow_bg/v_vallieres.jpg","images/slideshow_bg/m_rivard.jpg","images/slideshow_bg/s_shock.jpg","images/slideshow_bg/r_hargrove.jpg", "images/slideshow_bg/e_simon.jpg"]; 


//Une fois que les images sont loadées
function imagesLoaded(i,photosArray)
{   
    if(i==photosArray.length -1)
    {
        imagesloads = true;     
    }
}

//Fonction de préchargement des images
function preloadImage(photosArray) {
    var imagesCache = new Array();
    for (i = 0; i < photosArray.length; i++) {
        newImage = new Image();
        newImage.src = photosArray[i];
        newImage.onLoad=imagesLoaded(i,photosArray);
        imagesCache.push(newImage);        
    }  
   
}

//Appel de la fonction préchargement images background slideshow
preloadImage(photos);



$(document).ready(function() {

	/*************************Navigation**********************/	
	// Backwards navigation
	$("#back").click(function(event) {
	    event.preventDefault();
		stopAnimation();
		navigate("back");		
	});
		
	// Forward navigation
	$("#next").click(function(event) {
	   
        event.preventDefault();
		stopAnimation();
		navigate("next");
	});
	
	var interval;
	
	$("#control").toggle(function(event){
	    event.preventDefault()
		stopAnimation();
	}, function(event) {
	     event.preventDefault()
		// Change the background image to "pause"
		$("#control").css({ "background-image" : "url(../images/slideshow_bg/btn_pause.png)" });
		
		$("#control").hover( function(){		       
                $(this).css({ "background-image" : "url(../images/slideshow_bg/btn_pause_over.png)" });               
                },
                function(){
                $(this).css({ "background-image" : "url(../images/slideshow_bg/btn_pause.png)" });
               
        });
		
		// Show the next image
		navigate("next");
		
		// Start playing the animation
		interval = setInterval(function() {
			navigate("next");
		}, slideshowSpeed);
	});
	
	
	var stopAnimation = function() {
		// Change the background image to "play"
		
		$("#control").css({ "background-image" : "url(../images/slideshow_bg/btn_play.png)" });
		
		$("#control").hover( function(){		       
                $(this).css({ "background-image" : "url(../images/slideshow_bg/btn_play_over.png)" });               
                },
                function(){
                $(this).css({ "background-image" : "url(../images/slideshow_bg/btn_play.png)" });
               
        });
			
		// Clear the interval
		clearInterval(interval);
	};
	
	
	
	/*************************Container et Image à utiliser**********************/	
	
	
	var activeContainer = 2;	
	//Image aléatoire à l'ouverture site
	var currentImg = Math.floor ( Math.random ( ) * photos.length);	
	var animating = false;
	
	var navigate = function(direction) {
		// Check if no animation is running. If it is, prevent the action
		if(animating) {
			return;
		}
		
		// Check which current image we need to show
		if(direction == "next") {
			currentImg++;
			if(currentImg == photos.length + 1) {
				currentImg = 1;
			}
		} else {
			currentImg--;
			if(currentImg == 0) {
				currentImg = photos.length;
			}
		}
		
		// Check which container we need to use
		var currentContainer = activeContainer;
		if(activeContainer == 1) {
			activeContainer = 2;
		} else {
			activeContainer = 1;
		}
		
		showImage(photos[currentImg - 1], currentContainer, activeContainer);
		
	};
	
   /*************************Affichage Image**********************/	
   
	var showImage = function(photo, currentContainer, activeContainer) {
		animating = true;
		
		// Set the background image of the new active container (il faut qu'il soit derrière (z-index plus bas) que le current container)
		$("#bg" + activeContainer).css({
			"background-image" : "url(" + photo + ")",		
			"display" : "block",	
			"z-index" : -2		
		});
			
		// Fade out the current container		
		$("#bg" + currentContainer).fadeOut(900,function() {
			setTimeout(function() {
			    //Permet de bloquer les contrôle (précédent, suivant) lors de l'animation				
				animating = false;
				//Une fois que le currentContainer a une opacité de 0 (fade out terminé), on remonte le z-index de l'activeContainer			
				$("#bg" + activeContainer).css({			        
			        "z-index" : -1			
		        });
				
		    }, 902);
		});
	};
	
	
	/*************************Début**********************/	
	
	    
	    //Première image background à s'afficher
	    if(imagesloads==true){
	    
	        //Impression que ça aide (à revoir)
	        setTimeout(function() {
			     navigate("next");				
		   },300); 		
		}  
	  
	    // Start playing the animation
	    interval = setInterval(function() {
		    navigate("next");
	    }, slideshowSpeed);
	
	
	
	
});