//gestion visuel pour les produits detailles
var calculeLargeurHorizontaleMax;
var calculeLargeurHorizontale;
var nbreProd=0; //dans famille.php et bq_article_detail-fr.php
var listeIdFamille=[];
var listFamilleProduitsAffiches={}; //dans famille.php et bq_article_detail-fr.php
var idFamilleEnCours="";
var idGammeEnCours="";
var numFamilleEnCours=0;
var idCommandeEnCours=0;
var popAmiOuvert=false;
var popAmiAnimEnCours=false;

//definit la calculeLargeurHorizontale du conteneur en fonction du nombre de produits dans la liste
function calculeLargeurHorizontale(nbreProd){
	calculeLargeurHorizontale=nbreProd*805;
	calculeLargeurHorizontaleMax=(nbreProd-1)*805;
	document.getElementById("prodContainer").style.width = calculeLargeurHorizontale + 'px';
	document.getElementById("contVisu").style.zIndex = '0';
	document.getElementById("flecheD").style.zIndex = '90';
	document.getElementById("flecheG").style.zIndex = '100';
	afficheFlechesApresAnim();
}


//appeler par les fleche suivant 1 ou precedent -1
function defilerArticlesHorizontalement(prodSouhaite){
	var xDest=805*prodSouhaite;
	numFamilleEnCours+=Number(prodSouhaite);
	masqueListeTailles(idFamilleEnCours);
	
	idFamilleEnCours=listeIdFamille[numFamilleEnCours];
	effacePopAmi();
	
	Effect.MoveBy('prodContainer', 0, -xDest, {duration:1, fps:25, from:0.0, to:1.0, beforeStart: masqueFlechesPendantAnim, afterFinish: afficheFlechesApresAnim});
}

//masque les fleches avant le debut de l'anim de transition pour eviter les multiclics
function masqueFlechesPendantAnim(){
	document.getElementById("flecheD").style.visibility = 'hidden';
	document.getElementById("flecheG").style.visibility = 'hidden';	
}
//reaffiche les fleches apres que toutes les anims de transitions soient fini et teste si on est en bout de liste et masque fleche en consequence
function afficheFlechesApresAnim(){
	boutG=document.getElementById("prodContainer").offsetLeft;
	
	
	if (calculeLargeurHorizontale>"805")
	{
		if (boutG=="0")
			{
			document.getElementById("flecheG").style.visibility = 'hidden';
			document.getElementById("flecheD").style.visibility = 'visible';
			}
		else if (boutG=="-" + calculeLargeurHorizontaleMax)
			{
			document.getElementById("flecheD").style.visibility = 'hidden';
			document.getElementById("flecheG").style.visibility = 'visible';
			}
		else
			{
			document.getElementById("flecheD").style.visibility = 'visible';
			document.getElementById("flecheG").style.visibility = 'visible';
			}
	}
	else
	{
		document.getElementById("flecheD").style.visibility = 'hidden';
		document.getElementById("flecheG").style.visibility = 'hidden';
	}
}

//vince gestion des menus de taille associés à un article
//masque popTaille si deja affiche quand on passe sur un autre produit

var menuTailleDeploye=false;




function clicSurMenuTaille(idFamille) {
	
	if(!menuTailleDeploye){
		
			$('popTaille_'+idFamille).style.display='block';
			Effect.Appear('outils_'+idFamille,{duration:0.2, fps:25, from:1.0, to:0.0, afterFinish: desactiveOutils, idFamille:idFamille});
			Effect.Appear('popTaille_'+idFamille,{duration:0.2, fps:25, from:0.0, to:1.0});
			menuTailleDeploye=true;
		} 
		else
		{
			$('outils_'+idFamille).style.display='block';
			Effect.Appear('outils_'+idFamille,{duration:0.2, fps:25, from:0.0, to:1.0});
			Effect.Appear('popTaille_'+idFamille,{duration:0.2, fps:25, from:1.0, to:0.0, afterFinish: desactivePopTaille, idFamille:idFamille});
			menuTailleDeploye=false;
		}

	//alert ('gIdProd = ' + gIdProd);
}

function desactiveOutils(myObject)
{
	 //afficheTableObjets(myObject);
	 //exemple de passage de variable via les événements scriptaculous
	 $('outils_'+myObject.options.idFamille).style.display='none';
}

function desactivePopTaille(myObject)
{
	 //afficheTableObjets(myObject);
	 //exemple de passage de variable via les événements scriptaculous
	 $('popTaille_'+myObject.options.idFamille).style.display='none';
}

