<!-- 
//<![CDATA[
var mapviewer, route_finder, route, loading;
var max_zindex = 1000;

function onLoad() {
    // Construct Map Viewer and display default location:
    mapviewer = MMFactory.createViewer( document.getElementById( 'mapviewer' ) );
    mapviewer.goToPosition( new MMLocation( new MMAddress( { postal_code : 'EN5 1RS', country_code : 'UK'} ), 15 ) );

    // Construct the route requester with our callback function:
    var funcRef = resultsLoaded;
    route_finder = MMFactory.createRouteRequester( funcRef, mapviewer );

    loading = document.getElementById( 'loading' );
    loadingStatus( false );
}

function loadingStatus( bool ) {
    // If we're loading values we want to disable the form elements
    // and display a spinning icon to show activity
    document.getElementById('select1').disabled = bool;
    document.getElementById('select2').disabled = bool;
    document.getElementById('select3').disabled = bool;
    document.getElementById('select4').disabled = bool;
    document.getElementById('submitbtn').disabled = bool;  
    loading.style.display = bool ? 'block' : 'none';
}

function createStepMarker(location, instruction, text, zindex) {
    var marker = mapviewer.createMarker(location, {zIndex: zindex, 'text' : text});
    marker.setInfoBoxContent('<p>' + instruction + '<' + '/p>');
}        

function callRoute () {
    cleanUp();
    
    // Add each of the selected waypoints. The addLocation function will only add
    //  a location if a selection was made from the corresponding select box:
    var locations = new Array();
    addLocation(1, locations)
    addLocation(3, locations)
    addLocation(4, locations)
    //Add the endpoint last:
    addLocation(2, locations)

    loadingStatus( true );
    route = new MMRoute( locations );
        
    route_finder.request(route);
}
   
function cleanUp () {
    // Remove any existing route and directions, in preparation for displaying a new one:    
    var stepsContainer = document.getElementById('routeSteps');
    while (stepsContainer.firstChild) {
        stepsContainer.removeChild(stepsContainer.firstChild);
    }
    stepsContainer.style.display = 'none';
    mapviewer.removeAllOverlays();
    markers = new Array();
}

    
function addLocation(num, locations) {
    var select =  document.getElementById('select' + num);
    // Check the value of the dropdown, and add a location if applicable:
    if (select.options[select.selectedIndex].value) {
        var coords = select.options[select.selectedIndex].value.split(',');
        locations.push(new MMLocation(new MMLatLon(coords[0], coords[1])));
    } 
}      

function resultsLoaded() {
    if (route.error_code) {
        // Display an error message, if applicable:
        alert(route.error_code + ': ' + route.error_explanation);
    } else {
        // use getAutoScaleLocation to show the entire route on the map, with the route bounds:
        mapviewer.goToPosition( mapviewer.getAutoScaleLocation( route.bounds ) );
        displayStages(route);
        // Show the route on the map with PolyLines, by adding each polyline returned:
        for( var i = 0, l = route.polyLine.length; i < l; ++i ) {
          
          mapviewer.addOverlay(route.polyLine[i]);
        }
    }
    loadingStatus( false );
}


function displayStages(route) {
    var curr_step = 1;
    var stages = route.stages; 
    var container = document.getElementById('routeSteps');

    var h2 = document.createElement('h2');
    h2.appendChild(document.createTextNode('Travel directions'));
    container.appendChild(h2);
    
    var summary = '';
    // Show the total route distance in Miles:
    summary += '<br />Total Distance: ' + route.distance.miles + ' mile(s)';
    // Show the total duration of trip. Note that we display the Days, Hours, and Minutes by
    //  accessing each property: 
    summary += '<br />Estimated Total Time: ';
    if (route.duration.Days > 0) { summary += route.duration.days + ' day(s) '; }
    if (route.duration.Hours > 0) { summary += route.duration.hours + ' hour(s) '; }
    if (route.duration.Minutes > 0) { summary += route.duration.minutes + ' minute(s) '; }
    var p = document.createElement('p');
    p.innerHTML = summary;
    container.appendChild(p);
    
    // The route will be returned in stages. Each stage goes from one specified 'location' to the next:
    for (var count=0; count < stages.length; count++) {
        // Show some summary information about each stage:
        var stage_summary = '';
        stage_summary += '<strong>Stage ' + (count + 1) + '<' + '/strong>';
        // Show the stage distance, in miles:
        stage_summary += '<br />Stage Distance: ' + stages[count].distance.miles + ' mile(s)';
        // Show the stage duration, in days, hours and minutes:
        stage_summary += '<br />Estimated Stage Time: ';
        if (stages[count].duration.days > 0) { stage_summary += stages[count].duration.days + ' day(s) '; }
        if (stages[count].duration.hours > 0) { stage_summary += stages[count].duration.hours + ' hour(s) '; }
        if (stages[count].duration.minutes > 0) { stage_summary += stages[count].duration.minutes + ' minute(s) '; }
        var p = document.createElement('p');
        p.innerHTML = stage_summary;
        container.appendChild(p);
        
        var ol = document.createElement('ol');
        ol.id = 'stage_' + count;
        ol.start = curr_step;

        var steps = stages[count].steps;
    
        // Now we will display each step instruction within this stage:
        for (var stepCount=0; stepCount < steps.length; stepCount++) {
            // Label the current marker with the step number:
            var text = curr_step;
            // Make the higher numbered step markers appear 'on top of' lower ones:
            var zindex = max_zindex - curr_step + 1;
            
            // Use 'S' as marker text if this is the first step of the entire route:
            if (count == 0 && stepCount  == 0) {
                text = 'S';
            }        
            // Use 'F' as marker text if this is the last step of the entire route:      
            if (count == stages.length - 1 && stepCount  == steps.length - 1) {
                text = 'F';
                zindex = max_zindex; 
           }                
            // Create a written 'instruction' using the roadname and/ or roadnumber:
            var instruction = steps[stepCount].instruction;
            var roadname = steps[stepCount].road_name;
            var roadnumber = steps[stepCount].road_number; 

            if (roadname && roadnumber) {
                instruction += ' ' + roadname + ' (' + roadnumber + ') ';
            } else if (roadname) {
                instruction += ' ' + roadname + ' ';
            } else if (roadnumber) {
                instruction += ' ' + roadnumber + ' ';
            }
            
            // Show the distance of this particular step:
            var distance = '';                    
            if (steps[stepCount].distance.miles > 0) { distance += steps[stepCount].distance.miles + ' mile(s) '; }
            if (distance != '') { distance = ' - ' + distance };
            
            var li = document.createElement('li');
            li.innerHTML = instruction + distance;
            ol.appendChild(li);
            
            // Create the step marker, using the instruction and marker text we previously created:
            createStepMarker(steps[stepCount].start_point, instruction, text, zindex);
            
            ++curr_step;
        }
        container.appendChild(ol);
    }            
    
    container.style.display = 'block'; 
    
    // Add copyright and disclaimer, as required:
    var copyright = '';
    if (route.copyright) {copyright += 'Copyright: ' + route.copyright; }
    if (route.disclaimer)  {copyright += '<br />Disclaimer:  <a href="' + route.disclaimer +'">' + route.disclaimer +'<' + '/a>'; }
    
    var p = document.createElement('p');
    p.innerHTML = copyright;
    container.appendChild(p);            
}

MMAttachEvent( window, 'load', onLoad );
//]]> 
// -->