function uploadImageDeFond(){
	// alert('uploadImageDeFond');
	document.getElementById("codeOpe").value="uploadImageDeFond";
	document.menuSiteForm.submit();
}

// -----------------------------------------------------
// Pick color text
// -----------------------------------------------------
function myFunction(){
	// alert('test');
	document.getElementById("fontColorPicker").click();
}

// -----------------------------------------------------
// Pick color fonds
// -----------------------------------------------------
function myFunction2(){
	 document.getElementById("fColorPicker").click();
}

// -----------------------------------------------------
// Pick color bords
// -----------------------------------------------------
function myFunction3(){
	document.getElementById("bcolor-picker").click();
}

// -----------------------------------------------------
// Pick color bords bgcolorGlob
// -----------------------------------------------------
function myFunction4(){
	// alert('test');
	document.getElementById("bgGlobColorPicker").click();
}

// -----------------------------------------------------
// Pick color bords fontGlob
// -----------------------------------------------------
function myFunction5()	{
	document.getElementById("fGlobColorPicker").click();
}

// -----------------------------------------------------
// Pick color theme fond
// -----------------------------------------------------
function myFunction6()	{
	document.getElementById("thFondColorPicker").click();
}

// -----------------------------------------------------
// Pick color theme font
// -----------------------------------------------------
function myFunction7()	{
	document.getElementById("themeFontColorPcker").click();
}

// -----------------------------------------------------
// debugLocal
// -----------------------------------------------------
function affDebug()	{
	if (document.getElementById('debug').style.display=='none')
		{document.getElementById('debug').style.display='block';}
	else
		{document.getElementById('debug').style.display='none';}
}

