Create dropdown menus with jquery

jquery.fancydropdown.js

/*

Example usage:

$('ul.dropdown').fancydropdown();

(elements must have a 'title' attribute in order to populate the prompt)

*/
$.fn.fancydropdown = (function(options){
    var settings = $.extend({
        label_callback: function(ul) {
            return '<span>' + ul.attr('title') + '</span> ' + (ul.find('.current').text() || "Choose");
        }
    }, options);
    
    
    
    this.each(function(i, item) {
        var TIMER = 200;
        var dropdown = $('<div>').addClass('fancydropdown');
        
        
        dropdown.append($('<label>').html(settings.label_callback($(item))));
        var wrapper = $('<div>').addClass('fancydropdown-wrapper');
        var inner = $('<div>').addClass('inner');
        inner.append($(item).clone());
        wrapper.append(inner);
        dropdown.append(wrapper);
        
        
        wrapper.hide();
        
        dropdown.find('label').click(function(){
            var show = !$(this).parent().find('ul').is(':visible');
            $('.fancydropdown .fancydropdown-wrapper').slideUp(TIMER);
            if (show) {
                wrapper.slideDown(TIMER);
            }
            else {
                wrapper.slideUp(TIMER);
            }
            
            function hide(e) {
                var cancelFlag = false;
                $(e.target).parents().each(function() {
                    //console.log(this, this == dropdown[0]);
                    if (this == dropdown[0]) {
                        cancelFlag = true;
                    }
                });
                if (!cancelFlag) {
                    $('.fancydropdown .fancydropdown-wrapper').slideUp(TIMER);
                    $('body').unbind('click', hide);
                }
                
            };
            
            $('body').bind('click', hide);

            
            
            return false;
        });
        
        
        $(item).after(dropdown);
        $(item).remove();
    });
});