Javascript boolean if statement not working
<p>I'm trying to animate a panel to come in and out from the top of the page. Unfortunately my if statement is not working. Here's my code:</p>

<pre><code>var panelShown = false;
$(document).ready(function(){
    $('#nav_arrow').click(function(){
        panelShown = true;
        $('#nav_panel').animate({top: '0px'}, 1000, function(){});
        $('#nav_bar');
    });
    if(panelShown == true){//originally written as if(panelShown){
        $(document).click(function(){
            panelShown = false;
            $('#nav_panel').animate({top: '-200px'}, 1000, function(){});
        });
    }
});
</code></pre>

<p>The first part works fine, the panel animates down. But I can never get into the if statement. Any help would be greatly appreciated.</p>
