$(document).ready(function(){
    var tabs = $('#neoTracSteps').addClass('tabbed').find('ul.tabs').removeClass('compact').addClass('horizontal');
    
    tabs.find('li').each(function(i) {
        var tab = $(this);
        var tabLink = tab.find('a[@href*="#"]');
        var content = $(tabLink.attr('href'));
        
        //show the first content block by default
        if (i == 0)
        {
            tab.addClass('active');
            content.addClass('content active');
        }
        else
        {
            content.addClass('content').hide();
        }
        
        tabLink.click(function(){
            ToggleTabs($(this));
            
            //cancel the default click behaviour
            return false;
        });
    });
    
    var nextStepLink = jQuery('<a href="javascript:void(0)" class="highlightLink floatRight">Next Step</a>')
        .click(function(){
            var tabs = $(this).parent().parent().find('ul.tabs');
            var nextTab = tabs.find('li.active').next();
            
            if (tabs.find('li.active').is(':last-child'))
            {
                nextTab = tabs.find(':first-child');
            }
            
            ToggleTabs(nextTab.find('a[@href*="#"]'));
        });
        
    var linkHolder = jQuery('<p class="stepLinkHolder"></p>');
    
    $('#neoTracSteps').append(linkHolder.append(nextStepLink));
});

function ToggleTabs(tabLink)
{
    var currentActiveTab = tabLink.parent().parent().find('li.active');  
    var currentActiveContent = tabLink.parent().parent().parent().find('div.content.active');
    var nextActiveTab = tabLink.parent();         
    var nextActiveContent = $(tabLink.attr('href'));    
    var nextStepText = 'Next Step';
    
    if (tabLink.parent().is(':last-child'))
    {
        nextStepText = 'Back to Step 1';
    }
    tabLink.parent().parent().parent().find('p.stepLinkHolder > a').text(nextStepText);
    
    currentActiveTab.removeClass('active');
    nextActiveTab.addClass('active');
    
    currentActiveContent.removeClass('active').animate({opacity: 'toggle', height: 'toggle'}, "normal", function() { 
        nextActiveContent.animate({opacity: 'toggle', height: 'toggle'}, "normal").addClass('active');        
    });
}