revamped national parks project files

4 files changed, 40 insertions, 87 deletions

diff --git a/templates/archives/projects.html b/templates/archives/projects.html
index 6ca2e2e..52edbb7 100644
--- a/templates/archives/projects.html
+++ b/templates/archives/projects.html
@@ -3,7 +3,7 @@
 {% block pagetitle %}Luxagraf | Projects {% endblock %}
 {% block metadescription %}Travel Themes and Experiments {% endblock %}
 
-{%block bodyid%}id="projects"{%endblock%}								
+{%block bodyid%}id="projects-page"{%endblock%}								
 				
 {% block primary %}
 <article>
@@ -11,23 +11,23 @@
         <li><a href="/" title="luxagraf homepage">Home</a> &rarr;</li>
         <li>Projects</li>
     </ul>
-        <h1 class="hide">Projects</h1>
-        <div class="top"><p class="col">These are a few of the things that I use to inspire myself to do more. The truth is, just about <a href="http://www.youtube.com/watch?v=8r1CZTLk-Gk" title="Louis CK talking about how everything is amazing">everything is amazing</a> when viewed from the proper perspective. </p>
-        
-        <p class="col two">The projects on luxagraf are more or less goals I've created in effort to get my body in motion, because the difference between the mundane and the amazing is often simply motion. To move is to do, and to do is to live.</p></div>
-        {%for project in object_list %}
-        <ul class="project-tease">
-            <li>
-                <dl>
-                    <dt>
-                    <a href="{{project.get_absolute_url}}"><h4>{{project.title|safe}}</h4> {{project.subtitle|safe}}</a>
-                    </dt>
-                    <dd>{{project.lede|safe}}</dd>
-                </dl>
-                <div class="img"><img src="{{project.image.url}}"  /></div>
-            </li>
-        </ul>
-        {% endfor %}
+    <h1 class="hide">Projects</h1>
+    <div class="top"><p class="col">These are a few of the things that I use to inspire myself to do more. The truth is, just about <a href="http://www.youtube.com/watch?v=8r1CZTLk-Gk" title="Louis CK talking about how everything is amazing">everything is amazing</a> when viewed from the proper perspective. </p>
+    
+    <p class="col two">The projects on luxagraf are more or less goals I've created in effort to get my body in motion, because the difference between the mundane and the amazing is often simply motion. To move is to do, and to do is to live.</p></div>
+    <div class="break"></div>
+    {%for project in object_list %}
+    <ul class="project-tease">
+        <li>
+            <div class="tease">
+                <h4><a href="{{project.get_absolute_url}}">{{project.title|safe}}{{project.subtitle|safe}}</a></h4> 
+             
+                <div class="lede">{{project.lede|smartypants|safe}}</div>
+            </div>
+            <div class="img"><img src="{{project.image.url}}"  /></div>
+        </li>
+    </ul>
+    {% endfor %}
 
 </article>
 {% endblock %}
diff --git a/templates/base.html b/templates/base.html
index bbe8b1c..7e5d5fd 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -90,7 +90,7 @@
                 <li><a href="http://feeds2.feedburner.com/luxagraf/blog" title="RSS feed">RSS</a></li>
                 <li><a href="http://twitter.com/luxagraf" rel="me" title="follow luxagraf on Twitter">Twitter</a></li>
                 <li><a href="http://www.flickr.com/photos/luxagraf" rel="me" title="luxagraf on Flickr">Flickr</a></li>
-                <li><a href="/contact/" tile="contact luxagraf">Contact</a></li>
+                <li><a href="/contact/" title="contact luxagraf">Contact</a></li>
             </ul>
         </nav>
     </footer>
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%}
diff --git a/templates/details/photo_galleries.html b/templates/details/photo_galleries.html
index bd4c185..8c1e097 100644
--- a/templates/details/photo_galleries.html
+++ b/templates/details/photo_galleries.html
@@ -62,7 +62,7 @@
         {%for photo in object.photos.all reversed %}
             <li class="bigimg" id="{{photo.get_local_slideshow_url}}" style="height: {{photo.slideshowimage_height}}px; width:{{photo.slideshowimage_width}}px; margin-top:{{photo.slideshowimage_margintop}}px; margin-left:{{photo.slideshowimage_marginleft}}px;"> 
                 <div class="figure">
-                    <img src="{{photo.get_local_slideshow_url}}" alt="{{photo.title}}" title="{{photo.title}}" class="imgs" height="{{photo.slideshowimage_height}}px" width="{{photo.slideshowimage_width}}px" />
+                    <img src="{{photo.get_local_slideshow_url}}" alt="{{photo.title}}" title="{{photo.title}}" class="imgs" height="{{photo.slideshowimage_height}}" width="{{photo.slideshowimage_width}}" />
                 </div>
                 <div class="legend">
                     <div class="caption">