var dropDownList = new Array();

function createDropDown(name){
	dropDownList.push(name);
}

jQuery(document).ready(function(){    
	jQuery.each(dropDownList, function(){
		if(jQuery('#'+ this) != null)
			renderDropDown(this);
	});
	
	var clickCheck = false;
	
	jQuery(".dropdown dt a").click(function() {
		var theAlt = jQuery(this).attr('alt');
		jQuery(".dropdown dd ul").hide();
		jQuery("#sel" + theAlt + " dd ul").toggle();
    });

	jQuery(document).bind('click', function(e) {
        var $clicked = jQuery(e.target);
  
        if (! $clicked.parents().hasClass("dropdown"))
        	jQuery(".dropdown dd ul").hide();
       if(clickCheck){
       	jQuery(".dropdown dd ul").hide();
       	clickCheck = false;
      }else {
        	clickCheck = true;
		}
    });
                
	jQuery(".dropdown dd ul li a").click(function() {
        var text = jQuery(this).html();
        var theAlt = jQuery(this).attr('alt');
        jQuery("#sel" + theAlt + " dt a").html(text);
        jQuery(".dropdown dd ul").hide();
        
        var source = jQuery("#" + theAlt);
        var container = jQuery(this).find("span.value");
        
        if (source.val() != container.html()) {
        	source.val(container.html());
        	source.trigger('onchange');
        }
    });

	function renderDropDown(element){
        var source = jQuery("#" + element );
        var selected = source.find('option:selected');
        var options = jQuery("option", source);
        var targetel ="sel" + element;
        jQuery("#box_" + element).append('<dl id="'+ targetel +'" class="dropdown"></dl>')
        jQuery("#" + targetel).append('<dt><a href="javascript:void(0)" alt="'+ element +'">' + selected.text() + 
            '<span class="value">' + selected.val() + 
            '</span></a></dt>')
        jQuery("#" + targetel).append('<dd><ul></ul></dd>')
        options.each(function(){
        	jQuery("#" + targetel + " dd ul").append('<li><a href="javascript:void(0)" alt="'+ element +'" >' + 
        			jQuery(this).text() + '<span class="value">' + 
        			jQuery(this).val() + '</span></a></li>');
        });
   }
});
