/*
	getDiv(sDiv)
	doHideMe(sDiv)
	getPort()
	doHidePort()
	getApercu()
	hideApercu()
	showImage(sImg, sTitle, sLongDesc)
	onInit()
	onShowFormatDispo()
	majTheme(nNouvProduit)
	onChangeTheme()
	majExemple()
	onChangeFormat(nNouvProduit)
	onChangeCompo(nNouvIndiceComposition)	
*/

var sIdImageOn = "carte-postale";
var sIdImageOld = "carte-postale";

function getDiv(sDiv)
{
	document.getElementById(sDiv).style.display = "block";
}

function doHideMe(sDiv){
	document.getElementById(sDiv).style.display = "none";
}

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 getApercu(){
	document.getElementById("apercu").style.display = "block";
	document.getElementById("corps").style.height = "1100px";
}

function hideApercu(){
	document.getElementById("apercu").style.display = "none";
	document.getElementById("corps").style.height = "auto";
	//document.location = "#top-page";
}

function showImage(sImg, sTitle, sLongDesc){
	if (sIdImageOn != sImg){
		var sCodeHTML;
		//sCodeHTML = '<img src="image/'+sImg+'.jpg" alt="'+sTitle+'" title="'+sTitle+'" longdesc="'+sLongDesc+'"/>';
		sCodeHTML = '<img src="image/'+sImg+'.jpg" alt="'+sTitle+'" title="'+sTitle+'"/>';
		document.getElementById("visuel").innerHTML = "";
		document.getElementById("visuel").innerHTML = sCodeHTML;
		document.getElementById(sImg).src = "image/picto-" + sImg + "-on.jpg";
		document.getElementById(sImg).onmouseover = "";
		document.getElementById(sImg).onmouseout = "";
		document.getElementById(sIdImageOn).src = "image/picto-" + sIdImageOn + "-off.jpg";
		sIdImageOld = sIdImageOn;
		document.getElementById(sIdImageOld).onmouseover = function(){document.getElementById(sIdImageOld).src="image/picto-" + sIdImageOld + "-on.jpg";};
		document.getElementById(sIdImageOld).onmouseout = function(){document.getElementById(sIdImageOld).src="image/picto-" + sIdImageOld + "-off.jpg";};
		sIdImageOn = sImg;
	}
}

function onInit(){
	onShowFormatDispo();	
}

function onShowFormatDispo(){
	//on affiche tous les formats disponible, en checkant le code_produit en cours
	var sCode = '<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr>';
	var i;
	
	for(i=0; i<tabFormatDispo.length - 1; i++){
		sCode += '<td><input type="radio" id="format_' + tabFormatDispo[i] + '" name="format"' ;
		
		if(tabFormatDispo[i] == nCodeProduit)
			sCode += ' checked="checked"';
			
		sCode += ' onclick="onChangeFormat(' + tabFormatDispo[i] + ')" value="' + tabFormatDispo[i] + '"/>'
		sCode += "<font class=\"clickable\" onclick=\"document.getElementById('format_" + tabFormatDispo[i] + "').click();\">" + tabLibelleFormat[i] + '</font></td>';
	}
	
	sCode += "</tr></table>";
	document.getElementById("id_format_dispo").innerHTML = sCode;
	majTheme(nCodeProduit);
}

function majTheme(nNouvProduit){
	//mise à jour des themes pour le code_produit selectionne
	var i;
	var sCode;
	
	sCode = '<select name="theme" id="id_theme" onchange="onChangeTheme();">';
	
	for(i = 0; i < tabListeCodeTheme.length - 1; i++){
		if(tabListeThemeCodeProduit[i] == nCodeProduit){
			sCode += '<option value="' + tabListeCodeTheme[i] + '"';
			
			if(tabListeCodeTheme[i] == nIndiceTheme)
				sCode += ' selected';
			
			sCode += '>'+ tabListeLibelleTheme[i] + '</option>';
		}
	}
	
	sCode += '</select>';
	document.getElementById("id_theme_dispo").innerHTML = sCode;
	onChangeTheme();
}