// -----------------------------------------------------
// CSS
// -----------------------------------------------------
function editMonForm(element,bascule){
	debugLocal=0;
	// var faireMaj;
	// var designGloablMaj;

	// alert('element : '+element+' bascule :'+bascule);
	// faireMaj=1;
	// designGloablMaj=0;

	// -----------------------------------------------------
	// Bouton couleur de police
	// -----------------------------------------------------
	if (element=='couleurTexteCss'){
		var vCouleurTexteCss;
		// alert('bascule couleurTexteCss : '+bascule);
		switch (bascule){
				case 1:
					vCouleurTexteCss='Couleur globale';
					break;

				case 2:
					vCouleurTexteCss='Couleur du thème';
					break;

				case 3:
					if (document.getElementById('fontColorPicker')){
						vCouleurTexteCss=document.getElementById('fontColorPicker').value;
						document.getElementById('couleurTexteCss').style.color=document.getElementById('fontColorPicker').value;
					}
					break;

				case 4:
					if (document.getElementById('couleurTexteCssNom')) {vCouleurTexteCss=document.getElementById('couleurTexteCssNom').value;}
					break;

				case 5:
					vCouleurTexteCss=document.getElementById('couleurTexteCss').value;
					break;

				default:
					vCouleurTexteCss=document.getElementById('couleurTexteCss').value;
					break;
		}
		if (vCouleurTexteCss.substr(0, 1)=='#')
			{vCouleurTexteCss=vCouleurTexteCss.substr(1, vCouleurTexteCss.lenght );}
		// '‡'
		// alert(vCouleurTexteCss);
		document.getElementById('couleurTexteCss').value=vCouleurTexteCss;
	}

	// -----------------------------------------------------
	// Taille de police
	// -----------------------------------------------------
	if (element=='fontSizeCss'){
		vFontSizeCss=document.getElementById('fontSizeCss').value;
		// alert('bascule fontSizeCss : '+bascule);
		switch (bascule){
				case 1:
					vFontSizeCss=parseInt(vFontSizeCss,0);
					vFontSizeCss=vFontSizeCss+1;
					break;

				case 2:
					vFontSizeCss=parseInt(vFontSizeCss,0);
					vFontSizeCss=vFontSizeCss-1;
					break;

				case 3:
					if (document.getElementById('fontSizeCss')) {vFontSizeCss=document.getElementById('fontSizeCss').value;}
					break;

				default:
				break;
		}
		// alert(vFontSizeCss);
		document.getElementById('fontSizeCss').value=vFontSizeCss;
	}

	// -----------------------------------------------------
	// textShadowCss
	// -----------------------------------------------------
	if (element=='textShadowCss'){
		var vTextShadowCss;
		// alert('bascule textShadowCss : '+bascule);
		switch (bascule)
			{
				case 1:
					 vTextShadowCss=document.getElementById('textShadowCssListe').value;
					 document.getElementById('textShadowCss').value=vTextShadowCss;
				break;

				case 2:
					 // inutile il se postera tout seul
					 //vTextShadowCss=document.getElementById('textShadowCss').value;
				break;

				default:
				break;
		}
		// alert(textShadowCss);
	}

	// -----------------------------------------------------
	// Liste des fonts
	// -----------------------------------------------------
	if (element=='fontCss'){
	   var vFontCss;
		switch (bascule)
			{
				// alert('bascule vFontCss : '+bascule);
				case 1:
					vFontCss=document.getElementById('fontCssListe').value;
				break;

				case 2:
					vFontCss=document.getElementById('fontCss').value;
				break;

				default:
				break;
		}
		document.getElementById('fontCss').value=vFontCss;
		// alert(vFontCss);
	}

	// -----------------------------------------------------
	// alignement
	// -----------------------------------------------------
	if (element=='textAlignCss'){
		var vTextAlignCss=document.getElementById('textAlignCss').value;
		// alert(vTextAlignCss);
		switch (vTextAlignCss)
			{
				case 'left':
					document.getElementById('leftCss').value='0%';
					// alert('left');
				break;

				case 'center':
					document.getElementById('leftCss').value='50%';
					// alert('center');
				break;

				case 'right':
					document.getElementById('leftCss').value='100%';
					// alert('right');
				break;

				default:
				break;
		}
		// alert(vTextAlignCss);
	}

	// -----------------------------------------------------
	// Couleur de fonds
	// -----------------------------------------------------
	if (element=='backGroundCss'){
		var vBackGroundCss;
		// alert('bascule backGroundCss : '+bascule);

		// -----------------------------------------------------
		// V2
		// -----------------------------------------------------
		switch (bascule){
			case 1:
				vBackGroundCss='Couleur globale';
				break;

			case 2:
				vBackGroundCss='Couleur du thème';
				break;

			case 3:
				if (document.getElementById('fColorPicker')) {vBackGroundCss=document.getElementById('fColorPicker').value;}
				break;

			case 4:
				if (document.getElementById('bgColorCssNom')) {vBackGroundCss=document.getElementById('bgColorCssNom').value;}
				break;

			case 5:
				if (document.getElementById('backGroundCss')) {vBackGroundCss=document.getElementById('backGroundCss').value;}
				break;

			case 6:
				if (document.getElementById('backGroundCss2')) {vBackGroundCss=document.getElementById('backGroundCss2').value;}
				break;

			default:
				if (document.getElementById('backGroundCss')) {vBackGroundCss=document.getElementById('backGroundCss').value;}
				break;
		}
		if (vBackGroundCss.substr(0, 1)=='#')
			{vBackGroundCss=vBackGroundCss.substr(1, vBackGroundCss.lenght );}

		if (document.getElementById('backGroundCss'))
			{document.getElementById('backGroundCss').value=vBackGroundCss;}
		else
			{alert('backGroundCss non trouvé!');}
		// alert(vBackGroundCss);
		// alert(document.getElementById('backGroundCss').value);
	}

	// -----------------------------------------------------
	// margin all
	// -----------------------------------------------------
	if (element=='margin'){
		var trouve;trouve=false;
		var vMargin=document.getElementById('marginAll').value;
		// alert('vMargin = '+vMargin);

		// pour le moment on propage l'unite de top aux autre, il faudrait une boite unité generique mais c bon comme ca
		if(vMargin=='auto') {
			document.getElementById('topMarginUnite').value='auto';
			trouve=true;
		}

		if(trouve==false){
			if(vMargin.substr(-3)=='rem') {
				document.getElementById('topMarginUnite').value='rem';
				trouve=true;
			}
		}

		if(trouve==false){
			switch (vMargin.substr(-2)){
				case 'px':
					document.getElementById('topMarginUnite').value='px';
					trouve=true;
					break;

				case 'em':
					document.getElementById('topMarginUnite').value='em';
					trouve=true;
					break;

				case 'fr':
					document.getElementById('topMarginUnite').value='fr';
					trouve=true;
					break;

				case 'vw':
					document.getElementById('topMarginUnite').value='vw';
					trouve=true;
					break;

				case 'vh':
					document.getElementById('topMarginUnite').value='vh';
					trouve=true;
					break;

				default:
					break;
			}
		}

		if(trouve==false){
			if(vMargin.substr(-1)=='%') {
				document.getElementById('topMarginUnite').value='%';
			}
		}

		// pour le moment on propage l'unite de top aux autre, il faudrait une boite unité generique
		document.getElementById('rightMarginUnite').value=document.getElementById('topMarginUnite').value;
		document.getElementById('bottomtMarginUnite').value=document.getElementById('topMarginUnite').value;
		document.getElementById('leftMarginUnite').value=document.getElementById('topMarginUnite').value;

		// valeurs
		document.getElementById('marginTopCss').value=vMargin;
		document.getElementById('marginRightCss').value=vMargin;
		document.getElementById('marginBottomCss').value=vMargin;
		document.getElementById('marginLeftCss').value=vMargin;

	}

	// -----------------------------------------------------
	// Padding all
	// -----------------------------------------------------
	if (element=='padding'){
		var trouve;trouve=false;
		var vPadding=document.getElementById('paddingAll').value;
		// alert('vPadding='+vPadding);
		// pour le moment on propage l'unite de top aux autre, il faudrait une boite unité generique mais c bon comme ca
		if(vPadding=='auto') {
			document.getElementById('topPaddingUnite').value='auto';
			trouve=true;
		}

		if(trouve==false){
			if(vPadding.substr(-3)=='rem') {
				document.getElementById('topPaddingUnite').value='rem';
				trouve=true;
			}
		}

		if(trouve==false){
			switch (vPadding.substr(-2)){
				case 'px':
					document.getElementById('topPaddingUnite').value='px';
					trouve=true;
					break;

				case 'em':
					document.getElementById('topPaddingUnite').value='em';
					trouve=true;
					break;

				case 'fr':
					document.getElementById('topPaddingUnite').value='fr';
					trouve=true;
					break;

				case 'vw':
					document.getElementById('topPaddingUnite').value='vw';
					trouve=true;
					break;

				case 'vh':
					document.getElementById('topPaddingUnite').value='vh';
					trouve=true;
					break;

				default:
					break;
			}
		}

		if(trouve==false){
			if(vPadding.substr(-1)=='%') { document.getElementById('topPaddingUnite').value='%'; }
		}

		// pour le moment on propage l'unite de top aux autre, il faudrait une boite unité generique
		document.getElementById('rightPaddingUnite').value=document.getElementById('topPaddingUnite').value;
		document.getElementById('bottomPaddingUnite').value=document.getElementById('topPaddingUnite').value;
		document.getElementById('leftPaddingUnite').value=document.getElementById('topPaddingUnite').value;

		// valeurs
		document.getElementById('paddingTopCss').value=vPadding;
		document.getElementById('paddingRightCss').value=vPadding;
		document.getElementById('paddingBottomCss').value=vPadding;
		document.getElementById('paddingLeftCss').value=vPadding;
	}

	// -----------------------------------------------------
	// Bouton couleur de bordure
	// -----------------------------------------------------
	if (element=='borderColorCss'){
		var vBorderColorCss;
		if (document.getElementById('borderColorCss')) {vBorderColorCss=document.getElementById('borderColorCss').value;}
		// alert('Bascule borderColorCss = '+bascule);
		// alert('vBorderColorCss ='+vBorderColorCss);
		switch (bascule){
			case 1:
				vBorderColorCss='Couleur globale';
				break;

			case 2:
				vBorderColorCss='Couleur du thème';
				break;

			case 3:
				if (document.getElementById('bcolor-picker')) {vBorderColorCss=document.getElementById('bcolor-picker').value;}
				break;

			case 4:
				if (document.getElementById('borderColorCssNom')) {vBorderColorCss=document.getElementById('borderColorCssNom').value;}
				break;

			case 5:
				if (document.getElementById('borderColorCss')) {vBorderColorCss=document.getElementById('borderColorCss').value;}
				break;

			default:
			break;
		}
		if (vBorderColorCss.substr(0, 1)=='#') {vBorderColorCss=vBorderColorCss.substr(1, vBorderColorCss.lenght );}

		document.getElementById('borderColorCss').value=vBorderColorCss;
		// alert('vBorderColorCss = '+vBorderColorCss);
	}

	// -----------------------------------------------------
	// Largeur / hauteur / generiques
	// -----------------------------------------------------
	//si on a saisie une valeur on met a vide le champ tampon de la liste déroulante des dimensions gene
	// -----------------------------------------------------
	if (element=='widthCss')
		{	document.getElementById("widthSelectedIndex").value='';	}

	//si on a saisie une valeur on met a vide le champ tampon de la liste déroulante des dimensisons gene
	if (element=='heightCss')
		{	document.getElementById("heightSelectedIndex").value='';}

	// -----------------------------------------------------
	// CodeOpe
	// -----------------------------------------------------
	if (document.getElementById("codeOpe"))
		{document.getElementById("codeOpe").value="faireMajCss";}
	else
		{ if(debugLocal==1) alert('codeOpe par id non atteint - editMonForm');}

	// -----------------------------------------------------
	// SUBMIT
	// -----------------------------------------------------
	// alert('submit');
	// -----------------------------------------------------
	document.menuSiteForm.submit();
}

