$(document).ready(function()
{
    createDropDown();
            
    $(".dropdown dt a").click(
    	function()
    	{
    	    $(".dropdown dd ul").toggle();
    	    return false;
    	}
	);

    $(document).bind('click',
    	function(e)
    	{
            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("dropdown"))
                $(".dropdown dd ul").hide();
        }
    );
                        
    $(".dropdown dd ul li a").click(
    	function()
    	{
            var text = $(this).html();
            $(".dropdown dt a").html(text);
            $(".dropdown dd ul").hide();
                
            var source = $("#source");
			var value= $(this).find("span.value").html();
        	source.val(value);
			if (value != "#")
			{
				$("#dealers .dealer").hide();
				$("#dealers ." + value + "").show();
			}
			else
			{
				$("#dealers .dealer").hide();
			}
			
			return false;
        }
    );
});
        
function createDropDown()
{
    var source = $("#source");
    var selected = source.find("option[selected]");
    var options= "";
    var groups= $("optgroup", source);
	
    $("#dealerSelect").append('<dl id="target" class="dropdown"></dl>')
    $("#target").append('<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>');
	$("#target").append('<dd><ul></ul></dd>')

	groups.each(
		function()
		{
			$("#target dd ul").append('<li class="optgroup">' + $(this).attr("label") + '</li>');
				
			options = $("option", $(this));
			options.each(
    		function()
    		{
           	 	$("#target dd ul").append('<li><a href="#">' + 
           	 	$(this).text() + '<span class="value">' + 
            	$(this).val() + '</span></a></li>');
       		});
		}
	);
	/*
    options.each(
    	function()
    	{
            $("#target dd ul").append('<li><a href="#">' + 
            $(this).text() + '<span class="value">' + 
            $(this).val() + '</span></a></li>');
        }
    );*/
}