var active = true;
var timer = null;

function HideDiv(divId) {
    if (!active) {
        $(divId).css('display', 'none');
    }
}

(function ($) {

    $.fn.flyout = function () {
        var id = $(this).attr('id');
        var flyoutDiv = '#' + id + '-flyout';

        $(flyoutDiv).addClass('flyout');
        $(flyoutDiv).css('display', 'none');

        $(this).hover(
            function () {
                $('.flyout').css('display', 'none');
                active = true;
                $(flyoutDiv).css('display', 'block');
            },
            function () {
                active = false;
                if(timer != null) clearTimeout(timer);
                timer = setTimeout(function () { HideDiv(flyoutDiv); }, 100);
            }
        );

        $(flyoutDiv).hover(
            function (event) {
                active = true;
                $(flyoutDiv).css('display', 'block');
                event.stopImmediatePropagation();
            },
            function () {
                active = false;
                clearTimeout(timer);
                timer = setTimeout(function () { HideDiv(flyoutDiv); }, 1000);
            }
        );
    }

})(jQuery);