Cacher is the code snippet organizer for pro developers

$(document).ready(function(){
    tabs();
    $(window).on('resize', function(){
        tabs();
    });
});


function tabs() {
    var tabs = $('.nav.nav-tabs');
    var tabsWidth = {};
    var tabsLeft = {};

    for(var n = 0; n < tabs.length; n++) {
        var id = n + 1;
 
        var tabsElements = $(tabs[n]).children();
        var numTabs = $(tabs[n]).children().length;
 
        if (!$(tabsElements[tabsElements.length-1]).hasClass('ms-tabs-indicator')) {
            $(tabs[n]).data('id', id);
            $(tabs[n]).append('<span id="ms-tab-hover-' + id +'" class="ms-tabs-indicator-hover"></span>');
            $(tabs[n]).append('<span id="ms-tab-' + id +'" class="ms-tabs-indicator"></span>');
        }

        var indicator = $('#ms-tab-' + id);
        var hoverIndicator = $('#ms-tab-hover-' + id);
 
        tabsWidth['tabW' + id] = [];
        tabsLeft['tabL' + id] = [];
        var currentWidth = tabsWidth['tabW' + id];
        var currentLeft = tabsLeft['tabL' + id];
 
        var tabLeft = 0;
        for(m = 0; m < numTabs; m++) {
            currentLeft[m] = tabLeft;
            currentWidth[m] = $(tabsElements[m]).width();
 
            if($(tabsElements[m]).children().hasClass('active')) {
                indicator.css({
                    left: currentLeft[m] + 'px',
                    width: currentWidth[m] + 'px'
                });
                hoverIndicator.css({
                    left: currentLeft[m] + 'px',
                    width: currentWidth[m] + 'px'
                });
            }
 
            tabLeft += currentWidth[m];
        }
    }

    $('.nav.nav-tabs > li').click(function(event) {
        tabsElements = $(this).parent();
        var id = tabsElements.data('id');
        tabsElements.children().removeClass('current');
        $(this).addClass('current');
        var tabs = tabsElements.children();
        for (var i = 0; i < tabs.length-1; i++) {
            if($(tabs[i]).hasClass('current')) {
                $('#ms-tab-' + id).css({
                    left: tabsLeft['tabL' + id][i] + 'px',
                    width: tabsWidth['tabW' + id][i] + 'px'
                });
            }
        }
    });

    $('.nav.nav-tabs > li').hover(function(event) {
        tabsElements = $(this).parent();
        var id = tabsElements.data('id');
        tabsElements.children().removeClass('currentHover');
        $(this).addClass('currentHover');
        var tabs = tabsElements.children();
        for (var i = 0; i < tabs.length-1; i++) {
            if($(tabs[i]).hasClass('currentHover')) {
                $('#ms-tab-hover-' + id).css({
                    left: tabsLeft['tabL' + id][i] + 'px',
                    width: tabsWidth['tabW' + id][i] + 'px'
                });
            }
        }
    });

    $('.nav.nav-tabs > li').mouseleave(function(event) {
        tabsElements = $(this).parent();
        var id = tabsElements.data('id');
        var w = $('#ms-tab-' + id).css('width');
        var l = $('#ms-tab-' + id).css('left');
        console.log(w);
        
        $('#ms-tab-hover-' + id).css({
            left: l,
            width: w
        });
    });
}