[% USE JSON.Escape %]

[% IF criteria %]
  [% page_title = "Map of $criteria_title - $site_name" %]
[% ELSE %]
  [% page_title = "Map of all nodes - $site_name" %]
[% END %]
[% INCLUDE header.tt %]
[% INCLUDE banner.tt %]

[%# NOTE: the "content" div is closed off in footer.tt %]
<div id="content">

  <div id="maincontent_no_navbar">

    <h2>Map of
      [% IF criteria %]
        [% links = [] %]
        [% FOREACH criterion = criteria %]
          [% links.push( '<a href="' _ cgi_url _ '?' _ criterion.param _ '">' _ criterion.name _ '</a>' ) %]
        [% END %]
        [% links.join( ' and ' ) %]
      [% ELSE %]
        all nodes
      [% END %]
      (<a href="[% feed_base %]">view as a list</a>)
    </h2>

    [% INCLUDE index_form.tt %]

    <div id="map_index_node_list">
      <ul>
        [% IF no_nodes_on_map %]
          [% FOREACH node = nodes %]
            <li><a href="?[% node.param %]">[% node.name %]</a></li>
          [% END %]
        [% ELSE %]
          [% i = 0 %]
          [% FOREACH node = nodes %]
            [% i = i + 1 %]
            <li>
              [% IF node.has_geodata %]
                <a href="#" onclick="return show_marker( [% i %] )">[% node.name | html %]</a>
              [% ELSE %]
                [% node.name | html %] (not on map &#8212;
                  <a href="?[% node.param %]">view info</a>)
              [% END %]
            </li>
          [% END %]
        [% END %]
      </ul>
    </div>

    <div id="map_index_canvas">
      [% IF no_nodes_on_map %]
        <p class="no_nodes_on_map">No pages with geodata - nothing to display
        on map!</p>
      [% ELSE %]
        <span id="map_index_no_js">
          <p>Sorry! JavaScript is required to view the map - you may prefer to
          <a href="[% feed_base %]">view the results as a list</a> instead.</p>
        </span>

        <script type="text/javascript">

          $('#map_index_no_js').hide();

          map_div_id = 'map_index_canvas';
          centre_lat = [% centre_lat %];
          centre_long = [% centre_long %];
          min_lat = [% min_lat %];
          max_lat = [% max_lat %];
          min_long = [% min_long %];
          max_long = [% max_long %];

          function add_markers() {
            var node;
            [% i = 0 %]
            [% FOREACH node = nodes %]
              [% i = i + 1 %]
              [% IF node.has_geodata %]
                node = {
                  name: [% node.name.json %],
                  param: [% node.param.json %],
                  [% address = node.node_data.metadata.address.list.first %]
                  [% IF address %]
                    address: [% address.json %],
                  [% END %]
                  lat: [% node.wgs84_lat.json %],
                  long: [% node.wgs84_long.json %],
                };
                add_marker( [% i %], node );
              [% END %]
            [% END %]
          }
        </script>
      [% END %]
    </div>

  </div>

[% INCLUDE footer.tt %]