Convert a select box to custom DIV

Take a standard select box and convert it to a custom DIV. Plugin is to have public facing methods

by sygad

HTML

<select id="countriesOfTheWorld" class="countriesOfTheWorld" name="countriesOfTheWorld-Basic">
    <option value="noValue">Please choose a country</option>
    <option value="noValue">-------------------------------------------------</option>
    <option class="AF" value="Afghanistan">Afghanistan</option>
    <option class="AL" value="Albania">Albania</option>
    <option class="DZ" value="Algeria">Algeria</option>
    <option class="AD" value="Andorra">Andorra</option>
    <option class="AO" value="Angola">Angola</option>
    <option class="AQ" value="Antarctica">Antarctica</option>
    <option class="AG" value="Antigua and Barbuda">Antigua and Barbuda</option>
    <option class="AR" value="Argentina">Argentina</option>
    <option class="AM" value="Armenia">Armenia</option>
</select>

CSS

html, body                            {font:0.9em/1.1em "Arial", sans-serif}

.countryImageDropdown                {margin:0 0 30px; width:500px}

.countryImageDropdownTitle            {background:#666 url(http://www.darrencousins.com/sygad-jsFiddle-assets/downArrow-white.png) 100% 50% no-repeat; color:#fff; font-weight:bold; margin:0; padding:10px}

.expanded                            {background:#666 url(http://www.darrencousins.com/sygad-jsFiddle-assets/topArrow-white.png) 100% 50% no-repeat;}

.countryImageDropdownContainer        {background:#ccc; border:1px solid #555; height:200px; display:none; overflow-y:scroll}

.countryImageDropdownOption            {}

.countryImageDropdownOption p        {position:relative; margin:0 0 0 3px; padding:8px 0 8px 60px; border-bottom:1px solid #555;}
.countryImageDropdownOption p.last    {border:0}

.countryImageDropdownOption .flag    {position:absolute; top:50%; left:10px;  margin:-9px 10px 0 0; width:34px; height:18px;
    background-image:url(http://www.darrencousins.com/sygad-jsFiddle-assets/world-map-sprite-short.gif); background-position:0 0; background-repeat:no-repeat}


    /* CSS Sprite*/
        .AF    {background-position:0px 0px!important}
        .AL    {background-position:-34px 0px!important}
        .DZ    {background-position:-68px 0px!important}
        .AD    {background-position:-102px 0px!important}
        .AO    {background-position:-136px 0px!important}
        .AQ    {background-position:-170px 0px!important}
        .AG    {background-position:-204px 0px!important}
        .AR    {background-position:-238px 0px!important}
        .AM    {background-position:-272px 0px!important}

JavaScript

$.fn.convertSelect = function(method)
{
    
    var firstOption = '';  //used for creating dropdown title
    var optionString='';  //string builder
    
    $(this).find('option').each(function(index)
    {
        //Get the values from the option tags
        var optionClass = $(this).attr('class');
        var optionVal = $(this).val();
        var optionText = $(this).text();
        
        if (index==0)
        {
            firstOption = optionText;  //the 1st option is used for the dropdown title
        }
        if( optionVal !== 'noValue' )  //get the rest only if not a "noValue" option
        {
            optionString += '<div class="countryImageDropdownOption"><p><span class="flag '+optionClass+'"></span>'+optionText+'</p></div>\n'
        }
    })

    //build up the output
    var outputString  = '<div class="countryImageDropdown">\n'
        outputString += '<div class="countryImageDropdownTitle clickOut">'+firstOption+'</div>\n'
        outputString += '<div class="countryImageDropdownContainer clickOut">\n'
        outputString += optionString
        outputString += '</div>\n'
        outputString += '</div>'
    
    //insert the newly created output into the DOM
    $(this).before(outputString)
    
    //Make the new title clickable (dropdown is css hidden)
    $('.countryImageDropdownTitle').live('click', function()
    {
        if ( $(this).next().is(':hidden') )
        {
            slideDownOptions( $(this) )
        }
        else
        {
            slideUpOptions( $(this) )
        }
    })
    
    //Make the dropdown hide if we click outside of it
    $(document).click(function(e)
    {
        /*if parent of this click is NOT clickout AND this click is NOT clickout then hide stuff*/
        if($(e.target).parents().is('.clickOut') == false && $(e.target).is('.clickOut') == false)
        {
            slideUpOptions( $('.countryImageDropdownTitle') )
        }
    });
    
    //show the dropdown
    function...