function initMenuTaille(idFamille)
{
	listFamilleProduitsAffiches["famille" + idFamille].objTailleChoisieEnCours={};
	menuTailleDeploye=false;
	$('popTaille_'+idFamille).style.display='block';
	Element.update('tailleBtn_'+idFamille, '> Taille ( Cliquez-ici pour choisir )');
	Effect.Appear('popTaille_'+idFamille,{duration:0, fps:25, from:0.0, to:0.0, afterFinish: desactivePopTaille, idFamille:idFamille});
	Effect.Appear('outils_'+idFamille,{duration:0.2, fps:25, from:0.0, to:1.0});
}


//choix taille action sur bouton
function clicSurElementTaille(tailleChoisi,idTaille,idArticle,idFamille,stock) {
	//document.forms['taille_'+idArticle].typeTaille.value = tailleChoisi;
	//document.getElementById("typeTaille_"+idArticle).value = tailleChoisi;
	//afficheTableObjets(listFamilleProduitsAffiches["famille" + idFamille]);
	listFamilleProduitsAffiches["famille" + idFamille].objTailleChoisieEnCours={nomVariante:tailleChoisi, ID:idTaille};
	unselectAllElementsTaille(idFamille);
	$('btnTaille_' + idArticle + '_' + idTaille).className="boutonTailleSelect";
	Element.update('tailleBtn_'+idFamille, '> Taille ( votre choix : ' + tailleChoisi + ' )');
	clicSurMenuTaille(idFamille);
	if(stock==0)
	{
		$('stock'+idFamille).value="Taille choisie en cours de fabrication, prévoir un délai minimum de 2 semaines avant expédition.";
		$('stock'+idFamille).style.display='block';
	}
	else
		$('stock'+idFamille).style.display='none';
}

function unselectAllElementsTaille(idFamille)
{
	//alert("choixTaille_"+idFamille);
	var eltChoix = $("choixTaille_"+idFamille).getElementsByTagName('a');
	for(i=0;i<eltChoix.length;i++)
	{
		if(eltChoix[i].className.lastIndexOf("boutonTaille")!=-1)
		{
			eltChoix[i].className="boutonTaille";
		}
	}
}


function masqueListeTailles(idFamille)
{
		if(menuTailleDeploye)
		{
			$('outils_'+idFamille).style.display='block';
			$('popTaille_'+idFamille).style.display='block';
			Effect.Appear('outils_'+idFamille,{duration:0.2, fps:25, from:0.0, to:1.0});
			Effect.Appear('popTaille_'+idFamille,{duration:0.2, fps:25, from:1.0, to:0.0, afterFinish: desactivePopTaille, idFamille:idFamille});
			menuTailleDeploye=false;
		}
}


//function de gestion et analyse des familles
//gestion de l'interface
//_____________________________________________________________________
//se base sur l'objet famille : data + etat d'affichage :
//listFamilleProduitsAffiches["famille"+<?php echo $famille->ID; ?>]={idFamille:<?php echo $famille->ID; ?>, ordreHtml:nbreProd, idArticleRepresentatif:<?php echo $famille->ID_article_representatif ?>,idArticleVisibleEnCours:<?php echo $famille->ID_article_representatif ?>,listeProduits:tempListeProduitsFamille,listeProduitsParId:[],multiSexe:false,multiMains:false}

function initToutesFamillesZoom(idFamille)
{
	//exploite les valeurs
	//listFamilleProduitsAffiches
	//listeIdFamille
	
	//se déplacer directement vers la bonne famille
	var nBreFamilles=listeIdFamille.length;
	calculeLargeurHorizontale(nBreFamilles);
	defilerArticlesHorizontalement(listFamilleProduitsAffiches["famille" + idFamille].ordreHtml-1);
	
	
	//complete les variables d'état des FamilleProduitsAffiches
	var i=0;
	var tempIdFamille;
	for (i=0; i<nBreFamilles; i++)
	{
		tempIdFamille=listeIdFamille[i];
		creeTableauIdProduits(tempIdFamille);
		//dit quel est l'article affiche en cours de la famille
		changeLarticleDuneFamille(tempIdFamille, listFamilleProduitsAffiches["famille" + tempIdFamille].idArticleRepresentatif)
		//détecte si le menu main ou sexe est nécessaire et l'affiche
		detecteMultiSexeEtMainsFamille(tempIdFamille);
		//ecrit les cases de variantes couleurs des produits
		ecritMenuCouleursFamille(tempIdFamille);
		ecritMenuTailleArticle(tempIdFamille);
		//a supprimer
		//ecritDetailDunArticle(tempIdFamille);
		gereLoaderImageFamille(tempIdFamille);
		gererSelectMenus(tempIdFamille, true);
	}
	
	//afficheTableObjets(listFamilleProduitsAffiches["famille"+idFamille].listeProduitsParId);
	
}

