//Tabs -> container, width, height, class Sel, class Unsel, class contenu
function tabs(varName,container, width, height, classSel, classUnsel, classContenu) {

	// Initialisation
	this.containerId			=	"";
	this.width					=	"100%";
	this.height					=	"100%";
	this.classTabSel			=	"tabSel";
	this.classTabUnsel			=	"tabUnsel";
	this.classTab				=	"tab";
	this.tabs					=	new Array();
	this.selectedIndex			=	-1;
	this.addTab					=	addTab;
	this.draw					=	draw;
	this.update					=	update;
	this.varName				=	varName;
	this.showTab				=	showTab;
	this.getSelectedIndex		=	getSelectedIndex;
	this.setContent                         =        setContent;

	// Retrouver les paramètres passés au constructeur
	if (container != "")
		this.containerId		=	container;
	if (width != "")
		this.width				=	width;
	if (height != "")
		this.height				=	height;
	if (classSel != "")
		this.classTabSel		=	classSel;
	if (classUnsel != "")
		this.classTabUnsel		=	classUnsel;
	if (classContenu != "")
		this.classTab			=	classContenu;

	// Ajouter une nouvelle tab
	function addTab(title,sel,content) {
		// Il ne doit y avoir qu'un seul onglet sélectionné
		if ((sel) && (this.selectedIndex == -1))
			this.selectedIndex	=	this.tabs.length;
		else
			sel					=	false;
		this.tabs[this.tabs.length]	=	new tab(this.tabs.length,title,sel,content);
	}

	function draw() {
		var	html				=	"";
		// Afficher les tabs cliquables
		html					+=	"<TABLE BORDER='0' WIDTH='" + this.width + "' CELLSPACING='0' CELLPADDING='0' STYLE='margin-left:5px;margin-top:10px;z-index:1;'><TR>";
		for (i=0; i < this.tabs.length; i++) {
			if (this.tabs[i].sel)
				className		=	this.classTabSel;
			else
				className		=	this.classTabUnsel;
			html				+=	"<TD class='" + className + "' id='title" + i + "' STYLE='cursor:hand;' nowrap onClick='" + this.varName + ".showTab(" + i + ")'>";
			html				+=	this.tabs[i].title;
			html				+=	"</TD>";
			if (i==this.tabs.length -1)
				html				+=	"<TD STYLE='border-bottom:solid 1px #AFCEDB;width:100%;'>&nbsp;</TD>";
			else
				html				+=	"<TD STYLE='border-bottom:solid 1px #AFCEDB;'>&nbsp;</TD>";
		}
		html					+=	"</TR></TABLE>";

		// Afficher les contenus et ne montrer que celui de selectionné
		for (i=0; i < this.tabs.length; i++) {
			html				+=	"<TABLE  ID='tab" + i + "' BORDER='0' WIDTH='" + this.width + "' HEIGHT='" + this.height + "' CELLSPACING='0' CELLPADDING='0' STYLE='z-index:1;";
			if (this.tabs[i].sel)
				html			+=	"display:;";
			else
				html			+=	"display:none;";
			
			html				+=	"margin-left:5px;border-top:none;' CLASS='" + this.classTab + "'>";
			html				+=	"<TR HEIGHT='" + this.height + "'>";
			html				+=	"<TD WIDTH='" + this.width + "' NOWRAP STYLE='vertical-align:top;'>";
			html				+=	this.tabs[i].content;
			html				+=	"</TD>";
			html				+=	"</TR>";
			html				+=	"</TABLE>";
		}

		if (document.getElementById(this.containerId)) {
			document.getElementById(this.containerId).innerHTML	=	html;
		} else {
			document.writeln(html);
		}
	}
	
	function update() {
		for (i=0; i < this.tabs.length; i++) {
			if (this.tabs[i].sel) {
				document.getElementById("tab"+i).style.display	=	"";
				document.getElementById("title"+i).className	=	this.classTabSel;
			} else {
				document.getElementById("tab"+i).style.display	=	"none";
				document.getElementById("title"+i).className	=	this.classTabUnsel;
			}
		}
	}

	function showTab(display) {
		this.tabs[this.selectedIndex].sel	=	false;
		this.tabs[display].sel				=	true;
		this.selectedIndex					=	display;

		//Actualiser
		this.update();
	}
	
	function getSelectedIndex() {
		return this.selectedIndex;
	}

    // Définir le contenu à partir d'un objet de la page
    function setContent(id,d) {
    	this.tabs[id].content                     =	document.getElementById(d).innerHTML;
        document.getElementById(d).innerHTML      =     "";
    }
}

//Tab -> (id), titre, sel, contenu
function tab(id,title,sel,content) {
	// Initialisation
	this.id						=	id;
	this.title					=	title;
	this.sel					=	sel;
	this.content				=	content;
}