var sIdImageOld = "pele-mele";
var nCodeProduit = 1205, nCodeTransporteur = 1,nCodePort = 1;
var sLibelleTransporteur = "La Poste";
var sLibelleFormat = "Créatif 15x20";

function showImage(sImg, sTitle, sLongDesc){
	
	if (sIdImageOld != sImg){
		var sCodeHTML;
		
		if(sImg != 'anim-pele-mele' && sImg != 'D-pele-mele'){
			sCodeHTML = '<img src="image/'+sImg+'.jpg" alt="'+sTitle+'" title="'+sTitle+'"/>';
			document.getElementById("presentation_pele_mele_img").style.backgroundImage = '';
		}	
		else if(sImg == 'anim-pele-mele'){
			document.getElementById("presentation_pele_mele_img").style.backgroundImage = 'url(image/bg-animation.gif)';
			//affichage de la presentation flash
			sCodeHTML = '<object type="application/x-shockwave-flash" data="image/presentation_pele-mele.swf" width="400" height="260" style="margin-top:3px;margin-left:3px;>';
			sCodeHTML += '<param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="false" />';
			sCodeHTML += '<param name="movie" value="image/presentation_pele-mele.swf" />';
			sCodeHTML += '<param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><param name="wmode" value="transparent" /></object>';			
		}
		else{
			document.getElementById("presentation_pele_mele_img").style.backgroundImage = 'url(image/bg-animation.gif)';
			
			//affichage du fla 3D.
			sCodeHTML = '<object type="application/x-shockwave-flash" data="image/pele-mele.swf" width="400" height="260" style="margin-top:5px;margin-left:3px;">';
			sCodeHTML += '<param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="false" />';
			sCodeHTML += '<param name="movie" value="image/pele-mele.swf" />';
			sCodeHTML += '<param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><param name="wmode" value="transparent" /></object>';
		}
		
		document.getElementById("visuel").innerHTML = "";
		document.getElementById("visuel").innerHTML = sCodeHTML;
		
		//passons tous les pictos sur off
		document.getElementById("pele-mele").src = "image/picto-pele-mele-off.jpg";
		document.getElementById("details-pele-mele").src = "image/picto-details-pele-mele-off.jpg";
		document.getElementById("anim-pele-mele").src = "image/picto-anim-pele-mele-off.jpg";
		document.getElementById("D-pele-mele").src = "/images/tarifs/picto-3d-off.jpg";
		
		//l'elt en cours sur on
		if(sImg != 'D-pele-mele' )
			document.getElementById(sImg).src = "image/picto-" + sImg + "-on.jpg";
		else
			document.getElementById(sImg).src = "/images/tarifs/picto-3d-on.jpg";
		
		//supprimons le rollover de l'elt demandé
		document.getElementById(sImg).onmouseover = "";
		document.getElementById(sImg).onmouseout = "";	
		
		//supprimons le rollover de l'elt demandé
		document.getElementById(sImg).onmouseover = "";
		document.getElementById(sImg).onmouseout = "";	

		
		//mettons en place le rollover sur l'elt desactivé /declaration en dur bug javascript ??
		if(sIdImageOld == 'pele-mele'){
			document.getElementById("pele-mele").onmouseout = function(){document.getElementById("pele-mele").src="image/picto-pele-mele-off.jpg";};
			document.getElementById("pele-mele").onmouseover = function(){document.getElementById("pele-mele").src="image/picto-pele-mele-on.jpg";};
		}
		else if(sIdImageOld == 'anim-pele-mele'){
			document.getElementById("anim-pele-mele").onmouseout = function(){document.getElementById("anim-pele-mele").src="image/picto-anim-pele-mele-off.jpg";};
			document.getElementById("anim-pele-mele").onmouseover = function(){document.getElementById("anim-pele-mele").src="image/picto-anim-pele-mele-on.jpg";};
		}
		else if(sIdImageOld == 'details-pele-mele'){
			document.getElementById("details-pele-mele").onmouseout = function(){document.getElementById("details-pele-mele").src="image/picto-details-pele-mele-off.jpg";};
			document.getElementById("details-pele-mele").onmouseover = function(){document.getElementById("details-pele-mele").src="image/picto-details-pele-mele-on.jpg";};
		}
		else if(sIdImageOld == 'D-pele-mele'){
			document.getElementById("D-pele-mele").onmouseover = function(){document.getElementById("D-pele-mele").src="/images/tarifs/picto-3d-on.jpg";};
			document.getElementById("D-pele-mele").onmouseout = function(){document.getElementById("D-pele-mele").src="/images/tarifs/picto-3d-off.jpg";};
		}
		
		sIdImageOld = sImg;
	}
}

