// from devx.com, simplified

var currentPanel = '';
var currentTab = '';

function setState(tab) {
	if(currentTab != '') {
		c = document.getElementById(currentTab);
        c.style.color = 'gray';
		c.style.backgroundColor = '#dddddd'; 
        c.style.borderBottomColor = 'black';
    }
	n = document.getElementById(tab);
    n.style.color = 'black';
	n.style.backgroundColor = 'white';
    n.style.borderBottomColor = 'gray';
}


//tabPanel constructor
var tab_top = 0;
var tab_left = 40;
var tab_width = 120;

function tabPanel(title, idsuffix, panel_src, tooltip_text) {
    this.title = title;
	this.id = 'tab_' + idsuffix;
	this.text = title;
	this.top = tab_top;
	this.left = tab_left;
	this.width = tab_width;
    tab_left += tab_width;
	this.panel_id = 'panel_' + idsuffix;
	this.panel_src = panel_src;
    this.tooltip_text = tooltip_text;
    if (this.tooltip_text == null) this.tooltip_text = title;    

	this.writeTabPanel = writeTabPanel;
	this.showTabPanel = showTabPanel;
}

function hidePanel(panel) {
	if(currentPanel != '')
		document.getElementById(panel).style.visibility = 'hidden';
}

function showPanel(tab, panel) {
	hidePanel(currentPanel);
	document.getElementById(panel).style.visibility = 'visible';
	currentPanel = panel;
	setState(tab);
	currentTab = tab;
}

function showTabPanel() {
	showPanel(this.id, this.panel_id);
}

//method that writes tabPanel implementation to page
function writeTabPanel() {
    var text = '<div id="' + this.id;
    text += '" class="tab" style="left:' + this.left + 'px';
    text += '" onClick="showPanel(\'' + this.id + '\',\'' + this.panel_id;
    text += '\')" title="' + this.tooltip_text + '" >'
    text += '<span>' + this.text + '</span>';
    text += '</div>';
    text += '<iframe id="' + this.panel_id;
    text += '" class="panel" src="' + this.panel_src + '"></iframe>';
    document.write(text);
}

function addTab(name, id, contenturl, title) {
    var tab = new tabPanel(name, id, contenturl, title);
    tab.writeTabPanel();
    return tab;
}