function rafraichitMenusFamille(idFamille, idArticle)
{
	changeLarticleDuneFamille(idFamille, idArticle);
	
	ecritMenuCouleursFamille(idFamille);
	ecritMenuTailleArticle(idFamille);
	ecritDetailDunArticle(idFamille);
	gereLoaderImageFamille(idFamille);
	gererSelectMenus(idFamille, false);
}


//gestion du chagement de visuel en fonction des couleurs

function clicBoutonChangeCouleurFamille(idFamille, idArticle){
	
	rafraichitMenusFamille(idFamille, idArticle);
	effacePopAmi();
}

function clicBoutonSexeFamille(idFamille,sexeChoisi){
	
	effacePopAmi();
	var i=0;
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	var nbreProduits=tempFamille.listeProduits.length;
	//alert(idFamille + tempFamille.idArticleRepresentatif);
	
	var articleEnCours=tempFamille.listeProduitsParId["article" + tempFamille.idArticleVisibleEnCours].stdClass;
	var mainsEnCours=articleEnCours.mains;
	var couleurEnCours=articleEnCours.complement;
	
		
	//si un seul des éléments sexe est différent du premier alors c'est multisexe
	for(i=0; i<nbreProduits; i++)
	{
		//alert("taille " + afficheTableObjets(tempFamille.listeProduits[0].stdClass.ID));
		if(tempFamille.listeProduits[i].stdClass.sexe==sexeChoisi && tempFamille.listeProduits[i].stdClass.mains==mainsEnCours && tempFamille.listeProduits[i].stdClass.complement==couleurEnCours)
		{
			var idArticle=tempFamille.listeProduits[i].stdClass.ID;
		}
	}
	
	rafraichitMenusFamille(idFamille, idArticle);

}

function clicBoutonMains(idFamille,mainsChoisi){
	
	effacePopAmi();
	var i=0;
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	var nbreProduits=tempFamille.listeProduits.length;
	//alert(idFamille + tempFamille.idArticleRepresentatif);
	
	var articleEnCours=tempFamille.listeProduitsParId["article" + tempFamille.idArticleVisibleEnCours].stdClass;
	var sexeEnCours=articleEnCours.sexe;
	var couleurEnCours=articleEnCours.complement;
	
		
	//si un seul des éléments sexe est différent du premier alors c'est multisexe
	for(i=0; i<nbreProduits; i++)
	{
		//alert("taille " + afficheTableObjets(tempFamille.listeProduits[0].stdClass.ID));
		if(tempFamille.listeProduits[i].stdClass.sexe==sexeEnCours && tempFamille.listeProduits[i].stdClass.mains==mainsChoisi && tempFamille.listeProduits[i].stdClass.complement==couleurEnCours)
		{
			var idArticle=tempFamille.listeProduits[i].stdClass.ID;
		}
	}
	
	
	rafraichitMenusFamille(idFamille, idArticle);
}

function changeLarticleDuneFamille(idFamille, idArticle)
{
	//alert(idFamille+" , " + idArticle);
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	tempFamille.idArticleVisibleEnCours=idArticle;
}

//créer un tabbleau par famille des articles references par leur ID d'article
//stocker cette version du tableau d'articles de la famille dans l'objet famille
function creeTableauIdProduits(idFamille)
{
	var i=0;
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	var nbreProduits=tempFamille.listeProduits.length;
	var listeProduitsParId={};
	
	//si un seul des éléments sexe est différent du premier alors c'est multisexe
	for(i=0; i<nbreProduits; i++)
	{
		//alert("taille " + afficheTableObjets(tempFamille.listeProduits[0].stdClass.ID));
		listeProduitsParId["article"+tempFamille.listeProduits[i].stdClass.ID]=tempFamille.listeProduits[i];	
	}
	
	tempFamille.listeProduitsParId=listeProduitsParId;
}


