text: /*==================================================
    $Id: tabber.js,v 1.5 2006/03/27 03:00:11 pat Exp $
    tabber.js by Patrick Fitzgerald pat@barelyfitz.com
  
    Documentation can be found at the following URL:
    http://www.barelyfitz.com/projects/tabber/
  
    License (http://www.opensource.org/licenses/mit-license.php)
  
    Copyright (c) 2006 Patrick Fitzgerald
  
    Permission is hereby granted, free of charge, to any person
    obtaining a copy of this software and associated documentation files
    (the "Software"), to deal in the Software without restriction,
    including without limitation the rights to use, copy, modify, merge,
    publish, distribute, sublicense, and/or sell copies of the Software,
    and to permit persons to whom the Software is furnished to do so,
    subject to the following conditions:
  
    The above copyright notice and this permission notice shall be
    included in all copies or substantial portions of the Software.
  
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
    BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
    ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
    CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
    ==================================================*/
  
  function tabberObj()
  {
    /* Constructor function for a tabber object */
  
    /* Element for the main tabber div */
    /* this.div */
  
    /* Class of the main tabber div */
    this.classMain = "tabber";
  
    /* Rename classMain to classMainLive after tabifying
       (so a different style can be applied)
    */
    this.classMainLive = "tabberlive";
  
    /* Class of each DIV that contains a tab */
    this.classTab = "tabbertab";
  
    /* Class to indicate which tab should be active on startup */
    this.classTabDefault = "tabbertabdefault";
  
    /* Class for the navigation UL */
    this.classNav = "tabbernav";
  
    /* When a tab is to be hidden, instead of setting display='none', we
       set the class of the div to classTabHide. In your screen
       stylesheet you should set classTabHide to display:none.  In your
       print stylesheet you should set display:block to ensure that all
       the information is printed.
    */
    this.classTabHide = "tabbertabhide";
  
    /* Class to set the navigation LI when the tab is active, so you can
       use a different style on the active tab.
    */
    this.classNavActive = "tabberactive";
  
    /* Elements that might contain the title for the tab, only used if a
       title is not specified in the TITLE attribute of DIV classTab.
    */
    this.titleElements = ['h2','h3','h4','h5','h6'];
  
    /* Should we strip out the HTML from the innerHTML of the title elements?
       This should usually be true.
    */
    this.titleElementsStripHTML = true;
  
    /* If the user specified the tab names using a TITLE attribute on
       the DIV, then the browser will display a tooltip whenever the
       mouse is over the DIV. To prevent this tooltip, we can remove the
       TITLE attribute after getting the tab name.
    */
    this.removeTitle = true;
  
    /* You can override the defaults listed above by passing in an object:
       var mytab = new tabber({property:value,property:value});
    */
    for (var n in arguments[0]) { this[n] = arguments[0][n]; }
  
    /* Create regular expressions for the class names */
    this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
    this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
    this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
    this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
    this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
  
    /* Array of objects holding info about each tab */
    this.tabs = new Array();
  
    /* If the main tabber div was specified, call init() now */
    if (this.div) {
  
      this.init(this.div);
  
      /* We don't need the main div anymore, and to prevent a memory leak
         in IE, we must remove the circular reference between the div
         and the tabber object. */
      this.div = null;
    }
  }
  
  
  /*--------------------------------------------------
    Methods for tabberObj
    --------------------------------------------------*/
  
  
  tabberObj.prototype.init = function(e)
  {
    /* Set up the tabber interface.
  
       e = element (the main containing div)
  
       Example:
       init(document.getElementById('mytabberdiv'))
     */
  
    var
    childNodes, /* child nodes of the tabber div */
    i, i2, /* loop indices */
    t, /* object to store info about a single tab */
    defaultTab=0, /* which tab to select by default */
    DOM_ul, /* tabbernav list */
    DOM_li, /* tabbernav list item */
    DOM_a, /* tabbernav link */
    headingElement; /* searching for text to use in the tab */
  
    /* Verify that the browser supports DOM scripting */
    if (!document.getElementsByTagName) { return false; }
  
    /* Clear the tabs array (but it should normally be empty) */
    this.tabs.length = 0;
  
    /* Loop through an array of all the child nodes within our tabber element. */
    childNodes = e.childNodes;
    for(i=0; i < childNodes.length; i++) {
  
      /* Find the nodes where class="tabbertab" */
      if(childNodes[i].className &&
         childNodes[i].className.match(this.REclassTab)) {
        
        /* Create a new object to save info about this tab */
        t = new Object();
        
        /* Save a pointer to the div for this tab */
        t.div = childNodes[i];
        
        /* Add the new object to the array of tabs */
        this.tabs[this.tabs.length] = t;
  
        /* If the class name contains classTabDefault,
  	 then select this tab by default.
        */
        if (childNodes[i].className.match(this.REclassTabDefault)) {
  	defaultTab = this.tabs.length-1;
        }
      }
    }
  
    /* Create a new UL list to hold the tab headings */
    DOM_ul = document.createElement("ul");
    DOM_ul.className = this.classNav;
    
    /* Loop through each tab we found */
    for (i=0; i < this.tabs.length; i++) {
  
      t = this.tabs[i];
  
      /* Get the label to use for this tab:
         From the title attribute on the DIV,
         Or from one of the this.titleElements[] elements,
         Or use an automatically generated number.
       */
      t.headingText = t.div.title;
  
      /* Remove the title attribute to prevent a tooltip from appearing */
      if (this.removeTitle) { t.div.title = ''; }
  
      if (!t.headingText) {
  
        /* Title was not defined in the title of the DIV,
  	 So try to get the title from an element within the DIV.
  	 Go through the list of elements in this.titleElements
  	 (typically heading elements ['h2','h3','h4'])
        */
        for (i2=0; i2<this.titleElements.length; i2++) {
  	headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
  	if (headingElement) {
  	  t.headingText = headingElement.innerHTML;
  	  if (this.titleElementsStripHTML) {
  	    t.headingText.replace(/<br>/gi," ");
  	    t.headingText = t.headingText.replace(/<[^>]+>/g,"");
  	  }
  	  break;
  	}
        }
      }
  
      if (!t.headingText) {
        /* Title was not found (or is blank) so automatically generate a
           number for the tab.
        */
        t.headingText = i + 1;
      }
  
      /* Create a list element for the tab */
      DOM_li = document.createElement("li");
  
      /* Save a reference to this list item so we can later change it to
         the "active" class */
      t.li = DOM_li;
  
      /* Create a link to activate the tab */
      DOM_a = document.createElement("a");
      DOM_a.appendChild(document.createTextNode(t.headingText));
      DOM_a.href = "javascript:void(null);";
      DOM_a.title = t.headingText;
      DOM_a.onclick = this.onClick;
  
      /* Add some properties to the link so we can identify which tab
         was clicked. Later the onClick method will need this.
      */
      DOM_a.tabber = this;
      DOM_a.tabIndex = i;
  
      /* Add the link to the list element */
      DOM_li.appendChild(DOM_a);
  
      /* Add the list element to the list */
      DOM_ul.appendChild(DOM_li);
    }
  
    /* Add the UL list to the beginning of the tabber div */
    e.insertBefore(DOM_ul, e.firstChild);
  
    /* Make the tabber div "live" so different CSS can be applied */
    e.className = e.className.replace(this.REclassMain, this.classMainLive);
  
    /* Activate the default tab */
    this.tabShow(defaultTab);
  
    return this;
  };
  
  
  tabberObj.prototype.onClick = function()
  {
    /* This method should only be called by the onClick event of an <A>
       element, in which case we will determine which tab was clicked by
       examining a property that we previously attached to the <A>
       element.
  
       Since this was triggered from an onClick event, the variable
       "this" refers to the <A> element that triggered the onClick
       event (and not to the tabberObj).
  
       When tabberObj was initialized, we added some extra properties
       to the <A> element, for the purpose of retrieving them now. Get
       the tabberObj object, plus the tab number that was clicked.
    */
    var a = this;
    if (!a.tabber) { return false; }
  
    var self = a.tabber;
    var tabIndex = a.tabIndex;
  
    /* Remove focus from the link because it looks ugly.
       I don't know if this is a good idea...
    */
    a.blur();
  
    self.tabShow(tabIndex);
  
    return false;
  };
  
  
  tabberObj.prototype.tabHideAll = function()
  {
    /* Hide all tabs and make all navigation links inactive */
    for (var i = 0; i < this.tabs.length; i++) {
      this.tabHide(i);
    }
  };
  
  
  tabberObj.prototype.tabHide = function(tabIndex)
  {
    /* Hide a single tab and make its navigation link inactive */
    var div = this.tabs[tabIndex].div;
  
    /* Hide the tab contents by adding classTabHide to the div */
    if (!div.className.match(this.REclassTabHide)) {
      div.className += ' ' + this.classTabHide;
    }
    this.navClearActive(tabIndex);
  };
  
  
  tabberObj.prototype.tabShow = function(tabIndex)
  {
    /* Show the tabIndex tab and hide all the other tabs */
  
    if (!this.tabs[tabIndex]) { return false; }
  
    /* Call the custom onclick */
    if (typeof this.onTabClick == 'function') {
      this.onTabClick(tabIndex);
    }
  
    /* Hide all the tabs first */
    this.tabHideAll();
  
    /* Get the div that holds this tab */
    var div = this.tabs[tabIndex].div;
  
    /* Remove classTabHide from the div */
    div.className = div.className.replace(this.REclassTabHide, '');
  
    /* Mark this tab navigation link as "active" */
    this.navSetActive(tabIndex);
  
    return this;
  };
  
  
  tabberObj.prototype.navSetActive = function(tabIndex)
  {
    /* Note: this method does *not* enforce the rule
       that only one nav item can be active at a time.
    */
  
    /* Set classNavActive for the navigation list item */
    this.tabs[tabIndex].li.className = this.classNavActive;
  
    return this;
  };
  
  
  tabberObj.prototype.navClearActive = function(tabIndex)
  {
    /* Note: this method does *not* enforce the rule
       that one nav should always be active.
    */
  
    /* Remove classNavActive from the navigation list item */
    this.tabs[tabIndex].li.className = '';
  
    return this;
  };
  
  
  /*==================================================*/
  
  
  function tabberAutomatic(tabberArgs)
  {
    /* This function finds all DIV elements in the document where
       class=tabber.classMain, then converts them to use the tabber
       interface.
  
       tabberArgs = an object to send to "new tabber()"
    */
    if (!tabberArgs) { tabberArgs = {}; }
  
    /* Create a tabber object so we can get the value of classMain */
    var tempObj = new tabberObj(tabberArgs);
  
    /* Find all DIV elements in the document that have class=tabber */
  
    /* First get an array of all DIV elements and loop through them */
    var divs = document.getElementsByTagName("div");
    for (var i=0; i < divs.length; i++) {
      
      /* Is this DIV the correct class? */
      if (divs[i].className &&
  	divs[i].className.match(tempObj.REclassMain)) {
        
        /* Now tabify the DIV */
        tabberArgs.div = divs[i];
        divs[i].tabber = new tabberObj(tabberArgs);
      }
    }
    
    return this;
  }
  
  
  /*==================================================*/
  
  
  function tabberAutomaticOnLoad(tabberArgs)
  {
    /* This function adds tabberAutomatic to the window.onload event,
       so it will run after the document has finished loading.
    */
  
    if (!tabberArgs) { tabberArgs = {}; }
  
    /* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */
  
    var oldOnLoad = window.onload;
    if (typeof window.onload != 'function') {
      window.onload = function() {
        tabberAutomatic(tabberArgs);
      };
    } else {
      window.onload = function() {
        oldOnLoad();
        tabberAutomatic(tabberArgs);
      };
    }
  }
  
  
  /*==================================================*/
  
  
  /* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
  
  if (typeof tabberOptions == 'undefined') {
  
      tabberAutomaticOnLoad();
  
  } else {
  
    if (!tabberOptions['manualStartup']) {
      tabberAutomaticOnLoad(tabberOptions);
    }
  
  }
  