// Wrap our code in a self-executing anonymous function to isolate scope.
(function() {
var CLIENT_ID = 'Here goes my actual client ID';
var map;
var currentMarker;
var image;

var clearMarker = function() {
    if (currentMarker) {
      currentMarker.setMap(null);
      currentMarker = undefined;
    }
    $('#lon').val('0.00');
    $('#lat').val('0.00');
    $('#brt').val('0.00');
    drawingManager.setOptions(
        {drawingMode: google.maps.drawing.OverlayType.MARKER});
  };

   var setMarker = function(newMarker) {
    clearMarker();
    currentMarker = newMarker;
    var longitud = currentMarker.getPosition().lng();
    var latitud = currentMarker.getPosition().lat();   
    $('#lon').val(longitud);
    $('#lat').val(latitud);   
    drawingManager.setOptions({drawingMode: null});   
    var eeMarker = ee.Geometry.Point([longitud,latitud]);
    var mean = image.reduce('mean');
    var sample = mean.sample(eeMarker, 30);
    var computedValue = sample.first().get('mean');
    computedValue.evaluate(function(resultado) {
      // Ensure that the marker hasn't changed since we sent the request.
      if (currentMarker != newMarker) return;
      $('#brt').val(resultado.toFixed(2));
    });
 
  };


var showGoogleMaps = function() {
    
    // Create the base Google Map.
    map = new google.maps.Map($('.googlemaps').get(0), {
      center: { lat: 24, lng: -99.13},
      zoom: 5,
      streetViewControl: false
    });


    ee.initialize();
    image = ee.Image('Here goes my actual asset route');
    var eeMapConfig = image.getMap({'min': 0, 'max': 1000});
    var eeTileSource = new ee.layers.EarthEngineTileSource(
        'https://earthengine.googleapis.com/map',
        eeMapConfig.mapid, eeMapConfig.token);
    var overlay = new ee.layers.ImageOverlay(eeTileSource);


    // Create a Google Maps Drawing Manager for drawing Markers.
    drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.MARKER,
      drawingControl: false,
      markerOptions: {
        fillColor: '#00ff00',
      }
    });

    // Respond when a new marker is drawn.
    google.maps.event.addListener(drawingManager, 'overlaycomplete',
        function(event) {
          setMarker(event.overlay);
        });

    // Clear the current marker when the user clicks the "Draw new" button.
    $('.marker-details .draw-new').click(clearMarker);

    drawingManager.setMap(map);

    // Show the EE map on the Google Map.
    map.overlayMapTypes.push(overlay);

};

$(document).ready(function() {
    // Shows a button prompting the user to log in.
    var onImmediateFailed = function() {

      $('.g-sign-in').removeClass('hidden');
      $('.output').text('Please log in to use the app.');
      $('.g-sign-in .button').click(function() {
        ee.data.authenticateViaPopup(function() {
          // If the login succeeds, hide the login button and run the analysis.
          $('.g-sign-in').addClass('hidden');
          showGoogleMaps();
        });
      });
    };

    // Attempt to authenticate using existing credentials.
    ee.data.authenticate(CLIENT_ID, showGoogleMaps, null, null, onImmediateFailed);
  });

})();