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

// The ID of the dropdown list which will cause the additional text box to appear
// Ex: <select id="how_did_you_hear">... put 'how_did_you_hear' below
var first_dropdown_id = 'how_did_you_hear'
// The VALUE of the option which will cause the additional text box to appear
// Ex: <option value="other">Other</option> put 'other' (case-sensitive) below
var first_dropdown_trigger_value = 'other'
// The ID of the DIV which contains the hidden text box
// Ex: <div id="hidden_other_information" style="display:none">
// put 'hidden_other_information' below
var hidden_information_div_name = 'hidden_other_information'

//-----------------------------------------------------
// 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 dropDownOtherTextBox will be called
  Event.observe(first_dropdown_id, 'change', dropDownOtherTextBox);
});

function dropDownOtherTextBox(event) {
	var element = event.element();
	if(element.value == first_dropdown_trigger_value) {
		$(hidden_information_div_name).appear();
	} else {
		$(hidden_information_div_name).fade()
	}
}