Fix crappedness with post popup panel hiding on blur

So right now, the post popup panel, which has the shortening buttons and other controls in it, appears when the textarea gets focus, and disappears when it blurs. This is problematic because it means when we click on the post panel to do something, the panel is dismissed. This gets even weirder when we use the new shortening menu, because it is giving the textarea focus again, but it doesn't make the post panel reappear, which means you have to blur and re-focus manually to get it back.

Ick.

So we need to do a better job. I made a little test doc that might give us a better way. Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <meta name="author" content="Ed Finkler">
    <!-- Date: 2010-07-09 -->

    <script src="spazcore/examples/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="spazcore/examples/spazcore-standard.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen">
        .focused {
            background-color:#CCCCFF;
        }
        #panel {
            padding:5px;
            background:#CCC;
            border:2px solid [#333](/projects/32566/tickets/333 "Ticket #333");
            color:#333;
        }
    </style>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){

            var panelClicked = false;

            $('#panel').hide();

            $('#textbox')
                .focus(function(e){
                    $(this).addClass('focused');
                    $('#panel').fadeIn(200);
                })
                .blur(function(e){

                    if (panelClicked === false) {// && $(this).val().length < 1) {
                        $('#panel').fadeOut(200);
                        panelClicked = false;
                    }
                    $(this).removeClass('focused');
                });

            $('#pushbutton')
                .focus(function(e){
                    return false;
                })
                .click(function(e){
                    $('#textbox').get(0).focus();
                    $('#textbox').val('clicked!');
                    return false;
                });

            $('#panel')
                .mousedown(function(e) {
                    panelClicked = true;
                })
                .mouseup(function(e) {
                    panelClicked = false;
                    $('#textbox').get(0).focus();
                });
        });
    </script>

</head>
<body>
    <div id="container">
        <textarea name="" id="textbox" cols="30" rows="10"></textarea>

        <div id="panel">
            This is the panel!
            <button id="pushbutton">Foobar</button>
        </div>
    </div>

</body>
</html>