Fancy Select jQuery plugin

I made this to handle font selections

by envira

HTML

<label for="fonts">Font: </label>
<select id="fonts" name="fonts" class="selectbar input-medium">
    <option value="font-arvo" class="fnt font-arvo">Arvo</option>
    <option value="font-courgette" class="fnt font-courgette">Courgette</option>
    <option value="font-handlee" class="fnt font-handlee">Handlee</option>
    <option value="font-oregano" class="fnt font-oregano">Oregano</option>
    <option value="font-homemade-apple" class="fnt font-homemade-apple">Homemade Apple</option>
    <option value="font-shadows-into-light" class="fnt font-shadows-into-light">Shadows Into Light</option>
    <option value="font-special-elite" class="fnt font-special-elite">Special Elite</option>
</select>

SCSS

$fontColor: #25271E;
$backgroundColor: #51B4E3;
$arrowColor = #fff;
$radius: 8px;

.gradientGrey {
    background-image: linear-gradient(bottom, rgb(209,209,209) 16%, rgb(232,232,232) 42%);
background-image: -o-linear-gradient(bottom, rgb(209,209,209) 16%, rgb(232,232,232) 42%);
background-image: -moz-linear-gradient(bottom, rgb(209,209,209) 16%, rgb(232,232,232) 42%);
background-image: -webkit-linear-gradient(bottom, rgb(209,209,209) 16%, rgb(232,232,232) 42%);
background-image: -ms-linear-gradient(bottom, rgb(209,209,209) 16%, rgb(232,232,232) 42%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.16, rgb(209,209,209)),
    color-stop(0.42, rgb(232,232,232))
);
}

.select-wrapper {
    position: relative;
}

.select-control {
    color: $fontColor;
    background-color: lighten($backgroundColor, 20%);
    @extend .gradientGrey;
    cursor: pointer;
    line-height: 30px;
    height: 30px;
    text-indent: 6px;
    font-weight: bold;
    position: relative;
    border-radius: $radius;
    z-index: 20;
    
    .selection-prev {
        display: inline;
        font-size: 90%;
        padding-left: 5px;
        font-weight: normal;
    }
    
    &::after {
        font-family: sans-serif;
        color: $arrowColor;
        content: "\2199";
        background-color: darken($backgroundColor, 20%);
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 5px;
        height: 100%;
        font-size: 120%;
        border-top-right-radius: $radius;
        border-bottom-right-radius: $radius;
    }

    &.select-open {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;

        &::after {
            content: "\2197";
            border-bottom-right-radius: 0;
        }
    }
    
    &:hover {
        background-color: lighten($backgroundColor, 15%);
    }
}

.selectbar {
    $fontColor: #25271E;
    @extend .gradientGrey;    
    position: absolute;
    top: 30px;
  ...

JavaScript

WebFontConfig = {
    google: {
        families: ['Arvo::latin', 'Courgette::latin', 'Handlee::latin', 'Oregano::latin', 'Homemade Apple::latin', 'Shadows Into Light::latin', 'Special Elite']
    }
};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();

(function($) {
    // Fancy Select plugin
    $.fn.fancySelect = function() {    

    // Disable text selections to mimic real form controls
    $.fn.disableSelection = function() {
        return this.attr('unselectable', 'on').css('user-select', 'none').live('selectstart', false);
    };
    
    // Add function to Number prototype for generating random strings of given length
    Number.prototype.ofRandomChars = function() {
        var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
        var randomstring = '';
        for (var i = 0; i < this; i++) {
            var rnum = Math.floor(Math.random() * chars.length);
            randomstring += chars.substring(rnum, rnum + 1);
        }
        return randomstring;
    }
    // Make select items act like buttons
    $('.select-option').live('mousedown', function(e) {
        $(this).addClass('mousedown');
    }).live('mouseup', function(e) {
        $(this).add().removeClass('mousedown');
    }).live('mouseleave', function(e) {
        $(this).trigger('mouseup');
    }).live('click', function(e) {
        $control = $(this).parent().prev();
        // Update hidden field
        $(this).parent().next('input').val($(this).data('value'));
        // Collapse the menu
        $control.trigger('click');
        // Update preview
        if (0 == $control.find('.selection-prev').length) {
            // Create the preview
            $('<span...