//document vars and methods
var currentPanel = '';
var currentTab = '';
function showPanel(tab,panel){
	hidePanel(currentPanel);
	document.getElementById(panel).style.visibility = 'visible';
	currentPanel = panel;
	setState(tab);
	currentTab = tab;
}
function hidePanel(panel){
	if(currentPanel!='')
		document.getElementById(panel).style.visibility = 'hidden';
}
function hilite(tab){
	tab.style.backgroundColor = blue;
}
function unHilite(tab){
	tab.style.backgroundColor = red;
}
function setState(tab){
	if(currentTab!='')
		document.getElementById(currentTab).style.color = 'red';
	document.getElementById(tab).style.color = 'yellow';
}
//tab constructor
function tab(id, text,top,left,width){
	this.id = id;
	this.text = text;
	this.top = top;
	this.left = left;
	this.width = width
}
//panel constructor
function panel(id, src){
	this.id = id;
	this.src = src;
}
//tabPanel constructor
function tabPanel(tab, panel){
	this.tab = tab;
	this.panel = panel;
	this.writeTabPanel = writeTabPanel;
}
//method that writes tabPanel implementation to page
function writeTabPanel(){
var tpText = '';
tpText += '<div id="';
tpText += this.tab.id;
tpText += '" class="tab" style="top:';
tpText += this.tab.top;
tpText += ';left:';
tpText += this.tab.left;
tpText += ';width:';
tpText += this.tab.width;
tpText += '" onClick="showPanel(\'';
tpText += this.tab.id + '\',\'' + this.panel.id;
tpText += '\')" onMouseOver="hilite(this)" onMouseOut="unHilite(this)">';
tpText += this.tab.text;
tpText += '</div>';
tpText += '<iframe id="';
tpText += this.panel.id;
tpText += '" class="panel" src="';
tpText += this.panel.src;
tpText += '"></iframe>';

document.write(tpText);
}