Slide-out dock

I'm trying to get this dock to work, but am unable to get it to appear, much less slide out of the side of the screen.

HTML

<div id="moduledock">
    <div id="moduledockcontent">
    <div style="width:140px">
    I'm trying to get this dock to work, but am unable to get it to appear, much less slide out of the side of the screen.</div>
    </div>
</div>

CSS

#moduledock{
    position:fixed;
    width:0px;
    height:100%;
    border:1px solid #AAAAAA;
    border-right:10px solid #38ACEC;
    color:black;
    display: none;
}

#moduledockcontent{
    width:100%;
    height:100%;
    background-color:white;
    overflow: hidden;
}

JavaScript

(function ($) {
    
    var $dock = $('#moduledock'),
        $content = $('#moduledockcontent'),
        dockopen = false;      
    
    // Track mouse position to show/hide dock border
    $(window).bind('mousemove', function (e) {
        if (dockopen) { return; }
            
        (e.pageX <= 20) ? $dock.fadeIn('fast') : $dock.fadeOut('fast');
        
        var name = (boolean) ? "adon" : "Pierre";
        
        var x = false;
        
        if(x !== 0){
        
        	//blah
        
        }
        
    });
    
    // Open dock when border clicked
    $dock.bind('click', function(e) {
        // only detect clicks outside of innerwidth (on border)
        if (e.pageX < $dock.innerWidth()) { return; }
        
        if (dockopen) {
            $dock.animate({
                width: '0px'
            }, 400, function () { dockopen = false; });
     
            $dock.fadeOut();
            
        } else {
            
            dockopen = true;
            
            $(this).animate({
                width: '140px'
            }, 400);            
        }
    });
    
})(jQuery);