// Déroule ou cache un onglet avec APPARITION progressive
function OngletProgressif(id_btn2, display2){ 
	id_btn = id_btn2; // sinon, pas visible dans la function suivante
	display = display2;
	Pas = ((h_max- h_min) / NbreEtapes); // pas de montée ou de descente à chaque boucle (en px)

	if(dev){
		debug( " display=" + display + " h_min=" + h_min + " h_max=" + h_max + " id_btn=" + id_btn + " lock=" + lock );
	}
	if(!lock){// le dernier traitement doit etre fini avant d'en demarrer un nouveau
		btn_no = 0;
		lock = true; // indique qu'il y aun traitement en cours
		setTimeout(CacheProgressif, Delai);
	}
}
function CacheProgressif(){// cache tous les boutons
	if(dev){
		debug( "aaa btn_no=" + btn_no  + " btn_nbre=" + btn_nbre  );
	}
	if(btn_no < btn_nbre){ 
		objet = document.getElementById("objet[" + btn_no + "]");
		h2 = objet.offsetHeight;
		//SetOpacity(objet);
		//if(btn_no != id_btn){ // si c'est le btn à montrer : ne le cache pas !
			if(h2 <= h_min){
				if(dev){
					debug( " objet01b=" + objet.id + " btn_no=" + btn_no + " objet.offsetHeight=" + objet.offsetHeight  + " h2=" + h2 + " h_min=" + h_min);
				}
				if(h2 == h_min){
					if(dev){
						debug( " rien a faire sur " + btn_no);
					}
				}else{
					if(dev){
						debug( " h < h_min !" +  h_min + "px sur" + btn_no + " objet.offsetHeight=" + objet.offsetHeight  + " h2=" + h2);
					}
					//objet.style.height = h_min + "px";
				}
				btn_no++;
			}else{
				h2 = h2 - (Pas / RatioDownUp);
				if(dev){
					debug( " objet01c=" + objet.id + " btn_no=" + btn_no + " objet.offsetHeight=" + objet.offsetHeight  + " h2=" + h2 + " h_min=" + h_min );
				}
				objet.style.height =  h2 + "px";
			}
			setTimeout(CacheProgressif, Delai);
		//}
	}else{
		if(display){// seulement s'il faut montrer un btn
			objet = document.getElementById("objet[" + id_btn + "]");
			h1 = objet.offsetHeight;
			if(dev){
				debug( " objet01d=" + objet.id + " btn_no=" + btn_no + " objet.offsetHeight=" + objet.offsetHeight  + " id_btn=" + id_btn  );
			}
			setTimeout(MontreProgressif, Delai);
		}else{
			lock = false; // indique que le dernier traitement est fini 
		}
	}
}

function MontreProgressif(){ // montre le bouton demandé

	h1 = h1 + Pas;
	if(dev){
		debug(" h1=" + h1 );
	}
	//SetOpacity(objet);
	if(h1 >= h_max){
		objet.style.height = h_max + "px";
		lock = false; // indique que le dernier traitement est fini 
	}else{
		objet.style.height =  h1 + "px";
		setTimeout(MontreProgressif, Delai);
	}
}

function SetOpacity(obj){
	opacity = h2/h_max;
	obj.style.filter = 'alpha(opacity = "' + opacity + '")'; // IE
	obj.style.opacity = opacity ; // mozilla recent
	obj.style.MozOpacity  = opacity ; // mozilla ancien
	obj.style.KhtmlOpacity  = opacity; // konqueror
}



function debug(msg){
	//if(dev){
		document.getElementById("devt").innerHTML = document.getElementById("devt").innerHTML + msg + "<br>";
	//}
}

