$(document).ready(function() {
    $(".hover-tab").hover(
        function() {
            var source = this.src;
            source = source.replace('-unselected.', '-selected.');
            this.src = source;
        },
        function() {
            var source = this.src;
            source = source.replace('-selected.', '-unselected.');
            this.src = source;
        });

    centerSubtabs();

    

});

function centerSubtabs() {

    var selectedTopTab = $("#tabs-navigation li.selected");

    if (selectedTopTab.position() !== null) {
        var topTabMiddle = selectedTopTab.position().left + (selectedTopTab.outerWidth(true) / 2);


        var selectedBottomTabs = $("#tabs-navigation li.selected ul");


        var originalWidth = 10; //arbitrarily added 10 to combat the tab wrapping problem

        $(selectedBottomTabs).children("li").each(function() {
            originalWidth = originalWidth + $(this).outerWidth();
        });

        var halfWidth = Math.ceil(originalWidth / 2);
        var newWidth = halfWidth * 2; //necessary because Math.ceil may have added a pixel

        var newLeft = (topTabMiddle - halfWidth) - 1;

        selectedBottomTabs.css({ 'left': newLeft.toString() + 'px', 'width': newWidth.toString() + 'px' });
    }
}