var matrixPost = HOST_URL + "/directions/v1/routematrix?key=YOUR_KEY_HERE"
var matrixUrl;

function showMatrixURL() {
    matrixPost = HOST_URL + '/directions/v1/routematrix?key=YOUR_KEY_HERE';
    matrixPost += '&callback=renderMatrixResults';
    matrixPost += '&json={locations:["York, PA","Lancaster, PA","Boalsburg, PA","Sunbury, PA"],';
    matrixPost += 'options: {allToAll: ' + document.getElementById('allToAllOn').checked + '}}';        
    var html = 'REQUEST URL:\n';
    html += '\n' + HOST_URL + '/directions/v1/routematrix?key=YOUR_KEY_HERE\n';
    html += '\nREQUEST BODY:\n';
    html += '{\n';
    html += '   locations: [\n';
    html += '      "York, PA",\n';
    html += '      "Lancaster, PA",\n';
    html += '      "Boalsburg, PA",\n';
    html += '      "Sunbury, PA"\n';
    html += '   ],\n';
    html += '   options: {\n';
    html += '      allToAll: ' + document.getElementById('allToAllOn').checked + '\n';
    html += '   }\n';
    html += '}';
    //replace(' ', '').replace('\n','');
    document.getElementById('matrixSampleUrl').innerHTML = html;

    matrixUrl = matrixPost;
}

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

function renderMatrixResults(response) {
    var allToAll = response.allToAll;
    var distances = response.distance;
    var times = response.time;
    var locations = response.locations;

    timeHtml = "<table><thead>";
    timeHtml += "<tr>";
    timeHtml += "<th><table><tr><td style='border: 0'>&nbsp;</td>";
    timeHtml += "<td  style='border: 0'>TO</td></tr><tr><td style='border: 0'>";
    timeHtml += "FROM</td><td style='border: 0'>&nbsp;</td></tr></table></th>";
    for (i = 0; i < locations.length; i++) {
        var location = locations[i];
        timeHtml += "<th>" + location.adminArea5 + ', '+ location.adminArea3 + "</th>";
    }
    timeHtml += "</tr></thead><tbody>";
    distanceHtml = "<p>Driving distances (in miles):</p>" + timeHtml;
    timeHtml = "<p>Driving times (in seconds):</p>" + timeHtml;
    var numRows = allToAll ? times.length : 1;
    for (i = 0; i < numRows; i++) {
        var location = locations[i];
        var newRow = '<tr><td style="font-weight: bold; background-color: #cccccc;">' + location.adminArea5 + ', '+ location.adminArea3 + "</td>";
        timeHtml += newRow;
        distanceHtml += newRow; 
        var timeList = allToAll ? times[i] : times;
        var distanceList = allToAll ? distances[i] : distances;
        for (j = 0; j < timeList.length; j++) {
            timeHtml += "<td>" + timeList[j] + "</td>";
            distanceHtml += "<td>" + distanceList[j].toFixed(2) + "</td>";
        }
        timeHtml += "</tr>";
        distanceHtml += "</tr>";
    }
    timeHtml += "</tbody></table>";
    distanceHtml += "</tbody></table>";
    document.getElementById("matrix-times").innerHTML = timeHtml;
    document.getElementById("matrix-distances").innerHTML = distanceHtml;
}