function init(){
	/* 
	PROCESS : 
	1 - créer un bouton dans un div qui reagira au passge de la souris (btn_01)
	2 - créer un cadre dans un div qui est caché au début (frame1_btn_01)
	3 - créer dans ce cadre un 2eme cadre dans un div qui contient le contenu à afficher (frame2_btn_01)
	exemple : 
	<td width="122px" height="50px" valign="bottom" id="bouton[0]" 
		onMouseOver='OngletProgressif(0, 1)' 
		onMouseOut ="OngletProgressif(0, 0)"
	>
		<div id="objet[0]" style="height:20px; background-image: url(../../images/bouton.png); cursor:pointer; text-decoration:underline; z-index:50; " ; 
		align="center" onclick="document.location='accueil.php'">
			Accueil
		</div>
	</td>
	*/
	
	dev = false;
	//dev = true;
	
	btn_nbre = 6; // nbre de boutons
	Delai = 5; // attente entre chaque boucle (en s/1000)
	NbreEtapes = 18; // Nombre des étapes de montée ou de descente à chaque boucle (en px)
	//Delai = 400; // attente entre chaque boucle (en s/1000)
	//NbreEtapes = 4; // Nombre des étapes de montée ou de descente à chaque boucle (en px)
	RatioDownUp = 1; // Temps de la descente par rapport à la montée (1= identique)
	h_min = 25;
	h_max = 35;
	
	
	lock = false; 
	BoutonAMontrerOLD = -1;
	x = Array();
	y = Array();
	h = Array();
	w = Array();
	for (test_btn_no = 0 ; test_btn_no < btn_nbre; test_btn_no++){
		btn = document.getElementById("bouton[" + test_btn_no + "]");
		if(dev){
			//debug(" test_btn_no=" + test_btn_no +  " document.body.scrollTop=" + document.body.scrollTop + " offsetTop=" + btn.offsetTop + " ScrollTop=" + btn.scrollTop + " style.top=" + btn.style.top + " offsetLeft=" + btn.offsetLeft + " scrollLeft=" + btn.scrollLeft + " offsetHeight=" + btn.offsetHeight + " offsetWidth=" + btn.offsetWidth  );
		}
		x[test_btn_no] = getLeft(btn);
		y[test_btn_no] = getTop(btn);
		w[test_btn_no] = btn.offsetWidth;
		h[test_btn_no] = btn.offsetHeight;
		if(dev){
			debug(" test_btn_no3=" + test_btn_no +  " x[test_btn_no]=" + x[test_btn_no] +  " y[test_btn_no]=" + y[test_btn_no] +  " h[test_btn_no]=" + h[test_btn_no] +  " w[test_btn_no]=" + w[test_btn_no]);
		}
	}
	
	opacity = 5;
	
	// créé une zone cliquable virtuelle identique au <tr>
	window.ns4 = (document.layers)? true:false;
	window.ie4 = (document.all)? true:false;
	window.dom = (document.getElementById)? true:false;
	if (ie4) {
	   document.onmousemove=doDrag;
	}else if (dom) {
		window.addEventListener("mousemove",doDrag, false);
	}else if (ns4) {
		document.captureEvents(Event.MOUSEMOVE);
		document.onmousemove=doDrag;
	}
}
function doDrag(e) {			// Déplacement des Divs-Layers
	//dev=true;
	if (ie4) {
		mouse_x = event.clientX;
		mouse_y = event.clientY;
	}else if (dom) {
		mouse_x = e.clientX;
		mouse_y = e.clientY;
	}else if (ns4) {
		mouse_x = event.pageX;
		mouse_y = event.pageY;
	}
	var wintop=parseInt(document.body.scrollTop);
	var winleft=parseInt(document.body.scrollLeft);
	if(dev){
		debug(" x=" + mouse_x + " mouse_y=" + mouse_y );
	}
	BoutonAMontrer = -1;
	for (test_btn_no = 0 ; test_btn_no < btn_nbre; test_btn_no++){
		if(dev){
			debug(" x[test_btn_no]=" + x[test_btn_no] +  " x+w[test_btn_no]=" + (x[test_btn_no] + w[test_btn_no]) + " winleft=" + winleft + " mouse_y=" + mouse_y + " y[test_btn_no]=" + y[test_btn_no] +  " y+h[test_btn_no]=" + (y[test_btn_no] + h[test_btn_no]) + " wintop=" + wintop);
		}
		if (mouse_x > (x[test_btn_no] - winleft) && mouse_x < (x[test_btn_no] + w[test_btn_no] - winleft) && mouse_y > (y[test_btn_no] - wintop) && mouse_y < (y[test_btn_no] + h[test_btn_no] - wintop) ) {
			if(dev){
				debug(" test_btn_no=" + test_btn_no);
			}
			BoutonAMontrer = test_btn_no;
		}
	}
	if (BoutonAMontrer >= 0) { // si il y a qq chose a montrer
		if (BoutonAMontrerOLD != BoutonAMontrer) { // si a changé de bouton
			OngletProgressif(BoutonAMontrer, 1);
		}
		BoutonAMontrerOLD = BoutonAMontrer;
	}else{
			//debug(" BoutonAMontrerOLD=" + BoutonAMontrerOLD);
		if (BoutonAMontrerOLD >= 0 ) { // si on sort d'un bouton
			OngletProgressif(-1, 0);
			BoutonAMontrerOLD = -1;
		}
	}
}
function getLeft(MyObject){
//Fonction permettant de connaître la position d'un objet
//par rapport au bord gauche de la page.
//Cet objet peut être à l'intérieur d'un autre objet.
	if(dev){
		debug(" MyObject2.id=" + MyObject.id + " MyObject.offsetLeft=" + MyObject.offsetLeft );
	}if (MyObject.offsetParent){
       return (MyObject.offsetLeft + getLeft(MyObject.offsetParent));
	}else{
        return (MyObject.offsetLeft);
    }
}
function getTop(MyObject){
//Fonction permettant de connaître la position d'un objet
//par rapport au bord haut de la page.
//Cet objet peut être à l'intérieur d'un autre objet.
	//debug(" MyObject.id=" + MyObject.id + " MyObject.offsetTop=" + MyObject.offsetTop );
    if (MyObject.offsetParent){
       return (MyObject.offsetTop + getTop(MyObject.offsetParent));
	}else{
        return (MyObject.offsetTop);
    }
}

init();