/* ----------------------------------------------------------------------

	@application: Portail Cnasea

	@titre      : Gestion d'onglets

	@auteur     : JTA

	@(#)@date	: 06/03/05  13/12/2006 BMA

	@(#)@version: 1.0

 	@(#) $Id$

-------------------------------------------------------------------<note>

Permet de transformer une imbrication de DIV en onglets

<tex>

<i>1/ Imbrication de DIV's</i>

&lt;div id="tabset"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="div1"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...contenu du 1er panneau...

&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="div2"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...contenu du 2eme panneau...

&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="div3"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...contenu du 3eme panneau...

&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;

&lt;/div&gt;



<i>2/ Transformation en onglets</i>

t = new tabset('tabset');

t.leftMargin = 10;

t.addTabset('Général','Informations générales','div1');

t.addTabset('Dossiers','Les dossiers','div2');

t.addTabset('Autres','Autres renseignements','div3');

</tex>

</note>------------------------------------------------------------------ */



if (!_objects) var _objects = [];



/**%

*	Ce composant permet de transformer une imbrication de DIV en onglets

*	@idTabset l'ID du DIV principal

*/

function tabset(idTabset){



	/**

	*Espace entre tabs (px)

	*/

	this.espacew = 2;

	/**

	*Hauteur des tabs (px)

	*/

	this.hTab    = 40;

	/**

	*Largeur des tabs (px)

	*/

	this.wTab    = 120;

	/**

	*Largeur des panneaux (px ou pctage)

	*/

	this.wDiv    = "700";

	/**

	*Marge gauche du tabset (px)

	*/

	this.leftMargin = 0;

	

	this._decalh = 5;		// hauteur différentielle entre actif et inactif (px)

	this._pos;

	this._actif  = "tb_0";

	this._ii     = 0;

	this._id     = _objects.length;

	_objects[this._id] = this;

	

	// Insère un DIV avant le 1er panneau => place pour les onglets

	this._tabset   = document.getElementById(idTabset);

	if(this._tabset.tagName != "DIV"){alert("L'objet n'est pas un DIV");return;}

	this._tabset.align = "left";

	this._tabset.style.position = "static";

	var d          = document.createElement('div');

	d.style.height = (this.hTab-1) + "px";

	this._tabset.insertBefore(d,this._tabset.firstChild);



	// Calcul de la position du DIV

	if(cp_fcts)	// Environnement framework: calcul retardé

		cp_fcts[cp_fcts.length] = "_objects["+this._id+"]._pos = getAbsolutePos(_objects["+this._id+"]._tabset,false)";

	else	// Calcul direct

		this._pos = getAbsolutePos(this._tabset,true);

		

	/**

	*	Transforme un DIV en onglet + panneau

	*	@label le texte de l'onglet

	*	@title le tip de l'onglet

	*	@idDiv l'ID du DIV concerné

	*/

	this.addTabset=function(label,title,idDiv){

		

		// Création de l'onglet

		var idTabset          = 'tb_' + this._ii;

		var newDiv            = document.createElement('div');

		newDiv.innerHTML      = "&nbsp;"+label;

		newDiv.title          = title;

		newDiv.id             = idTabset;

		newDiv.idObjet        = this._id;	// ref de l'objet tabset

		newDiv.idDiv          = idDiv;		// ref du panneau associé

		newDiv.ii             = this._ii;	// position du tab

		newDiv.style.position = "absolute";

		newDiv.style.width    = this.wTab + "px";

		newDiv.style.display  = 'none';

		newDiv.style.marginLeft = (this.leftMargin + 10) + "px";

		newDiv.onclick        = this.onclick;

		newDiv.style.zIndex   = 0;

		this._tabset.appendChild(newDiv);

		

		// Le panneau correspondant

		var d           = document.getElementById(idDiv);

		if(d.tagName != "DIV"){alert("L'objet n'est pas un DIV");return;}

		d.className     = "divactif";

		d.style.display = (idTabset==this._actif ? 'block' : 'none');

		d.style.width   = (isNaN(this.wDiv) ? this.wDiv : this.wDiv + "px");

		d.style.marginLeft = this.leftMargin + "px";

		d.style.zIndex   = -1;

		this._ii++;

		

		// Placement de l'onglet

		if(cp_fcts)	// Environnement framework: Placement retardé

			cp_fcts[cp_fcts.length] = "_objects["+this._id+"]._place('"+idTabset+"')";

		else 	// Placement direct

			this._place(idTabset);

		

	}



	this._place=function(idTabset){

		var d           = document.getElementById(idTabset);

		var ojbTab      = _objects[d.idObjet];

		d.style.left    = ojbTab._pos.x + (d.ii * (ojbTab.wTab + ojbTab.espacew)) + "px";

		d.style.top     = (ojbTab._pos.y + (idTabset==ojbTab._actif ? 0 : ojbTab._decalh)) + "px";

		d.style.height  = (ojbTab.hTab - (idTabset==ojbTab._actif ? 0 : ojbTab._decalh)) + "px";

		d.className     = (idTabset==ojbTab._actif ? 'tabactif' : 'tabinactif');

		d.style.display = 'block';

		document.getElementById(d.idDiv).style.display = (idTabset==ojbTab._actif ? 'block' : 'none');

		

	}

	

	/**! */

	this.onclick=function(){

		// Désactive le tab actif

		var ojbTab    = _objects[this.idObjet];

		var old       = ojbTab._actif;

		ojbTab._actif = this.id;

		ojbTab._place(old);

		// Rend actif le tab cliqué

		ojbTab._place(this.id);

		

		

	}



	/**

	*	Rend l'onglet noTab actif (par défaut c'est toujours le 1er)

	*	<ex>Exemple : t.setActif(2);</ex>.

	*	<b>A utiliser AVANT les addTabset</b>

	*	@noTab l'indice de l'onglet à activer (Commence à 0)

	*/ 

	this.setTabActif=function(noTab){

		this._actif  = "tb_" + noTab;

	}

	

} // tabset