// -----------------------------------------------------
// Transform
// -----------------------------------------------------
function animateJs(){
	// alert("documen");
	document.getElementById("transformCss").value=document.getElementById("transfo").value;
	// alert('document.getElementById("transformCss").value = '+document.getElementById("transformCss").value);
}

function reloadLarg(){
	document.getElementById("widthCss").value=document.getElementById("dimValLarg").value;
	// alert('dimValLarg = '+document.getElementById('dimValLarg').value);
	document.getElementById('widthSelectedIndex').value=document.getElementById('dimValLarg').selectedIndex+1;
	if (document.getElementById("codeOpe")) document.getElementById("codeOpe").value="faireMajCss";
	document.menuSiteForm.submit();
}

function reloadHaut(){
	document.getElementById("heightCss").value=document.getElementById("dimValHaut").value;
	// alert('dimValHaut = '+document.getElementById('dimValHaut').value);
	document.getElementById('heightSelectedIndex').value=document.getElementById('dimValHaut').selectedIndex+1;
	if (document.getElementById("codeOpe")) document.getElementById("codeOpe").value="faireMajCss";
	document.menuSiteForm.submit();
}

function loadFlexBasis (){
	// -----------------------------------------------------
	// Flex liste deroulante
	// -----------------------------------------------------
	document.getElementById("flexBasisCss").value=document.getElementById("flexBasisCss2").value;
}

