/**
 * (C) Cogeco Cable
 * Author: Guillaume-Martin Ratté
 * Dependencies:
 * 		- JQuery 1.4.2
 */

var imageWidth;
var $active;
var intervalTrans;
var positionX;
var nombreTransition = 0;

$(document).ready(function() {
	countThumbnails();
	verticalScrollAdjust();
	window.onresize = verticalScrollAdjust;
	//Show the thumbs_link and activate its first link
	$(".thumbs_link").show();
	$(".thumbs_link .conteneur_thumb:first").addClass("active");
	activeArrow();
	//Obtenir le nombre d'images dans le conteneur mouvant et la largeur necessaire
	imageHeight = $(".window").height();
	var imageSum = $(".conteneur_mouvant img").size();
	var imageReelHeight = imageHeight * imageSum;
	
	//Ajuster la largeur du conteneur qui se déplace
	$(".conteneur_mouvant").css({'height' : imageReelHeight});
	//Lors d'un click
	$(".thumbs_link > .conteneur_thumb").click(cliqueThumbnail);
	// demarre la transition auto
	transitionAuto();
	
	//Stop le timer lors d'un hover sur un bouton du menu
	$(".thumbs_link > .conteneur_thumb").hover(function() {
    	clearInterval(intervalTrans); //Stop the rotation
	}, function() {
    	transitionAuto(); //Reprends la transition automatique
	});
});

function countThumbnails()
{
	if($(".conteneur_thumb").length<3)
	{
		if($(".conteneur_thumb").length>1)
		{
			$(".thumbs_link").css("top","20%");
		}
		else
		{
			$(".thumbs_link").css("top","35%");
		}
	
	} else if($(".conteneur_thumb").length>3){
		
		if($(".conteneur_thumb").length<5)
		{
			$(".thumbs_link").css("top","6.5%");
		}
	}
}

// Se produit lors du clique sur un thumnail
function cliqueThumbnail()
{
	if($(this).attr("class").indexOf("active")==-1)
	{
		$active = $(this); //Active le paging sur l'élément cliqué
		imageTranslation(); //Fait la rotation immédiatement
	}
}
// Fonction permettant de changer le thumbnail actif
function changeActive()
{	
	$(".thumbs_link > .conteneur_thumb").removeClass('active'); //Enlève l'entièreté des classes active
    $active.addClass('active'); //Ajoute la classe active faisant référence à l'image cliquée
	activeArrow();
}

function imageTranslation()
{
    var triggerID = $active.attr("rel") - 1; //Obtien le nomdre de translation necessaires
    var image_reelPosition = (triggerID * imageHeight); //Détermine la distance à parcourir
    changeActive();
    //Slider Animation
    $(".conteneur_mouvant").stop(true,true).animate({
        top: -image_reelPosition
    }, 400 );
}

// Gère le positionnement de la flèche active
function activeArrow()
{
	$(".activeArrow").hide();
	$(".active > .activeArrow").show();
}


// Gère la transition automatique entre les images
function transitionAuto()
{
		intervalTrans = setInterval(function(){ //Démarre le timer qui se répètera toutes les X secondes
        $active = $('.thumbs_link .active').nextAll(".conteneur_thumb:first"); //Change la classe active sur le prochain élément de type .conteneur_thumb
        
        if ($active.length == 0 && nombreTransition==2) 
        { 
        	// Si l'actif ne se trouve plus sur aucun élément
            $active = $('.thumbs_link .conteneur_thumb:first'); // Remet le status actif à la première slide
            imageTranslation(); //Lors du trigger, la fonction de défilement s'exécute
            nombreTransition+=1;
        }
        
        if ( $active.length == 0) 
        { 
        	// Si l'actif ne se trouve plus sur aucun élément
            $active = $('.thumbs_link .conteneur_thumb:first'); // Remet le status actif à la première slide
            nombreTransition+=1;
        }
       
        if(nombreTransition<=1)
        {
        	 imageTranslation(); //Lors du trigger, la fonction de défilement s'exécute
        }
        
        
        
    }, 5000); //La vitesse du timer
}

// Corrige le scrolling vertical selon la grandeur du navigateur
function verticalScrollAdjust()
{
	
	if(document.documentElement.clientWidth<1000)
	{
		$("body").css("overflow-x", "auto");
	}
	
	else{
		$("body").css("overflow-x", "hidden");
	}
	
}


