// Meant for inline inclusion after
// the tab-feature content to minimize flash of unstyled content.

var $tabFeature = jQuery('#tab-content');
var $tabs = jQuery('<div id="tab_feature-tabs"></div>)');
var $contents = jQuery('<div id="tab_feature-content"></div>');

$tabs.appendTo($tabFeature);
$contents.appendTo($tabFeature);

jQuery('#tab-content .tab_feature table').each(function(){
    var title = jQuery(this).find('h3.related-title').text();
    var summary = jQuery(this).find('.related-summary').html();
    var $link = jQuery(this).find('.related-link').clone();
    
    // Tab construction
    var $tab = jQuery('<div class="tab_feature-tab"></div>');
    $tab.html(title);
    $tab.addClass('clickable');
    
    var $content = jQuery('<div class="tab_feature-content"></div>');
    $content.html(summary);
    
    if(summary.length > 250)
    {
        $content.append($link);
    } 
    
    $content.hide();
    
    $tab.appendTo($tabs);
    $content.appendTo($contents);
    
    // Bind events.
    
    $tab.click(function(){
        // Tabs and Contents function in a lock step manner.
        // I.E. The nth tab in the tabs area corresponds to the nth content in the contents area.
        $tabs.find('>div').not($tab).removeClass('active');
        $tab.addClass('active');
        
        var $activeContent = $contents.find('>div').eq($tab.index());
        $contents.find('>div').not($activeContent).hide();
        $activeContent.show();
    });
    $tab.hover(function(){
        jQuery(this).addClass('hover');
    },function(){
        jQuery(this).removeClass('hover');
    });
});

// Activate the first item
$tabs.find('>div').eq(0).trigger('click');