// JavaScript Document
(function ($) {
    $.fn.dropdown = function (options) {
        //handle must be img src
        var defaults = {
            title: null,
            handle: null
        };
        var inUl = false;
        var wrapper, title_wrapper, title_content, dd_handle, ul = null;

        var options = $.extend(defaults, options);

        function create_options_container(obj, container) {
            ul = $('<ul class="dd_content" />');
            obj.children().each(function (i, elm) {
                var li = $('<li class="dd_item" />');
                li.attr('id', elm.value)
			.data({
			    'selected': false,
			    'elm': elm
			})
			.html(elm.text);
                if (i == 0 && options.title == null) {
                    options.title = elm.text
                }
                if ($(elm).filter(':selected').length > 0) {
                    options.title = elm.text;
                    li.data('selected', true);
                }
                container.data(elm.value, elm);
                li.click(function () {
                    elm = $(this).data('elm');
                    $(elm).attr('selected', 'selected');
                    set_title($(this).parent().parent(), $(this).html());
                    dropdown_close($(this).parent());
                });
                ul.append(li);
            });
            ul.mouseenter(function () {
                inUl = true;
            }).mouseleave(function () {
                inUl = false;
            });
            container.append(ul.hide());
        }
        function set_title(elm, title) {
            elm.find('.' + title_content.attr('class')).html(title);
        }
        function dropdown_close(ul) {
            //ul.parent().parent().css('zIndex',1);
            ul.slideUp('fast', function () {
                $(this).parent().parent().css('zIndex', 1);
            });
        }
        function dropdown_open(ul) {
            ul.parent().parent().css('zIndex', 1000).find('select').focus();
            ul.slideDown('fast');
        }
        return this.each(function () {
            obj = $(this);

            wrapper = $('<div class="dd_container" />');
            obj.wrap("<div class='dd_wrapper' />");
            obj.css({ position: 'absolute', left: '-10000px' });
            title_wrapper = $('<div class="dd_title_wrapper" />');
            title_content = $('<span class="dd_title_content" />');
            dd_handle = $('<div class="dd_handle" />');
            if (options.handle) {
                var dd_handle_image = $('<img alt="Drop Down Handle" />');
                dd_handle_image.src(options.handle);
                dd_handle.append(dd_handle_image);
            }

            create_options_container(obj, wrapper);

            title_content.text(options.title);
            title_wrapper.append(title_content).append(dd_handle);
            title_wrapper.click(function () {
                var ul = $(this).parent().find('ul');
                if (ul.is(':visible')) {
                    dropdown_close(ul);
                } else {
                    dropdown_open(ul);
                }
            });

            obj.focusout(function () {
                if (!inUl) {
                    dropdown_close($(this).parent().find('ul'));
                }
            });
            wrapper.prepend(title_wrapper);
            obj.parent().append(wrapper);
        });
    };
})(jQuery);