jQuerySelect

// Targets a select field and turns it into a custom select using html/css and jQuery
// converted to js Object: http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx
function jQuerySelect(select_id){
	var _self = this;
	this.select_id = select_id;
	this.placeholder = select_id + "_placeholder";
	this.target = select_id + "_target";
	this.selected = $(this.select_id).find("option[selected]");
	this.select_options = $("option","#"+select_id);
	this.select_class = "dropdown";
	this.effects = true
	
	this.place_select = function(){
		$("#"+_self.placeholder).append('<dl id="'+ _self.target +'" class="'+ _self.select_class +'"></dl>');
		$("#"+_self.target).append('<dt><a href="#">'+ _self.selected.text() +'<span class="value">'+ _self.selected.val() +'</span></a></dt>');
		$("#"+_self.target).append('<dd><ul></ul></dd>');
	}
	
	this.place_options = function(){
		_self.select_options.each(function(){
			$("#"+_self.target + " dd ul").append('<li><a href="#">'+ $(this).text() +'<span class="value">'+ $(this).val() +'</span></a></li>');
		});
	}
	
	this.attach_behavior = function(){
		// display select options
		$("#"+_self.target+" dt a").click(function() {
			_self.toggle_dropdown();
		});
		
		// when a option is clicked, fill select box
		$("#"+_self.target+" dd ul li a").click(function() {
			var text = $(this).html();
			$("#"+_self.target+" dt a").html(text);
			$("#"+_self.target+" dd ul").hide();
			
			_self.set_value($(this).find("span.value").html());
		});
	}
	
	// if clicked outside, hide select options
	this.hide_all_dropdowns_when_clicked_out = function() {
		$(document).bind('click', function(e) {
			var $clicked = $(e.target);
			if (! $clicked.parents().hasClass(_self.select_class))
				$("."+_self.select_class+" dd ul").hide();
		});
	}
	
	this.toggle_dropdown = function(){
		var ul = $("#"+_self.target+" dd ul");
		if(_self.effects == true)
		{
			if(ul.css('display') == "none"){
				ul.animate({opacity: 'show', height: 'show'}, 'fast'); 
			} else {
				ul.animate({opacity: 'hide', height: 'hide'}, 'fast'); 
			}
		} else {
			ul.toggle();
		}
		return false;
	}
	
	this.set_value = function(value){
		$("#"+_self.select_id).val(value);
	}
	
	this.transform = function(){
		_self.place_select();
		_self.place_options();
		_self.attach_behavior();
		_self.hide_all_dropdowns_when_clicked_out();
		$("#"+_self.select_id).hide();
	}
}