<script>
  $(function(){
      var defaults = {
          zoomControl: true,
          zoom: 16,
          center: [33.66851327953566, -117.69093392928296]
      };
      var accessToken = '7fNWCXhqQ_OSyB4fd8C6539PYQ1G8YjdsOCoTtio';
      var gssMap = new gssmaps.GSSMap(accessToken, 'map', defaults);
      var sourceMarker, destinatioMarker;
      var gssPolyline, type;
      //console.log('Fastest Enum: ' + gssmaps.OPTIMIZE.FASTEST);

      gssMap.on('contextmenu', function(e){
          var lat = e.latlng.lat;
          var lng = e.latlng.lng;
          if(type){
              var marker = addMarker(lat, lng);
              setMarker(marker);
          } else {
              alert('Click a marker type (Source, Destination, Waypoint) button below the map.');
          }
      });

      $('.input_button').on('click', function(e){
          type = this.id;
      });

      $('#clear').on('click', function(e){
          clearDirections();
      })

      function setMarker(marker){
          if(type === 'S'){
              sourceMarker = marker;
              $('#' + type).attr("disabled", true);
              type = null;
          } else if(type === 'D'){
              destinatioMarker = marker;
              $('#' + type).attr("disabled", true);
              type = null;
          }
      }

      $('#submit').on('click', function(){
          drawRouteMap();
      });

      function drawRouteMap(){

          var origin = new gssdirections.GSSLatLng(sourceMarker.getLatLng().lat, sourceMarker.getLatLng().lng);
          var destination = new gssdirections.GSSLatLng(destinatioMarker.getLatLng().lat,
              destinatioMarker.getLatLng().lng);
          var directionsRequest = new gssdirections.GSSDirectionsRequest(origin, destination);

          var directionsService = new gssdirections.GSSDirectionsService(accessToken);
          centerMap(origin, destination);

          directionsService.getRoute(directionsRequest, function(data){
              console.log("Response: " + data);
              gssPolyline = displayDirections(data);
              gssMap.fitBounds(gssPolyline.gssLatLngs);
          }, function(error){
              console.log("Error: " + error.status + " --> " + error.statusText);
          });
      }

   function displayDirections(gssDirections){
          return renderPolylineFromManeuvers(gssDirections);
      }

      function renderPolylineFromManeuvers(gssDirections){
          var maneuverInd, polylinePoints = [];
          var maneuvers = gssDirections.getRoutes()[0].getRouteSegments()[0].getRouteManeuvers()

          for(maneuverInd in maneuvers){
              var maneuver = maneuvers[maneuverInd];
              polylinePoints = polylinePoints.concat(maneuver.getPolyline());
              console.log(maneuver);
          }

          return renderPolyline(polylinePoints);
      }

      function renderPolyline(polylinePoints){
          var gssPolyline = new gssmaps.GSSPolyline(polylinePoints);
          return gssMap.addPolyline(gssPolyline);
      }

      function addMarker(lat, lng, popupContent){
          var gssLatLng = new gssmaps.GSSLatLng(lat, lng);
          var gssMarker = new gssmaps.GSSMarker(gssLatLng);
          return gssMap.addMarker(gssMarker, popupContent);
      }

      function centerMap(origin, destination){
          var latLngs = new Array();

          latLngs.push(sourceMarker.getLatLng());
          latLngs.push(destinatioMarker.getLatLng());
      }

      function clearDirections(){
          gssMap.removeAllMarkers();
          if(gssPolyline){
              gssMap.removePolyline(gssPolyline);
          }

          $('#S').attr("disabled", false);
          $('#D').attr("disabled", false);
      }

      });
</script>