function getResponsive (){
	// -----------------------------------------------------
	// responsive
	// -----------------------------------------------------
	// alert('test');
	// -----------------------------------------------------
	document.getElementById("codeOpe").value='responsive';
	document.menuSiteForm.submit();
}

function getCss (){
	debugLocal=0;
	// -----------------------------------------------------
	// Css global
	// -----------------------------------------------------
	if(debugLocal==1) alert('getCss');
	document.getElementById("codeOpe").value='genereCss';
	if(document.menuSiteForm) document.menuSiteForm.submit();
	//else alert('je ne trouve pas document.menuSiteForm');
}

function upCompass (){
	// -----------------------------------------------------
	// Css global
	// -----------------------------------------------------
	alert('upCompass');
	document.getElementById("codeOpe").value='upCompass';
	document.menuSiteForm.submit();
}


function majDirect(theChoix){
	debugLocal=0;
	// 2 --> on force la valeur de l'input avec la valeur de la liste deroulante
	// 2 --> sinon on garde la valeur saisie input
	// alert('theChoix = '+ theChoix);
	if (theChoix==2) { document.getElementById('imgSize1').value=document.getElementById('bgSizeCss2').value; }
	document.getElementById('bgSizeCss').value=document.getElementById('imgSize1').value;

	// -----------------------------------------------------
	// CodeOpe
	// -----------------------------------------------------
	if (document.getElementById("codeOpe"))		{document.getElementById("codeOpe").value="faireMajCss";}
	else { if(debugLocal==1) alert('codeOpe par id non atteint - majDirect '); }
	document.menuSiteForm.submit();
}


