$(document).ready(function() {	
	// Déclaration des variables
	var debug = false;
	
	
	
	// Verification du debug
	if(debug){
		$("<div></div>").appendTo("body").attr("id","debug").css({"width":"400px",	"position":"absolute","top":"0",	"right":"0","background-color":"#595959","color":"#FFF","text-align":"center","z-index":"2000"});
	}
	
	// Quand on clique sur la premiere liste
	$("#first > p").click(function(){
	removeProd();
		// On retire l'item selectionné au préalable
		$(".firstSelected").removeClass("firstSelected");
		// On rajoute la class pour le mettre en evidence
		$(this).addClass("firstSelected");
		if(debug){$("#debug").html($(this).attr("name"));}
		
		// On fait la requete en php
		var firstData = "first="+$(this).attr("name");
		$.ajax({
			type: "POST",
			url: "index.php?page=searchProduits",
			data: firstData,
			success: function(resultat){
				if(debug){$("#debug").html( resultat );}
				//alert(resultat);
				showSecond(resultat);
			}
		});
	});
	
	// Creation de la div BESOIN
	function showSecond(result){
		// On affiche le resultat
		removeProd();
		show(result, "second");
		$(".scroll-pane-bis").jScrollPane({scrollbarWidth:10});
		$("#header-second-title").css("color","#ea2847");
		$("#header-third-title").css("color","#AAA");
		$("#second > p").click(function(){
			// On retire l'item selectionné au préalable
			$(".secondSelected").removeClass("secondSelected");
			// On rajoute la class pour le mettre en evidence
			$(this).addClass("secondSelected");
			
			// On fait la requete en php
			var secondData = "first="+$(".firstSelected").attr("name")+"&second="+$(this).attr("name");
			$.ajax({
				type: "POST",
				url: "index.php?page=searchProduits",
				data: secondData,
				success: function(resultat){
					if(debug){$("#debug").html( resultat );}
					
					showThird(resultat);
				}
			});			
		});		
	}

	function showThird(result){
		show(result, "third");
		$("#header-third-title").css("color","#ea2847");
		
		$("#third > p").click(function(){
		removeProd();
			// On retire l'item selectionné au préalable
			$(".thirdSelected").removeClass("thirdSelected");
			// On rajoute la class pour le mettre en evidence
			$(this).addClass("thirdSelected");
			
			// On fait la requete en php
			var thirdData = "first="+$(".firstSelected").attr("name")+"&second="+$(".secondSelected").attr("name")+"&third="+$(this).attr("name");
			$.ajax({
				type: "POST",
				url: "index.php?page=searchProduits",
				data: thirdData,
				success: function(resultat){
					if(debug){$("#debug").html( resultat );}
					var aResult = resultat.split("|");
			
			$("<span>"+aResult[0]+"</span>").appendTo("#header-chapeau").addClass("produit-titre");	
			$("<span>"+aResult[1]+"</span>").appendTo("#header-chapeau").addClass("produit-description");	
			$("<span><img src='uploads/"+aResult[4]+"' /></span>").appendTo("#header-chapeau").addClass("produit-image");
			$("<span></span>").appendTo("#header-chapeau").addClass("produit-image-cat-"+aResult[5]);
			$("<span>"+aResult[2]+"</span>").appendTo("#header-chapeau").addClass("produit-age");
			$("<span><a href='index.php?page="+aResult[3]+"'>Voir la fiche produit</a></span>").appendTo("#header-chapeau").addClass("produit-notice");
				}
			});
					
		});		
	}
	
	function removeProd(){
		$(".produit-titre").remove();
		$(".produit-description").remove();
		$(".produit-image").remove();
		$(".produit-image-cat-0").remove();
		$(".produit-image-cat-1").remove();
		$(".produit-image-cat-2").remove();
		$(".produit-image-cat-3").remove();
		$(".produit-age").remove();
		$(".produit-notice").remove();	
	}
	
	function show(result, id){
	//alert(result);
		if(id == "second"){
			$("#third").empty();
		}
		
		$("#"+id).empty();									// On vide la deuxieme box
		var aResult = result.split(";"); 				// On explose le resultat
		//alert(aResult);
		for(aCle in aResult){								// On le parcourt
			var aValeur = aResult[aCle].split("|");	// On explose la clé
			//alert(aValeur[0]+" "+aValeur[1]);
				$("<p></p>").appendTo("#"+id).attr("name",aValeur[0]).text(aValeur[1]);	// On crée les <p></p>
		}	

		
		
	}
	
});