4 files changed, 69 insertions, 22 deletions

diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 74b44c314..769facdc7 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -183,8 +183,7 @@ function fixmystreet_onload() {
 
 $(function(){
 
-    var perm = new OpenLayers.Control.Permalink('map_permalink');
-    set_map_config(perm);
+    set_map_config();
 
     fixmystreet.map = new OpenLayers.Map("map", {
         controls: fixmystreet.controls,
@@ -207,6 +206,7 @@ $(function(){
         );
         fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3);
     }
+
     if ($('#map_box').data('size')=='full') {
         // TODO Work better with window resizing, this is pretty 'set up' only at present
         var q = $(window).width() / 4;
@@ -238,16 +238,6 @@ $(function(){
         click.activate();
     }
 
-    /* To let permalink not be caught by the Click layer, answer found
-     * at http://www.mail-archive.com/users@openlayers.org/msg12958.html
-     * Not sure why you can't use eventListeners or events.register...
-     */
-    OpenLayers.Event.observe( perm.element, "click", function(e) {
-        OpenLayers.Event.stop(e);
-        location.href = OpenLayers.Event.element(e).href;
-        return false;
-    });
-
     $(window).hashchange(function(){
         if (location.hash) { return; }
         // Okay, back to around view.
@@ -370,6 +360,48 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
     }, 
 
     trigger: function(e) {
+        if ($('html').hasClass('mobile') && fixmystreet.page != 'new') {
+            if (fixmystreet.page == 'mobile-full-map') {
+                this.locate_report(e);
+                $('#map_box').css({
+                    zIndex: 'auto', position: 'static',
+                    width: 'auto', height: '10em',
+                    margin: '0 -1em'
+                });
+                fixmystreet.map.updateSize();
+                // Also remove panzoom and permalink?
+            } else {
+                this.mobile_full_screen_map(e);
+            }
+        } else {
+            this.locate_report(e);
+        }
+    },
+
+    mobile_full_screen_map: function(e) {
+        if ( fixmystreet.markers.getVisibility() ) {
+            $('#hide_pins_link').click();
+        }
+        fixmystreet.map.addControls([
+            new OpenLayers.Control.Navigation({ zoomWheelEnabled: false }),
+            new OpenLayers.Control.Permalink(),
+            new OpenLayers.Control.PanZoomFMS()
+        ]);
+        $('#map_box').css({
+            zIndex: 0, position: 'fixed',
+            top: 0, left: 0, right: 0, bottom: 0,
+            width: '100%', height: '100%',
+            margin: 0
+        });
+        // Also need to move green banner, add close button, etc.
+        fixmystreet.map.updateSize();
+        fixmystreet.page = 'mobile-full-map';
+        // To make sure the click control is on top
+        this.deactivate();
+        this.activate();
+    },
+
+    locate_report: function(e) {
         var lonlat = fixmystreet.map.getLonLatFromViewPortPx(e.xy);
         if (fixmystreet.page == 'new') {
             /* Already have a pin */
@@ -431,6 +463,15 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                 fixmystreet.map.pan(-w, 0, { animate: false });
             }
         }
+
+        if (fixmystreet.page == 'mobile-full-map') {
+            lonlat.transform(
+                new OpenLayers.Projection("EPSG:4326"),
+                fixmystreet.map.getProjectionObject()
+            );
+            fixmystreet.map.setCenter(lonlat);
+        }
+
         fixmystreet.page = 'new';
         location.hash = 'report';
     }
diff --git a/web/js/map-OpenStreetMap.js b/web/js/map-OpenStreetMap.js
index 9d226f6a7..92d98ea4c 100644
--- a/web/js/map-OpenStreetMap.js
+++ b/web/js/map-OpenStreetMap.js
@@ -3,7 +3,7 @@ function set_map_config(perm) {
         new OpenLayers.Control.ArgParser(),
         //new OpenLayers.Control.LayerSwitcher(),
         new OpenLayers.Control.Navigation(),
-        perm,
+        new OpenLayers.Control.Permalink(),
         new OpenLayers.Control.PermalinkFMS('osm_link', 'http://www.openstreetmap.org/'),
         new OpenLayers.Control.PanZoomFMS()
     ];
diff --git a/web/js/map-bing-ol.js b/web/js/map-bing-ol.js
index 588f8d45b..2786f63cf 100644
--- a/web/js/map-bing-ol.js
+++ b/web/js/map-bing-ol.js
@@ -1,12 +1,18 @@
 function set_map_config(perm) {
-    fixmystreet.controls = [
-        new OpenLayers.Control.Attribution(),
-        new OpenLayers.Control.ArgParser(),
-        new OpenLayers.Control.Navigation({ zoomWheelEnabled: false }),
-        perm,
-        //new OpenLayers.Control.ZoomPanel()
-        new OpenLayers.Control.PanZoomFMS()
-    ];
+    if ($('html').hasClass('mobile')) {
+        fixmystreet.controls = [
+            new OpenLayers.Control.Attribution(),
+            new OpenLayers.Control.ArgParser()
+        ];
+    } else {
+        fixmystreet.controls = [
+            new OpenLayers.Control.Attribution(),
+            new OpenLayers.Control.ArgParser(),
+            new OpenLayers.Control.Navigation({ zoomWheelEnabled: false }),
+            new OpenLayers.Control.Permalink('map_permalink'),
+            new OpenLayers.Control.PanZoomFMS()
+        ];
+    }
     fixmystreet.map_type = OpenLayers.Layer.Bing;
 }
 
diff --git a/web/js/map-streetview.js b/web/js/map-streetview.js
index 99fdca983..9cdd82072 100644
--- a/web/js/map-streetview.js
+++ b/web/js/map-streetview.js
@@ -3,7 +3,7 @@ function set_map_config(perm) {
         new OpenLayers.Control.ArgParser(),
         //new OpenLayers.Control.LayerSwitcher(),
         new OpenLayers.Control.Navigation(),
-        perm,
+        new OpenLayers.Control.Permalink(),
         new OpenLayers.Control.PanZoomFMS()
     ];
     fixmystreet.map_type = OpenLayers.Layer.StreetView;