$(function() {
    $('.view-flyout').click(function() {
        var path = $(this).attr("href");
        if($("#all-flyouts")) { $("#all-flyouts").remove(); }
        $("<div id=\"all-flyouts\"><div class=\"arrow\">&nbsp;</div><div id=\"flyout-content\"></div><a href=\"#\" class=\"flyout-close\">Close</a></div>").insertAfter($(this).parent());
        $("#flyout-content").load(path);
        $('#all-flyouts').css({
            'left': $(this).position().left + 16 + 'px',
            'top': $(this).position().top - 12 + 'px'
        }).show("fast", function() {
            $('.flyout-close').click(function() {
                $('#all-flyouts').hide("fast", function() {
                    $("#all-flyouts").remove();
                });
                return false;
            });
            $("body").bind("click", closeOnBlur)
            $(".arrow").css('border-width',"1px");
        });
        return false;
    });
    function closeOnBlur(e) {
        var actor = $('#all-flyouts');
        var inWidth = (e.pageX>actor.offset().left && e.pageX<(actor.offset().left+actor.width())) ? 1 : 0;
        var inHeight = (e.pageY>actor.offset().top && e.pageY<(actor.offset().top+actor.height())) ? 1 : 0;

        if (!(inWidth && inHeight)) {
            actor.hide("fast", function() {
               $("#all-flyouts").remove();
               $("body").unbind("click", closeOnBlur);
            });
        }
    }
});