document.write('<style type = "text/css">');    //on écrit dans une page HTML qui contiendra le script d'une feuille de style qui définit la couleur des liens du menu
document.write('body {width:1024px;margin:auto;background-color:#bdbdbd;}');
document.write('#mainMAIN {background-image:url(Images/Fond.gif);width:1024px;margin:0 auto;background-color:#000000;}');
document.write('#cadremenu {position:absolute; visibility:hidden; z-index:3;}');
document.write('A.menu {color:#0000ff; text-decoration:underline;}');
document.write('</style>');
document.write('<div id="mainMAIN">');
document.write('<div id="cadremenu"></div>');
document.write('<p style="padding:0;margin:0;">');
document.write('<br /><br /><br />');
document.write('</p>');

//posXmenu = 1 ;       //distance entre le bord gauche de l'écran et le côté gauche du menu
posYmenu = 120;       //distance entre le bord supérieur de l'écran et le haut du menu
bgcolor = '#eeeeff';  //couleur du sous menu

sousmenu = new Array;  //création d'un tableau
sousmenu[0] = new Array;  //création d'un tableau dans le tableau
sousmenu[1] = new Array;
sousmenu[2] = new Array;
sousmenu[3] = new Array;
sousmenu[4] = new Array;
sousmenu[5] = new Array;
sousmenu[6] = new Array;

sousmenu[0][0] = '<A HREF="./index.htm" 		CLASS=menu>Accueil</A>';  //on enregistre les liens dans un éléments du tableau (de tableau)
sousmenu[0][1] = '<A HREF="./ensavoirplus.htm" 	CLASS=menu>En savoir plus</A>';
sousmenu[0][2] = '<A HREF="./questions.htm" 	CLASS=menu>Questions fr&eacute;quentes</A>';
sousmenu[0][3] = '<A HREF="./evenements.htm" 	CLASS=menu>Ev&eacute;nements</A>';
sousmenu[0][4] = '<A HREF="./nous-contacter.htm"		CLASS=menu>Nous contacter</A>';

sousmenu[1][0] = '<A HREF="./prestations.htm"  	CLASS=menu>Pr&eacute;sentation</A>';
sousmenu[1][1] = '<A HREF="./festivals.htm" 	CLASS=menu>Festivals et cabarets</A>';
sousmenu[1][2] = '<A HREF="./entreprises.htm" 	CLASS=menu>Entreprises</A>';
sousmenu[1][3] = '<A HREF="./spectacle-rue.htm" CLASS=menu>Spectacle de rue</A>';
sousmenu[1][4] = '<A HREF="./particuliers.htm" 	CLASS=menu>Particuliers</A>';

sousmenu[2][0] = '<A HREF="./repertoire.htm"              			CLASS=menu>Pr&eacute;sentation</A>';
sousmenu[2][1] = '<A HREF="http://pianoquichante.laboureur.com/"	CLASS=menu>Français</A>';
sousmenu[2][2] = '<A HREF="./rep-inter.htm" 						CLASS=menu>International</A>';
sousmenu[2][3] = '<A HREF="./themes.htm" 							CLASS=menu>Thèmes</A>';

sousmenu[3][0] = '<A HREF="./people.htm" 		CLASS=menu>People</A>';
sousmenu[3][1] = '<A HREF="./references.htm" 			CLASS=menu>R&eacute;f&eacute;rences</A>';
sousmenu[3][2] = '<A HREF="./media.htm" 			CLASS=menu>M&eacute;dia</A>';

sousmenu[4][0] = '<A HREF="./pianiste.htm" CLASS=menu>Biographie</A>';
sousmenu[4][1] = '<A HREF="./services.htm" CLASS=menu>Services</A>';

sousmenu[5][0] = '<A HREF="./fiche-technique.htm" 	CLASS=menu>Fiche technique</A>';

sousmenu[6][0] = '<A HREF="./cine-music.htm"	CLASS=menu>Orch. Cin&eacute;-Music</A>';
sousmenu[6][1] = '<A HREF="./trio-serenata.htm"	CLASS=menu>Trio S&eacute;r&eacute;nata</A>';
sousmenu[6][2] = '<A HREF="./paris-paname.htm"	CLASS=menu>Duo Paris-Paname</A>';
sousmenu[6][3] = '<A HREF="./piano-bar.htm"	CLASS=menu>Piano-bar</A>';

dom = document.getElementById;    //test de compatibilité du navigateur plus rapide

if(dom){
document.getElementById("cadremenu").style.top = posYmenu+29 +'px';    //on place l'élément cadremenu à 29 pixels sous le haut du menu fixe
}

