//variable pr dire que le nbr de page est egale a 0 ou la 0 est egal a la ligne 1
var page = 0;

$(document).ready(function(){
	
	//permet de bien supporter la transparence sous ie 6
	$('div.pngFix').pngFix();
						   
	//variable qui calcule le nombre de job qu il existe dans la galerie
	var numjob = $("#works .job").length;
	//variable pr lui dire qu il y a 4 job par ligne
	var jobparligne = 4;
	
	//le nombre total de job divise par 4 (nbr de travo par ligne
	//le resultat est arrondi, math.ceil,  en dessus donc si rep egal 3.25 alors sa fait 4
	//le -2 c peut-etre pcq on affiche 2 lignes
	var maxpages = Math.ceil(numjob / jobparligne) -2;
						   
	$("#navig li a").hover(
		function(){
			
			//variable pr qu il alle cherche d
			//le 2eme parametre (apres virgule de img) reduit le champ de recherche au lieu de chercher ds tte la page html (contexte)
			//on peut lui definir un div specifique 
			//le this pr l element sur lequel on est
			//le.parent pr selectionner le objet qui contient le this ds lequel on trouve le img
			var timg = $("img", $(this).parent() );
			
			//si l image n'a pas de classe lienOn
			if( $(timg).hasClass("lienOn") == false ){
      			$(timg).stop().animate({marginLeft: "0"}, 150 );
			}
		},
		function(){
			var timg = $("img", $(this).parent() );
			if( $(timg).hasClass("lienOn") == false ){
				$(timg).stop().animate({marginLeft: "-15"}, 250 );
			}
      		
		}
	);
	
	
	//slideshow du haut
	$(window).load(function() {
		$('#imageSlideShow').nivoSlider({
			effect:'fade', //Specify sets like: 'fold,fade,sliceDown,random'
			slices:1,
			animSpeed:250, //Slide transition speed
			pauseTime:7000,
			startSlide:0, //Set starting Slide (0 index)
			directionNav:true, //Next & Prev
			directionNavHide:true, //Only show on hover
			controlNav:true, //1,2,3...
			controlNavThumbs:false, //Use thumbnails for Control Nav
			controlNavThumbsFromRel:false, //Use image rel for thumbs
			controlNavThumbsSearch: '.jpg', //Replace this with...
			controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
			keyboardNav:true, //Use left & right arrows
			pauseOnHover:true, //Stop animation while hovering
			manualAdvance:false, //Force manual transitions
			captionOpacity:0.8, //Universal caption opacity
			beforeChange: function(){},
			afterChange: function(){},
			slideshowEnd: function(){} //Triggers after all slides have been shown
		});
		
		
		
	});
	
	//met en evidence le premier travail de la page
	$(".job h4:first").css({backgroundColor: '#a6a6a6', color:'#fff'});
	$(".job img:first, .job span:first").css('opacity', 1);
	
	
	
	//$(".job img, .jobs span").css('opacity', 0.5);
	//$(".job h4").css({backgroundColor: '#fff', color:'#a7a7a7'});
	
	
	
	
	//permet d animer au survol de la souris l effet image icones
	$(".job").mouseover(
		function(){
			
			$("img, span", this).stop().animate({opacity: 1}, 150 );
			
			$("h4", this).stop().css({backgroundColor: '#a6a6a6', color:'#fff'});
			
		}
	);
	
	$(".job").mouseout(
		function(){
			
			$("img, span", this).stop().animate({opacity: 0.5}, 150 );
		
			
			$("h4", this).stop().css({backgroundColor: '#fff', color:'#a7a7a7'});
		}
	);
	
	//met un overflow en jquery au lieu de le mettre en css si quelqu un n a pas jquery active + la hauteur de la div works
	$("#works").css("overflow","hidden");
	$("#works").css("height","320px");
	
	
	
	
	
	//si le nbr de job est plus grand que 8
	//alors tu affiches les fleches
	if(numjob >8) {
		
		$("#arrowTop img, #arrowBottom img").css('opacity', 1);
		$("#arrowTop").stop().fadeOut(300);
		$("#arrowBottom").show();
	}
	
	
	
	
	$("#arrowTop img, #arrowBottom img").hover (
		function(){
			$(this).stop().animate({filter: "alpha(opacity=100)"}, 150 );
			$(this).stop().animate({opacity: 1}, 150 );
		},
		
		function(){
			$(this).stop().animate({filter: "alpha(opacity=0)"}, 150 );
			$(this).stop().animate({opacity: 0}, 300 );
		}
		
	);
	
	//si le nbr de job est plus grand que 8
	//alors tu affiches les fleches
	/*if(numjob >8) {
		//$("#arrowTop img, #arrowBottom img").css('filter', 'alpha(opacity=50)');
		$("#arrowTop img, #arrowBottom img").css('opacity', 0.5);
		$("#arrowTop").stop().fadeOut(300);
		$("#arrowBottom").show();
	}
	
	
	
	$("#arrowTop img, #arrowBottom img").hover (
		function(){
			$(this).stop().animate({filter: "alpha(opacity=100)"}, 150 );
			$(this).stop().animate({opacity: 1}, 150 );
		},
		
		function(){
			$(this).stop().animate({filter: "alpha(opacity=50)"}, 150 );
			$(this).stop().animate({opacity: 0.5}, 300 );
		}
		
	);
	*/
	
	
	
	
	
	$("#arrowTop").click(
		function(event){
			
			
			//permet d arreter l action qu il fait par defaut, ici le fait kil change l url lorsqu on clique sur la fleche
			event.preventDefault();
			//on decremente la page (page-- est equivalent a page-=1)
			page--;
			//condition pr dire qu il ne peut pas y avoir de page négative (pas qu'il puisse remonter plus haut que le job le plus haut
			if( page <= 0 ) page = 0;
			
			//si la page est egal a 0
			if (page == 0) {
				//alors fait un fade sur la fleche du haut
				$("#arrowTop").stop().fadeOut(300);
			}
			//si la page est plus grande ou egal à 0 et que le nombre de travaux et plus grand que le max
			if (page >= 0 && numjob > 8) {
				//tu fais apparaitre la fleche du bas
				$("#arrowBottom").stop().fadeIn(300);
			}
			//page actuelle * le nbre de job par ligne (4) + 1 pour avoir le premier de la ligne suivante
			var indexDiv= page*jobparligne+1;
			//tu scroll a la div .job numéro x (indexDiv)
			//margin true pr : deduct the margin and border from the final position
			$("#works").stop().scrollTo($("div.job:eq("+indexDiv+")"), 320, {margin:true});
		}
	);
	
	
	
	$("#arrowBottom").click(
		function(event){
			
			event.preventDefault();
			//on incremente la page (page++ est equivalent a page+=1)
			page++;
			//si le nombre de page est plus grand ou égal au nombre maximum de page, le nombre de page est égal au nombre maximum de page
			if( page >= maxpages ) page = maxpages;
			//si il y a plus qu'une page
			if (page > 0) {
				//fait apparaitre la fleche du bas
				$("#arrowTop").stop().fadeIn(300);
			}
			//si le nombre de page
			if (page == maxpages) {
				$("#arrowBottom").stop().fadeOut(300);
			}
			//page actuelle * le nbre de job par ligne (4) + 1 pour avoir le premier de la ligne suivante
			var indexDiv= page*jobparligne+1;
			//tu scroll a la div .job numéro x (indexDiv)
			//margin true pr : deduct the margin and border from the final position
			$("#works").stop().scrollTo($("div.job:eq("+indexDiv+")"),320, {margin:true});
		}
		);
	
	//permet d'activer la shadowbox et certaines options
	Shadowbox.init({
		animateFade: false,
		displayNav: true,
		slideshowDelay: 10,
		overlayOpacity: 0.8,
		fadeDuration: 0.5,
		initialHeight:600,
		initialWidth:800,
		overlayColor: "#fff",
		resizeDuration: 0.5,
		onOpen : stopSlideShow,
		onClose: playSlideshow
	});

	function stopSlideShow(){
  		$('#imageSlideShow').data('nivo:vars').stop = true; //Stop le SlideShow
	}
	
	function playSlideshow(){
  		$('#imageSlideShow').data('nivo:vars').stop = false; //Start le SlideShow
	}
	
	
	//permet de mettre l effet d'information sur les connaissances, comme une sorte de titre version bulle
	$('.toolTip').tipsy({gravity: 'w', fade: true}); // nw | n | ne | w | e | sw | s | se
	
	
});