jQuery.fn.convert_selects = function()
{
    $(this).find('select').each(function()
    {
        var date = new Date();
        
        // Create a list wrapper
        var wrapper = document.createElement('div');
        wrapper.id = this.name + '_wrapper_' + date.getTime();
        $(wrapper).addClass('select wrapper ' + this.name);
        this.parentNode.insertBefore(wrapper, this);
        
        // Store the information for sending the form
        $('<input type="hidden" />')
            .attr('name', this.name)
            .attr('value', this.value)
            .appendTo(wrapper);
        
        // Title to display the selected item
        $('<div></div>')
            .addClass('title')
            .attr('id', this.name + '_title')
            .click(function()
            {
                if ($(this.parentNode).find('ul.selection').css('display') == 'block')
                {
                    $(this.parentNode).find('ul.selection').hide();
                }
                else
                {
                    $(this.parentNode).find('ul.selection').show();
                }
            })
            .appendTo(wrapper);
        
        // Extra wrapper that can be styled
        $('<span></span>')
            .addClass('title')
            .html($(this).find('option:selected(0)').html())
            .appendTo($('#' + wrapper.id + ' div.title'));
        
        // List for wrapping the emulated selection list
        $('<ul></ul>')
            .addClass('selection')
            .css(
            {
                display: 'none',
                position: 'absolute',
                listStyle: 'none',
                zIndex: '1000',
                margin: '0 -1px',
                padding: '1px'
            })
            .appendTo(wrapper);
        
        // Loop through each option in the original select
        $(this).find('option').each(function(i)
        {
            // Create a new list element for each option
            $('<li></li>')
                .html(this.innerHTML)
                .attr('title', this.value)
                .css(
                {
                    display: 'block',
                    padding: '1px 3px'
                })
                .mouseover(function()
                {
                    $(this).addClass('hover');
                })
                .mouseout(function()
                {
                    $(this).removeClass('hover');
                })
                .click(function()
                {
                    // When the list item has been clicked, update the hidden input field
                    $(this.parentNode.parentNode).find("input[@type='hidden']").attr('value', $(this).attr('title'));
                    
                    // Remove select classnames from the selection list
                    $(this.parentNode).find('li').removeClass('selected');
                    
                    // Add the 'selected' class to currently selected list item
                    $(this).addClass('selected');
                    
                    // Change the visible title
                    $(this.parentNode.parentNode).find('div.title span').html(this.innerHTML);
                    $(this.parentNode).hide();
                })
                .appendTo('#' + wrapper.id + ' ul.selection');
            
            // Set the selected class to the selected list item
            if (this.value == this.parentNode.value)
            {
                $(wrapper).find('li.' + this.value).addClass('selected');
            }
        });
        
        // Remove the original select list
        this.parentNode.removeChild(this);
    });
}