function SousMenu(msg,pos){

if(dom){    //si le navigateur est compatible
document.getElementById("cadremenu").style.left = posXmenu+pos + 'px';  //position du sous-menu en fonction de pos et de la position du menu principal

var tab = "<TABLE border=0 BORDER_=_0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=128><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>";  //début de tableau HTML

for(pass=0;pass < msg.length;pass++){   //boucle qui va s'exécuter autant de fois qu'il y a de liens enregistrés dans le tableau passé en paramètre msg
tab += "<TR><TD BGCOLOR="+bgcolor+" HEIGHT=22>"+msg[pass]+"</TD></TR>";   //on ajoute à la variable tab une ligne de tableau HTML contenant un lien. Avec onMouseOver et onMouseOut : changement de couleur de la cellule au passage de la souris.
}

tab += "</TABLE></TD></TR></TABLE>";  //on ajoute les codes HTML qui vont fermer les tableaux
document.getElementById("cadremenu").innerHTML = tab;   //on écrit le contenu de la variable tab dans l'élément dont l'ID est cadremenu
document.getElementById("cadremenu").style.visibility = "visible"; //on rend l'élément visible
}
}


function KillFenetre(){       
	if(dom)
		document.getElementById("cadremenu").style.visibility = "hidden";
	}

document.onclick = KillFenetre;    //fait disparaitre le sous menu lorsqu'un clic est détecté sur la page


if(dom){
	var hw = document.documentElement.clientWidth /2;
	if (hw >= 512){   //largeur/2 soit 1024:2
		posXmenu = hw - 500;
	} else { 
		posXmenu = 1;
	}

	document.write('<div id="monMenu" STYLE="position:absolute; visibility:hidden; z-index:10;margin:0;padding:0;"></div>') ;
	document.getElementById("monMenu").style.left = posXmenu + 'px'; 
	document.getElementById("monMenu").style.top = posYmenu + 'px'; 
	
	var tabMenu = "<TABLE border=0 BORDER_=_0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000><TR><TD><TABLE ALIGN_=_CENTER CELLPADDING=0 CELLSPACING=1 BORDER=0 HEIGHT=25 width=994><TR>";
	tabMenu += "<TD WIDTH=142 HEIGHT=27 style='text-align:center' ALIGN=center background='Images/Fond.gif' onMouseOver='SousMenu(sousmenu[0],1)'><A CLASS=menu>Accueil</A></TD>";
	tabMenu += "<TD WIDTH=142 HEIGHT=27 style='text-align:center' ALIGN=center background='Images/Fond.gif' onMouseOver='SousMenu(sousmenu[1],143)'><A CLASS=menu>Prestations</A></TD>";
	tabMenu += "<TD WIDTH=142 HEIGHT=27 style='text-align:center' ALIGN=center background='Images/Fond.gif' onMouseOver='SousMenu(sousmenu[2],285)'><A CLASS=menu>Répertoire</A></TD>";
	tabMenu += "<TD WIDTH=142 HEIGHT=27 style='text-align:center' ALIGN=center background='Images/Fond.gif' onMouseOver='SousMenu(sousmenu[3],427)'><A CLASS=menu>Press-book</A></TD>";
	tabMenu += "<TD WIDTH=142 HEIGHT=27 style='text-align:center' ALIGN=center background='Images/Fond.gif' onMouseOver='SousMenu(sousmenu[4],569)'><A CLASS=menu>Le pianiste</A></TD>";
	tabMenu += "<TD WIDTH=142 HEIGHT=27 style='text-align:center' ALIGN=center background='Images/Fond.gif' onMouseOver='SousMenu(sousmenu[5],711)'><A CLASS=menu>Fiche Technique</A></TD>";
	tabMenu += "<TD WIDTH=142 HEIGHT=27 style='text-align:center' ALIGN=center background='Images/Fond.gif' onMouseOver='SousMenu(sousmenu[6],853)'><A CLASS=menu>Autres spectacles</A></TD>";
	tabMenu += "</TR></TABLE></TD></TR></TABLE>";	


	document.getElementById("monMenu").innerHTML = tabMenu;   
	document.getElementById("monMenu").style.visibility = "visible"; //on rend l'élément visible

}

function ChangePositionMenu(){
	if(dom) {
		var hw = document.documentElement.clientWidth /2;
		if (hw >= 512){
			posXmenu = hw - 500;
		} else { 
			posXmenu = 1;
		}
		document.getElementById("monMenu").style.left = posXmenu + 'px';   
		document.getElementById("cadremenu").style.visibility = "hidden";
	}
	
}


window.onresize = ChangePositionMenu;