/*

Custom Select Box by Christine
Golden State Communications

*/

$(function() {

	/* CUSTOM SELECT BOX */
	$("select.customSelect").each(function() {
		$(this).hide();		//hide original select box
		var thisTitle = $(this).attr("title");
		var thisID = "#" + thisTitle;		         
		var thisUL = "#ul" + thisTitle;
		
		
		var selected = $(this).children("option:selected").text();
		$(this).after("<div class=\"selectBox\" id=\"" + thisTitle + "\"><div class=\"box\"><img src=\"/images/dropArrow.jpg\" class=\"right\" /><div class=\"clear\"></div><ul id=\"ul" + thisTitle + "\"></ul></div></div>");  //create UL after original select box
		
		
		
		$(thisID + " div.box").prepend("<span class=\"left\">" + selected + "</span>"); //put the default selected option on the top of the new UL to signify it being selected
		$(this).children("option").clone().appendTo(thisUL); //duplicate all options and put all duplicates inside new UL
		$(thisUL + " li:first").css("display","inline-block"); //show the first default LI
			
			/* replace new "options" with LI's */
			$(thisUL + " option").each(function() {
					var thisVal = $(this).val();
					$(this).replaceWith("<li class=\"" +thisVal+ "\">" + $(this).text() + "</li>");	 // class names are the same as option values   
						   
						   });
			
			
			
			/*onClick, show or hide all LI's*/
		$(thisID).click(function() {
				$(thisUL).slideToggle("normal");
				
			/* onClick, whichever LI clicked will select the option in the original dropdown that has a value matching the LI's class */
				$(thisUL + " li").click(function() {
						var thisClass = $(this).attr("class");
						var newText = $(this).text();
						
						$("select[title=" + thisTitle + "]").selectOptions(thisClass).trigger("change"); //select the corresponding option
					
						$(thisID + " span").text(newText); //change the first LI's text to the selected text.
							         });
				
				
				
				
						       });
			      });
	
	$(".selectBox li").hover(function() {
			     $(this).css("color","#cb750e")
			        },
			        function() {
			     $(this).removeAttr("style")
			        }
							        
							        
			  );
	 });