/*!
 * Simply Tabify v1.1
 *
 * Copyright (c) 2009 Jason hubbard
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Date: 2009-10-12 20:40:05 -0700 (Mon, 12 Oct 2009)
 * Revision: 1
 */
 
(function($) {
  $.fn.extend({
    tabify: function(options) {
      var opts = $.extend($.fn.tabify.defaults,options);
      return this.each(function() {

        //Creating a reference to the object
        var obj = $(this);
        
        /* Create a reference for all headings and 
        it's content using .next().
        Remember to pass the object reference 
        "obj" into the identifier. */
        
        var tabContentID = obj.attr('id');
        var headings = $('h3', obj);
        var tabContentArea = headings.next();
        
        // wrap the content with our own div to allow for sizing, etc
        tabContentArea.wrapAll('<div class="tab_container"></div>');
        
        // reference the new wrapper
        var tabContainer = $('.tab_container', obj);
        
        //We want to hide the headings and the content
        headings.hide();
        tabContentArea.hide();
        /* But we want to show content of the first 
        tab since it's selected by default. */
        tabContentArea.eq(0).fadeIn();
        
        //Prepend the object with the tab container (ul).
        obj.prepend('<ul class="tabs"><\/ul>');
        
        //For every heading create an item (<li>)
        headings.each(function(i,val) {
          var tab_num = i;
          var tab_id = tabContentID+'_tab'+tab_num;
          var label = '<a href="#'+tab_id+'"><span>'+$(this).text()+'</span></a>';
          $("ul.tabs", obj).append("<li>" + label + "</li>");
          // add the proper id to the tabContentArea
          tabContentArea.eq(i).attr("id",tab_id);
        });
        
        // create a reference to the ul for each obj
        var tab_ul = $("ul.tabs", obj);
        
        // add the width to the ul.tabs
        tab_ul.css({
          'width':(opts.tc_width+22)+'px'
        });
        
        // add the width and height to the .tab_container css
        tabContainer.css({
          'width':opts.tc_width+'px',
          'height':opts.tc_height+'px'
        });
        
        // add the height to the .tab_content_area css
        tabContentArea.css({
          'height':(opts.tc_height-15)+'px'
        });
        
        //Create a reference to the tabs for each obj
        var tabs = $("ul.tabs li", obj);
        
        //And add .sel class to first item
        tabs.eq(0).addClass("active");
        
        tabs.click(function() {
          
          //When a tab is clicked "de-activate" the old one
          tabs.removeClass("active");
          tabContentArea.hide();
          $(this).addClass("active");

          //And display the clicked tab
          //var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
          //$(activeTab).fadeIn(); //Fade in the active content
          var current = tabs.index($(this));
          tabContentArea.eq(current).fadeIn();
          return false;
        });
      });
    }
  });
  
  // defaults
  $.fn.tabify.defaults = {
    tc_height:800,
    tc_width:600
  };
})(jQuery);