(function ($) {
    $.fn.select_skin = function (w) {
        return $(this).each(function(i) {
            $this = $(this);

            if (!$this.attr('multiple')) {
                // create the container
                $this.wrap('<div class="skinned-select"></div>');
                c = $this.parent();
                c.prepend('<div class="skinned-select-text">&nbsp;</div>');

                c.width($this.width());
                c.height($this.height());

                // skin the container
                c.css('background-color', $this.css('background-color'));
                c.css('color', $this.css('color'));
                c.css('font-size', $this.css('font-size'));
                c.css('font-family', $this.css('font-family'));
                c.css('font-style', $this.css('font-style'));
                c.css('position', 'relative');
                c.css('overflow', 'hidden');
                c.css('z-index', 8);

                // hide the original select
                $this.css({
					'opacity': 0,
					'position': 'relative',
					'border': 'none',
					'z-index': 128
				});

                // get and skin the text label
                var t = c.children().prev();
				t.text(this.options[this.selectedIndex].innerHTML);
                t.width(c.width());
                t.height(c.height());
                t.css({
					'opacity': 100,
					'overflow': 'hidden',
					'position': 'absolute',
					'text-indent': '0px',
					'z-index': 1,
					'top': 0,
					'left': 0
				});

                // add events
                c.children().click(function() {
                    t.text( (this.options.length > 0 && this.selectedIndex >= 0 ? this.options[this.selectedIndex].text : '') );
                });
                c.children().change(function() {
                    t.text( (this.options.length > 0 && this.selectedIndex >= 0 ? this.options[this.selectedIndex].text : '') );
                });
             }
        });
    }
}(jQuery));