jQuery(document).ready(function($) {
	
	$.ajaxSetup({
		async: true,
		cache: false,
		timeout: 15000,
		statusCode: {
			400: function() {
				alert("errno 400 : Echec de l'analyse HTTP");
			},
			403: function() {
				alert("errno 403 : Acces refuse");
			},
			404: function() {
				alert('errno 404 : page non trouvée');
			},
			500: function() {
				alert("errno 500 : Erreur interne du serveur");
			},
			503: function() {
				alert("errno 503 : Service indisponible");
			},
			504: function() {
				alert("errno 504 : Timeout - le serveur met trop de temps à repondre");
			}
		}
	});
	
	
	
function phase2_addElements(){
	$(".anim_2_colonne_activ").html("");
	$(".anim_2_colonne_preserv").html("");
	$(".anim_2_colonne_esthetic").html("");
	
	$.getJSON("API_NAVIGATION/API_ACCUEIL.php?phase=2&action=getTableau",
		function(dataJson){
				if(dataJson){
					if(dataJson.ACTIV){
						$(".anim_2_colonne_activ").append("<div class=\"anim_2_header\"></div>");

						for( var i=0; i<dataJson.ACTIV.length;i++){
							var nom 		= dataJson.ACTIV[i].nom;
							var symptome 	= dataJson.ACTIV[i].symptome;
							var couleur 	= dataJson.ACTIV[i].couleur;
							var categorie 	= "ACTIV";

							$(".anim_2_colonne_activ").append("<div class=\"symptome displaynone\" produit=\""+nom+"\" categorie=\""+categorie+"\" couleur=\""+couleur+"\"><table><tr> <td>"+symptome+"</td>	</tr></table></div>");
						}

					}
					if(dataJson.PRESERV){
						$(".anim_2_colonne_preserv").append("<div class=\"anim_2_header\"></div>");

						for( var i=0; i<dataJson.PRESERV.length;i++){
							var nom 		= dataJson.PRESERV[i].nom;
							var symptome 	= dataJson.PRESERV[i].symptome;
							var couleur 	= dataJson.ACTIV[i].couleur;
							var categorie 	= "PRESERV";

							$(".anim_2_colonne_preserv").append("<div class=\"symptome displaynone\" produit=\""+nom+"\" categorie=\""+categorie+"\" couleur=\""+couleur+"\"><table><tr> <td>"+symptome+"</td>	</tr></table></div>");
						}
					}
					if(dataJson.ESTHETIC){
						$(".anim_2_colonne_esthetic").append("<div class=\"anim_2_header\"></div>");

						for( var i=0; i<dataJson.ESTHETIC.length;i++){
							var nom 		= dataJson.ESTHETIC[i].nom;
							var symptome 	= dataJson.ESTHETIC[i].symptome;
							var couleur 	= dataJson.ACTIV[i].couleur;
							var categorie 	= "ESTHETIC";

							$(".anim_2_colonne_esthetic").append("<div class=\"symptome displaynone\" produit=\""+nom+"\" categorie=\""+categorie+"\" couleur=\""+couleur+"\"><table><tr> <td>"+symptome+"</td>	</tr></table></div>");
						}
					}
					
					$(".symptome").fadeIn(500);
				}
			});
}


function phase3_affichageNav(categorie, produit){

	// LEVEL 1
	$(".anim_3_nav div[rel!='"+categorie+"']").removeClass("bouton_actif_bg");
	$(".anim_3_nav div[rel='"+categorie+"']").addClass("bouton_actif_bg");

	//reset des colonnes de produits

	$('.anim_3_colonne_1 ').fadeOut(200);
	$('.anim_3_colonne_2 ').fadeOut(200, function() {
		$(".anim_3_colonne_1").html("");
		$(".anim_3_colonne_2").html("");
		$.getJSON("API_NAVIGATION/API_ACCUEIL.php?phase=3&action=getSousNav&categorie="+categorie+"&produit="+produit,
			function(dataJson){
				if(dataJson.elements){
					var col = 1;
					for( var i=0; i<dataJson.elements.length;i++){
						var nom 		= dataJson.elements[i].nom;
						var titre 		= dataJson.elements[i].titre;
						var symptome 	= dataJson.elements[i].symptome;
						var href 		= dataJson.elements[i].href;
						var color 		= dataJson.elements[i].color;
						
						if(col/2 == Math.round(col/2)){
							var conteneur = ".anim_3_colonne_2";
						}
						else{
							var conteneur = ".anim_3_colonne_1";
						}
						/*
						if(nom == produit){
							var classe = "anim_3_nav_produit_actif";
							var infosSupp = "style=\"color:white; background-image:none; background-color: #"+color+";\"";
						}
						else{
							var classe = "anim_3_nav_produit";
							var infosSupp = "";
						}
						*/
							var classe = "anim_3_nav_produit";
							var infosSupp = "";
						
						$(conteneur).append("<div class=\""+classe+"\" categorie=\""+categorie+"\" produit=\""+nom+"\" lien=\""+href+"\" couleur=\""+color+"\" "+infosSupp+"><div class=\"anim_3_sousnav_titre\" "+infosSupp+">"+titre+"</div><div class=\"anim_3_sousnav_symptome\" "+infosSupp+">"+symptome+"</div></div>");

						col++;
					}
					$('.anim_3_colonne_1').fadeIn(300);
					$('.anim_3_colonne_2').fadeIn(300);
					return true;
				}
			});
	});
	return false;
}

// AFFICHAGE DU PRODUIT
function phase3_affichageProduit(categorie, produit, couleur){

	
	
// on supprime la class spéciale et les infos de survol
		// on supprime les elements actifs existants
		$(".anim_3_nav_produit_actif").addClass("anim_3_nav_produit");
		$(".anim_3_nav_produit").removeClass("anim_3_nav_produit_actif");
		// on supprime le CSSAGE existant
		$(".anim_3_nav_produit .anim_3_sousnav_titre").css("color", "rgb(0,0,0)");
		$(".anim_3_nav_produit .anim_3_sousnav_symptome").css("color", "rgb(51,51,51)");
		$(".anim_3_nav_produit").css("background-color","white");
		$(".anim_3_nav_produit").css("background-image","url(img_anim/phase_3/produits_colonne_separateur.jpg)");
		
		
		// on ajoute le actif à l'élément affiché
		$(".anim_3_nav_produit[produit='"+produit+"']").addClass("anim_3_nav_produit_actif");
		$(".anim_3_nav_produit_actif[produit='"+produit+"']").removeClass("anim_3_nav_produit");
	
		// config du css
		//$(".anim_3_nav_produit_actif").attr("style", "");
		$(".anim_3_nav_produit_actif .anim_3_sousnav_titre").css("color", "rgb(255,255,255)");
		$(".anim_3_nav_produit_actif .anim_3_sousnav_symptome").css("color", "rgb(255,255,255)");
		$(".anim_3_nav_produit_actif").css("background-image","none");
		$(".anim_3_nav_produit_actif").css("background-color","#"+couleur);

	$('.anim_3_contenu ').fadeOut(200, function() {
		$.getJSON("API_NAVIGATION/API_ACCUEIL.php?phase=3&action=getProduit&categorie="+categorie+"&produit="+produit,
			function(dataJson){
					if(dataJson){

						// titre
							$('.anim_3_contenu .nom_du_produit').html(dataJson.titre);
							$('.anim_3_contenu .nom_du_produit').css("color", "#"+dataJson.couleur);
						//sous titre
							$('.anim_3_contenu .sous_nom_du_produit').html(dataJson.sous_titre);
						//intro
							$('.anim_3_contenu .produit_texte').html(dataJson.intro);
						// lien
							$('.anim_3_contenu .produit_href').attr('rel', "lero-"+dataJson.nom);
						// silhouette
							$('.anim_3_contenu .anim_3_silhouette').html("<img src=\"API_NAVIGATION/img_anim/phase_3/persos/silhouette_"+dataJson.nom+".png\"/>");
						// silhouette
							$('.anim_3_contenu .anim_3_visuel').html("<img src=\"API_NAVIGATION/img_anim/phase_3/produits_home/"+dataJson.nom+".jpg\"/>");
						
						$('.anim_3_contenu ').fadeIn(500);

					}
				});
		});
}

	
function showPhase(nb){
	$("#phase_animation_1").hide();
	$("#phase_animation_2").hide();
	$("#phase_animation_3").hide();
	
	switch(nb){
		case "1":
			$("#phase_animation_1").fadeIn(200);
		break;
		case "2":
			$("#phase_animation_2").fadeIn(200);
			phase2_addElements();
		break;
		case "3":
			$("#phase_animation_3").fadeIn(200);
		break;
	}
}
	
	
	
	
	
// ##################
// ANIMATION PHASE 1
$(".anim_1_trouvez_solution_bouton").click(function() {
	$("#phase_animation_2 .anim_2_retour").attr("rel", "1");
	showPhase("2");
});

$(".phase_1_grosbouton[rel]").click(function() {
	showPhase("3");
	phase3_affichageNav($(this).attr("rel"), "");
});
$(".phase_3_grosbouton[rel]").click(function() {
	phase3_affichageNav($(this).attr("rel"), "");
});




// ##################
// ANIMATION PHASE 2
$("#phase_animation_2 .anim_2_retour").click(function() {
	showPhase($(this).attr("rel"));
});
$(".symptome[produit][categorie][couleur]").live("click", function(){
	showPhase("3");
	phase3_affichageNav($(this).attr("categorie"), $(this).attr("produit"));
	phase3_affichageProduit($(this).attr("categorie"), $(this).attr("produit"), $(this).attr("couleur"));
});

// ##################
// ANIMATION PHASE 3
// level 1
$(".anim_3_bouton_symptome").click(function() {
	$("#phase_animation_2 .anim_2_retour").attr("rel", "3");
	showPhase("2");
});

// level 2
$(".anim_3_nav_produit[couleur]").live("mouseenter", function(){
	$(this).css("background-color","#"+$(this).attr("couleur"));
	$(this).find(".anim_3_sousnav_titre").css("color","rgb(255,255,255)");
	$(this).find(".anim_3_sousnav_symptome").css("color","rgb(255,255,255)");
});
$(".anim_3_nav_produit[couleur]").live("mouseleave", function(){
	$(this).css("background-color","rgb(255,255,255)");
	$(this).find(".anim_3_sousnav_titre").css("color","rgb(0,0,0)");
	$(this).find(".anim_3_sousnav_symptome").css("color","rgb(51,51,51)");
});

$(".anim_3_nav_produit[produit][categorie][couleur]").live("click", function(){
	phase3_affichageProduit($(this).attr("categorie"), $(this).attr("produit"), $(this).attr("couleur"));
});

$(".produit_href[rel]").live("click", function(){
	$(location).attr('href',$(this).attr("rel"));
});

showPhase("1");

});