var nombre_image_affiche = 3;//on dertermine le nombre d'image qu'on fait d�fill� quand on clique sur suivant ou pr�c�dent
$(document).ready(function(){

var compteur_image= 0 ;
var numero_portfolio;
	$(".portfolio").each(function() {
		
		numero_portfolio = $(this).attr('id');		
		var id = $("#petite_image_"+numero_portfolio).attr('id');
		//Pour mettre la premiere image a la bonne taille en recuperant l'id du a et le href et on les mettant sur la grande image
		var taille_premiere = $("#"+numero_portfolio+"_petite_image_1 a").attr('id').split('_');
		var src_premiere = $("#"+numero_portfolio+"_petite_image_1 a").attr('href');
		$("#grande_image_"+numero_portfolio+" img").css('width',taille_premiere[0]+'px');
		$("#grande_image_"+numero_portfolio+" img").css('height',taille_premiere[1]+'px');
		$("#grande_image_"+numero_portfolio+" img").attr({src: src_premiere,title: "",alt: ""});

		//on rajoute l'evenement click au A qui entoure les petites images pour quand on clique sur la petite image elle s'affiche en grand
		
		$("#"+id +" div a").each(function() {
			$(this).click(
			function(){
			var id_grande_image = $(this).parent().parent().attr('id').replace('petite','grande');
			var taille = $(this).attr('id').split('_');
			$('#'+id_grande_image+' img').css('width',taille[0]+'px');
			$('#'+id_grande_image+' img').css('height',taille[1]+'px');
			
			
			// Ajout du texte
			console.info("#grande_image_"+numero_portfolio+' div');
			console.info($('#'+id_grande_image).html());
			
			$("#grande_image_"+numero_portfolio+' div').html($(this).find('span').html());
			
			
			$('#'+id_grande_image+' img').attr({ 
			          src: $(this).attr('href'),
			          title: "",
			          alt: ""
			        });
			}
			);//fin click
			compteur_image++;
			
		});//fin each du deuxieme 
	});//fin each du premier
if(compteur_image<=nombre_image_affiche)
$('#suivant_'+numero_portfolio).css("visibility","hidden");
});//fin du document ready

function image_change(element){
	
	var id = $(element).parent().attr('id');//l'id du div qui englobe les petites images ex: "petite_image_portfolio1"
	var  type_lien = $(element).attr('id').match(/suivant|precedent/g);//on recupere si on a cliqu� sur suivant ou precedent
	var portfolio = $(element).attr('id').replace(type_lien+'_','');//on recupere le portfolio en cour ex : portfolio1
	
	//initialisation des variable
	var compt = 0;
	var nb_ref= 0 ;
	var nb_image = 0;
	var compteur_affiche_image  = 0;

	 $("#"+id +" div").each(function() {
	if($(this).attr('id'))
	nb_image = $(this).attr('id').replace(portfolio+'_petite_image_','');
	if( ($(this).css("display") == 'block') && compt<1)
	{
	nb_ref =parseInt($(this).attr('id').replace(portfolio+'_petite_image_',''));
	compt++;
	}
	 });//fin each

	for(var y = 1 ; y< (nombre_image_affiche+1) ;y++){
		if(type_lien=='suivant' &&  (nb_ref+nombre_image_affiche+y-1) <= nb_image  ){
		compteur_affiche_image = nb_ref+nombre_image_affiche+y-1;//pour savoir ou l'on se situe au niveau des image
			if(nb_ref<nb_image){
			$('#'+portfolio+'_petite_image_'+(nb_ref+nombre_image_affiche+y-1)).css("display","block");
			$('#'+portfolio+'_petite_image_'+(nb_ref+nombre_image_affiche+y-1)).slideDown("slow");
			}
		}
		if(type_lien=='precedent'){
			if(nb_ref>1)
			$('#'+portfolio+'_petite_image_'+(nb_ref-y)).css("display","block");
			$('#'+portfolio+'_petite_image_'+(nb_ref-y)).slideDown("slow");
		}
	 }

	for(var i = 0 ; i< nombre_image_affiche ;i++){
	//$('#'+portfolio+'_petite_image_'+(nb_ref+i)).hide("slow");
	$('#'+portfolio+'_petite_image_'+(nb_ref+i)).css("display","none");
	 }
	 
	/*pour enlever ou remettre les bouton precedent suivant*/
	if((nb_image)==(compteur_affiche_image) && type_lien=='suivant'){
	$(element).css("visibility","hidden");
	}

	 if(nb_ref==(1+nombre_image_affiche) &&  type_lien=='precedent'){
	$(element).css("visibility","hidden");
	}

	if(type_lien=='precedent')
		if($('#suivant_'+portfolio).css("visibility")!='visible')
			$('#suivant_'+portfolio).css("visibility","visible");
	 
	if(type_lien=='suivant')
		if($('#precedent_'+portfolio).css("visibility")!='visible')
			$('#precedent_'+portfolio).css("visibility","visible");

	return false;
 }