TGTab = Class.create();

TGTab.prototype =
{
    initialize : function (tabname,tabcontent)
    {
        this.tabname = tabname;
        this.tabcontent = tabcontent;    
    }
}

TGTabbedPane = Class.create();

TGTabbedPane.prototype = 
{
   initialize : function(element,instanceName,options)
   { 
       this.element = element;
       this.instanceName = instanceName;
       this.tabs = null;
       this.selected = 0;
       this.width = 220;
       this.height = 120;
        
       if(options['tabs'])
       {
           this.tabs = options['tabs'];
       }
       
       if(options['selected'])
       {
           this.selected = options['selected'];
       }
       
       if(options['width'])
       {
           this.width = options['width'];
       }
       
       if(options['height'])
       {
           this.height = options['height'];
       }
       
       if(typeof(this.element) == 'string')
       {
           this.element = $(this.element);
       } 
       
       this.draw(true);
   },
   
   showTab : function(index)
   {   
       this.selected = index;
        
       for(var i=0; i<this.tabs.length; i++) 
       {
           if(i == this.selected)	
           {
               $(this.instanceName + "CellTop" + i).className = "tabTopActivated";
               $(this.instanceName + "CellHeader" + i).className = "tabActivated";
               $(this.instanceName + "Content" + i).style.display = "inline";
           }
           else
           {
               $(this.instanceName + "CellTop" + i).className = "tabTopDeactivated";
               $(this.instanceName + "CellHeader" + i).className = "tabDeactivated";
               $(this.instanceName + "Content" + i).style.display = "none";
           }
       }
   },
   
   draw : function() 
   {
       var table = "<table id='" + this.instanceName + "Table' cellspacing='0' style='width: " + this.width + "px;height: " + this.height + "px;'>";
 	   
 	   var rowTop = "<tr>";
 	   var rowTabHeaders = "<tr>";
 	   var rowContent = "<tr><td class='tabContentPane' colspan='" + (this.tabs.length +1) + "' style='width: " + this.width + "px;height: " + this.height + "px;' >";
 	   
 	   for(var i = 0;i < this.tabs.length;i++)
 	   {
     	   var cellTop = "";
 	       var cellHeader = "";
 	       var cellContent = "";

 	       var tc = Element.remove(this.tabs[i].tabcontent).innerHTML;
 	       
 	       if(i == this.selected)
 	       {
 	          cellTop = "<td id='" + this.instanceName + "CellTop" + i + "' class='tabTopActivated'>&nbsp;</td>";
 	          if(i == 0)
 	          {
 	            cellHeader = "<td id='" + this.instanceName + "CellHeader" + i + "' class='tabActivated' style='border-left: 1px solid black;' onclick='" + this.instanceName + ".showTab(" + i + ");'>" + this.tabs[i].tabname + "</td>";
 	          }
 	          else
 	          {
 	            cellHeader = "<td id='" + this.instanceName + "CellHeader" + i + "' class='tabActivated'>" + this.tabs[i].tabname + "</td>";
 	          }
 	          
 	          cellContent = "<div style='display:inline;' id='" + this.instanceName + "Content" + i + "'>" + tc + "</div>";
 	          
 	       }
 	       else
 	       {
 	           cellTop = "<td id='" + this.instanceName + "CellTop" + i + "' class='tabTopDeactivated'>&nbsp;</td>";
 	           
 	          if(i == 0)
 	          {
 	            cellHeader = "<td id='" + this.instanceName + "CellHeader" + i + "' class='tabDeactivated' style='border-left: 1px solid black;' onclick='" + this.instanceName + ".showTab(" + i + ");' onmouseover='' onmouseout=''> " + this.tabs[i].tabname + "</td>";
 	          }
 	          else
 	          {
 	            cellHeader = "<td id='" + this.instanceName + "CellHeader" + i + "' class='tabDeactivated' onclick='" + this.instanceName + ".showTab(" + i + ");' onmouseover='' onmouseout=''>" + this.tabs[i].tabname + "</td>";
 	          } 	           
 	          
 	          cellContent = "<div style='display:none;' id='" + this.instanceName + "Content" + i + "'>" + tc + "</div>";
 	          
 	       }
 	       
 	       rowTop += cellTop;
 	       rowTabHeaders += cellHeader;
 	       rowContent += cellContent;
 	   }
 	   
 	   rowTop += "<td></td></tr>";
 	   rowTabHeaders += "<td style='border-bottom: 1px solid black'>&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>";
 	   rowContent += "</td></tr>";

 	   table += rowTop + rowTabHeaders + rowContent + "</table>";
 	   
 	   this.element.innerHTML = table;
 	   
   }
}