{{extend 'layout.html'}}
<style>
/* Hide the cross street lookup table */
.hideme {display: none}
</style>
<script>
/* When a route is selected from the combobox, filter the
   list of locations for just those on that route. */
function routechanged() {
  var e = document.getElementById("routecombo");
  var currentRoute = e.options[e.selectedIndex].text;
  // update the list of locations
  removeOptions(document.getElementById("startlocation"));
  removeOptions(document.getElementById("endlocation"));
  fillOptions(currentRoute);
}
// Remove all the options from a combo box
function removeOptions(selectbox)
{
    var idx;
    for(idx = selectbox.options.length - 1 ; idx >= 0 ; idx--)
    {
       selectbox.remove(idx);
    }
}

// Fill the selectbox with items from the lookup table that match route
function fillOptions(route)
{
    var i;    
    var tbl = document.getElementById("stlookup");
    var startloc = document.getElementById("startlocation")
    var endloc = document.getElementById("endlocation")
    var opt1,opt2;

    // Examine all items in cross street lookup table
    for(i = tbl.options.length - 1 ; i >= 0 ; i--)
    {
        var item = tbl.options[i].text;
        // Parse the lookup table item into route and steet fields
        var pos = item.search(",");
        var currentRoute = item.substring(0,pos);
        var currentStreet = item.substring(pos+1);
        // if the crossstreet is for the desired route
        if (route == currentRoute)
        {
            opt1 = document.createElement('option');
            opt1.text = opt1.value = currentStreet;
            // Add an option to the location combo boxes
            startloc.add(opt1,0);
            opt2 = document.createElement('option');
            opt2.text = opt2.value = currentStreet;
            endloc.add(opt2,0);
        }
    }
    // Add an empty option to the select box
    opt1 = document.createElement('option');
    opt1.text = opt1.value = '';
    startloc.add(opt1,0);
    opt2 = document.createElement('option');
    opt2.text = opt2.value = '';
    endloc.add(opt2,0);
    // Show the first (empty) option
    startloc.selectedIndex = "0";
    endloc.selectedIndex = "0";
}
</script>

<div id="main" role="main" class="mainflex">
    <div id="pageTitle" class="header"> Request Emergency Closure</div>

    <div class="searchform">
        {{=form}}
    </div>
</div>