/*-------------------------------------------------------------------- 
 * jQuery plugin: custom select
 * Copyright (c) 2010 Dmitriy Kubyshkin, http://kubyshkin.ru
 * Licensed under the MIT license.
 * IMPORTANT: Script does not support IE6
--------------------------------------------------------------------*/

jQuery.fn.customSelect = function(){
  if(!($.browser.msie && $.browser.version < 7))
  {
    $(this).each(function(i) {
      var hold = $(this);
      if((hold).is('select')) {
      
        var display = $('<span class="display"></span>');
        var overflow = $('<span class="overflow"></span>').appendTo(display);
        var wrapper = $('<span class="select"></span>');
        wrapper.insertBefore(hold).append(display).append(hold);
      
        if(!hold.hasClass('fixed_width'))
        {
          // I hate magic numbers as much as you do but
          // styling of controls can't live without them
          if($.browser.mozilla)
          {
            hold.width(hold.width() + 10);
          }
          else if($.browser.opera || ($.browser.msie && $.browser.version == 7))
          {
            hold.width(hold.width() + 14);
          }
          else
          {
            hold.width(hold.width() + 8);
          }
        }
      
        // This is for IE 7 but doesn't hurt others
        wrapper.width(hold.width());
      
        hold.bind('updateDisplay', function(){
          overflow.text(hold.find('option:selected').text());
        })
        .bind('change blur', function(){
          hold.trigger('updateDisplay');
          return true;
        })
        .trigger('updateDisplay');
      }
    });
  }
  return $(this);
  
}