function getPort(){
	//affichons le port en augmentant la taille du corps de la page.
	document.getElementById("port").style.display = "block";
	document.getElementById("corps").style.height = "970px";
}

function doHidePort(){
	//fermons le port et reduisont la taille du corps de la page
	document.getElementById("port").style.display = "none";	
	document.getElementById("corps").style.height = "auto";
}

function getDivPort(nCodeZone){
	var i;
	for (i = 1; i <= nCptZone; i++)
		if (i != nCodeZone)
		{
			document.getElementById("tab-" + i).style.display = "none";
			document.getElementById("font-" + i).color = "";
		}
		else
		{
			document.getElementById("tab-" + nCodeZone).style.display = "block";
			document.getElementById("font-" + i).color = "#A2978E";
		}
}

function getApercu(){
	document.getElementById("apercu").style.display = "block";
	document.getElementById("corps").style.height = "970px";
}

function hideApercu(){
	document.getElementById("apercu").style.display = "none";
	document.getElementById("corps").style.height = "auto";
}

function onChangeFormatPM(){
	var aFormatChoisi = document.getElementById("format").value.split("_");
	nCodeProduit = aFormatChoisi[0];
	nCodePort = aFormatChoisi[1];
	sLibelleFormat = aFormatChoisi[2];
	onChargeChoixTransporteur();
}

function onChargeChoixTransporteur(){
	var sCode = "<select name=\"transporteur\" id=\"transporteur\" style=\"width:130px;\">";
	for (i = 0; i < tabCodePort.length ; i++)
		if (parseInt(tabCodePort[i]) == parseInt(nCodePort))
			if (nCodeTransporteur == parseInt(tabCodeTransporteur[i]))
				sCode += "<option value=\"" + tabCodeTransporteur[i] + "\" selected=\"selected\">" + tabNomTransporteur[i] + "</option>";
			else
				sCode += "<option value=\"" + tabCodeTransporteur[i] + "\">" + tabNomTransporteur[i] + "</option>";
	sCode += "</select>";
	
	document.getElementById("choix_transporteur").innerHTML = sCode;
}

