<% content_for :head do -%>
<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?sensor=false" %>
<%= javascript_include_tag "map_marker" %>
<% end -%>

<h3>Recent Event Map</h3>

<% events = @agent.events.with_location.order("id desc").limit(500) %>
<% if events.length > 0 %>
  <div id="map_canvas" style="width:800px; height:800px"></div>

  <script type="text/javascript">
    var mapOptions = {
      center: new google.maps.LatLng(<%= events.first.lat %>, <%= events.first.lng %>),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var circles = [];
    var points = [];
    <% events.each do |event| %>
      var loc = <%= Utils.jsonify(event.location) %>;
      if (loc.radius > 1) {
        circles.push(map_marker(map, loc));
      }
      delete loc.radius;
      points.push(map_marker(map, loc));
    <% end %>

    function toggleAccuracy(group, map) {
      for (var i = 0; i < group.length; i++) {
        group[i].setMap(map);
      }
    }

    toggleAccuracy(circles, null);

    $(document).ready(function() {
      $("input#toggle").on("click", function() {
        if($(this).is(":checked")){
          toggleAccuracy(circles, map);
          toggleAccuracy(points, null);
        } else {
          toggleAccuracy(circles, null);
          toggleAccuracy(points, map);
        }
      });
      if(circles.length > 0){
        $(".toggle-accuracy").removeClass("hidden");
      }
    });

  </script>
<% else %>
  <p>
    No events found.
  </p>
<% end %>

<div class="hidden toggle-accuracy checkbox">
  <label>
    <input id="toggle" type="checkbox" value="">
    Show accuracy of locations
  </label>
</div>

<h3>POST URL</h3>

<p>
  Location data containing <code>latitude</code> and <code>longitude</code> can be posted to this URL:<br/>

  <ul>
    <li><code class="selectable-text"><%= web_requests_url(user_id: @agent.user_id, agent_id: @agent.id, secret: @agent.options['secret']) %></code></li>
  </ul>
</p>
<p>The data can also include <code>radius</code>, <code>speed</code>, and <code>course</code> values.</p>