$(document).ready(function(){
	// health center field
	var output = '';
	output += '<tr id="health-center">';
	output += '  <td>Please select area:</td>';
	output += '  <td width="10"><img height="1" width="10" src="images/clear.gif"></td>';
	output += '  <td>';
	output += '	   <select name="health_center">';
	output += '	     <option value="Far Northeast">Far Northeast</option>';
	output += '	     <option value="West Chester">West Chester</option>';
	output += '	     <option value="Locust Street">Locust Street</option>';
	output += '	     <option value="Castor">Castor</option>';
	output += '	     <option value="Blackwell">Blackwell</option>';
	output += '	     <option value="Norristown">Norristown</option>';
	output += '	     <option value="Ambler">Ambler</option>';
	output += '	     <option value="Collegeville">Collegeville</option>';
	output += '	     <option value="Avondale">Avondale</option>';
	output += '	     <option value="St. Davids">St. Davids</option>';
	output += '	     <option value="Coatesville">Coatesville</option>';
	output += '	     <option value="Yeadon">Yeadon</option>';
	output += '	     <option value="Media">Media</option>';
	output += '	   </select>';
	output += '  </td>';
	output += '</tr>';

	// show on page load
	$('#hear_about option[value="Health Center"]:selected').each(function(){
		$('#health-center').replaceWith(output);
	});

	// show/hide field
	$('#hear_about').change(function(){
		// show field		
		$('option[value="Health Center"]:selected').each(function(){
			$('#health-center').replaceWith(output);
		});
		// hide field
		$('option[value="Health Center"]').not(':selected').each(function(){
			var output = '';
			output += '<tr id="health-center">';
			output += '  <td colspan="3">&nbsp;</td>';
			output += '</tr>';
			
			$('#health-center').replaceWith(output);
		});		
	});
});