// Tabbed Browser object:
function TB(eRoot, transitMode, hoverArea)
{
 // event handler: swap displayed info when control link clicked 
  this.selectfn = function(eClick)
  {
    var elt = Event.findElement(eClick, 'a');
    var newsel;
   // find which tab triggered click event 
    for (var i = 0; i < this.aTabs.length; i++)
    {
      if (this.aTabs[i] == elt)
      {
        newsel = i;
        break;
      }
    }
   // change displayed info if current selection not clicked:
    if (newsel != this.cursel) 
    {
     // change selected tab: 
      this.aTabs[this.cursel].className = "tb_unsel";
      this.aTabs[newsel].className = "tb_sel";
     // hide unselected content, show selected
      if (this.tmode == 0)
      {  // mode 0: straight swap
        this.aInfo[this.cursel].style.display = "none";   
        this.aInfo[newsel].style.visibility = "visible";   
        this.aInfo[newsel].style.display = "block";   
      }
      else if (this.tmode == 1)
      {  // mode 1: Scriptaculous dissolve effect
        Effect.Fade(this.aInfo[this.cursel]); 
        this.aInfo[newsel].style.visibility = "visible";   
        Effect.Appear(this.aInfo[newsel]);
      }
      this.cursel = newsel;
    }
    Event.stop(eClick);
    return false;
  };


 // event handler: change tab appearance for hover 
  this.hoverfn = function(eMouse)
  {
    var elt = Event.findElement(eMouse, 'a');
   // find which tab triggered mouse event 
    for (var i = 0; i < this.aTabs.length; i++)
    {
      if (this.aTabs[i] == elt)   break;
    }
   // change style by changing class:
    if (this.aTabs[i].className == "tb_unsel")
      this.aTabs[i].className = "tb_unsel_hover";
    Event.stop(eMouse);
    return false;
  };

 // event handler: revert tab to normal unselected appearance when hover ends 
  this.unhoverfn = function(eMouse)
  {
    var elt = Event.findElement(eMouse, 'a');
   // find which tab triggered mouse event 
    for (var i = 0; i < this.aTabs.length; i++)
    {
      if (this.aTabs[i] == elt)   break;
    }
   // change style by changing class:
    if (this.aTabs[i].className == "tb_unsel_hover")
      this.aTabs[i].className = "tb_unsel";
    Event.stop(eMouse);
    return false;
  }

 // event handler: change display area header 1 appearance for hover 
  this.hoverfnArea = function(eMouse)
  {
    var elt = Event.findElement(eMouse, 'a');
   // change style by changing class:
    elt = elt.getElementsByClassName("hd1")[0];
    if (typeof elt.className != "undefined") 
      elt.className = "hd1_hover";
    Event.stop(eMouse);
    return false;
  };

 // event handler: revert display area header 1 to normal unselected appearance when hover ends 
  this.unhoverfnArea = function(eMouse)
  {
    var elt = Event.findElement(eMouse, 'a');
   // change style by changing class:
    elt = elt.getElementsByClassName("hd1_hover")[0];
    elt.className = "hd1";
    Event.stop(eMouse);
    return false;
  }


// constructor code
  this.eRoot = eRoot;            // root div of this Tabbed Browser
  this.tmode = transitMode;      // transition mode: instant or Scriptaculous fade/appear
  this.hoverArea = hoverArea;    // code mouseover class change for hd1 span in display area
  this.aTabs = new Array();      // control links
  this.aInfo = new Array();      // content to display
  
  this.aTabs = this.eRoot.getElementsByClassName("tb_links")[0].getElementsByTagName("ul")[0].getElementsByTagName("a");
  this.aInfo = this.eRoot.getElementsByClassName("tb_disp");
  if (this.aTabs.length != this.aInfo.length) return -1;    // error: must have #tabs == # content areas
  for (var i = 0; i < this.aTabs.length; i++)
  {
    Event.observe(this.aTabs[i], 'click', this.selectfn.bindAsEventListener(this)); 
    Event.observe(this.aTabs[i], 'mouseover', this.hoverfn.bindAsEventListener(this));
    Event.observe(this.aTabs[i], 'mouseout', this.unhoverfn.bindAsEventListener(this));
    if ( (this.aInfo[i].style.visibility == "visible") && (this.aInfo[i].style.display == "block"))
    {
      this.cursel = i;
    }
    else
    {
      this.aInfo[i].style.visibility = "visible";
      this.aInfo[i].style.display = "none";
    }
    if (this.hoverArea == 1)
    {
      var elt = this.aInfo[i].getElementsByClassName("featimg")[0];
      elt = elt.getElementsByTagName("a")[0];
      Event.observe(elt, 'mouseover', this.hoverfnArea.bindAsEventListener(this));
      Event.observe(elt, 'mouseout', this.unhoverfnArea.bindAsEventListener(this));
    }
  }
  if (typeof(this.cursel) != "number" || (0 > this.cursel) || (this.cursel >= this.aTabs.length))
  {
    this.cursel = 0;   
    this.aTabs[this.cursel].className = "tb_sel";
    this.aInfo[this.cursel].style.display = "block";   
  }  
  return;
}

function prepare_TB()
{
 // locate all elements (s/b divs) that are Tabbed Browser containers
 // create Tabbed Browser object for each
  aTBconfig = [ { transitMode: 0, hoverArea: 0 },
                { transitMode: 1, hoverArea: 1 },
                { transitMode: 0, hoverArea: 0 } ];
  var aeTBC = document.getElementsByClassName("tb_container");
  for (var i = 0; i < aeTBC.length; i++)
  {
    var j = parseInt(aeTBC[i].id.substring(2,4));
   // look up configuration; default to 0th if none/invalid
    if ( (isNaN(j)) || (j >= (aTBconfig.length)) ) j = 0; 
    new TB(aeTBC[i], aTBconfig[j].transitMode, aTBconfig[j].hoverArea );
  }
}

// now called from one place with other window-load events
//  to ensure sequencing

/*****************************************************************
  initialization function: attach event handlers upon load
  using Prototype.js x-browser W3C event handler implementation
*****************************************************************/

// Event.observe(window, 'load', function()
// {
 // prepare any tabbed browser objects:
//   prepare_TB();
// });