{% load typogrify %}
{% load truncateletters  %}
{% load slugify_under  %}
<script type="text/javascript">
  var map = null;
  function JLngLat(a,b) {
    return new GLatLng(b,a)
    } 
  function initialize() {
    if (GBrowserIsCompatible()) {
      var tinyIcon = new GIcon();
      tinyIcon.image = "http://media.luxagraf.net/img/marker-entry.png";
      tinyIcon.shadow = "http://media.luxagraf.net/img/shadow.png";
      tinyIcon.iconSize = new GSize(12, 20);
      tinyIcon.shadowSize = new GSize(22, 20);
      tinyIcon.iconAnchor = new GPoint(6, 20);
      tinyIcon.infoWindowAnchor = new GPoint(5, 5);

      //var iconOptions = {};
      //iconOptions.primaryColor = "#a53503";
      //iconOptions.strokeColor = "#201a11";
      //var icon = MapIconMaker.createLabeledMarkerIcon(iconOptions);
      
      var location = window.location.hash;
      var pts = new Array();
      {%for c in country_list%}pts[{{forloop.counter0}}] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}];{% endfor %}
      {%for c in region_list%}pts[pts.length] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}];{% endfor %}
      if (location.length>1) {
          for (i=0;i<pts.length;i++) {
              if (location == pts[i][0]) {
                  point = new GLatLng(pts[i][1],pts[i][2]);
                  zoom = pts[i][3];
                  break;
              } else {
                  point = new GLatLng(19.311143,2.460938);
                  zoom = 2;
              }
          }
      } else {
          point = new GLatLng(19.311143,2.460938);
          zoom = 2;
      }
      
      // create a new map.
      map = new GMap2(document.getElementById("map-canvas"));
      map.enableContinuousZoom()
      map.setCenter(point, zoom, G_PHYSICAL_MAP);
      
      // basic control and overview (closed by default)
      map.addControl(new GSmallZoomControl());
      //var ov = new GOverviewMapControl();
      //map.addControl(ov);
      //ov.hide(true); 
      
      // Add a marker for each project
      
        {% for entry in object_list %}
          point_{{entry.title|truncatewords:2|slugify_under}} = JLngLat{{entry.point.coords}};
          markerOptions = { clickable:true, draggable:false, icon:tinyIcon};
          marker_{{entry.title|truncatewords:2|slugify_under}} = new GMarker(point_{{entry.title|truncatewords:2|slugify_under}}, markerOptions);
          map.addOverlay(marker_{{entry.title|truncatewords:2|slugify_under}});
          marker_{{entry.title|truncatewords:2|slugify_under}}.info_window_content = '<div class="infowin"><h4>{{entry.title}}<\/h4><span class="date blok">{{entry.pub_date|date:"F j, Y"}} ({% if entry.location.state.country.name == "United States" %}{{entry.location.name|smartypants|safe}}, {{entry.location.state.name}}){%else%}{{entry.location.name|smartypants|safe}}, {{entry.location.state.country.name}}){%endif%}<\/span><p><img src="{{entry.get_thumbnail_url}}" height="100" alt="{{ entry.title }}"  style="float: left; border: #000 10px solid; margin-right: 8px; margin-bottom: 4px; height: 100px;" \/>{{entry.dek|escapejs}} <a href="{{entry.get_absolute_url}}">Read it &raquo;<\/a><\/p><\/div>'
          marker_{{entry|truncatewords:2|slugify_under}}.bindInfoWindowHtml(marker_{{entry|truncatewords:2|slugify_under}}.info_window_content, {maxWidth:400});
          GEvent.addListener(marker_{{entry.title|truncatewords:2|slugify_under}}, "click", function() {
            map.panTo(point_{{entry.title|truncatewords:2|slugify_under}}, 2);
          });

    {% endfor %}
    }
  }
  
  // center on a country
  function focusCountry(latitude, longitude, zoom) {
    map.setZoom(zoom);
    map.panTo(new GLatLng(latitude, longitude))
  }
  function addRoute(line,levels,color,lat,lon,zoom){
    var encodedPolyline = new GPolyline.fromEncoded({
    color: color,
    weight: 5,
    points: line,
    levels: levels,
    zoomFactor: 32,
    numLevels: 4
    });
    focusCountry(lat,lon,zoom);
    map.addOverlay(encodedPolyline);
  }
  </script>