jQuery Forum

I have created a login layer that slides down from the top of the
screen and i want it so that if the mouse leaves the layer or you
click outside of the layer it slides back up. I have it working on
mouse out but it is buggy and since i am new to this i am sure there
is probably a much better way to do what i am doing.
Can someone please take a look and let me know how to do this?
$(document).ready(function(){
                $("#LoginForm").corner("bottom");
                $("#LoginLink").click(function(){
                    if ($("#LoginForm").is(":hidden")){
                        $("#LoginForm").slideDown("fast");
                    }
                    else{
                        $("#LoginForm").slideUp("fast");
                    }
                     if ($(".FormContainer").is(":hidden")){
                        $(".FormContainer").show("fast");
                    }
                });
                 setTimeout('$("#messageReply").hide();$("#LoginForm").slideUp
("fast")', 20000);
                $("#LoginFormContainer").hover(
                    function() {
                        $("#LoginFormContainer").show();
                    },
                    function() {
                        setTimeout('$("#LoginForm").slideUp("fast")', 2000);
                    }
                );
                $(".Content input").focus(function() {
                    $(this).parent().addClass("curFocus")
                });
                    $(".Content input").blur(function() {
                    $(this).parent().removeClass("curFocus")
                });
                $("a").mouseover(function() {
                        $(this).fadeOut(100);
                        $(this).fadeIn(300);
                });
                // handle hide/show for text field default values in only one form
                inputDefaults = {};
                $("#LoginForm input:text, #LoginForm
input:password").clearDefaultText();
            });
function closeForm(){
                $("#LoginForm .FormContainer").fadeOut("fast");
setTimeout('$("#messageReply").fadeIn("fast")', 350);
setTimeout('$("#messageReply").hide();$
("#LoginForm").slideUp("fast")', 3500);
            }
            // handle hide/show for text field default values in only one form
            jQuery.fn.clearDefaultText = function() {
             return this.each(function(){
                var element = $(this);
                inputDefaults[element.attr("id")] = element.val();
                element.focus(function() {
                 if (element.val() == inputDefaults[element.attr("id")]) {
                    element.val('');
                 }
                });
                element.blur(function() {
                 if (element.val() == '') {
                    element.val(inputDefaults[element.attr("id")]);
                 }
                });
             });
            }
The main problem is with
the........................................................
$("#LoginFormContainer").hover(
                    function() {
                        $("#LoginFormContainer").show();
                    },
                    function() {
                        setTimeout('$("#LoginForm").slideUp("fast")', 2000);
                    }
It seems to work but sometimes it slides up with the mouse over the
layer and you never left the layer.
Any help would greatly appreciated! :)