$(document).ready(function() {

    // set icon to the active 
    if( Math.round( $("#main-navigation li.active").offset().left ) != Math.round( $("#main-navigation").offset().left )){     

        hoverItemLeft = Math.round($("#main-navigation ul li").offset().left - $("#main-navigation").offset().left);
        activeItemLeft = Math.round($("#main-navigation ul  li.active").offset().left - $("#main-navigation").offset().left);
        activeItemWidth = $("#main-navigation ul li.active").width();

        $("#movingFish").stop().animate({
            "left": activeItemLeft + 10                
        }, 300, 'easeOutBack');

        $("#movingFish .middle").stop().animate({
            "left": hoverItemLeft + 19
        }, 300, 'easeOutBack');
    }

    $("#navBar li").mouseover(function() {      

        hoverItemLeft = Math.round($(this).offset().left - $("#main-navigation").offset().left);
        hoverItemWidth = $(this).width();        

            if( Math.round($(this).offset().left) > $("#movingFish").offset().left ){
                $('#movingFish .right').css('background-image', 'url(/_assets/images/template/fish-tail-r.png)');
                $('#movingFish .middle').css('background-image', 'url(/_assets/images/template/fish-mid-r.png)');
                $('#movingFish .left').css('background-image', 'url(/_assets/images/template/fish-head-r.png)');
            }else if( Math.round($(this).offset().left) < $("#movingFish").offset().left ){
                $('#movingFish .right').css('background-image', 'url(/_assets/images/template/fish-head.png)');
                $('#movingFish .middle').css('background-image', 'url(/_assets/images/template/fish-mid.png)');
                $('#movingFish .left').css('background-image', 'url(/_assets/images/template/fish-tail.png)');
            }

        $("#movingFish").stop().animate({
            "left": hoverItemLeft,
            "width": hoverItemWidth
        }, 3000, 'easeOutBack');
            
        $("#movingFish .middle").stop().animate({
            "left": hoverItemLeft + 19
        }, 3000, 'easeOutBack');

    });

    $("#navBar").mouseleave(function() {
        activeItemLeft = Math.round($("#main-navigation li.active").offset().left - $("#main-navigation").offset().left);
        activeItemWidth = $("#main-navigation li.active").width();
            
            if( Math.round($(this).offset().left) < $("#movingFish").offset().left ){
                $('#movingFish .right').css('background-image', 'url(/_assets/images/template/fish-head.png)');
                $('#movingFish .middle').css('background-image', 'url(/_assets/images/template/fish-mid.png)');
                $('#movingFish .left').css('background-image', 'url(/_assets/images/template/fish-tail.png)');
            }else if( Math.round($(this).offset().left) > $("#movingFish").offset().left ){
                $('#movingFish .right').css('background-image', 'url(/_assets/images/template/fish-head.png)');
                $('#movingFish .middle').css('background-image', 'url(/_assets/images/template/fish-mid.png)');
                $('#movingFish .left').css('background-image', 'url(/_assets/images/template/fish-tail.png)');
            }

            $("#movingFish").stop().animate({
                "left": activeItemLeft,
                "width": activeItemWidth
            }, 3000, 'easeOutBack');
            $("#movingFish .middle").stop().animate({
                "left": hoverItemLeft + 19
            }, 3000, 'easeOutBack');
    });

});