revamped national parks project files

1 files changed, 20 insertions, 67 deletions

diff --git a/templates/details/national-parks.html b/templates/details/national-parks.html
index 35b8efa..a71e078 100644
--- a/templates/details/national-parks.html
+++ b/templates/details/national-parks.html
@@ -3,9 +3,15 @@
 {% 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>
-
+{% block extrahead %}
+<script type="text/javascript" src="/media/js/jquery.js"></script>
 <script src="http://documentcloud.github.com/underscore/underscore-min.js" type="text/javascript"></script>
+<script src="/media/js/natparks.js" type="text/javascript"></script>
+<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+
+
+
+
 
 <link rel="stylesheet" 
           href="http://127.0.0.1:8000/media/css/dark.css" 
@@ -15,9 +21,9 @@
 {% endblock %}
 
 
-{%block bodyid%}id="projects"{%endblock%}	
+{%block bodyid%}id="projects-detail"{%endblock%}	
 
-{% block bodyevents %}onload="initialize()"{% endblock %}
+{% block bodyevents %}{% endblock %}
 				
 {% block primary %}
 <article>
@@ -29,34 +35,35 @@
     
     <ul id="parks"> 
         {% for object in object_list %}
-        <li>
+        <li id="park-{{forloop.counter}}">
             <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%}
+                        <li><a href="#" class="map-link" title="{{object.mpoly.centroid.y}},{{object.mpoly.centroid.x}},{{object.zoom}},{{object.id}}">Map</a></li>
+                        <li><a href="#" id="more-{{forloop.counter}}"class="more-link" title="More about {{object.unit_name}}">More</a></li>
                     </ul>
-                    </div>
-                    <dl>
+                    
+                    <dl class="meta" style="visibility: hidden;">
                         <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>Size:</dt>
+                        <dd>{{object.size}} sq miles</dd>
                         <dt>Cost:</dt>
-                        <dd>${{object.fee}} / ${{object.camping_fee}} (camping)</dd>
+                        <dd>${{object.fee}} / ${{object.camping_fee}} (entry/camping)</dd>
                         <dt>Link:</dt>
                         <dd>{{object.url|urlize}}</dd>
                     </dl>
-                </div>
                 
-                <div class="map" id="map-canvas-{{forloop.counter}}">
-                </div>
+                
             </div>
             
         </li>
@@ -67,58 +74,4 @@
 
 {% 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%}