function onValide(){
	nCodeTransporteur = document.getElementById("transporteur").value;
	var i;

	for (i = 0; i < tabCodeTransporteur.length ; i++)
		if (parseInt(tabCodeTransporteur[i]) == parseInt(nCodeTransporteur) && parseInt(tabCodePort[i]) == parseInt(nCodePort))
			sLibelleTransporteur = tabNomTransporteur[i];

	//var sUrl = "ifr-frais-de-port.asp?produit=" + nCodeProduit + "&port=" + nCodePort + "&transp=" + nCodeTransporteur + "&lib_transp=" + sLibelleTransporteur + "&lib_format=" + sLibelleFormat + "&num=" + Math.random();
	var sUrl = "/produit/frais-de-port/ajax-frais-de-port.asp?produit=" + nCodeProduit + "&port=" + nCodePort + "&transp=" + nCodeTransporteur + "&lib_transp=" + sLibelleTransporteur + "&lib_format=" + sLibelleFormat + "&num=" + Math.random();	
	
	document.getElementById("id_tarifs_detail").style.display = "block";
	
	var xhr_object = null; 
	var sRetour;
	var sVerifZone;
	var i;
	 
	if(window.XMLHttpRequest)
		xhr_object = new XMLHttpRequest(); 
	else if(window.ActiveXObject)
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
	else{
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		return; 
	} 
	 
	xhr_object.open("GET", sUrl, true); 
	 
	xhr_object.onreadystatechange = function() { 
	   if(xhr_object.readyState == 4){ 
	   		sRetour = unescape(escape(xhr_object.responseText));
			sRetour = sRetour.replace(/&lt;/g,'<');
			sRetour = sRetour.replace(/&gt;/g,'>');
			sRetour = sRetour.replace(/&quot;/g,'"');
			sRetour = sRetour.replace(/&amp;agrave;/g,'&agrave;');
			sRetour = sRetour.replace(/&amp;euro;/g,'&euro;');
			sRetour = sRetour.replace(/&amp;eacute;/g,'&eacute;');
			sRetour = sRetour.replace(/&amp;ucirc;/g,'&ucirc;');
			
			document.getElementById("id_tarifs_detail").innerHTML = sRetour; 
			
			//comptons les zones afin que l'afficahge des calques de zone ne bug pas
			sVerifZone = document.getElementById("lib-zone").innerHTML;
			var sTabVerifZone = sVerifZone.split("|")
			nCptZone = sTabVerifZone.length;
			getDivPort(1)
		}
	}	
	xhr_object.send(null);
}

function getDivPort(nCodeZone){
	var i;
	for (i = 1; i <= nCptZone; i++)
		if (i != nCodeZone)		{
			document.getElementById("tab-" + i).style.display = "none";
			document.getElementById("font-" + i).color = "";
		}
		else{
			document.getElementById("tab-" + nCodeZone).style.display = "block";
			document.getElementById("font-" + i).color = "#A2978E";
		}
}

function getIndiceSuivant(nParamIndice){
	var nCodeThemeEnCours = tabTheme[nParamIndice];
	var nSuivant
	
	if( nCodeThemeEnCours == tabTheme[nParamIndice + 1] ){
		nSuivant = nParamIndice + 1;
	}
	else{
		//on renvoit le premier indice du theme
		var nI;
		for( nI = 0; nI < tabTheme.length; nI++ ){
			if( tabTheme[nI] == nCodeThemeEnCours ){
				nSuivant = nI;
				break;
			}		
		}
	}
	
	return nSuivant;
}


function getIndicePrec(nParamIndice){
	var nCodeThemeEnCours = tabTheme[nParamIndice];
	var nPrec;
	
	if( nCodeThemeEnCours == tabTheme[nParamIndice - 1] ){
		nPrec = nParamIndice - 1;		
	}
	else{
		//on renvoit le dernier indice du theme
		var nI;
		for( nI = tabTheme.length; nI >= 0; nI-- ){
			if( tabTheme[nI] == nCodeThemeEnCours ){
				nPrec = nI;
				break;
			}		
		}
	}
	
	return nPrec;
}

function getPosition(nParamIndice){
	var nCodeThemeEnCours = tabTheme[nParamIndice];
	var nCodeFondEnCours = tabFond[nParamIndice];
	var nI;
	var nPosition = 0;
	
	for( nI=0; nI<tabTheme.length; nI++ ){
		if( tabTheme[nI] == nCodeThemeEnCours )
			nPosition++;
		if( tabFond[nI] == nCodeFondEnCours)
			break;
	}
	
	return nPosition;
	//alert('ind : ' + nParamIndice + ' pos' + nPosition );
}