//affecter à lza famille ses propriétés intrinsèques multiSexe et multiMains
//qui définissent l'apparition des menus sexe et main ou non 
function detecteMultiSexeEtMainsFamille(idFamille)
{
	var i=0;
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	var tempSexe=tempFamille.listeProduits[i].stdClass.sexe;
	
	var nbreProduits=tempFamille.listeProduits.length;
	
	//si un seul des éléments sexe est différent du premier alors c'est multisexe
	for(i=0; i<nbreProduits; i++)
	{
		if(tempFamille.listeProduits[i].stdClass.sexe!=tempSexe)
		{
			tempFamille.multiSexe=true;
			Element.update($('sexeMenu_' + idFamille),htmlMenuSexe(idFamille));
			//alert(htmlMenuSexe(idFamille));
			break;
		}
	}
	
	//si le premeir élémnt est monogant alors c'est toute la famille et vise versa
	if (tempFamille.listeProduits[0].stdClass.mains=="G" || tempFamille.listeProduits[0].stdClass.mains=="D")
	{
		tempFamille.multiMains=true;
		Element.update($('mainsMenu_' + idFamille),htmlMenuMains(idFamille));
		
	}
	
}

function ecritMenuCouleursFamille(idFamille)
{
	//la famille
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	
	//afficheTableObjets(tempFamille);//.listeProduitsParId
	
	//les articles de la famille
	
	var articleChoisi=tempFamille.listeProduitsParId["article" + tempFamille.idArticleVisibleEnCours];

	var nbreArticles=tempFamille.listeProduits.length;
	var sexeChoisi=articleChoisi.stdClass.sexe; //alert(sexeChoisi);
	var mainChoisie=articleChoisi.stdClass.mains; //alert(mainChoisie);
	
	//articles et variantes correspondant
	var listeArticleSelect=[];
	
	//détecter les variantes couleurs de l'article sélectionné dans la même famille
	//pour la même main, pour lz même sexe
	var i=0;
	
	if(tempFamille.multiSexe==true || tempFamille.multiMains==true)
	{
		//ajoute seulement les articles de même main et de même sexe
		for(i=0; i<nbreArticles; i++)
		{
			if(tempFamille.listeProduits[i].stdClass.sexe==sexeChoisi && tempFamille.listeProduits[i].stdClass.mains==mainChoisie)
			{
				listeArticleSelect.push(tempFamille.listeProduits[i]);
			}
		}
	}
	else
	{
		listeArticleSelect=tempFamille.listeProduits;
	}
	
	Element.update($('couleursMenu_' + idFamille),htmlMenuCouleursFamille(idFamille,listeArticleSelect));
	
	//alert(htmlMenuCouleursFamille(idFamille,listeArticleSelect));

}

function ecritMenuTailleArticle(idFamille)
{
	
	//la famille
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	//l'article affiché et choisi pour la famille
	var articleChoisi=tempFamille.listeProduitsParId["article" + tempFamille.idArticleVisibleEnCours].stdClass;
	
	//liste des tailles siponibles pour cet article
	var listeTaillesDisponibles=articleChoisi.listeTaille;

	//alert(listeTaillesDisponibles[0].nomVariante);
	if(listeTaillesDisponibles.length>0)
	{
			Element.update($('choixTaille_' + idFamille),htmlMenuTaille(tempFamille.idArticleVisibleEnCours, listeTaillesDisponibles,idFamille));
	}
	else
	{
		//$('menuTaille_' + idFamille).style.display="none";
		Element.update($('choixTaille_' + idFamille),htmlMenuTaille(tempFamille.idArticleVisibleEnCours, listeTaillesDisponibles,idFamille));
	}
	
	//alert(htmlMenuCouleursFamille(idFamille,listeArticleSelect));

}

function ecritPopValidation(idFamille,tailleChoisi,qte)
{
	//la famille
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	
	//alert(tempFamille.idArticleVisibleEnCours);
	//afficheTableObjets(tempFamille.listeProduitsParId);//.listeProduitsParId
	
	//l'article affiché et choisi pour la famille
	var articleChoisi=tempFamille.listeProduitsParId["article" + tempFamille.idArticleVisibleEnCours];
	//afficheTableObjets(articleChoisi);
	
	Element.update($('validationPanier'),htmlPopAjoutPanier(articleChoisi.stdClass,tailleChoisi,qte));
	
	//alert(htmlPopAjoutPanier(tempFamille.idArticleVisibleEnCours, taille, quantite));

}

function effacePopValidation()
{
	Element.update($('validationPanier'),'');
	document.getElementById("validationPanier").style.display = 'none';
}

function ecritDetailDunArticle(idFamille)
{
	//fonction qui n'est pas lancée à l'initilaisation car préremplie par le flux HTML (intéressant pour le ref)
	
	//la famille
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	
	//alert(tempFamille.idArticleVisibleEnCours);
	//afficheTableObjets(tempFamille.listeProduitsParId);//.listeProduitsParId
	
	//l'article affiché et choisi pour la famille
	var articleChoisi=tempFamille.listeProduitsParId["article" + tempFamille.idArticleVisibleEnCours];
	//afficheTableObjets(articleChoisi);
	
	//met à jour les outils
	Element.update($('outils_' + idFamille), htmlOutilsArticle(idFamille, articleChoisi.stdClass));
	
	//met a jour le bloc visu
	Element.update($('blocVisu_' + idFamille), htmlVisuelsArticle(articleChoisi.stdClass));


}

