// Two arrays that hold the tab link elements and the content divs
var tabLinks = new Array();
var contentDivs = new Array();

function init() {  // Set up the tabs

  // Grab the tab links and content divs from the page
  var tabListItems = document.getElementById('tabs').childNodes;
  for ( var i = 0; i < tabListItems.length; i++ ) {  // Loop through all the li elements in the tabs unordered list
    if ( tabListItems[i].nodeName == "LI" ) {  // For each li element, calls the getFirstChildWithTagName() helper function to retrieve the a link element inside
      var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
      var id = getHash( tabLink.getAttribute('href') );  // Call the getHash() helper function to extract the part of the link's URL after the hash; this is the ID of the corresponding content div. The link element is then stored by ID in the tabLinks array, and the content div is stored by ID in the contentDivs array
      tabLinks[id] = tabLink;
      contentDivs[id] = document.getElementById( id );
    }
  }
  
  // Assign onclick event handler function called showTab() to each tab link, and highlight the first tab by setting its CSS class to 'selected'
  var i = 0;
  
  for ( var id in tabLinks ) {
    tabLinks[id].onclick = showTab;
    tabLinks[id].onfocus = function() { this.blur() };
    if ( i == 0 ) tabLinks[id].className = 'selected';
    i++;
  }
  
  // Hide all content divs except the first by setting each div's CSS class to 'tabContent hide'
  var i = 0;
  
  for ( var id in contentDivs ) {
    if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
    i++;
  }
}

function showTab() {  // Called whenever a tab link is clicked. Highlight the selected tab and show the associated content div. It also dims all other tabs and hides all other content divs
  var selectedId = getHash( this.getAttribute('href') );  // Extract the selected ID from the clicked link's href attribute and store it in selectedId
  
  // Highlight the selected tab, and dim all others. Also show the selected content div, and hide all others.
  for ( var id in contentDivs ) {  // Loop through all the IDs. For the selected ID it highlights the corresponding tab and shows the content div; for all other IDs it dims the tab and hides the content div
    if ( id == selectedId ) {
      tabLinks[id].className = 'selected';
      contentDivs[id].className = 'tabContent';
    } else {
      tabLinks[id].className = '';
      contentDivs[id].className = 'tabContent hide';
    }
  }
  
  // Prevent the browser from following the clicked link and adding the link to the browser history
  return false;
}

function getFirstChildWithTagName( element, tagName ) {  // Return the first child of a specified element that matches a specified tag name. init() calls this function to retrieve the a (link) element inside each list item in the tabs list
  for ( var i = 0; i < element.childNodes.length; i++ ) {  // Loops through the child nodes of element until it finds a node that matches tagName. It then returns the node
    if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
  }
}

function getHash( url ) {  // Return the portion of a URL after any hash symbol. Used by init() and showTab() to extract the content div ID referenced in a tab link
  var hashPos = url.lastIndexOf ( '#' );
  return url.substring( hashPos + 1 );
}