jQuery Drop Down Menu w/ One Shot Collapse

Button opens a hidden div and attaches a document-wide event handler. Clicking anywhere other than inside #innerContainer will hide the original hidden div and remove the document-wide event handler

by Steven Senkus

HTML

<script src="https://jquery-json.googlecode.com/files/jquery.json-2.4.min.js"></script>
<div id="outer">#outer
    <div id="innerContainer"> <span style="font-size: 10px;">#innerContainer</span>

        <div id="inner"> <span style="font-size: 10px;">#inner</span>

            <form action="/echo/json/" method="post" ajax="true">
                <label>Username:</label>
                <input type="text" name="user" />
                <label>Password:</label>
                <input type="text" name="pass" />
                <hr />
                <button type="submit">Submit</button>
            </form>
        </div>
        <hr />
        <button id="trigger">#trigger</button>
    </div>
</div>
<div id="instructions">
    <p>Button opens a hidden div and attaches a document-wide event handler.
        <br />Clicking anywhere other than inside #innerContainer (#outer or higher up the DOM tree) will hide the original hidden div (#inner) and remove the document-wide event handler</p>
</div>
<div id="eTargetStatus">
    <label>Status:</label>
    <input type="text" />
    <img id="loadImg" width="20" src="http://opengraphicdesign.com/wp-content/uploads/2009/01/loader64.gif" />
</div>
<div class="info success error" id="result"></div>

CSS

body {
    font-family: Helvetica, Arial, sans-serif;
}
#instructions {
    width: 200px;
    height: auto;
    position: absolute;
    top: 10px;
    right: 50px;
    border: 2px solid #000;
    padding: 0 14px;
    background-color: #fff;
}
.error {
    background-color:#FFBABA;
    color:#D8000C;
    background-image:url('data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJPSURBVDjLpZPLS5RhFMYfv9QJlelTQZwRb2OKlKuINuHGLlBEBEOLxAu46oL0F0QQFdWizUCrWnjBaDHgThCMoiKkhUONTqmjmDp2GZ0UnWbmfc/ztrC+GbM2dXbv4ZzfeQ7vefKMMfifyP89IbevNNCYdkN2kawkCZKfSPZTOGTf6Y/m1uflKlC3LvsNTWArr9BT2LAf+W73dn5jHclIBFZyfYWU3or7T4K7AJmbl/yG7EtX1BQXNTVCYgtgbAEAYHlqYHlrsTEVQWr63RZFuqsfDAcdQPrGRR/JF5nKGm9xUxMyr0YBAEXXHgIANq/3ADQobD2J9fAkNiMTMSFb9z8ambMAQER3JC1XttkYGGZXoyZEGyTHRuBuPgBTUu7VSnUAgAUAWutOV2MjZGkehgYUA6O5A0AlkAyRnotiX3MLlFKduYCqAtuGXpyH0XQmOj+TIURt51OzURTYZdBKV2UBSsOIcRp/TVTT4ewK6idECAihtUKOArWcjq/B8tQ6UkUR31+OYXP4sTOdisivrkMyHodWejlXwcC38Fvs8dY5xaIId89VlJy7ACpCNCFCuOp8+BJ6A631gANQSg1mVmOxxGQYRW2nHMha4B5WA3chsv22T5/B13AIicWZmNZ6cMchTXUe81Okzz54pLi0uQWp+TmkZqMwxsBV74Or3od4OISPr0e3SHa3PX0f3HXKofNH/UIG9pZ5PeUth+CyS2EMkEqs4fPEOBJLsyske48/+xD8oxcAYPzs4QaS7RR2kbLTTOTQieczfzfTv8QPldGvTGoF6/8AAAAASUVORK5CYII=');
}
.success {
    background-color:#DFF2BF;
    color:#4F8A10;
    background-image:url('data:image/png; base64,...

JavaScript

(function Menu($,win,doc, undefined) {
    var self = this;
    this.attachOneShot = function() {
        $(doc).on('click', function(e) {
            self.update('log', 'clicked: ' + ((e.target.id) ? '#' + e.target.id : e.target));
            if (!$(e.target).is('#innerContainer, #innerContainer *')) {
                self.update('ui', 'warning');
                self.toggleMenu('up');
            } else {
                e.stopPropagation();
            }
        });
    };
    this.toggleMenu = function(dir) {
        if (dir === 'down') {
            $('#inner').slideDown(1500);
        }
        if (dir === 'up') {
            $('#inner').slideUp(1000, function() {
                $(doc).off('click');
                $('#eTargetStatus label').text('Status :');
                self.update('ui', '');
                self.update('log', 'document-wide click event listener removed');
            });

        }
    };
    this.update = function(type, status, data) {
        switch (type) {
            case 'ui':
                $('body').removeClass('warning error success info').addClass(status);
                $('#eTargetStatus label').text('Status:');
                break;
            case 'log':
                $('#eTargetStatus input').val(status);
                if (data !== 'undefined') {
                    $('#eTargetStatus label').text(data);
                }
                break;
            default:
                break;
        }
    }
    this.init = (function() {
        $('#trigger').on('click', function() {
            self.update('ui', 'info');
            self.toggleMenu('down');
            self.attachOneShot();
        });

        // FORM SUBMISSION
        $('form').submit(function(e) {
            e.preventDefault();
            var d; // data were are going to send via fake POST request
            var input = {
                user: $('input[name=user]').val(),
                pass: $('input[name=pass]').val()
            }; // form...