//gérer le loading des grosses images

function gereLoaderImageFamille(idFamille)
{
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	var imgArticle = document.getElementById("imgProd_"+tempFamille.idArticleVisibleEnCours);
	if(imgArticle.complete==false) {afficheMasqueLoaderArticle(true,tempFamille.idArticleVisibleEnCours);};
	imgArticle.onload=function(){afficheMasqueLoaderArticle(false,tempFamille.idArticleVisibleEnCours);};
}

function afficheMasqueLoaderArticle(visibilite,idArticle)
{
	if(visibilite)
	{
		document.getElementById('loading_'+idArticle).style.display='none';
	}
	else
	{
		document.getElementById('loading_'+idArticle).style.display='none';
	}
}

//fin de gestion de loading

function gererSelectMenus(idFamille, fromInit)
{
	
	initMenuTaille(idFamille);
		
	
	//alert(idFamille);
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	var articleChoisi=tempFamille.listeProduitsParId["article" + tempFamille.idArticleVisibleEnCours];
	//afficheTableObjets(articleChoisi);
	
	
	//menu couleurs
	if(fromInit==false)
	{
		for (var i=0; i<tempFamille.listeProduits.length; i++)
		{
			Element.removeClassName($('btnCouleur_' + tempFamille.listeProduits[i].stdClass.ID), "coulSelect");
		}
	}
	
	Element.toggleClassName($('btnCouleur_' + tempFamille.idArticleVisibleEnCours), "coulSelect");
	
	//menu sexe
	if(tempFamille.multiSexe)
	{
		if(articleChoisi.stdClass.sexe=="homme")
		{
			$('homme_' + idFamille).className="select";
			$('femme_' + idFamille).className="";
		}
		else
		{
			if(articleChoisi.stdClass.sexe=="femme")
			{
				$('homme_' + idFamille).className="";
				$('femme_' + idFamille).className="select";
			}
		}
	}
	
	//menu mains
	if(tempFamille.multiMains)
	{
		//alert("multiMains " + articleChoisi.stdClass.mains);
		if(articleChoisi.stdClass.mains=="D")
		{
			$('mainDroite_' + idFamille).className="select";
			$('mainGauche_' + idFamille).className="";
		}
		else
		{
			if(articleChoisi.stdClass.mains=="G")
			{
				$('mainDroite_' + idFamille).className="";
				$('mainGauche_' + idFamille).className="select";
			}
		}
	}
		
}

function htmlOutilsArticle(idFamille, article)
{
	
	var outPutHtml='';
	outPutHtml+='<div class="prix">';
	outPutHtml+=article.prixTTC + ' €';
	outPutHtml+='</div>';
	
	outPutHtml+='<div class="quantite">Quantit&eacute;'
	outPutHtml+='<input class="comptQuantite" type="text" name="article[';
	outPutHtml+=article.ID;
	outPutHtml+='][quantite]" value="1" />'
	outPutHtml+='<input type="hidden" name="article[';
	outPutHtml+=article.ID;
	outPutHtml+='][tarif]" value="';
	outPutHtml+=article.prixTTC;
	outPutHtml+='" />';
	outPutHtml+='</div>';
	
	outPutHtml+='<div class="panier"><a href="javascript:ajouterPanierCausse(\'';
	outPutHtml+=idFamille;
	outPutHtml+='\');" title="Ajouter au panier">Ajouter &agrave; mon panier</a></div>';
	
	outPutHtml+='<div class="favoris"><a href="javascript:ajouterFavorisCausse(\'';
	outPutHtml+=idFamille;
	outPutHtml+='\');">Ajouter &agrave; mes favoris</a></div>';
	
	outPutHtml+='<div id="ami_'+ idFamille +'" class="ami"><a href="javascript:envoyerAmiCausse(\'';
	outPutHtml+=idFamille;
	outPutHtml+='\');">Envoyer &agrave; un ami</a></div>';
	
	return outPutHtml;
	
}

