// create first dropdown
jQuery(document).ready(function() {
	createDropDown();
	
	

	jQuery('#section8_holder .dropdown dt a').live('click', function() {
		 jQuery("#section8_holder .dropdown dd ul").slideToggle('medium');
	});
	
	
	
	jQuery(document).bind('click', function(e) {
		var $clicked = jQuery(e.target);
		if (! $clicked.parents().hasClass("dropdown"))
			jQuery("#section8_holder .dropdown dd ul").hide();
	});	
	
	

	
	//jQuery("#section8_holder .dropdown dd ul li a").click(function() {
	
	jQuery('#section8_holder .dropdown dd ul li a').live('click', function() {
															   
		var text = jQuery(this).html();

		jQuery("#section8_holder .dropdown dt a").html(text);
		jQuery("#section8_holder .dropdown dd ul").hide();
		
		// update select box & trigger update
		var source = jQuery("#section8");
		var cat = jQuery(this).find("span.value").text();
		source.val(cat)
		executeMappingChange(source);
		
		// reset the other span
		jQuery("#section9_holder .dropdown dt a").html("- Please select -");
	});
});

function createDropDown(){

	
	var source = jQuery("#section8");
	var selected = source.find("option[selected]");
	var options = jQuery("option", source);
	
	
	jQuery("#section8_div").append('<div id="section8_divTitle"></div><div id="section8_holder"></div>')
	jQuery("#palette").append('<div id="section8_holder"><dl id="target" class="dropdown"></dl></div>')
	jQuery("#target").append('<dt><a href="#">' + selected.text() + 
		'<span class="value">' + selected.val() + 
		'</span></a></dt>')
	jQuery("#target").append('<dd><ul></ul></dd>')
	
	/*jQuery("#section8_div").append('<div id="section8_divTitle"></div><div id="scrollDropdown1"  class="jcarousel-skin-menu"><ul id="target" class="dropdown"></ul></div>')
	*/
	
	options.each(function(){
		jQuery("#target dd ul").append('<li><a href="#">' + 
			jQuery(this).text() + '<span class="value">' + 
			jQuery(this).val() + '</span></a></li>');
	});

	
	

	
}
// create second dropdown
jQuery(document).ready(function() {
	createDropDown2();
	
	

	jQuery("#section9_holder .dropdown dt a").click(function() {
		 jQuery("#section9_holder .dropdown dd ul").slideToggle('medium');
	});
	jQuery(document).bind('click', function(e) {
		var $clicked = jQuery(e.target);
		if (! $clicked.parents().hasClass("dropdown"))
			jQuery("#section9_holder .dropdown dd ul").hide();
	});	
		
	jQuery("#section9_holder .dropdown dd ul li a").click(function() {
		var text = jQuery(this).html();

		jQuery("#section9_holder .dropdown dt a").html(text);
		jQuery("#section9_holder .dropdown dd ul").hide();
		
		// update select box & trigger update
		var source = jQuery("#section9");
		var cat = jQuery(this).find("span.value").text();
		source.val(cat)
		executeMappingChange(source);
		
		// reset the other span
		jQuery("#section8_holder .dropdown dt a").html("- Please select -");
	});
});

function createDropDown2(){

	
	var source = jQuery("#section9");
	var selected = source.find("option[selected]");
	var options = jQuery("option", source);
	
	
	jQuery("#section9_div").append('<div id="section9_divTitle"></div><div id="section8_holder"></div>')
	jQuery("#palette").append('<div id="section9_holder"><dl id="target2" class="dropdown"></dl></div>')
	jQuery("#target2").append('<dt><a href="#">' + selected.text() + 
		'<span class="value">' + selected.val() + 
		'</span></a></dt>')
	jQuery("#target2").append('<dd><ul></ul></dd>')
	
	/*jQuery("#section8_div").append('<div id="section8_divTitle"></div><div id="scrollDropdown1"  class="jcarousel-skin-menu"><ul id="target" class="dropdown"></ul></div>')
	*/
	
	options.each(function(){
		jQuery("#target2 dd ul").append('<li><a href="#">' + 
			jQuery(this).text() + '<span class="value">' + 
			jQuery(this).val() + '</span></a></li>');
	});

	
	

	
}