function deleteImage (){
	// -----------------------------------------------------
	// Css global
	// -----------------------------------------------------
	// alert('deleteImage');
	// -----------------------------------------------------
	document.getElementById("codeOpe").value='deleteImage';

	document.menuSiteForm.submit();
}

function initAffCss()	{

	debugLocal=0;
	
	// -----------------------------------------------------
	// sectionAff
	// -----------------------------------------------------
	 if (document.getElementById("sectionAffValue").value==0)
		{document.getElementById('sectionAff').style.display='none';}
	else
		{document.getElementById('sectionAff').style.display='block';}
	if(debugLocal==1) alert('sectionAffValue = ' +document.getElementById("sectionAffValue").value );

	// -----------------------------------------------------
	// sectionAffsectionEspValue
	// -----------------------------------------------------
	 if (document.getElementById('sectionEspValue').value==0)
		{document.getElementById('sectionEsp').style.display='none';}
	else
		{document.getElementById('sectionEsp').style.display='block';}

	// -----------------------------------------------------
	// sectionAffsectionPos
	// -----------------------------------------------------
	 if (document.getElementById('sectionPosValue').value==0)
		{document.getElementById('sectionPos').style.display='none';}
	else
		{document.getElementById('sectionPos').style.display='block';}

	// -----------------------------------------------------
	// sectionAffsectionTailleValue
	// -----------------------------------------------------
	 if (document.getElementById('sectionTailleValue').value==0)
		{document.getElementById('sectionTaille').style.display='none';}
	else
		{document.getElementById('sectionTaille').style.display='block';}

	// -----------------------------------------------------
	// sectionAffsectionBords
	// -----------------------------------------------------
	 if (document.getElementById('sectionBordsValue').value==0)
		{document.getElementById('sectionBords').style.display='none';}
	else
		{document.getElementById('sectionBords').style.display='block';}

	// -----------------------------------------------------
	// sectionAffsectionCoul
	// -----------------------------------------------------
	 if (document.getElementById('sectionCoulValue').value==0)
		{document.getElementById('sectionCoul').style.display='none';}
	else
		{document.getElementById('sectionCoul').style.display='block';}

	// -----------------------------------------------------
	// sectionAffsectionTexte
	// -----------------------------------------------------
	 if (document.getElementById('sectionTexteValue').value==0)
		{document.getElementById('sectionTexte').style.display='none';}
	else
		{document.getElementById('sectionTexte').style.display='block';}

	// -----------------------------------------------------
	// sectionAffsectionPolice
	// -----------------------------------------------------
	 if (document.getElementById('sectionPoliceValue').value==0)
		{document.getElementById('sectionPolice').style.display='none';}
	else
		{document.getElementById('sectionPolice').style.display='block';}

	// -----------------------------------------------------
	// sectionAffsection img fonds
	// -----------------------------------------------------
	 if (document.getElementById('sectionImgFondsValue').value==0)
		{document.getElementById('sectionImg').style.display='none';}
	else
		{document.getElementById('sectionImg').style.display='block';}

	// -----------------------------------------------------
	// sectionAffsection anim
	// -----------------------------------------------------
	//~ alert ('section anim Value = '+document.getElementById('anim').value);
	// -----------------------------------------------------
	 if (document.getElementById('anim').value==0)
		{document.getElementById('animModale').style.display='none';}
	else
		{document.getElementById('animModale').style.display='block';}
}