function htmlVisuelsArticle(article)
{
	
	var outPutHtml='';
	outPutHtml+='<div id="loading_';
	outPutHtml+=article.ID;
	outPutHtml+='" class="loading">';
	outPutHtml+='<img src="/images/LB/loading.gif" alt="chargement" title="chargement"/></div>';
	outPutHtml+='<div id="visu_'
	outPutHtml+=article.ID;
	outPutHtml+='" class="visu' + ((article.multLargVisu>1)?' visuDouble':'') + '">';
	outPutHtml+='<img  id="imgProd_';
	outPutHtml+=article.ID;
	outPutHtml+='" src="/boutique/uploads/articles/gants-295x302/';
	outPutHtml+=article.visuel;
	outPutHtml+='.jpg" alt="';
	outPutHtml+=article.titre;
	outPutHtml+='" title="';
	outPutHtml+=article.titre;
	outPutHtml+='" /></div>';
	
	outPutHtml+='<div class="zoom"><a id="zoom_';
	outPutHtml+=article.ID;
	outPutHtml+='" href="/boutique/uploads/articles/gants-800x534/';
	outPutHtml+=article.visuel;
	outPutHtml+='.jpg" rel="lightbox" title="';
	outPutHtml+=article.titre;
	outPutHtml+='"><sub>+</sub> zoom</a></div>';

	return outPutHtml;
}



function htmlMenuCouleursFamille(idFamille, listeArticleSelect)
{
	var outPutHtml='';
	var nCouleurs=0;
	var urlPage = 'http://' + window.location.hostname + '/boutique/fr/famille.php?ID_gamme=' + idGammeEnCoursInit + '&ID_famille='+idFamille + '&ID_article=';
	for(nCouleurs=0; nCouleurs<listeArticleSelect.length; nCouleurs++)
	{
		outPutHtml+=((nCouleurs % 3) == 0)?'<div class="coulLigne">':'';//ouvre ligne si divisible par 3
		outPutHtml+='<div class="coulDetail"><a id="btnCouleur_';
		outPutHtml+=listeArticleSelect[nCouleurs].stdClass.ID;
		outPutHtml+='" href="'+urlPage+listeArticleSelect[nCouleurs].stdClass.ID+'" onclick="clicBoutonChangeCouleurFamille(\'';																																																																																																							 		//outPutHtml+='" href="'+urlPage+listeArticleSelect[nCouleurs].stdClass.ID+'"';
		outPutHtml+=idFamille + "','" + listeArticleSelect[nCouleurs].stdClass.ID;																
		outPutHtml+='\'); return false;"><img src="/boutique/uploads/articles/gants-32x32/';
		//outPutHtml+='"><img src="/boutique/uploads/articles/gants-32x32/';
		outPutHtml+=listeArticleSelect[nCouleurs].stdClass.visuel;
		outPutHtml+='.jpg" alt="';
		outPutHtml+=listeArticleSelect[nCouleurs].stdClass.complement;
		outPutHtml+='" width="32" height="32" title="';
		outPutHtml+=listeArticleSelect[nCouleurs].stdClass.complement;
		outPutHtml+='" /></a></div>';
		outPutHtml+=((nCouleurs % 3) == 2)?'</div>':''; //ferme ligne si ça va être divisible par 3 au prochain tour
	}
	nCouleurs++;
	outPutHtml+=((nCouleurs % 3) != 0)?'</div>':''; //ferme ligne 
	
	return outPutHtml;
}

function htmlMenuSexe(idFamille)
{
	var outPutHtml='';
	outPutHtml+='<div class="choixSexe">';
	outPutHtml+='<div class="sexe"><a onclick="" href="javascript:clicBoutonSexeFamille(\'' + idFamille + '\',\'homme\');" id="homme_';
	outPutHtml+=idFamille;
	outPutHtml+='">Homme</a></div>';
	outPutHtml+='<div class="sexe"><a onclick="" href="javascript:clicBoutonSexeFamille(\'' + idFamille + '\',\'femme\');" id="femme_';
	outPutHtml+=idFamille;
	outPutHtml+='">Femme</a></div>';
	outPutHtml+='</div>';
	return outPutHtml;
}

function htmlMenuMains(idFamille)
{
	var outPutHtml='';
	outPutHtml+='<div class="choixMains">';
	outPutHtml+='<div class="main"><a onclick="" href="javascript:clicBoutonMains(\'';
	outPutHtml+=idFamille;
	outPutHtml+='\',\'D\');" id="mainDroite_';
	outPutHtml+=idFamille;
	outPutHtml+='">Main Droite</a></div>';
	outPutHtml+='<div class="main"><a onclick="" href="javascript:clicBoutonMains(\'';
	outPutHtml+=idFamille;
	outPutHtml+='\',\'G\');" id="mainGauche_';
	outPutHtml+=idFamille;
	outPutHtml+='">Main Gauche</a></div>';
	outPutHtml+='</div>';
	return outPutHtml;
}


