// SELECT element skinning
(function ($) {
	$.fn.select_skin = function (w) {
		return $(this).each(function (i) {
			s = $(this);
			if (!s.attr('multiple')) {
				
				// Check to make sure this SELECT hasn't already been skinned
				if (s.parent()[0].className != "cmf-skinned-select") {
					
					// create the container
					s.wrap('<div class="cmf-skinned-select"></div>');
					c = s.parent();
					c.children().before('<div class="cmf-skinned-text">&nbsp;</div>').each(function () {
						var text = (this.options[this.selectedIndex].innerHTML.toString());
						text = $('<textarea />').html(text).val();
						if (this.selectedIndex >= 0) $(this).prev().text(text)
					});
					c.width(s.outerWidth() - 2);
					c.height(s.outerHeight() - 2);
					
					// skin the container
					c.css('background-color', s.css('background-color'));
					c.css('color', s.css('color'));
					c.css('font-size', s.css('font-size'));
					c.css('font-family', s.css('font-family'));
					c.css('font-style', s.css('font-style'));
					c.css('position', 'relative');
					
					// hide the original select 
					// added the width fix for Google Chrome
					s.css({
						'opacity': 0,
						'position': 'relative',
						'z-index': 100,
						'width': (s.outerWidth() - 2) + "px"
					});
					
					// get and skin the text label
					var t = c.children().prev();
					t.height(c.outerHeight() - s.css('padding-top').replace(/px,*\)*/g, "") - s.css('padding-bottom').replace(/px,*\)*/g, "") - t.css('padding-top').replace(/px,*\)*/g, "") - t.css('padding-bottom').replace(/px,*\)*/g, "") - 2);
					t.width(c.innerWidth() - s.css('padding-right').replace(/px,*\)*/g, "") - s.css('padding-left').replace(/px,*\)*/g, "") - t.css('padding-right').replace(/px,*\)*/g, "") - t.css('padding-left').replace(/px,*\)*/g, "") - c.innerHeight());
					t.css({
						'opacity': 100,
						'overflow': 'hidden',
						'position': 'absolute',
						'text-indent': '0px',
						'z-index': 1,
						'top': 0,
						'left': 0
					});
					
					// add events
					c.children().click(function () {
						var text = "";
						if (this.options != undefined && this.options != null && this.options != "") {
							text = (this.options[this.selectedIndex].innerHTML.toString());
							t.html((this.options.length > 0 && this.selectedIndex >= 0 ? text : ''));
						}
						text = $('<textarea />').html(text).val();						
					});
					
					c.children().change(function () {
						var text = (this.options[this.selectedIndex].innerHTML.toString());
						text = $('<textarea />').html(text).val();
						t.html((this.options.length > 0 && this.selectedIndex >= 0 ? text : ''));
					});
				}
			}
		});
	}
	
	// un-skin the select
	$.fn.select_unskin = function (w) {
		return $(this).each(function (i) {
			s = $(this);
			if (!s.attr('multiple') && s.parent().hasClass('cmf-skinned-select')) {
				s.siblings('.cmf-skinned-text').remove();
				s.css({
					'opacity': 100,
					'z-index': 0
				}).unwrap();
			}
		});
	}
	
}(jQuery));