function TabbedPanel(name, tabElement, panelElement)
 {

   this.MAX_STRING_LENGTH=13;
   this.Name = name;
   this.tabNumber = 0;
   this.currentHighPanel = null;
   this.currentHighTab = null;
   this.panelContainer = panelElement;
   this.tabContainer = tabElement;
   this.lowTabStyle = 'lowTab';
   this.highTabStyle = 'highTab';

   
//if the tab already exists return the existing one or else
//create a new tab
   this.findTab = function(tabName)
  {            
        //we are currently using the tabName to uniquely identify the tabs and
        //panels
         this.tabNumber = tabName;
         
       //lets check if the tab and the panel already exist
         var new_tab = document.getElementById(this.Name + 'Tab' + tabName);
         var new_panel = document.getElementById(this.Name + 'Panel' + tabName);

        if((new_tab!=null)&&(new_panel!=null))
           {                       
               this.TabClickEl(new_tab);
               return new_panel;
           }
            
      var tabID = this.Name + 'Tab' + this.tabNumber;      
      var panelID = this.Name + 'Panel' + this.tabNumber;

      var panel = document.createElement('div');
      
      panel.style.left = '0px';     
      panel.style.top = '0px';
      panel.style.width = '100%';
      panel.style.height = '100%';
      panel.style.display = 'none';
      panel.tabNum = this.tabNumber;
      panel.id = panelID;  
     

        if(this.panelContainer.insertAdjacentElement == null)
	  this.panelContainer.appendChild(panel)
	else
	  this.panelContainer.insertAdjacentElement("beforeEnd",panel); //Internet Explorer

	var cell = this.tabContainer.insertCell(this.tabContainer.cells.length - 1); //insert new tab before spacer cell

	cell.id = tabID;
        cell.title = tabName;
        
        cell.className = this.lowTabStyle;
	cell.tabNum = this.tabNumber;	
       // cell.onmouseover = this.closeBtnMouseOver;
        cell.onclick = this.OnTabClicked;
             
        //trim the text to fit into the max allowable tab width if the title is longer than the max
         if(tabName.length>this.MAX_STRING_LENGTH)
           {
         tabName = trim(tabName).substr(0,this.MAX_STRING_LENGTH)+'...';
           }
         
        cell.innerHTML =tabName;
       
        cell.panelObj = this;        
        this.TabClickEl(cell);       

	this.tabNumber++;
        //alert("tab number "+this.tabNumber);

         //just make sure the close button is there - incase someone
        //needs to close the page
         if((tabName == "Home")||(tabName == "Site Manager"))
          {//no close button for the homepage
         document.getElementById("tab_close_btn").style.visibility = "hidden";
          }
         else
         document.getElementById("tab_close_btn").style.visibility = "visible";
       
        return panel;
      }   
   
     //this function displays the panel content when a mouse moves over the
        this.closeBtnMouseOver = function()
     {
       var el = (window.event == null) ? event.target : window.event.srcElement; // Other : Internet Explorer
       this.panelObj.TabClickEl(el);
      }

      this.OnTabClicked = function(event)
      {
        var el = (window.event == null) ? event.target : window.event.srcElement; // Other : Internet Explorer
        el.panelObj.TabClickEl(el);
      }

          
      this.TabClickEl = function (element)
      {             
        if((element.innerHTML == "Home")
            ||(element.innerHTML == "Site Manager"))
            {//no close button if its the homepage
         document.getElementById("tab_close_btn").style.visibility = "hidden";
            }
         else
         document.getElementById("tab_close_btn").style.visibility = "visible";

        if(this.currentHighTab == element)
	  return;

        if(this.currentHighTab != null)
	  this.currentHighTab.className = this.lowTabStyle;

        if(this.currentHighPanel != null)
          this.currentHighPanel.style.display = 'none';

        this.currentHighPanel = null;
        this.currentHighTab = null;

        if(element == null)
          return;

        this.currentHighTab = element;
        this.currentHighPanel = document.getElementById(this.Name + 'Panel' + this.currentHighTab.tabNum);
        if(this.currentHighPanel == null)
        {
          this.currentHighTab = null
	  return;
        }

        this.currentHighTab.className = this.highTabStyle;
        this.currentHighPanel.style.display = '';
        
      }




  this.TabCloseEl = function(element)
{
  if(element == null)
    return;

  if(element == this.currentHighTab)
  {
    var i = -1;
    if(this.tabContainer.cells.length > 2)
    {
      i = element.cellIndex;
      if(i == this.tabContainer.cells.length-2)
        i--;
      else
        i++;
    }

    if(i >= 0)
      this.TabClickEl(this.tabContainer.cells[i]);
    else
      this.TabClickEl(null);
  }

  var panel = document.getElementById(this.Name + 'Panel' + element.tabNum);
  if(panel != null)
    this.panelContainer.removeChild(panel);

  this.tabContainer.deleteCell(element.cellIndex);
}

 

     
 }
    
 
   function exampleCloseTabClicked()
   {       
     tabController.TabCloseEl(tabController.currentHighTab);
     var highpanel = tabController.currentHighTab; //get the current high panel

    if((highpanel.innerHTML == "Home")
        ||(highpanel.innerHTML == "Site Manager"))
       {//no close button if its a homepage
     document.getElementById("tab_close_btn").style.visibility = "hidden";
       }
   }