{% extends 'base.html' %}
{% load chunks %}
{% load truncateletters  %}
{% load slugify_under  %}

{% block pagetitle %}Luxagraf | Stories from {{region.name}}{% endblock %}
{% block metadescription %}Writing Archive, Luxagraf{% endblock %}

{#==============================================
Google Maps code
==============================================#}
{% block extrahead %}

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{map_key}}" type="text/javascript" type="text/javascript"></script>
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/1.1/src/mapiconmaker.js" type="text/javascript" type="text/javascript"></script>

<script type="text/javascript">
  var map = null;
  function JLngLat(a,b) {
    return new GLatLng(b,a)
    } 
  function initialize() {
    if (GBrowserIsCompatible()) {
      var iconOptions = {};
      iconOptions.primaryColor = "#a53503";
      iconOptions.strokeColor = "#201a11";
      var icon = MapIconMaker.createLabeledMarkerIcon(iconOptions);
      
      point = new GLatLng({{region.lat}},{{region.lon}})
      // create a new map.
      map = new GMap2(document.getElementById("map-canvas"));
      map.setCenter(point, {{region.zoom_level}}, G_PHYSICAL_MAP);
      
      // basic control and overview (closed by default)
      map.addControl(new GSmallZoomControl());
      var ov = new GOverviewMapControl(new GSize(100,100));
      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:icon};
          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 = '<h4>{{entry.title}}<\/h4><span>{{entry.location|safe}}, {{entry.location.state.country.name|safe}}<\/span><p><img src="{{entry.thumbnail.url}}" height="100" alt="{{ entry.title }}" \/>{{entry.dek|escapejs}} <a href="{{entry.get_absolute_url}}">Read it &raquo;<\/a><\/p>'
          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 city
  function focusCity(marker, latitude, longitude) {
    point = new GLatLng(latitude, longitude)
    map.panTo(point)
    map.setZoom(6);
    marker.openInfoWindowHtml(marker.info_window_content)
  }
  // center on a country
  function focusCountry(latitude, longitude, zoom) {
    p = new GLatLng(latitude, longitude)
    map.panTo(p)
    map.setZoom(zoom);
  }
  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> 

{% endblock %}
{%block bodyid%}id="location"{%endblock%}
{% block bodyevents %}onload="initialize()" onunload="GUnload()"{% endblock %}





{% block primary %}
				<div id="map-canvas">

</div>
				{% endblock %}
				
{% block titleoverride %}           {% endblock %}

{% block sidebar %}
<div id="sidebar">
        <div class="blok">
        <h4 class="first">Topography</h4>
        {% chunk "regions_sidebar" %}
       
    </div>
</div><!-- sidebar -->

{% endblock %}