function htmlMenuTaille(idArticle, listeTaillesDisponibles,idFamille)
{
	var outPutHtml='';
	var i=0;
	var nTailles=listeTaillesDisponibles.length

	for (i=0; i<nTailles; i++)
	{
		outPutHtml+='<li><a class="boutonTaille" id="btnTaille_' + idArticle + "_" + listeTaillesDisponibles[i].ID + '" ';
		outPutHtml+='href="javascript:clicSurElementTaille(\''
		outPutHtml+=listeTaillesDisponibles[i].nomVariante + '\',\'' + listeTaillesDisponibles[i].ID + '\',\'' + idArticle + '\',\'' + idFamille + '\',\'' + listeTaillesDisponibles[i].stock + '\');">' + listeTaillesDisponibles[i].nomVariante;
		
		if(listeTaillesDisponibles[i].stock==0)
		{
			outPutHtml+=' (... délai mini 2 sem)';
		}
		outPutHtml+='</a></li>'
	}
	outPutHtml+='<li class="derierListe"><a class="boutonTaille" href="/fr/choix-taille.php">Comment choisir sa taille ?</a></li>';
	//outPutHtml+='<li class="valider"><a class="boutonTaille" href="javascript:clicSurMenuTaille(\''+idFamille+'\')">Valider</a></li>';
	return outPutHtml;
}


function htmlPopAjoutPanier(article,tailleChoisi,qte)
{
	var outPutHtml='';
	outPutHtml+='<h4>Vous venez d\'ajouter &agrave; votre panier :</h4>' ;
	outPutHtml+='<img src="/boutique/uploads/articles/gants-100x100/' + article.visuel + '.jpg" alt="' + article.titre + '" title="' + article.titre + '" />';
	outPutHtml+='<div class="detailArticlePanier">';
	outPutHtml+='<h3>' + article.titre + '</h3>';
	outPutHtml+='<span class="reference">(Ref.' + article.reference + ' )</span>';
	outPutHtml+='<div class="options"><p class="reference">Taille : ' + tailleChoisi + ' </p>';
	outPutHtml+='<p class="quantite"><span class="modifQuantite">Quantit&eacute; : '+ qte +'<br/>Prix TTC : '+article.prixTTC+' &euro; </span></p>';
	outPutHtml+='<div class="alerte"><p>'+article.alerte+'</p></div>';
	outPutHtml+='</div></div><div class="choixValide">';
	outPutHtml+='<div class="valideBtn"><a href="/boutique/fr/panier.php" id="valideCommande">Terminer ma commande</a></div><div class="valideBtn"><a href="javascript:effacePopValidation();" id="continueCommande">Continuer mes achats</a></div>';
	outPutHtml+='</div>';
	return outPutHtml;
}

function htmlPopAmiOk()
{
	var outPutHtml='';
	outPutHtml+='<div id="pagePopAmiContent">';
	outPutHtml+='<div id="enTeteClose">';
	outPutHtml+='<div id="closeFenetre">';
	outPutHtml+='<a href="javascript:effacePopAmi();">x fermer</a>';
	outPutHtml+='</div>';
	outPutHtml+='</div>';
	outPutHtml+='<div id="contenuPop">';
	outPutHtml+='<h1>Envoyer la page &agrave; un ami</h1>';
	outPutHtml+='<p><strong>Votre message a bien &eacute;t&eacute; envoy&eacute;</strong></p>';
	outPutHtml+='</div>';
	outPutHtml+='</div>' ;
	return outPutHtml;
}

function afficheTableObjets(table)
{
	alert(Object.toJSON(table));	
}

//gestion du panier de commande
//____________________________________

function myIdCommandeEnCours(idCommande)
{
	idCommandeEnCours=idCommande;
}

