From 194a8babca86e5d62d430d8885100a39093ba7c7 Mon Sep 17 00:00:00 2001
From: sanj <sanj@sanj>
Date: Tue, 26 Oct 2010 03:40:23 +0200
Subject: [PATCH] gmaps key, small fixes

---
 rizk/egypt/views.py      |  3 ++-
 rizk/static/css/rizk.css |  8 ++++++++
 rizk/static/js/rizk.js   | 13 +++++++++++++
 rizk/templates/rizk.html |  6 +++---
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/rizk/egypt/views.py b/rizk/egypt/views.py
index 53953a7..60927fa 100644
--- a/rizk/egypt/views.py
+++ b/rizk/egypt/views.py
@@ -5,6 +5,7 @@ from django.shortcuts import get_object_or_404
 from oxdjango.shortcuts import render_to_json_response
 from django.core.mail import send_mail
 from models import *
+from settings import GOOGLE_MAPS_API_KEY as gkey
 
 QUESTIONS = {
   '1problems': 'What problems do flyover and skywalk projects create?',
@@ -24,7 +25,7 @@ def geojson(request):
     
 def index(request):
   events = Event.objects.all().order_by('start_time')
-  return render_to_response('rizk.html', {'events': events})
+  return render_to_response('rizk.html', { 'events': events, 'google_key': gkey })
 
 def flyover(request):
   i = request.GET['id']
diff --git a/rizk/static/css/rizk.css b/rizk/static/css/rizk.css
index 4bca6bd..6f6991b 100644
--- a/rizk/static/css/rizk.css
+++ b/rizk/static/css/rizk.css
@@ -77,6 +77,14 @@ a img {
   color: red;
 }
 
+.event {
+  cursor: pointer;
+}
+
+.eventSelected {
+  color: blue;
+}
+
 .videoCategory {
   background: #ff6066;
 }
diff --git a/rizk/static/js/rizk.js b/rizk/static/js/rizk.js
index 9fba140..487ca79 100644
--- a/rizk/static/js/rizk.js
+++ b/rizk/static/js/rizk.js
@@ -90,7 +90,14 @@ $(function() {
 
   $('.event').click(function(e) {
 //    e.stopPropagation();
+    if ($(this).hasClass('eventSelected')) {
+      return false;
+    } else {
+      $('.eventSelected').removeClass('eventSelected');
+      $(this).addClass('eventSelected');
+    }
     var eventId = $(this).data('id');
+    $('#media').html("Loading...");
     $.getJSON("eventMedia", {'id': eventId}, function(data) {
 //      console.log(data);
       displayMedia(data);
@@ -109,7 +116,13 @@ function displayMedia(data) {
 }
 
 function onFeatureSelect(f) {
+  if (currentlySelectedFeature == f) {
+    return false;
+  } else {
+    currentlySelectedFeature = f;
+  }
   var id = f.feature.attributes.id;
+  $('#media').html("Loading...");
   $.getJSON("locationMedia", {'id': f.feature.attributes.id }, function(data) {
     displayMedia(data);
   });
diff --git a/rizk/templates/rizk.html b/rizk/templates/rizk.html
index ffd6dcf..aa95a1d 100644
--- a/rizk/templates/rizk.html
+++ b/rizk/templates/rizk.html
@@ -11,7 +11,7 @@
   <script type="text/javascript" src="/static/js/jquery.js"></script>
   <script type="text/javascript" src="/static/js/jquery.colorbox-min.js"></script>
   <script type="text/javascript" src="/static/js/openlayers/OpenLayers.js"></script>
-  <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAsn1j-ZGGtRgZ9aMJPCZbRxTEwe8r4EmncxniwLCEI2F-aeUoNRTBAUi3uvVAsZpLkcO78Ryd18Hfaw'></script>
+  <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ google_key }}'></script>
 
   <script type="text/javascript" src="/static/js/rizk.js"></script>
 
@@ -77,8 +77,8 @@
     <div id="timeline">
       {% for e in events %}
         <div class="event" data-id="{{ e.id }}" id="event_{{ e.id }}">
-          {{ e.name }} <br />
-          {{ e.start_time }} - {{ e.end_time }}
+          <div class="eventName">{{ e.name }}</div> <br />
+          <div class="eventDate">{{ e.start_time }} - {{ e.end_time }}</div>
           <div class="eventDescription">
             {{ e.description }}
           </div>