From 3656e9e281db64445e6f3e2757842f381db1bb67 Mon Sep 17 00:00:00 2001
From: sanj <sanj@sanj>
Date: Tue, 26 Oct 2010 02:33:39 +0200
Subject: [PATCH] js - but, wtf?

---
 rizk/egypt/models.py     |  3 +++
 rizk/static/css/rizk.css |  4 ++++
 rizk/static/js/rizk.js   | 50 ++++++++++++++++++++++++++++++++--------
 rizk/templates/rizk.html | 17 ++++++++++----
 4 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/rizk/egypt/models.py b/rizk/egypt/models.py
index 8b1fcdd..651dfc4 100644
--- a/rizk/egypt/models.py
+++ b/rizk/egypt/models.py
@@ -104,6 +104,7 @@ class Event(models.Model):
 
   def get_dict(self):
     return {
+      'id': self.id,
       'name': self.name,
       'description': self.description,
       'start_time': self.start_time.strftime("%Y-%m-%d"),
@@ -168,6 +169,8 @@ class YoutubeVideo(models.Model):
 
       ret = {
         'info': info,
+        'id': self.id,
+        'url': self.url,
         'location': {
           'id': self.location.id,
           'name': self.location.name
diff --git a/rizk/static/css/rizk.css b/rizk/static/css/rizk.css
index 14fb6b3..4bca6bd 100644
--- a/rizk/static/css/rizk.css
+++ b/rizk/static/css/rizk.css
@@ -73,6 +73,10 @@ a img {
   margin-top: 10px;
 }
 
+.highlightedEvent {
+  color: red;
+}
+
 .videoCategory {
   background: #ff6066;
 }
diff --git a/rizk/static/js/rizk.js b/rizk/static/js/rizk.js
index 5e19cd7..8955d55 100644
--- a/rizk/static/js/rizk.js
+++ b/rizk/static/js/rizk.js
@@ -68,19 +68,46 @@ $(function() {
   layers[1].events.on({
     'featureselected': onFeatureSelect,
     'featureunselected': onFeatureUnselect
-  });  
+  });
+  $.getJSON("geojson", {}, function(geojson) {
+    var currFeatures = jsonLayer.features;
+    jsonLayer.removeFeatures(currFeatures);
+    jsonLayer.addFeatures(geojson_format.read(geojson));
+    var maxExtent = jsonLayer.getDataExtent();
+    map.zoomToExtent(maxExtent);
+  });
 });
 
 $(function() {
+
+  if (typeof(console) == 'undefined') {
+    console =  {
+      'log': function() {
+        $.noop();
+      }
+    };
+  }
+
   $('.event').click(function(e) {
-    e.stopPropagation();
+//    e.stopPropagation();
     var eventId = $(this).data('id');
     $.get("eventMedia", {'id': eventId}, function(data) {
       console.log(data);
+      displayMedia(data);
     });
   });
 });
 
+function displayMedia(data) {
+//  console.log(data);
+  var imagesHtml = tmpl("tmpl_images", {'images': data.images });
+  var youtubeHtml = tmpl("tmpl_youtubes", {'videos': data.yvideos });
+  var padmaHtml = tmpl("tmpl_padmas", {'videos': data.pvideos });
+  var html = imagesHtml + youtubeHtml + padmaHtml;
+  $('#media').html(html);
+  $('.imagesWrapper a').colorbox();
+}
+
 function onFeatureSelect(f) {
   var id = f.feature.attributes.id;
   $.get("locationMedia", {'id': f.feature.attributes.id }, function(data) {
@@ -222,7 +249,7 @@ $(function() {
   $('#aboutBtn').click();
 });
 
-function getFlyoverById(id) {
+function getLocationById(id) {
   var features = jsonLayer.features;
   for (var i=0; i < features.length; i++) {
     if (features[i].attributes.id == id) {
@@ -232,16 +259,19 @@ function getFlyoverById(id) {
   return false;
 }
 
-$('.flyoverImage').live("mouseover", function() {
-  var id = $(this).attr("data-id");
+$('.mediaThumb').live("mouseover", function() {
+  var id = $(this).attr("data-location");
 //  console.log(id);
-  var flyover = getFlyoverById(id);
-  mapControl.select(flyover);
-  currentlySelectedFeature = flyover;
+//  var location = getLocationById(id);
+//  mapControl.select(flyover);
+  highlightFeatures([id]);
+  $('#event_' + id).addClass("highlightedEvent");
+//  currentlySelectedFeature = flyover;
 });
 
-$('.flyoverImage').live("mouseout", function() {
-  mapControl.unselect(currentlySelectedFeature);  
+$('.mediaThumb').live("mouseout", function() {
+  highlightFeatures([]); 
+  $('#event_' + id).removeClass("highlightedEvent");
 });
 
 $('#submitQuestions').live("click", function() {
diff --git a/rizk/templates/rizk.html b/rizk/templates/rizk.html
index 69f072c..335aa5c 100644
--- a/rizk/templates/rizk.html
+++ b/rizk/templates/rizk.html
@@ -18,12 +18,15 @@
 
 </head>
 <body>
+
+
   <script type="text/html" id="tmpl_images">
 <div class="imagesWrapper">
+  <% if (images.length > 0) { %> Images from FlickR: <% } %> <br />
   <% for (var i=0; i<images.length;i++) { var img = images[i]; %>
     <div class="imageWrapper">
-      <a href="<%= img.sizes[3].source %>" class="flyoverImage" title="<%= img.caption %>" data-id="<%= img.flyover.id %>" rel="group_<%= img.id %>">
-        <img src="<%= img.sizes[0].source %>" alt="<%= img.caption %>" />
+      <a href="<%= img.sizes[3].source %>" class="flickrImage mediaThumb" title="<%= img.photoInfo.title %>" data-id="<%= img.id %>" data-location="<%= img.location.id %>" data-event="<%= img.event.id %>" rel="group_<%= img.id %>">
+        <img src="<%= img.sizes[0].source %>" alt="<%= img.photoInfo.title %>" />
       </a> 
     </div>
   <% } %>
@@ -31,11 +34,12 @@
 </div>
   </script>
 
-  <script type="text/html" id="tmpl_videos">
+  <script type="text/html" id="tmpl_youtubes">
 <div class="videosWrapper">
+  <% if (videos.length > 0) { %> Videos from YouTube: <% } %> <br />
   <% for (var i=0; i<videos.length;i++) { var vid = videos[i]; %>
     <div class="videoWrapper">
-      <a href="#" class="flyoverVideo flyoverImage" title="<%= vid.info.description %>" data-id="<%= vid.flyover.id %>" rel="group_<%= vid.id %>">
+      <a href="vid.url" target="_blank" class="youtubeVideo mediaThumb" title="<%= vid.info.description %>" data-id="<%= vid.id %>" data-event="<%= vid.event.id %>" data-location="<%= vid.location.id %>" rel="group_<%= vid.id %>">
         <img src="<%= vid.info.thumbnail %>" alt="<%= vid.info.description %>" />
       </a> 
     </div>
@@ -54,6 +58,9 @@
 </div>
   </script>
 
+  <script type="text/html" id="tmpl_padmas">
+
+  </script>
 <script type="text/html" id="tmpl_about">
   <div class="navContent" id="about">
     <div class="contentWrapper about">
@@ -68,7 +75,7 @@
   <div id="wrapper">
     <div id="timeline">
       {% for e in events %}
-        <div class="event" data-id="{{ e.id }}">
+        <div class="event" data-id="{{ e.id }}" id="event_{{ e.id }}">
           {{ e.name }} <br />
           {{ e.start_time }} - {{ e.end_time }}
           <div class="eventDescription">