$(function(){
    "use strict";

    var jz = $("#jz");
    var jl = $("#jl");
    var dc = $("#dc");
    var ct = $("#ct");
    var timeid;

    jz.mouseenter(function(){
        showNow(jz);
    }).mouseleave(function(){
        jz.fadeOut(100);
    });

    jl.mouseenter(function(){
        showNow(jl);
    }).mouseleave(function(){
        jl.fadeOut(100);
    });

    dc.mouseenter(function(){
        showNow(dc);
    }).mouseleave(function(){
        dc.fadeOut(100);
    });

    ct.mouseenter(function(){
        showNow(ct);
    }).mouseleave(function(){
        ct.fadeOut(100);
    });

    $("#jz-icon").mouseenter(function(){
        jz.fadeIn();
    }).mouseleave(function(){
        startFadeOut(jz);
    });

    $("#jl-icon").mouseenter(function(){
        jl.fadeIn();
    }).mouseleave(function(){
        startFadeOut(jl)
    });

    $("#dc-icon").mouseenter(function(){
        dc.fadeIn();
    }).mouseleave(function(){
        startFadeOut(dc);
    });

    $("#ct-icon").mouseenter(function(){
        ct.fadeIn();
    }).mouseleave(function(){
        startFadeOut(ct);
    });

    function hideAll(){
        var tips = $(".main-body .tips");
        tips.each(function(){
            $(this).hide();
        });
    }

    function startFadeOut(div){
        timeid = window.setTimeout(function(){
            div.fadeOut(100);
        }, 300);
    }

    function showNow(div){
        window.clearTimeout(timeid);
        div.stop().fadeIn();
    }
});