//affiche le choix des compos
function onShowListeCompo(nParamIndice){
	
	//document.getElementById("id_bouton_prec").innerHTML = '<img src="/images/bouton/precedent.gif" onclick="onChangeCompo(' + getIndicePrec(nParamIndice) + ')" class="clickable"/>';
	//document.getElementById("id_bouton_suiv").innerHTML = '<img src="/images/bouton/suivant.gif" onclick="onChangeCompo(' + getIndiceSuivant(nParamIndice) + ')" class="clickable"/>';
		
	//document.getElementById("id_liste_fond").innerHTML = "<b> " + getPosition(nParamIndice) + " / " + getNbFond() + "</b>";
	nIndice = nParamIndice;
	
	buildFond()	;
}

function onInit2(){
	//on initialise le theme et le fond
	var nI;
	
	for(nI=0; nI < tabFond.length; nI++){
		
		if( tabFond[nI] == nCodeFond ){
			//l indice en cours
			nIndice = nI;
			
			//preselect du theme
			document.getElementById("id_theme").value = tabTheme[nIndice];
		}
	}
	
	onShowListeCompo(nIndice);
	majExemple();
}

//renvoi le nb de compo pour le thème en cours
function getNbFond(){
	var i, nCpt = 0;
	var bBreak = false, bMajIndice = false;
	var nCodeThemeEnCours = tabTheme[nIndice];
	
	for (i = 0; i < tabTheme.length; i++){
		
		if (tabTheme[i] == nCodeThemeEnCours){
			if (!bMajIndice){
				nIndice = i;
				bMajIndice = true;
			}
			
			nCpt++;
			bBreak = true;
		}
		else if (bBreak)
			break;
	}
	return nCpt;
}

function majExemple(){
	document.getElementById("id_ex_illustre").innerHTML = "<img src=\"image/visu/fond_" + tabFond[nIndice] + ".jpg\"/>";
}

//changement de compo
function onChangeCompo(nParamIndiceFond){
	nIndice = nParamIndiceFond;
	onShowListeCompo(nIndice);
	nCodeFond = tabFond[nIndice];
	majExemple();
}

//Changement de thème
function onChangeTheme(){
	var nCodeThemeEnCours = document.getElementById("id_theme").value;
	
	//on recupere le premier indice du theme
	var nI;
	
	for( nI=0; nI < tabTheme.length; nI++ ){
		if( tabTheme[nI] == nCodeThemeEnCours ){
			nIndice = nI;
			break;
		}
	}
	
	nNbFond = getNbFond();
	onShowListeCompo(nIndice);
	nCodeFond = tabFond[nIndice];
	
	majExemple();
}

function buildFond(){
	//construction de la liste des fond
	var Elt = document.getElementById("id_visu_fond");
	var sCode = "";
	var nCodeThemeEnCours = tabTheme[nIndice];
	var nI;
	var nCpt = 0;
	
	sCode += '<table cellpadding="0" cellpadding="0"" border="0" width="135px">';
	
	for(nI = 0; nI < tabFond.length; nI++){
		if( tabTheme[nI] == nCodeThemeEnCours ){
			//le fond fait partie du theme
			nCpt++
			
			if( nCpt % 3 == 1 )
				sCode += '<tr>';
			
			if( nI == nIndice )
				sCode += '<td class="fond-sel"><img src="image/fond_presentation/fond_' + tabFond[nI] + '.gif" alt="visualiser la composition" title="visualiser la composition" class="clickable" onclick="onChangeCompo(' + nI + ');"  /></td>'
			else
				sCode += '<td class="fond-non-sel" id="td_fond_' + nI + '"><img src="image/fond_presentation/fond_' + tabFond[nI] + '.gif"  alt="visualiser la composition" title="visualiser la composition" class="clickable" onclick="onChangeCompo(' + nI + ');" onmouseover="document.getElementById(\'td_fond_' + nI + '\').className=\'fond-sel\';" onmouseout="document.getElementById(\'td_fond_' + nI + '\').className=\'fond-non-sel\';" /></td>'
					
			if( nCpt % 3 == 0 )
				sCode += '</tr>';
		}
	}
	
	sCode += '</table>'
	
	Elt.innerHTML = sCode;
}