//-----------------------------------------------------
// CONFIGURE:
// SET THE 4 VARIABLES BELOW TO THE APPROPRIATE VALUES
//-----------------------------------------------------

// The ID of the dropdown list which will cause the additional drop down list to appear
// Ex: <select id="kind_of_car">... put 'kind_of_car' below
var first_dropdownlist_id = 'Class';
// The ID of the DIV which contains the hidden drop down list
// Ex: <div id="hidden_car_information" style="display:none">
// put 'hidden_car_information' below
var hidden_list_div_name = 'hiddenInformation';
// The ID of the additional drop down list that will appear
// Ex: <select id="model_of_car"></select>... put 'model_of_car' below
var hidden_dropdown_id = 'ClassSection';
// A Hash of the values corresponding to each of the options in the first drop down list
// So if the option with VALUE 'honda' is selected from the first drop down, the additional
// drop down will appear and will contain the values 'Accord', 'Civic', and 'CRV'
// NOTE: PAY CLOSE ATTENTION TO THE FORMAT OF THIS HASH
var hidden_dropdown_labels = $H({LearningRaku: ['Monday 6:30-8:30pm with Ben Clark'], 
								 TileMosaic: ['Tuesday 6:30-8:30 pm with Chrissy Trout and Brandi Sanchez'], 
								 AfterSchoolTeenProgram: ['Wednesday 4:00-6:00 pm', "Thursday  4:00-6:00pm"],
								 Wheel1IntrotoWheel: ['Monday 6:30-8:30 pm with Staff', 'Tuesday 6:30-8:30pm with Staff', 'Saturday 1:30-3:30pm with Staff'],
								 Wheel2IntermediateWheelThrowing: ['Tuesday 6:30-8:30pm with Jon Stein', 'Wednesday 6:30-8:30pm with Jon Stein', 'Thursday 10am-12pm with Ben Clark'],
								 Wheel3Alterations: ['Tuesday 1:30pm-3:30pm with Ben Clark', 'Wednesday 6:30-8:30pm with Ben Clark'],
								 Handbuilding1: ['Wednesday 6:30-8:30pm with Chrissy Trout'],
								 Handbuilding2: ['Thursday 6:30-8:30pm with Chrissy Trout'],
								 SculptureForgetFunction1: ['Thursday 6:30-8:30pm with Kirk Mayhew'],
								 CeramicExpressionforYoungAdults: ['Sunday 1:30-3:30pm with Christine Bonenfant'],
								 FUNKeFunctionals: ['This Saturday (Tookkits Provided)', 'Other (Tookkits Provided)'],
								 OpenWheelSession: ['This Friday (Tookkits Provided)', 'Other (Tookkits Provided)']
								 
							});

//-----------------------------------------------------
// END CONFIGURATION
// NO NEED TO TOUCH ANYTHING BELOW THIS LINE
//-----------------------------------------------------

// This first Event.observe below waits to execute until the DOM finishes 
// loading everything in the html page (we just need to make sure the FORM 
// we are referencing has been loaded before we can attach an Event observer to it)
Event.observe(window, 'load', function() {
	// Attach the 'change' event observer to the drop down list with ID=first_dropdown_id
	// Anytime a selection is made on the list, the function dropDownMoreOptionsList will be called
	Event.observe(first_dropdownlist_id, 'change', dropDownMoreOptionsList);
});

function dropDownMoreOptionsList(event) {
	var element = event.element();
	$(hidden_list_div_name).appear();
	$(hidden_dropdown_id).options.length = 0;	
	hidden_dropdown_labels.get(element.value).each(function(option_name){
		$(hidden_dropdown_id).options.add(new Option(option_name, option_name.toLowerCase().gsub(/ /, '_')));
	});
}