function ajouterPanierCausse(idFamille)
{
	effacePopAmi();
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	var articleChoisi=tempFamille.listeProduitsParId["article" + tempFamille.idArticleVisibleEnCours].stdClass;
	//liste des tailles siponibles pour cet article
	var listeTaillesDisponibles=articleChoisi.listeTaille;
	//alert("listeTaillesDisponibles" + listeTaillesDisponibles.length);
	
	//alert(listeTaillesDisponibles[0].nomVariante);
	//gere la taille choisie
	if (!tempFamille.objTailleChoisieEnCours.ID && listeTaillesDisponibles.length>0)
	{
		alert("Merci de choisir une taille ci-dessus pour pouvoir commander un gant");
	}
	else
	{
		//gere la quantité
		var form = $('commander');
		var quantite=$F(form['article[' + tempFamille.idArticleVisibleEnCours + '][quantite]']);
		//alert(tempFamille.objTailleChoisieEnCours);
		//alert(quantite);
		
		//lancer un web service via prototype, en asynchrone
		 var parametres={version:"1.1",method:"ajouterPanier",id:1,params:{ID_article:tempFamille.idArticleVisibleEnCours,array_ID_variantes:[tempFamille.objTailleChoisieEnCours.ID],quantite:quantite}};
		 new Ajax.Request('/boutique/includes/classes/webService.php', {
		  method: 'post',
		  postBody: Object.toJSON(parametres),
		  requestHeaders:{Accept:'application/json'},
		   onSuccess: function(transport){
			  //var response = transport.responseText || "no response text";
			  //alert("Success! \n\n" + transport.responseText);
			   excuteSiPanierOk(transport.responseText);
			   ecritPopValidation(idFamille,tempFamille.objTailleChoisieEnCours.nomVariante,quantite);
	$('validationPanier').style.display = 'block';
			  //alert("02" + temp);
			  //creeTableau(temp.result);
			  }});
		 
		 
		 
	}
}

function excuteSiPanierOk(retourWebservice)
{
	var tempJson=retourWebservice.evalJSON();
	var nbreArticlePanier=tempJson.result;
	Element.update('monPanier', '( ' + nbreArticlePanier + ' ) PANIER');
}

function ajouterFavorisCausse(idFamille)
{
	effacePopAmi();
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	//afficheTableObjets(tempFamille);
	
		//lancer un web service via prototype, en asynchrone
		 var parametres={version:"1.1",method:"ajouterFavoris",id:1,params:{ID_article:tempFamille.idArticleVisibleEnCours,quantite:1}};
		 new Ajax.Request('/boutique/includes/classes/webService.php', {
		  method: 'post',
		  postBody: Object.toJSON(parametres),
		  requestHeaders:{Accept:'application/json'},
		   onSuccess: function(transport){
			  //var response = transport.responseText || "no response text";
			  //alert("Success! \n\n" + transport.responseText);
			  excuteSiFavorisOk(transport.responseText);
			  //alert("02" + temp);
			  //creeTableau(temp.result);
			  }});
}


function excuteSiFavorisOk(retourWebservice)
{
	var tempJson=retourWebservice.evalJSON();
	var nbreArticleFavoris=tempJson.result;
	Element.update('mesFavoris', '( ' + nbreArticleFavoris + ' ) FAVORIS');
}

function envoyerAmiCausse(idFamille)
{

	if(!popAmiOuvert && !popAmiAnimEnCours)
	{
	popAmiOuvert=true;
	var tempFamille=listFamilleProduitsAffiches["famille"+idFamille];
	var urlPage = 'http://' + window.location.hostname + '/boutique/fr/famille.php?ID_gamme=' + idGammeEnCours + '&ID_famille='+idFamille + '&ID_article='+tempFamille.idArticleVisibleEnCours;
	var titrePage = unescape(window.document.title);
		 popAmiAnimEnCours=true;	
		 new Ajax.Request('/boutique/fr/popup/envoyer-page-ami.php', {
		  method: 'get',
		  parameters: {titrePageAmi:titrePage, UrlPageAmi:urlPage},
		  requestHeaders:{Accept:'text/html'},
		   onSuccess: function(transport){
			  //alert("Success! \n\n" + transport.responseText);
			   affichePopAmi(transport.responseText);}
			  });

	}
}

function affichePopAmi(contenuHtml)
{
	//alert("er");
	 Element.update($('pageAmi'),contenuHtml);
	 $('pageAmi').style.display = 'block';
	 $('pageAmi').style.top='20px';
	 Effect.MoveBy('pageAmi', 810, 0, {duration:1, fps:25, from:0.0, to:1.0, afterFinish : function () {reactiveAnimationPopAmi();}});
}

function envoiPageAmiOk(title, formulaire)
{
	$('formulaireEnvoiAmi').request({
									method: 'post',
									onComplete: function()
									{
										Element.update($('pageAmi'),htmlPopAmiOk());
									}
									})
}

function effacePopAmi()
{
	if(popAmiOuvert && !popAmiAnimEnCours)
	{
		popAmiOuvert=false;
		$('pageAmi').style.top='820px';
		popAmiAnimEnCours=true;	
		Effect.MoveBy('pageAmi', -810, 0, {duration:1, fps:25, from:0.0, to:1.0, afterFinish : function () {reactiveAnimationPopAmi();}});
	}
}

function reactiveAnimationPopAmi()
{
	popAmiAnimEnCours=false;	
}