[SLameN]

При нажатии на картинку, открывается блок со смайлами.

<img src="tmpl/img/smile/smile.png" id="smilesBtn" alt="Смайлы" title="Добавить смайл">
                <div id="smiles">
        			<span>
                        <img class="smile" src="tmpl/img/smile/1.gif" alt=":)">
        			</span>

#smiles {
    display: none;
    position: absolute;
    width: 550px;
    border: 1px solid #eee;
}

Что бы хотелось:
1. При нажатии на картинку (smile.png) открывается div smiles
2. Если div smiles открыт, то при нажатии на картинку (smile.png) скрывается div smiles
3. При нажатии на картинку в div - smiles, скрывается
4. Если кликнуть в другом месте экрана, div smiles скрывается

Сейчас работает, но куча лишнего кода (много вырезал из другого проекта) и не работает пункт №4. Помогите с данным вопросом

<script type="text/javascript" src="jquery.js"></script>
$(document).ready(function () {

    var smiles = $("#smiles");
    var inputEl = $("#chatInp");
    var smilesBtn = $("#smilesBtn");

    $("#smiles span").click(function () {
        var shortCode = $.emotions.shortcode($(this).attr("title"));
        inputEl.val(inputEl.val() + " " + shortCode + " ");
        smiles.toggle();
        inputEl.focus();
    });

    $("#smilesBtn").click(function () {
        smiles.toggle();
    });
});
(function ($) {

    $.emotions = function (text) {
        return $.emotions.parse(text);
    };

    var $t = $.emotions;

    $.extend($.emotions, {

        settings: {
            replacement: '<span title="{eId}" class="emotions emo-{eId}"></span>',
        },
        shortcode: function(eId){
            var $s = $t.settings;
            for (var pattern in $s.map) {
                if($s.map[pattern] == eId)
                    return pattern;
            }
            return "";
        },
    });

    $.fn.emotions = function (action, options) {
        this.each(function () {
            var el = $(this);
            el.html($.emotions(el.html()));
        });
    };
})(jQuery);