/*
This code serves two purpose:
a) Reflow/redraw content of lists and corresponding divs to change into tab format.
b) Switch tabs on click event.

Include this file via PHP to save on HTTP Requests (since file is under 2Kb).

Set Up:
1 - 'ul' has class="tabs".
2 - Each div is associated with a 'li' tag via it's 'a href' value.
3 - Optional : Choose a default active tab; set class to 'active' (corresponding div will be automatically activated).

There can be more than one set of tabs/divs.
*/

$(function(){
  // On load, hides each div except first one.
  $('.tabs').addClass('jquery-tabs');
  
  $('.tabs li').not('.active').each(function(){
    var el = $(this).find('a').attr('href');
    $(el).toggleClass('jquery-inactive');
    $(el).find('caption, .caption').css('display', 'none');
  });
  
  // On load, make first li element look 'activated'.
  var el = $('.tabs li.active').find('a').attr('href');
  $(el).find('caption, .caption').css('display', 'none');
  
  // Toggle active/inactive tab and div on click.
  $('.tabs li').click(function(el){
    $(this).parent().children('.active').each(function(){ // Find currently active tab.
      $(this).toggleClass('active'); // Make current tab invisible.
      var el = $(this).find('a').attr('href');
      $(el).toggleClass('jquery-inactive'); // Make current div invisible.
    });
    $(this).toggleClass('active'); // Make clicked tab visible.
    var el = $(this).find('a').attr('href');
    $(el).toggleClass('jquery-inactive'); // Make corresponding div visible.
    
    return false;  // Do not execute default anchor link action.
  });
});