Trying to get a jquery script to hide an element when a user clicks outside the scope
<p>I am trying to implement a bit of code that Twitter use to toggle off the drop-down login box when a user clicks outside the scope of the drop-down box itself.</p>

<p>I am having a bit of trouble, currently if I click outside the scope of the element it works as expected but the same thing also happens when I click inside the element scope I.e. within the #form element.</p>

<p>HTML Markup:</p>

<pre><code>&lt;body&gt;
    &lt;div id="form"&gt;
        &lt;div id="form-tab"&gt;&lt;/div&gt;
        &lt;div id="form-header"&gt;FooBar&lt;/div&gt;
        &lt;form&gt;
            &lt;label&gt;Test&lt;/label&gt;
            &lt;input type="text"&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>jQuery Code:</p>

<pre><code>$(document).mouseup(function(e) {
    if ($(e.target).parent("div#form").length==0) {
        hide();
    }
});

function hide() {
    $element.animate({
        right: $rightPos
    }, 1000);
}
</code></pre>

<p>If anyone can help me figure out where I am going wrong it would be greatly appreciated.</p>

<p>Thanks in advance.</p>
