/**
  jQuery Tab Helper

  USAGE:

  Give the tabs' ul the class name "tab-section", then each tab link's
  href the id of their corresponding panel, plus the suffix '-tab'

      <ul class="tab-section">
        <li><a href="#panel-1-tab">First Panel</a></li>
        <li><a href="#panel-2-tab">Second Panel</a></li>
      </ul>

  Give the panels the class name "tab-panel", and a unique id:

      <div class="tab-panel" id="panel-1">First Content</div>
      <div class="tab-panel" id="panel-2">Second Content</div>

*/
(function($) {
  function toggleTabs(event) {
    // Find the tab that was clicked...
    var elem = $(event.target).closest('a');

    // Add 'active' class name to that tab...
    elem.addClass('active');

    // Remove 'active' class name from other tabs in section...
    elem.parents('li').siblings().find('a').removeClass('active');

    // Find the panel that the tab needs to activate...
    var panel = $(elem.attr('href').split('-tab').join(''));

    // Show the active panel...
    panel.removeClass('hidden')

    // Hide other panels...
    panel.siblings('.tab-panel').addClass('hidden');
    
    return false;
  }
  
  function initTabSection(i, elem) {
    $(elem).find('li a:first').trigger('click');
  }

  $('.tab-section li a').live('click', toggleTabs);
  
  $(document).ready(function() {
    $('.tab-section').each(initTabSection);
  });
})(jQuery);