$(document).ready(function(){
    $('.tab').hover(
        function(){
            if (!$(this).hasClass('tab-selected')) {
                $(this).addClass('mouseover');
            }
        },
        function(){$(this).removeClass('mouseover');}
    );
    
    $('.tab-default').click(function(){
        $('.tabContainer').find('.tab-selected')
                          .removeClass('tab-selected')
                          .addClass('tab-default');
        $(this).removeClass('tab-default')
               .addClass('tab-selected');
        var newID = 'contentContainer-' + $('.tab').index(this);
        if ($('#' + newID).length == 0) {
            var tabContent = '<div class="tabsContent" id="' + newID + '"></div>';
            $('.contentContainer').append(tabContent);
            loadContent($(this).find('a').attr('href'), $('#' + newID));
        }

        $('.tabsContent').not(':hidden').fadeOut(0);
        $('#' + newID).fadeIn(1000);
    });

    $('.tab:eq(0)').removeClass('tab-default')
                   .addClass('tab-selected');
    $('.tabsContent:gt(0)').hide(0);
    if ($('#contentContainer-0').length == 0) {
        var tabContent = '<div class="tabsContent" id="contentContainer-0"></div>';
        $('.contentContainer').append(tabContent);
        loadContent($('.tab:eq(0)').find('a').attr('href'), $('#contentContainer-0'));
    }
});

function loadContent(href, item) {
    jQuery.ajax({
        type : "GET",
        url : href,
        success : function(data) {
            item.html(data);
        }
    });
}