function cl_Tab()
{

  this.id = '';
  this.len = -1;
  //this.colspan = 2;
  this.active = 0;
  this.classHeaderLeft  = '';
  this.classHeaderCenter  = '';
  this.classHeaderRight  = '';
  this.classBodyLeft  = '';
  this.classBodyCenter  = '';
  this.classBodyRight  = '';
  this.classSelItemLeft ='';
  this.classSelItemCenter ='';
  this.classSelItemRight ='';
  this.classUnSelItemLeft ='';
  this.classUnSelItemCenter ='';
  this.classUnSelItemRight ='';
  this.classBottomLeft  = '';
  this.classBottomCenter  = '';
  this.classBottomRight  = '';
  /*
  this.itemSelModelID = '';
  this.itemUnselModelID = '';
  this.itemCaptionID = '';
  */

  if (typeof(_cl_tab_prototype_called) == 'undefined')
  {
     	      _cl_tab_prototype_called = true;
     	      cl_Tab.prototype.Init = Init;
     	      cl_Tab.prototype.AddItem = AddItem;
     	      //cl_Tab.prototype.AddItemModel = AddItemModel;
  }
/*public functions*/
  function Init(a_id, a_parent, a_width, a_height)
  {

        this.id = a_id;
        p = document.getElementById(a_parent);

	      a_table = document.createElement('TABLE');
	      a_table.cellSpacing = 0;
	      a_table.cellPadding = 0;
	      p.appendChild(a_table);
        a_table.style.width = a_width;

	      a_tbody = document.createElement('TBODY');
        a_table.appendChild(a_tbody);
/*tabs row*/
        a_row = document.createElement('TR');
        a_tbody.appendChild(a_row);
/*tab strip left corner*/
        a_cel = document.createElement('TD');
        a_row.appendChild(a_cel);
        a_cel.align = 'left';
        a_cel.className = this.classHeaderLeft;

        a_cel = document.createElement('TD');
        a_row.appendChild(a_cel);
        a_cel.align = 'left';
        a_cel.vAlign = 'bottom';
        a_cel.className = this.classHeaderCenter;

/*tab container*/
        a_cont_table = document.createElement('TABLE');
        a_cont_table.cellPadding = '0';
        a_cont_table.cellSpacing = '0';
        a_cel.appendChild(a_cont_table);


        a_cont_tbody = document.createElement('TBODY');
        a_cont_table.appendChild(a_cont_tbody);

        a_cont_row = document.createElement('TR');
        a_cont_tbody.appendChild(a_cont_row);

        a_cont_row.id = this.id + '_tabstrip';
/*tab strip right corner*/       
        a_cel = document.createElement('TD');
        a_row.appendChild(a_cel);
        a_cel.align = 'left';
        a_cel.className = this.classHeaderRight;


        a_row = document.createElement('TR');
        a_tbody.appendChild(a_row);
/*tab content left border*/
        a_cel = document.createElement('TD');
        a_row.appendChild(a_cel);
        a_cel.className = this.classBodyLeft;
        a_cel.innerHTML = ' ';
/*tab content area*/
        a_cel = document.createElement('TD');
        a_row.appendChild(a_cel);
        
        a_cel.id = this.id + '_tabarea';

        a_cel.style.height = a_height;
        a_cel.style.verticalAlign = 'top';
        a_cel.className = this.classBodyCenter;
/*tab content right border*/
        a_cel = document.createElement('TD');
        a_row.appendChild(a_cel);
        a_cel.className = this.classBodyRight;
        a_cel.innerHTML = ' ';
/*tab bottom border*/
        a_row = document.createElement('TR');
        a_tbody.appendChild(a_row);

        a_cel = document.createElement('TD');
        a_row.appendChild(a_cel);
        a_cel.align = 'left';
        a_cel.className = this.classBottomLeft;

        a_cel = document.createElement('TD');
        a_row.appendChild(a_cel);
        a_cel.style.verticalAlign = 'top';
        a_cel.className = this.classBottomCenter ;

        a_cel = document.createElement('TD');
        a_row.appendChild(a_cel);
        a_cel.align = 'left';
        a_cel.className = this.classBottomRight;
   
  }

  function AddItem( caption, tabContainerId)
  { 
    this.len++;
    a_cel = document.createElement('TD');
    a_cel.id = this.id + '_' + this.len;
    //a_cel.innerHTML = caption;
    //a_cel.style.backgroundColor = 'blue';
    a_cel.prnt = this;
    a_cel.idx = this.len;
    
    a_table = document.createElement('TABLE');
    a_cel.appendChild(a_table);
    a_table.cellPadding = '0';
    a_table.cellSpacing = '0';
    a_table.border = '0'
    //a_table.style.borderWidth = '3px';

    a_tbody = document.createElement('TBODY');
    a_table.appendChild(a_tbody);

    a_tr = document.createElement('TR');
    a_tbody.appendChild(a_tr);
    
    a_td = document.createElement('TD');
    a_tr.appendChild(a_td);
    a_td.id = this.id + '_' + this.len +'_left';
    a_td.innerHTML = '&nbsp';
    if (this.len == this.active)
    {
      a_td.className = this.classSelItemLeft;
    }
    else
    {
      a_td.className = this.classUnSelItemLeft;
    }

    a_td = document.createElement('TD');
    a_tr.appendChild(a_td);
    a_td.id = this.id + '_' + this.len +'_center';
    a_td.innerHTML = caption;
    if (this.len == this.active)
    {
      a_td.className = this.classSelItemCenter;
    }
    else
    {
      a_td.className = this.classUnSelItemCenter;
    }

    a_td = document.createElement('TD');
    a_tr.appendChild(a_td);
    a_td.id = this.id + '_' + this.len +'_right';
    a_td.className = this.classUnSelItemRight;
    a_td.innerHTML = '&nbsp';
    if (this.len == this.active)
    {
      a_td.className = this.classSelItemRight;
    }
    else
    {
      a_td.className = this.classUnSelItemRight;
    }


    a_cel.onclick = function()
    {
      
      SetInvisibleAllTabs(this.prnt.len,this.prnt.id);
      a_id = this.prnt.id + '_' + this.idx + '_tabcontainer';
      document.getElementById(a_id).style.display = '';
      
      a_left_item_id = this.prnt.id + '_' + this.idx + '_left';
      a_center_item_id = this.prnt.id + '_' + this.idx + '_center';
      a_right_item_id = this.prnt.id + '_' + this.idx + '_right';

      UnselectAllTabItems(this.prnt.len,
                          this.prnt.id,
                          this.prnt.classUnSelItemLeft,
                          this.prnt.classUnSelItemCenter,
                          this.prnt.classUnSelItemRight);

      document.getElementById(a_left_item_id).className = this.prnt.classSelItemLeft;
      document.getElementById(a_center_item_id).className = this.prnt.classSelItemCenter;
      document.getElementById(a_right_item_id).className = this.prnt.classSelItemRight;
    }

    a_row = document.getElementById(this.id + '_tabstrip');
    a_row.appendChild(a_cel);

    a_container = document.getElementById(tabContainerId);
    a_cel = document.getElementById(this.id + '_tabarea');
    a_cel.appendChild(a_container);
    
    a_container.id = this.id + '_' + this.len + '_tabcontainer';
    
    SetInvisibleAllButActiveTabs(this.len,this.id, this.active);

  }
  /*
  function AddItemModel(sel_model_id, unsel_model_id, caption_id)
  {
      if (sel_model_id != '')
      {
        document.getElementById(sel_model_id).style.display = 'none';
      }
      if (unsel_model_id != '')
      {
        document.getElementById(unsel_model_id).style.display = 'none';
      }

      this.itemSelModelID = sel_model_id;
      this.itemUnselModelID = unsel_model_id;
      this.itemCaptionID = caption_id;
  }
  */
/*private functions*/
  function SetInvisibleAllButActiveTabs(len,id,active)
  {
    if (len > -1)
    {
      for (i=0; i<= len; i++)
      { 
        a_id = id + '_' + i + '_tabcontainer';
        if (i != active)
        {
          document.getElementById(a_id).style.display = 'none';
        }
        else
        {
          document.getElementById(a_id).style.display = '';
        }
      }
    }
  }
  
  function SetInvisibleAllTabs(len,id)
  {
    if (len > -1)
    {
      for (i=0; i<= len; i++)
      { 
        a_id = id + '_' + i + '_tabcontainer';
        document.getElementById(a_id).style.display = 'none';
      }
    }
  }

  function UnselectAllTabItems(len,id,unsel_left, unsel_center, unsel_right)
  {
    if (len > -1)
    {
      for (i=0; i<= len; i++)
      { 
        a_id = id + '_' + i + '_left';
        document.getElementById(a_id).className = unsel_left;

        a_id = id + '_' + i + '_center';
        document.getElementById(a_id).className = unsel_center;
        
        a_id = id + '_' + i + '_right';
        document.getElementById(a_id).className = unsel_right;
      }
    }
  }
}