/** Tab Panel */
/** Child Tab described by a title element and a panel element*/
function Tab(pButtonId, pPanelId) {
	this.button = document.getElementById(pButtonId);
	this.panel =  document.getElementById(pPanelId);
	this.activate = function() {
		this.panel.style.display='block';
		this.button.className = this.button.className.replace(/Off/,'On');
//		this.button.className = 'tabPanelButtonActive';
	};
	this.unactivate = function() {
		this.panel.style.display='none';
		
		this.button.className = this.button.className.replace(/On/,'Off');
//		this.button.className = 'tabPanelButtonInactive';
	};
}
/** Parent Tab Panel described by a parent panel element */
function TabPanel(pId) {
	this.mainPanel = document.getElementById(pId);
	this.tabs = new Array();
	this.addTab=function(pTabIndex,pTabButtonId,pTabPanelId) {
		this.tabs[pTabIndex] = new Tab(pTabButtonId,pTabPanelId);
	};
	this.initTabs = function(pTabIndex) {
		var maxHeight = 0;
		for(var lTabIndex=0; lTabIndex < this.tabs.length; lTabIndex++) {
			var tab = this.tabs[lTabIndex];
			if (tab.panel.offsetHeight > maxHeight) {
				maxHeight = tab.panel.offsetheight;
			}
			tab.unactivate();
		}
		
		this.tabs[pTabIndex].activate();
		this.activeTab = this.tabs[pTabIndex];
	};
	this.activateTab = function(pTabIndex) {
		var lNewTab = this.tabs[pTabIndex];
		if (lNewTab!=null) {
			// Déactivate current tab
			if ((this.activeTab)&&(this.activeTab!=null)) {
				this.activeTab.unactivate();
			}
			// Activate new tab			
			lNewTab.activate();
			this.activeTab = lNewTab;
		}
	};
}