var OPTIMIZED_URL = HOST_URL + '/directions/v0/ACTION?callback=renderOptimized';
var LOCATIONS = '{locations:[{latLng:{lat:51.524410144966154,lng:-0.12989273652335526}},{latLng:{lat:51.54495915136182,lng:-0.16518885449221493}},{latLng:{lat:51.52061842826141,lng:-0.1495479641837033}},{latLng:{lat:51.52850609658769,lng:-0.20170525707760403}}]}';

OPTIMIZED_URL += '&json=' + LOCATIONS.replace(' ', '').replace('\n','');

var action = 'route';

function doOptimized() {
    var script = document.createElement('script');
    script.type = 'text/javascript'; 
    var newURL = OPTIMIZED_URL.replace('YOUR_KEY_HERE', APP_KEY);
    newURL = newURL.replace('ACTION', action);
    script.src = newURL;
    document.body.appendChild(script);
};

function showOptimizedURL() {
    action = document.getElementById('optimizedOn').checked ? "optimizedroute" : "route";
    var html = 'REQUEST URL:\n';
    html += '\n' + HOST_URL + '/directions/v0/';
    html += action;
    html += '\nREQUEST BODY:\n';
    html += LOCATIONS;
    document.getElementById('optimizedSampleUrl').innerHTML = html;
}

function renderOptimized(response) {
    var legs = response.route.legs;
    var html = '';
    var i = 0;
    var j = 0;
    var trek;
    var maneuver;

    html += '<p>Final <code>locationSequence</code>:  ';
    var locationSequence = response.route.locationSequence;
    if (!locationSequence) {
        html += "[Not set...]";
    } else {
        for (i = 0; i < locationSequence.length; i++) {
            if (i > 0) {
                html += ',&nbsp;';
            }
            html += locationSequence[i];
        }
    }    
    
    if (response.route.distance) {
        html += "<p>Your trip is <b> " + response.route.distance.toFixed(2) + "</b> miles.</p>";
    }
    
    html += '<table><tr><th colspan=2>Narrative</th>'
    html += '<th colspan=1>Distance</th></tr><tbody>'
    
    var unit = response.route.options.unit;
    if (unit) {
        if (unit == 'K') {
            unit = 'km';
        } else if (unit == 'M') {
            unit = 'miles';
        }
    }
    for (i = 0; i < legs.length; i++) {
        for (j = 0; j < legs[i].maneuvers.length; j++) {
            var last = legs[i].maneuvers.length - 1;
            maneuver = legs[i].maneuvers[j];
            
            html += '<tr>';
            html += '<td>&nbsp;';
            if (maneuver.iconUrl) {
                html += '<img src="' + maneuver.iconUrl + '">  '; 
            } 
            for (k = 0; k < maneuver.signs.length; k++) {
                var sign = maneuver.signs[k];
                if (sign && sign.url) {
                    html += '<img src="' + sign.url + '">  '; 
                }
            }
            
            html += '</td>'
            //added following because we're only using lat/lngs currently
            if (j == last){
            	html += '<td>' + maneuver.narrative.replace(maneuver.narrative, "Welcome to your destination.") 
            }
            else {
            	html += '<td>' + maneuver.narrative 
            }
            if (unit && maneuver.distance) {
                maneuver.distance = 
                html += '<td>  (' + maneuver.distance.toFixed(2) + ' ' + unit + ')'
                html += '</td>';
            }    
            else {
	            html += '<td>  &nbsp; '
	            html += '</td>';
            }
            html += '</tr>';
        }
    }
    
    html += '</tbody></table>';
    
    document.getElementById('optimizedNarrative').innerHTML = html;
}