jQuery Select Replacement

jquery-pretty-select.js

(function($){
 
   var methods = {
      init : function(opts) {
         var defaults = {
            width: null,
            height: null,
            bgcolor: '#d4d4d4',
            zindex: 100,
            option_height: 20
         };
         $.fn.prettySelect.options =  $.extend(defaults, opts);
         
         //the guts
         return this.each(function() {
               var obj = $(this);
               
                  methods.execute(obj);
               
               
         });
      },
      destroy: function() {
         
      },
      execute: function(obj){
         console.log('test');
         if( typeof obj == 'undefined')
            obj = $(this);
         
         //alias the options   
         var o = $.fn.prettySelect.options;
         
         if(o.width === null)
            o.width=obj.width();
            
        if(o.height === null)
            o.height=obj.height();
         
         //create the replacement container
         var container = $('<div/>');
        container.addClass('pretty-select')
            .css('position','relative')
            .css('width',o.width)
            .css('height',o.height)
            .css('background-color',o.bgcolor)
            .css('z-index',o.zindex);
        
        //setup the list container
         var list_container =$('<div/>');
         list_container.addClass('pretty-select-options')
            .css('display','none')
            .css('position','absolute')
            .css('left','0')
            .css('top',0)
            .css('width',o.width)
            .css('z-index',o.zindex + 1);
         
         _adjusted_position=0;
         //lets add the select options to the list container
         select_options=$('option',obj);
         select_options.each(function()
         {
            _this=$(this);
            option_element=$('<div/>');
            _val=_this.attr('value');
            
               option_element.data('value',_this.attr('value'))
                  .css('line-height',o.option_height +'px')
                   .html(_this.text());
              
            //bind the option_element click event so that it sets the selects value
            option_element.click(function() {
               val=$(this).data('value');
               text=$(this).text();
               obj.val(val);
               //slap the text inside our container
               $(this).parent().prev().text(text);
               //find the height of list_container element
               _position=$(this).position();
               _adjusted_position=_position.top;
            });
                
            list_container.append(option_element);
         });
         
         //lets now add the selected options text to the container
         var selected_text=$('<span/>');
         selected_text
            .addClass('pretty-select-selected')
            .text($('option:selected',obj).text());
         container.append(selected_text);
         
         
         //add the list to the container
         container.append(list_container);
         
         //bind the click event to the container to display the list
         container.click(function() {

            list_container.fadeToggle('fast',function() {
               list_container.css('top','-'+_adjusted_position+'px');   
            });
            
         });
         
         //hide the select element
         obj.hide();
         
         //insert the pretty select element after the select
         obj.after(container);
      }
   }
   
   $.fn.prettySelect = function(method) {
      
      if ( methods[method] )
      {
         return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
      }
      else if ( typeof method === 'object' || ! method )
      {
         return methods.init.apply( this, arguments );
      }
      else
      {
         $.error( 'Method ' +  method + ' does not exist on jQuery.prettySelect' );
         return null;
      }
   };
})(jQuery);