function StyledSelectField(id) {
	if (jQuery('#' + id).length) {
		this.originalId = id;
		this.originalElement = jQuery('#' + id);
		this.wrapper = jQuery(this.originalElement).parent();
		jQuery(this.originalElement).hide();
		this.dropdownOpen = false;
		this.buildSelect();
		this.addEventHandlers();
	}
}

StyledSelectField.method('buildSelect', function() {
	this.newSelectWrapperId = this.originalId + '_Wrapper';
	
	jQuery(this.wrapper).css({ position: 'relative' }).append(
		jQuery('<div></div>').attr({ 'className': 'newSelectWrapper', id : this.newSelectWrapperId }).css({
			position: 'absolute',
			top: '0',
			left: '0'
		}).append(
			jQuery('<div></div>').attr({ 'className': 'selectedItem' }).css({
				background: 'transparent url(mysite/themes/gib/images/select-header-bg.jpg) no-repeat left top',
				height: '20px',
				width: '162px',
				cursor: 'pointer'
			}),
			jQuery('<div></div>').attr({ 'className': 'dropdownHolder' }).css({ display: 'none' }).append(
				jQuery('<div></div>').attr({ 'className': 'optionHeader' }).css({
					background: 'transparent url(mysite/themes/gib/images/select-option-header-bg.jpg) no-repeat left top',
					height: '5px',
					width: '162px',
					fontSize: '1px'
				}),
				jQuery('<div></div>').attr({ 'className': 'optionHolder' }).css({ background: 'white' }),
				jQuery('<div></div>').attr({ 'className': 'optionFooter' }).css({
					background: 'transparent url(mysite/themes/gib/images/select-option-footer-bg.jpg) no-repeat left top',
					height: '8px',
					width: '162px'
				})
			)
		)
	);
	
	var options = jQuery(this.originalElement).children();

	var _this = this;
	jQuery('#' + _this.newSelectWrapperId).children('.selectedItem').append(jQuery('<span></span>').css({ padding: '5px 0 0 6px', display: 'block' }).append(jQuery(options).html()));
	options.each(function() {
		jQuery('#' + _this.newSelectWrapperId).children('.dropdownHolder').children('.optionHolder').append(
			jQuery('<div></div>').attr({ 'className': 'option' }).css({
				background: 'transparent url(mysite/themes/gib/images/select-option-body-bg.jpg) no-repeat left 1px',
				height: '19px',
				width: '162px',
				cursor: 'pointer'
			}).append(jQuery('<span></span>').css({ padding: '4px 0 0 6px', display: 'block' }).append(jQuery(this).html()))
		);
	});
});

StyledSelectField.method('addEventHandlers', function() {
	var _this = this;
	jQuery('#' + this.newSelectWrapperId).children('.selectedItem').click(function() {
		if (_this.dropdownOpen) {
			_this.closeSelect();
		} else {
			_this.openSelect();
		}
	});
	
	jQuery('#' + this.newSelectWrapperId).children('.dropdownHolder').children('.optionHolder').children().each(function() {
		var _thisOption = this;
		jQuery(this).mouseover(function() {
			jQuery(_thisOption).css({ backgroundPosition: 'left -20px', color: '#ffffff' });
		}).mouseout(function() {
			jQuery(_thisOption).css({ backgroundPosition: 'left 1px', color: '#666666' });
		}).click(function() {
			_this.selectOption(jQuery(_thisOption).children().html());
		});
	});
	
});

StyledSelectField.method('openSelect', function() {
	if (!this.dropdownOpen) {
		var _this = this;
		jQuery('#' + this.newSelectWrapperId).children('.dropdownHolder').slideDown(200, function() {
			_this.dropdownOpen = true;
		});
	}
});

StyledSelectField.method('closeSelect', function() {
	if (this.dropdownOpen) {
		var _this = this;
		jQuery('#' + this.newSelectWrapperId).children('.dropdownHolder').slideUp(200, function() {
			_this.dropdownOpen = false;
		});
	}
});

StyledSelectField.method('selectOption', function(text) {
	jQuery('#' + this.newSelectWrapperId).children('.selectedItem').children().html(text);
	jQuery(this.originalElement).val(this.getOptionIndex(text));
});

StyledSelectField.method('getOptionIndex', function(text) {
	var options = jQuery(this.originalElement).children();
	var retVal = 0;
	options.each(function() {
		if (jQuery(this).html() == text) {
			retVal = jQuery(this).val();
			return false;
		}
	});
	return retVal;
});
