<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
 Copyright 2010 Google Inc. 
 Licensed under the Apache License, Version 2.0: 
 http://www.apache.org/licenses/LICENSE-2.0 
 -->
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>NodeShot proposed feature integration</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  
  var map = null;
  var chart = null;
  
  var geocoderService = null;
  var elevationService = null;
  var directionsService = null;
  
  var mousemarker = null;
  var markers = [];
  var polyline = null;
  var elevations = null;
  
  var SAMPLES = 256;
  
  capizzanux     = [39.306476, 16.244272];  
  newSPIG        = [39.3398467214, 16.3085952401];
  Sergio         = [39.27952772871, 16.2078005075];
  EcoCasa        = [39.295595736, 16.3047274947];
  Cornite        = [39.2455818116, 16.2644433975];
  BorgoPartenope = [39.2685374975,         16.3059613109];
  G              = [39.2975427453, 16.2454640865];
  iw8pzz         = [39.2762846167, 16.2251329422];
  vilgio = [39.2740567068, 16.1804929376]
  zack           = [ 39.3033004283, 16.2462499738 ]
  fiera  = [ 39.3632277373, 16.256300211 ]
  hacklab = [ 39.3598516311, 16.2335014343 ]
  fantozzi = [ 39.322600, 16.284342 ]
  nino     = [ 39.3646596299, 16.2176656723  ]
  officine = [ 39.3017728412, 16.256622076 ]
  attento  = [ 39.3271335247, 16.2019962072 ]
  vilgio2 = [ 39.3218425937, 16.2987542152 ]
  
  ulisse01 = [   39.3041845871, 16.2353897095 ]
  ulisse02 = [   39.3069283141, 16.2190872431 ]
  enzino_abarth   = [   39.367101348520535, 16.2192964553833 ]
  
  nino     = [ 39.3646596299, 16.2176656723 ]
  
  
  var examples = [{
    // newSPIG, Rochira, ecologicacasa, Cornite
    latlngs: [
      newSPIG,
      Sergio,
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  },{
    latlngs: [
        Sergio, 
        EcoCasa,
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  },{
    latlngs: [
      EcoCasa,
     Cornite,
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  },{
    latlngs: [
      EcoCasa,
      BorgoPartenope,
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  },{
    // Grand Canyon
    latlngs: [
        capizzanux, EcoCasa
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  },{
    // Uluru
    latlngs: [
      Cornite,   newSPIG,
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  },{
    // Grand Canyon
    latlngs: [
        BorgoPartenope, Cornite
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  },{
    // Grand Canyon
    latlngs: [
        G, EcoCasa
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  },{
    // Grand Canyon
    latlngs: [
        iw8pzz, EcoCasa
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  },{
    // Grand Canyon
    latlngs: [
        newSPIG, vilgio, EcoCasa, Cornite
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  },
  {
    // Uluru
    latlngs: [
      vilgio, fiera,   newSPIG,
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  },{
    // Uluru
    latlngs: [
      fiera, hacklab
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
  },
    
    {
    latlngs: [
        nino, fantozzi
        ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
    },
{
    latlngs: [
        vilgio, officine, newSPIG
        ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
    },
  {
    latlngs: [
        capizzanux, officine, EcoCasa
        ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
    },
{
    latlngs: [
        attento, officine
        ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
    },  
      {
    latlngs: [
        officine, vilgio2
        ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
    }, 
{
    latlngs: [
        ulisse02, newSPIG, ulisse01
        ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
    },     
{
    latlngs: [
        enzino_abarth, newSPIG
        ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
    },     
  ];

  // Load the Visualization API and the piechart package.
  google.load("visualization", "1", {packages: ["columnchart"]});
  
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(initialize);
  
  function initialize() {
    var myLatlng = new google.maps.LatLng(39.3398467214, 16.3085952401);
    var myOptions = {
      zoom: 1,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    
    geocoderService = new google.maps.Geocoder();
    elevationService = new google.maps.ElevationService();
    directionsService = new google.maps.DirectionsService();
    
    google.maps.event.addListener(map, 'click', function(event) {
      addMarker(event.latLng, true);
    });
    
    google.visualization.events.addListener(chart, 'onmouseover', function(e) {
      if (mousemarker == null) {
        mousemarker = new google.maps.Marker({
          position: elevations[e.row].location,
          map: map,
          icon: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
        });
      } else {
        mousemarker.setPosition(elevations[e.row].location);
      }
    });

    loadExample(0);
  }
  
  // Takes an array of ElevationResult objects, draws the path on the map
  // and plots the elevation profile on a GViz ColumnChart
  function plotElevation(results) {
    elevations = results;
    
    var path = [];
    for (var i = 0; i < results.length; i++) {
      path.push(elevations[i].location);
    }
    
    if (polyline) {
      polyline.setMap(null);
    }
    
    polyline = new google.maps.Polyline({
      path: path,
      strokeColor: "#000000",
      map: map});
    
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Sample');
    data.addColumn('number', 'Elevation');
    for (var i = 0; i < results.length; i++) {
      data.addRow(['', elevations[i].elevation]);
    }

    document.getElementById('chart_div').style.display = 'block';
    chart.draw(data, {
      width: 800,
      height: 200,
      legend: 'none',
      titleY: 'Elevation (m)',
      focusBorderColor: '#00ff00'
    });
  }
  
  // Remove the green rollover marker when the mouse leaves the chart
  function clearMouseMarker() {
    if (mousemarker != null) {
      mousemarker.setMap(null);
      mousemarker = null;
    }
  }
  
  // Geocode an address and add a marker for the result
  function addAddress() {
    var address = document.getElementById('address').value;
    geocoderService.geocode({ 'address': address }, function(results, status) {
      document.getElementById('address').value = "";
      if (status == google.maps.GeocoderStatus.OK) {
        var latlng = results[0].geometry.location;
        addMarker(latlng, true);
        if (markers.length > 1) {
          var bounds = new google.maps.LatLngBounds();
          for (var i in markers) {
            bounds.extend(markers[i].getPosition());
          }
          map.fitBounds(bounds);
        } else {
          map.fitBounds(results[0].geometry.viewport);
        }
      } else if (status == google.maps.GeocoderStatus.ZERO_RESULTS) {
        alert("Address not found");
      } else {
        alert("Address lookup failed");
      }
    })
  }
  
  // Add a marker and trigger recalculation of the path and elevation
  function addMarker(latlng, doQuery) {
    if (markers.length < 10) {
      
      var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        draggable: true
      })
      
      google.maps.event.addListener(marker, 'dragend', function(e) {
        updateElevation();
      });
      
      markers.push(marker);
      
      if (doQuery) {
        updateElevation();
      }
      
      if (markers.length == 10) {
        document.getElementById('address').disabled = true;
      }
    } else {
      alert("No more than 10 points can be added");
    }
  }
  
  // Trigger the elevation query for point to point
  // or submit a directions request for the path between points
  function updateElevation() {
    if (markers.length > 1) {
      var travelMode = document.getElementById("mode").value;
      if (travelMode != 'direct') {
        calcRoute(travelMode);
      } else {
        var latlngs = [];
        for (var i in markers) {
          latlngs.push(markers[i].getPosition())
        }
        elevationService.getElevationAlongPath({
          path: latlngs,
          samples: SAMPLES
        }, plotElevation);
      }
    }
  }
  
  // Submit a directions request for the path between points and an
  // elevation request for the path once returned
  function calcRoute(travelMode) {
    var origin = markers[0].getPosition();
    var destination = markers[markers.length - 1].getPosition();
    
    var waypoints = [];
    for (var i = 1; i < markers.length - 1; i++) {
      waypoints.push({
        location: markers[i].getPosition(),
        stopover: true
      });
    }
    
    var request = {
      origin: origin,
      destination: destination,
      waypoints: waypoints
    };
   
    switch (travelMode) {
      case "bicycling":
        request.travelMode = google.maps.DirectionsTravelMode.BICYCLING;
        break;
      case "driving":
        request.travelMode = google.maps.DirectionsTravelMode.DRIVING;
        break;
      case "walking":
        request.travelMode = google.maps.DirectionsTravelMode.WALKING;
        break;
    }
    
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        elevationService.getElevationAlongPath({
          path: response.routes[0].overview_path,
          samples: SAMPLES
        }, plotElevation);
      } else if (status == google.maps.DirectionsStatus.ZERO_RESULTS) {
        alert("Could not find a route between these points");
      } else {
        alert("Directions request failed");
      }
    });
  }

  // Trigger a geocode request when the Return key is
  // pressed in the address field
  function addressKeyHandler(e) {
    var keycode;
    if (window.event) {
      keycode = window.event.keyCode;
    } else if (e) {
      keycode = e.which;
    } else {
      return true;
    }
    
    if (keycode == 13) {
       addAddress();
       return false;
    } else {
       return true;
    }
  }
  
  function loadExample(n) {
    reset();
    map.setMapTypeId(examples[n].mapType);
    document.getElementById('mode').value = examples[n].travelMode;
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < examples[n].latlngs.length; i++) {
      var latlng = new google.maps.LatLng(
        examples[n].latlngs[i][0],
        examples[n].latlngs[i][1]
      );
      addMarker(latlng, false);
      bounds.extend(latlng);
    }
    map.fitBounds(bounds);
    updateElevation();
  }
  
  // Clear all overlays, reset the array of points, and hide the chart
  function reset() {
    if (polyline) {
      polyline.setMap(null);
    }
    
    for (var i in markers) {
      markers[i].setMap(null);
    }
    
    markers = [];
    
    document.getElementById('chart_div').style.display = 'none';
  }

</script>
<style>
body {
  font-family: sans-serif
}

#map_canvas {
  margin: 5px 0px 5px 0px;
}
</style>
</head>
<body>
  <div style="width: 512px; text-align: center">Add points by clicking on the map or entering an address</div>
  <div id="map_canvas" style="border: 1px solid black; width:100%; height:600px"></div>
  <table style="width:512px;">
  <tr>
    <td>Address: <input type="text" id="address" size="15" onkeypress="return addressKeyHandler(event)"/></td>
    <td style="text-align: center">
      Mode of travel:
      <select id="mode" onchange="updateElevation()">
        <option value="direct">Direct</option>
        <option value="driving">Driving</option>
        <option value="bicycling">Bicycling</option>
        <option value="walking">Walking</option>
      </select>
    </td>
    <td style="text-align: right">
      <input type="button" value="Clear points" onclick="reset()"/>
    </td>
  </tr>
  </table>
  <table style="width:512px; font-size: small;">
    <tr>
      <td style="text-align: center"><a href="#" onclick="loadExample(0); return false">Sergio-newSPIG</a></td>
      <td style="text-align: center"><a href="#" onclick="loadExample(1); return false">Sergio-EcoCasa</a></td>
      <td style="text-align: center"><a href="#" onclick="loadExample(2); return false">EcoCasa-Cornite</a></td>
      <td style="text-align: center"><a href="#" onclick="loadExample(3); return false">EcoCasa-BorgoPartenope</a></td>
      <td style="text-align: center"><a href="#" onclick="loadExample(4); return false">EcoCasa-Capizzanux</a></td>
      <td style="text-align: center"><a href="#" onclick="loadExample(5); return false">Cornite-SPIG</a></td>
      <td style="text-align: center"><a href="#" onclick="loadExample(6); return false">Cornite-BorgoPartenope</a></td>
        <td style="text-align: center"><a href="#" onclick="loadExample(15); return false">attento</a></td>      

<!--
      <td style="text-align: center"><a href="#" onclick="loadExample(4); return false">Uluru</a></td>
-->
    </tr>
    <tr>
        <td style="text-align: center"><a href="#" onclick="loadExample(7); return false">G-EcoCasa</a></td>
        <td style="text-align: center"><a href="#" onclick="loadExample(8); return false">iw8pzz-EcoCasa</a></td>
        <td style="text-align: center"><a href="#" onclick="loadExample(9); return false">newSPIG-WCN-BH-000-EcoCasa-Cornite</a></td>
        <td style="text-align: center"><a href="#" onclick="loadExample(10); return false">vilgio-fiera-newspig</a></td>
        <td style="text-align: center"><a href="#" onclick="loadExample(11); return false">fiera-hacklab</a></td>
        <td style="text-align: center"><a href="#" onclick="loadExample(12); return false">fantozzi-nino</a></td>
        <td style="text-align: center"><a href="#" onclick="loadExample(13); return false">officine</a></td>
        <td style="text-align: center"><a href="#" onclick="loadExample(14); return false">officine-ecocasa</a></td>
        <td style="text-align: center"><a href="#" onclick="loadExample(16); return false">officine-lappano</a></td>
        <td style="text-align: center"><a href="#" onclick="loadExample(17); return false">ulisse</a></td>
        <td style="text-align: center"><a href="#" onclick="loadExample(18); return false">enzino</a></td>


    </tr>    
    
    
  </table>
  <div id="chart_div" style="width:800px; height:200px" onmouseout="clearMouseMarker()"></div>
</body>
</html>