function tabstrip(tabstripid, mysize)
{
   this.currentPaneStyle = 0;
   this.currentTab = 0;
   this.tabstripid = tabstripid;
   this.tabs = new Array();
   this.tabsize = mysize;
   this.addTab = function(mytab)
   {
 	mytab.setId("tab" + "_" + this.tabstripid  + "_" + this.tabs.length);
  	this.tabs[this.tabs.length] = mytab;
   }
   this.writeTabstrip = function()
   {
  	
	document.write('<br> <table width="100%"  align="left" cellspacing="0" > <tr> <td>');
   	document.write('<table width="100%"  cellspacing="0"  ><tr>');
  	for(var i = 0; i < this.tabs.length; i++)
  	{
		this.tabs[i].setTabStrip(this.valueOf());
    		this.tabs[i].writeTab();
  	}
	document.write('<td class="extra"  width="100%" colspan = "20" >&nbsp;</td>');
  	document.write('</tr></table>');
  

  	for(var k = 0; k < this.tabs.length; k++)
  	{
		
    		this.tabs[k].writePane(this.tabsize);
  	}
  	document.write('</td></tr></table>');
  	this.initiate();
   }
   
   
  this.initiate = function()
  {
     	var div = document.getElementById(this.tabs[0].id);
        showPane(div);
  }
 
}



function tab(caption,content)
{
  this.id = "";
 
  this.mytabstrip = "";
  this.caption = caption;
  this.content = content;

 
  this.writeTab = function()
  {        
	 
   	document.write('<td width="15%" cellpadding="0"  class="not_selected" id="' + this.id + '" onclick="showPane(this)" >' + this.caption + '</td>');
  }

  this.writePane = function(mysize)
  {
        
  	document.write('<div style="height:' + mysize + 'px;" class="pane" id="pn_' + this.id + '">' + this.content + "</div>");
  }

  this.setId = function(tabId)
  {
	this.id = tabId;
  }
  this.setTabStrip = function(myTabstrip)
  {
	this.mytabstrip = myTabstrip.valueOf();
  }
 
}


function showPane (div)
{
	var divs = document.getElementsByTagName("td");
	var hasPrev = 0;	

	for(var i=0; i<divs.length; i++)
        {
		
		if (divs[i].id.substring(0,divs[i].id.lastIndexOf("_",divs[i].id.length) ).toLowerCase() == div.id.substring(0,div.id.lastIndexOf("_",div.id.length) ).toLowerCase() && divs[i].className.toLowerCase() == "selected")
		{
			var prevTab = divs[i];
			hasPrev = 1;
			break;			
			
		}

		
        }

	
  	div.className = "selected";

	
	if (hasPrev > 0 )
	{
		if  (div.id.toLowerCase() != prevTab.id.toLowerCase())
        	{	
     			prevTab.className = "not_selected"; 

			var prevobjPaneStyle = document.getElementById("pn_"+prevTab.id).style;
			prevobjPaneStyle.display = "none"
		}
    	}
        var paneId = "pn_" + div.id;
     	var objPaneStyle = document.getElementById(paneId).style;
  	objPaneStyle.display = "block";
	
}