<!-- BEGIN [% component.name %] -->
	[% # INCLUDE dumper.tt dump = user_locations %]
 	<script language="javascript" type="text/javascript">
	<!--
		function showhide_users(f,v) {
			var t = f.user_id;
            var locationIds = [ [% user_locations.values.join(',') %] ];

			// does value of 'v' match any of locationIds array:
			match = jQuery.grep(locationIds, function (a) { return a == v; }); // alert(match);

			if (match.length) { // ie contains the value of location_id
				t.style.visibility='visible';
			}
			else {
				t.style.visibility='hidden'; // see addLoadEvent
			}
		}

		// use addLoadEvent function in common.js for onload:
		addLoadEvent(
			function() { // confusing on return from validation failure
				document.usermessage.user_id.style.visibility='hidden';
			}
		);

		// user_location onChange event for user_id select menu
		$(document).ready(function () {
			$('#user_location').change( function() {
				$('#user_name').load('[% app_url %]/ajax/get_users_for_location', {
					location_id: $('#user_location').val()
				})
			})
		});
	-->
	</script>
    <select name="user_location" id="user_location"
            onchange="showhide_users(this.form,this.value)">
        <option value="">--select location--</option>
        [% FOREACH location IN user_locations.keys.sort %]
          <option value="[% user_locations.item(location) %]">
            [% location %]
          </option>
       [% END %]
    </select>
    [% error_user_location %]

    <!-- // replaced by ajax output after selection of user_location: -->
    <select name="user_id" id="user_name"></select>
    [% error_user_id %]
<!-- END [% component.name %] -->
