$(document).ready(function () {
    $.fn.dropdownlist = function (selectedKey, defaultText, cssClass) {

        if (!cssClass) cssClass = 'dropdownlist';

        // get the selectbox text
        if (selectedKey && selectedKey != '') {
            var id = this.attr('id') + selectedKey;
            var selectedLI = $('#' + id, this);
            if (selectedLI.length > 0) {
                defaultText = selectedLI.find('a').text();
                selectedLI.addClass('menu-selected');
            };
        };

        var $ddl = $('<div id="ddl_' + this.attr('id') + '" class="' + cssClass + '" />');
        $ddl = $ddl.append('<div class="item-selected">' + defaultText + '</div>');
        $ddl = $ddl.append($(this).clone());

        this.replaceWith($ddl);

        $('.down-list', $ddl).width($ddl.width() - 2);

        $('div.item-selected', $ddl).click(function () {

            if ($ddl.hasClass('slide-down')) {
                closeDdl($ddl);
            } else {
                openDdl($ddl);
            };

        });

        $ddl.mouseleave(function () {
            closeDdl($(this));
        });

        $ddl.mousedown(function (e) {
            if (e.which == 3) {
                /* Right Mousebutton was clicked! */
                if ($ddl.hasClass('slide-down')) {
                    closeDdl($ddl);
                };
            };
        });

        $ddl.wrap('<div style="height: ' + $ddl.height() + 'px; width: ' + $ddl.width() + 'px;" />');

        function openDdl($ddl) {
            $ddl.css('z-index', '1000').addClass('slide-down');
            $('.down-list', $ddl).stop(true, true).slideDown(100);
        };

        function closeDdl($ddl) {
            $('.down-list', $ddl).stop(true, true).slideUp(100, function () { $ddl.removeClass('slide-down'); $ddl.css('z-index', '0'); });
        };
    };
});