From 7a56e9ddd5fcecde97e8b28dfbf2d6b4c1f605e6 Mon Sep 17 00:00:00 2001
From: sanj <sanj@sanj>
Date: Sun, 19 Sep 2010 04:43:23 +0530
Subject: [PATCH] do something when user hovers over point on map.

---
 vurbanism/static/js/vurbanism.js  | 13 ++++++++++---
 vurbanism/templates/flyovers.html |  9 ++++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/vurbanism/static/js/vurbanism.js b/vurbanism/static/js/vurbanism.js
index bbc9fb8..75659a8 100644
--- a/vurbanism/static/js/vurbanism.js
+++ b/vurbanism/static/js/vurbanism.js
@@ -58,20 +58,23 @@ $(function() {
   map.addLayers(layers);
   map.setCenter(center, 12);
 
-  mapControl = new OpenLayers.Control.SelectFeature(layers[1], {hover: false});
+  mapControl = new OpenLayers.Control.SelectFeature(layers[1], {hover: true});
   zoomControl = new OpenLayers.Control.ZoomToMaxExtent();
   map.addControl(mapControl);
 //  map.addControl(zoomControl);
   mapControl.activate();
 //  zoomControl.activate();
   layers[1].events.on({
-    'featureselected': onFeatureSelect
+    'featureselected': onFeatureSelect,
+    'featureunselected': onFeatureUnselect
   });  
 });
 
 
 function onFeatureSelect(f) {
-  $.noop();
+  var id = f.feature.attributes.id;
+//  $('img').removeClass('mapSelect');
+  $('[data-id=' + id + ']').find('img').addClass("mapSelect");
 /*
   var id = f.feature.attributes.id;
   $.getJSON("flyover", {'id': id}, function(json) {
@@ -84,6 +87,10 @@ function onFeatureSelect(f) {
 */
 }
 
+function onFeatureUnselect(f) {
+  var id = f.feature.attributes.id;
+  $('[data-id=' + id + ']').find('img').removeClass("mapSelect");
+}
 
 //will highlight the feature id's passed in arr
 function highlightFeatures(arr) {
diff --git a/vurbanism/templates/flyovers.html b/vurbanism/templates/flyovers.html
index 3f0f0ef..5585027 100644
--- a/vurbanism/templates/flyovers.html
+++ b/vurbanism/templates/flyovers.html
@@ -58,12 +58,14 @@ a img {
 
 .imageWrapper {
   float: left;
-  width: 140px;
+  width: 100px;
+  height: 100px;
   text-align: center;
 }
 
 .imagesWrapper {
   overflow: auto;
+  margin-top: 10px;
 }
 
 .videoCategory {
@@ -102,6 +104,11 @@ a img {
   -webkit-box-shadow: 0px 0px 1.5em;
   box-shadow: 0px 0px 1.5em;
   }
+
+.mapSelect {
+  width: 100px;
+  height: 100px;
+}
   </style>
   <title>Vertical Urbanism: Flyovers in Mumbai</title>
   <link rel="stylesheet" type="text/css" href="/static/css/colorbox.css" />