function WebTabPane( el , fUseCookie ) 
{
	var Id = el.id;
	
	this.element = el;
	this.element.tabPane = this;
	this.pages = [];
	this.selectedIndex = null;
	this.useCookie = fUseCookie
	
	if (this.element.className != "web-tabpane-control") this.element.className = "web-tabpane-control " + this.element.className;
	this.selectedIndex = 0;
	
	this.tabRow = document.createElement( "div" );
	this.tabRow.className = "tab-row";
	
	this.Init = Init;
	this.setSelectedIndex = setSelectedIndex;
	this.getSelectedIndex = getSelectedIndex;
	this.addTabPage = addTabPage;
	this.dispose = dispose;
	this.setCookie = setCookie;
	this.getCookie = getCookie;
	this.removeCookie = removeCookie;	
	
	el.insertBefore( this.tabRow, el.firstChild );
	
	var tabIndex = 0;
	if ( this.useCookie ) {
		tabIndex = Number( this.getCookie() );
		if ( isNaN( tabIndex ) )
			tabIndex = 0;
	}
	this.selectedIndex = tabIndex;		
	
	function Init()
	{
		if (this.selectedIndex > this.pages.length - 1) this.setSelectedIndex(0);
	}

	function setSelectedIndex ( n ) 
	{
		if (this.selectedIndex != n) 
		{
			if (this.selectedIndex != null && this.pages[ this.selectedIndex ] != null )
				this.pages[ this.selectedIndex ].hide();
			this.selectedIndex = n;
			this.pages[ this.selectedIndex ].show();
		}
		if ( this.useCookie )
			this.setCookie(n);	// session cookie		
	}
	
	function getSelectedIndex() 
	{
		return this.selectedIndex;
	}
	
	function addTabPage( oElement ) 
	{
		if ( oElement.tabPane == this )	// already added
			return oElement.tabPage;

		var n = this.pages.length;
		var tp = this.pages[n] = new WebTabPage( oElement, this, n );
		
		//tp.tabPane = this;
		this.tabRow.appendChild( tp.tab );
		
		if ( n == this.selectedIndex )
			tp.show();
		else
			tp.hide();
		
		return tp;
	}

	
	function dispose() 
	{
		this.element.tabPane = null;
		this.element = null;		
	
		for (var i = 0; i < this.pages.length; i++) {
			this.pages[i].dispose();
			this.pages[i] = null;
		}
		this.pages = null;
	}
	
	function setCookie ( sValue, nDays ) 
	{
		var expires = "";
		if ( nDays ) 
		{
			var d = new Date();
			d.setTime( d.getTime() + nDays * 24 * 60 * 60 * 1000 );
			expires = "; expires=" + d.toGMTString();
		}
		document.cookie = "webtab_" + this.element.id  + "=" + sValue + expires + "; path=/";
	}

	function getCookie()
	{
		var re = new RegExp( "(\;|^)[^;]*(" + "webtab_" + this.element.id + ")\=([^;]*)(;|$)" );
		var res = re.exec( document.cookie );
		return res != null ? res[3] : null;
	}

	function removeCookie( ) 
	{
		this.setCookie( "", -1 );
		this.setSelectedIndex(0);
	}
	
}




function WebTabPage( el, tabPane, nIndex ) {
	
	this.element = el;
	this.element.tabPage = this;
	this.tabPane = tabPane;
	this.index = nIndex;
	
	// Recherche l'element qui sera le Tab
	var cs = el.childNodes;
	for (var i = 0; i < cs.length; i++) {
		if (cs[i].nodeType == 1 && cs[i].className == "tab") {
			this.tab = cs[i];
			break;
		}
	}	
	
	// hook up events, using DOM0
	var oThis = this;
	this.tab.onclick = function () { oThis.select(); };
	this.tab.onmouseover = function () { oThis.tabOver(); };
	this.tab.onmouseout = function () { oThis.tabOut(); };
	
	
	this.show = show;
	this.hide = hide;
	this.select = select;
	this.dispose = dispose;
	this.tabOver = tabOver;
	this.tabOut = tabOut;
	
	
	function show() 
	{
		var el = this.tab;
		var s = el.className + " selected";
		s = s.replace(/ +/g, " ");
		el.className = s;
		
		this.element.style.display = "block";
		eval(this.element.onshow);
	}
	
	function hide() 
	{
		var el = this.tab;
		var s = el.className;
		s = s.replace(/ selected/g, "");
		el.className = s;
	
		this.element.style.display = "none";
		eval(this.element.onhide);
	}
		
	function select() 
	{
		this.tabPane.setSelectedIndex( this.index );
	}
		
	function dispose() 
	{
		this.element.tabPage = null;
		this.tab.onclick = null;
		this.tab.onmouseover = null;
		this.tab.onmouseout = null;
		this.tab = null;
		this.tabPane = null;
		this.element = null;
	}
	
	function tabOver()
	{
		var el = this.tab;
		var s = el.className + " hover";
		s = s.replace(/ +/g, " ");
		el.className = s;
	}
	
	function tabOut()
	{
		var el = this.tab;
		var s = el.className;
		s = s.replace(/ hover/g, "");
		el.className = s;
	}
	
}