/*
  This code is based on a code example from the article "Javascript
  navigation - cleaner, not meaner" by Christian Heilmann
  URL:
  http://www.evolt.org/article/Javascript_navigation_cleaner_not_meaner/17/60273/index.html
*/

// If there is enough W3C DOM support for all our show/hide behavior:
// 1. Call the stylesheet that by default hides all toggleable sections 
// 2. Apply the show/hide behavior by calling the initialization function
if (document.getElementById && document.getElementsByTagName && document.createTextNode)
{
//  document.write('<link rel="stylesheet" type="text/css" href="styles-giftcard.css" />');
  window.onload = initShowHide;
}

function initShowHide()
{
  // Hide all toggleable sections with JavaScript for the highly improbable case that CSS is disabled
  // Note that in this case the 'flash of visible content' still will occur
  // For testing purposes you can add the following code to disable CSS:
  // document.getElementsByTagName('link')[0].disabled = true;
  
  if (document.getElementById('toggleable'))
  {
    hide();

    // Show first FAQ item.
    var first_question =
      document.getElementById('toggleable').getElementsByTagName('div')[0];
    first_question.style.display = 'block';

    // Inject Javascript into links so they behave as toggles.
    var toggle = document.getElementById('toggle');
    var as = toggle.getElementsByTagName('a');
    for (var i = 0; i < as.length; i++)
    {
      as[i].onclick = function()
      {
        show(this);
        return false;
      }
    }
    as[0].style.color = '#000';
  }
}

function show(s)
{
  hide();
  var id = s.href.match(/#(\w.+)/)[1];
  document.getElementById(id).style.display = 'block';

  s.style.color = '#000';
}

function hide()
{
  var toggleable =
    document.getElementById('toggleable').getElementsByTagName('div');
  for (var i = 0; i < toggleable.length; i++)
  {
    toggleable[i].style.display = 'none';
  }
  
  var toggle = document.getElementById('toggle');
  var as = toggle.getElementsByTagName('a');
  for (var i = 0; i < as.length; i++)
  {
    as[i].style.color = '#369';
  }
}