function onChangeTheme(){
	//mise a jour des compositions en fct du theme
	var i;
	var cpt = 0;
	
	//recuperons le theme selectionné
	nIndiceTheme = document.getElementById('id_theme').options[document.getElementById('id_theme').selectedIndex].value;	
	
	//re - créons LE tableau des compositions/fond en fct du theme demandé
	tabCompo = new Array();
	
	for(i = 0; i < tabCodeCompo.length - 1; i++){
		if(tabCompoCodeTheme[i] == nIndiceTheme){			
			tabCompo[cpt] = tabCodeCompo[i]
			cpt++;		
		}
	}

	nNbCompo = cpt;
	
	if(nCodeCompositionEnCours > 0){
		//parsons le tableau des compos et trouvons la compo en cours, pour en recupéré l'indice
		for(i = 0; i < tabCompo.length; i++){
			if( tabCompo[i] == nCodeCompositionEnCours ){
				nIndiceComposition = i;
				nCodeCompostion = tabCompo[i]
			}
		}
			
		//on passe la compo en cours en negatif pour ne plus la verifier	
		nCodeCompositionEnCours = -1;
	}
	else{		
		nIndiceComposition = 0;
		nCodeComposition = tabCompo[0];
	}

	//mettons a jour les boutons suivant et précédents
	//precedent ssi code compo <> 1er & 
	if(nCodeComposition != tabCompo[0] && nNbCompo > 1 )
		document.getElementById("id_bouton_prec").innerHTML = "<img alt=\"Pr&eacute;c&eacute;dent\" title=\"Pr&eacute;c&eacute;dent\" src=\"/images/bouton/precedent.gif\" onclick=\"onChangeCompo(" + tabCompo[nIndiceComposition - 1] + ")\" class=\"clickable\"/>";
	else
		document.getElementById("id_bouton_prec").innerHTML = "&nbsp;"
	
	//suiv ssi 	codecompo <> dernier
	if(nCodeComposition != tabCompo[nNbCompo - 1])
		document.getElementById("id_bouton_suiv").innerHTML = "<img alt=\"Suivant\" title=\"Suivant\" src=\"/images/bouton/suivant.gif\" onclick=\"onChangeCompo(" + tabCompo[nIndiceComposition + 1] + ")\" class=\"clickable\"/>";
	else
		document.getElementById("id_bouton_suiv").innerHTML = "&nbsp;"
	
	//mettons l'indice correct
	document.getElementById("id_liste_compo").innerHTML = '<b>' + String(nIndiceComposition + 1) + " / " + nNbCompo + '</b>';
	
	//mettons a jour le formulaire
	document.getElementById("id_composition").value = nCodeComposition;
	
	//affichons la visualisation
	majExemple();
}

function majExemple(){
	//mise a jour de l'exemple en fct du code produit, du theme, et du fond	
	document.getElementById("id_ex_illustre").innerHTML = "<img id=\"image\" src=\"image/visu/visu_" + nIndiceTheme + "_" + nCodeComposition + "_zoom.jpg\" border=\"0\" />";	
	
}

function onChangeFormat(nNouvProduit){
	nCodeProduit = nNouvProduit;
	majTheme(nCodeProduit);
	majExemple();
}

function onChangeCompo(nNouvIndiceComposition){
	var i;
	var nIndiceCompoEnCours;
	
	//recuperons l'indice en cours
	for(i=0; i<tabCompo.length; i++){
		if(tabCompo[i] == nNouvIndiceComposition ) nIndiceCompoEnCours = i;	
	}
	
	nCodeComposition = nNouvIndiceComposition;
	
	//mettons a jour les boutons suivant et précédents
	//precedent ssi code compo <> 1er & 
	if(nCodeComposition != tabCompo[0] && nNbCompo > 1 )
		document.getElementById("id_bouton_prec").innerHTML = "<img alt=\"Pr&eacute;c&eacute;dent\" title=\"Pr&eacute;c&eacute;dent\" src=\"/images/bouton/precedent.gif\" onclick=\"onChangeCompo(" + tabCompo[nIndiceCompoEnCours - 1] + ")\" class=\"clickable\"/>";
	else
		document.getElementById("id_bouton_prec").innerHTML = "&nbsp;"
	
	//suiv ssi 	codecompo <> dernier
	if(nCodeComposition != tabCompo[nNbCompo - 1])
		document.getElementById("id_bouton_suiv").innerHTML = "<img alt=\"Suivant\" title=\"Suivant\" src=\"/images/bouton/suivant.gif\" onclick=\"onChangeCompo(" + tabCompo[nIndiceCompoEnCours + 1] + ")\" class=\"clickable\"/>";
	else
		document.getElementById("id_bouton_suiv").innerHTML = "&nbsp;"
	
	//mettons l'indice correct
	document.getElementById("id_liste_compo").innerHTML = '<b>' + String(nIndiceCompoEnCours + 1) + " / " + nNbCompo + '</b>';
	
	//affichons la visualisation
	majExemple();
}