XLI.FauxSelect = function() {

	/**
		A Flag to keep track of whether or not we've initialized this object.
	*/
	var initialized = false;
	
	var $elements = {	
	};
	
	var $e	= $elements;
	
	// on click show the drop down
	onDropClick = function(e){
		e.preventDefault();
		$(this).siblings().toggle(); 
	};
	
	// set the choosen to the new value and update 
	onChooseClick = function(e) {
		e.preventDefault();
		
		var thisForm = $(this).parents("form");
		var thisContainer = $(this).parents(".fauxSelect");
		var thisDropdown = $(this).parents("ul");
		var selected = $("a:first", thisContainer);
		var thisHidden = $("input.hidden", thisForm);
		
		var choosenLabel = $(this).text();
		var choosenValue = $(this).attr("rel");
		
		thisHidden.val(choosenValue);
		
		selected.text(choosenLabel);
		thisDropdown.toggle();

	};
	
	// set up click events on the drop down
	initFauxSelect = function() {
		$(".fauxSelect").each(function(i) {
			var $this = $(this);
			$("a:first", $this).bind("click", onDropClick);
			$("ul:first li a", $this).bind("click", onChooseClick);
		})
	};

	return {
	
		/**
	 	* Sets up the Faux Select section.
	 	* @public
	 	* @returns nothing
	 	*/
		initialize : function() {
			if (initialized) {
				return;
			}
			
			initFauxSelect();
		
			initialized = true;
		}
	
	};

}();

/**
	Fire it up.
*/
$(document).ready(XLI.FauxSelect.initialize);