{% extends 'base.html' %}
{% load typogrify %}
{% block pagetitle %}Luxagraf | Projects | National Parks {% endblock %}
{% block metadescription %}{% endblock %}

{% block extrahead %}<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script src="http://documentcloud.github.com/underscore/underscore-min.js" type="text/javascript"></script>

<link rel="stylesheet" 
          href="http://127.0.0.1:8000/media/css/dark.css" 
          type="text/css" 
          media="screen">

{% endblock %}


{%block bodyid%}id="projects"{%endblock%}	

{% block bodyevents %}onload="initialize()"{% endblock %}
				
{% block primary %}
<article>
    <ul id="breadcrumbs">
        <li><a href="/" title="luxagraf homepage">Home</a> &rarr;</li>
        <li><a href="/projects/" title="luxagraf projects page">Projects</a> &rarr;</li>
        <li>National Parks</li>
    </ul>
    
    <ul id="parks"> 
        {% for object in object_list %}
        <li>
            <div class="figure">
                <img src="{{object.image.url}}" alt="{{object.title}}" />
            </div>
            <h4>{{object.unit_name}} {{object.type}}</h4>
            <div class="legend">
                <div class="desc">
                    <h5>{{object.tag_line}}</h5>
                    <div>{{object.dek|safe}}
                    <ul class="buttons">
                        <li><a href="{{object.post.get_absolute_url}}" title="{{object.post.title}}">Read Journal</a></li>
                        {%if object.gallery%}<li><a href="{{object.gallery.get_absolute_url}}" title="Photos of {{object.unit_name}}">View Photos</a></li>{%endif%}
                    </ul>
                    </div>
                    <dl>
                        <dt>Visited:</dt>
                        <dd>{{object.date_visited_begin|date:"m/d/y"}} - {{object.date_visited_end|date:"m/d/y"}}</dd>
                        <dt>State:</dt>
                        <dd>{{object.state}}</dd>
                        <dt>Cost:</dt>
                        <dd>${{object.fee}} / ${{object.camping_fee}} (camping)</dd>
                        <dt>Website:</dt>
                        <dd>{{object.url|urlize}}</dd>
                    </dl>
                </div>
                
                <div class="map" id="map-canvas-{{forloop.counter}}">
                </div>
            </div>
            
        </li>
        {% endfor %}
    </ul>

</article>

{% endblock %}

{% block js %}
<script type="text/javascript">
function createPolygons(areajson, bounds){
  var coords = areajson.coordinates;
  var polygons = _(coords).reduce([], function(memo_n, n) {
    var polygonpaths = _(n).reduce(new google.maps.MVCArray(), function(memo_o, o) {
      var polygoncords = _(o).reduce(new google.maps.MVCArray(), function(memo_p, p) {
        var mylatlng = new google.maps.LatLng(p[1], p[0]);
        if(bounds){
          bounds.extend(mylatlng);
        }
        memo_p.push(mylatlng);
        return memo_p;
      });
      memo_o.push(polygoncords);
      return memo_o;
    });
    var polygon = new google.maps.Polygon({
      paths: polygonpaths,
      strokeColor: "#201a11",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#201a11",
      fillOpacity: 0.35
    });
    memo_n.push(polygon);
    return memo_n;
  });
  return polygons;
}
function initialize() {
    {% for object in object_list %}
    var latlng = new google.maps.LatLng({{object.mpoly.centroid.y}},{{object.mpoly.centroid.x}});
    var myOptions = {
      zoom: {{object.zoom}},
      center: latlng,
      disableDefaultUI: true,
      navigationControl: true,
      navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    
      mapTypeId: google.maps.MapTypeId.TERRAIN
      
    };
    var map = new google.maps.Map(document.getElementById("map-canvas-{{forloop.counter}}"), myOptions);
    var poly = createPolygons({{object.mpoly.geojson|safe}});
    for (i=0;i<=poly.length-1;i++) {
        poly[i].setMap(map);
        
    }
    {% endfor %}
  }

  
</script>
{%endblock%}