function affSection(itemNum){
	 // alert("item num = "+itemNum);
	switch (itemNum)	{
		// affichage
		case 1:
			if (document.getElementById('sectionAff').style.display=='none')
				{	document.getElementById('sectionAff').style.display='block';
					document.getElementById('sectionAffValue').value=1;
					document.getElementById('btn1').className='boutonsMenuWbmActif'
			}
			else
				{	document.getElementById('sectionAff').style.display='none';
					document.getElementById('sectionAffValue').value=0;
					document.getElementById('btn1').className='boutonsMenusWbm';
			}
			break;

		// Position
		case 2:
			if (document.getElementById('sectionPos').style.display=='none'){
				document.getElementById('sectionPos').style.display='block';
				document.getElementById('sectionPosValue').value=1;
				document.getElementById('btn2').className='boutonsMenuWbmActif';
			}
			else {
				document.getElementById('sectionPos').style.display='none';
				document.getElementById('sectionPosValue').value=0;
				document.getElementById('btn2').className='boutonsMenusWbm';
			}
			break;

		// Espace
		case 3:
			if (document.getElementById('sectionEsp').style.display=='none')
				{	document.getElementById('sectionEsp').style.display='block';
					document.getElementById('sectionEspValue').value=1;
					document.getElementById('btn3').className='boutonsMenuWbmActif';
			}
			else {
				document.getElementById('sectionEsp').style.display='none';
				document.getElementById('sectionEspValue').value=0;
				document.getElementById('btn3').className='boutonsMenusWbm';
			}
			break;

		case 4:
			// taille
			if (document.getElementById('sectionTaille').style.display=='none')
				{	document.getElementById('sectionTaille').style.display='block';
					document.getElementById('sectionTailleValue').value=1;
					document.getElementById('btn4').className='boutonsMenuWbmActif';
			}
			else {
				document.getElementById('sectionTaille').style.display='none';document.getElementById('sectionTailleValue').value=0;
				document.getElementById('sectionTailleValue').value=0;
				document.getElementById('btn4').className='boutonsMenusWbm';
			}
			break;

		case 5:
			// bords
			if (document.getElementById('sectionBords').style.display=='none'){
				document.getElementById('sectionBords').style.display='block';
				document.getElementById('sectionBordsValue').value=1;
				document.getElementById('btn5').className='boutonsMenuWbmActif';
			}
			else {
				document.getElementById('sectionBords').style.display='none';
				document.getElementById('sectionBordsValue').value=0;
				document.getElementById('btn5').className='boutonsMenusWbm';
			}
			break;

		case 6:
			// couleur de fonds
			if (document.getElementById('sectionCoul').style.display=='none'){
				// alert("item num 1= "+itemNum);
				document.getElementById('sectionCoul').style.display='block';
				document.getElementById('sectionCoulValue').value=1;
				document.getElementById('btn6').className='boutonsMenuWbmActif';
			}
			else {
				// alert("item num 2= "+itemNum);
				document.getElementById('sectionCoul').style.display='none';
				document.getElementById('sectionCoulValue').value=0;
				document.getElementById('btn6').className='boutonsMenusWbm';
			}
			break;

		case 7:
			// Texte mef
			if (document.getElementById('sectionTexte').style.display=='none'){
				document.getElementById('sectionTexte').style.display='block';
				document.getElementById('sectionTexteValue').value=1;
				document.getElementById('btn7').className='boutonsMenuWbmActif';
			}
			else {
				document.getElementById('sectionTexte').style.display='none';
				document.getElementById('sectionTexteValue').value=0;
				document.getElementById('btn7').className='boutonsMenusWbm';
			}
			break;

		case 8:
			// Police
			if (document.getElementById('sectionPolice').style.display=='none'){
				document.getElementById('sectionPolice').style.display='block';
				document.getElementById('sectionPoliceValue').value=1;
				document.getElementById('btn8').className='boutonsMenuWbmActif';
			}
			else {
				document.getElementById('sectionPolice').style.display='none';
				document.getElementById('sectionPoliceValue').value=0;
				document.getElementById('btn8').className='boutonsMenusWbm';
			}
			break;

		case 9:
			// Image de fonds
			// alert ('sectionImg = '+document.getElementById('sectionImgFondsValue').value);
			if (document.getElementById('sectionImg').style.display=='none'){
				document.getElementById('sectionImg').style.display='block';
				document.getElementById('sectionImgFondsValue').value=1;
				document.getElementById('btn9').className='boutonsMenuWbmActif';
			}
			else {
				document.getElementById('sectionImg').style.display='none';
				document.getElementById('sectionImgFondsValue').value=0;
				document.getElementById('btn9').className='boutonsMenusWbm';
			}
			break;

		case 10:
			// Animation
			if (document.getElementById('animModale').style.display=='none'){
				document.getElementById('anim').value=0;
				document.getElementById('animModale').style.display='block';
				document.getElementById('btn10').className='boutonsMenuWbmActif';
			}
			else {
				document.getElementById('animModale').style.display='none';
				document.getElementById('anim').value=0;
				document.getElementById('btn10').className='boutonsMenusWbm';
			}
			break;

		default:
			break;
	}
}