Merge remote-tracking branch 'origin/crosshairs-front-page' into phonegap-jquery-mobile

Conflicts:
	phonegap/www/css/mobile.css
	phonegap/www/index.html
	phonegap/www/js/fixmystreet.js

2 files changed, 73 insertions, 1 deletions

diff --git a/www/js/fixmystreet.js b/www/js/fixmystreet.js
index 878706e..71a4f96 100644
--- a/www/js/fixmystreet.js
+++ b/www/js/fixmystreet.js
@@ -1,4 +1,4 @@
-/*
+/* -*- mode: espresso; espresso-indent-level: 4; indent-tabs-mode: nil -*-
  * fixmystreet.js
  * FixMyStreet JavaScript
  */
@@ -118,6 +118,33 @@ $(document).bind('pageshow', function(){
                 margin: ''
             });
         }
+
+        $('span.report-a-problem-btn').on('click.reportBtn', function(){
+            $('html, body').animate({scrollTop:0}, 500);
+        }).css({ cursor:'pointer' }).on('hover.reportBtn', function(){
+            $(this).toggleClass('hover');
+        });
+
+        var crosshairsControls, i, markHere, newX, newY;
+
+        if (typeof fixmystreet !== 'undefined' && typeof fixmystreet.map !== "undefined") {
+            // Update the position of any crosshairs controls:
+            crosshairsControls = fixmystreet.map.getControlsByClass(
+                "OpenLayers.Control.Crosshairs");
+            for (i = 0; i < crosshairsControls.length; ++i) {
+                crosshairsControls[i].reposition();
+            }
+            // Also reposition the "Tap here to mark this point" button:
+            console.log('reposition mark-here');
+            markHere = $('#mark-here');
+            newX = $(window).width() / 2 - markHere.width() / 2;
+            newY = $(window).height() * 4 / 5 - markHere.height() / 2;
+            markHere.css({
+                left: newX + "px",
+                top: newY + "px"
+            });
+            console.log( newX + ', ' + newY );
+        }
     });
 
     //add mobile class if small screen
diff --git a/www/js/map-OpenLayers.js b/www/js/map-OpenLayers.js
index 3c136cf..7edcffa 100644
--- a/www/js/map-OpenLayers.js
+++ b/www/js/map-OpenLayers.js
@@ -1,3 +1,5 @@
+// -*- mode: espresso; espresso-indent-level: 4; indent-tabs-mode: nil -*-
+
 // This function might be passed either an OpenLayers.LonLat (so has
 // lon and lat) or an OpenLayers.Geometry.Point (so has x and y)
 function fixmystreet_update_pin(lonlat) {
@@ -204,6 +206,7 @@ function fixmystreet_onload() {
         }
     });
 
+    fixmystreet.map.addControl( new OpenLayers.Control.Crosshairs(null) );
 }
 OpenLayers.Map.prototype.getCurrentSize = function() {
     var mapDiv = $(this.div);
@@ -369,6 +372,48 @@ $(document).delegate('#around-page', 'pageshow', show_map );
 $(document).delegate('#report-page', 'pageshow', show_map );
 
 
+OpenLayers.Control.Crosshairs = OpenLayers.Class.create();
+OpenLayers.Control.Crosshairs.CROSSHAIR_SIDE = 100;
+OpenLayers.Control.Crosshairs.DIV_ID = "OpenLayers_Control_Crosshairs_crosshairs";
+OpenLayers.Control.Crosshairs.prototype =
+  OpenLayers.Class.inherit( OpenLayers.Control, {
+    element: null,
+    position: null,
+
+    initialize: function(element) {
+        OpenLayers.Control.prototype.initialize.apply(this, arguments);
+        this.element = OpenLayers.Util.getElement(element);
+        this.imageSize = new OpenLayers.Size(OpenLayers.Control.Crosshairs.CROSSHAIR_SIDE,
+                                             OpenLayers.Control.Crosshairs.CROSSHAIR_SIDE);
+    },
+
+    draw: function() {
+        var position;
+        OpenLayers.Control.prototype.draw.apply(this, arguments);
+        position = this.getIdealPosition();
+        this.buttons = new Array();
+        var imgLocation = OpenLayers.Util.getImagesLocation() + "crosshairs-100.png";
+        return OpenLayers.Util.createAlphaImageDiv(OpenLayers.Control.Crosshairs.DIV_ID,
+                 position, this.imageSize, imgLocation, "absolute");
+    },
+
+    getIdealPosition: function() {
+        this.map.updateSize();
+        var mapSize = this.map.getSize();
+        return new OpenLayers.Pixel((mapSize.w / 2) - (this.imageSize.w / 2),
+                                    (2 * mapSize.h / 5) - (this.imageSize.h / 2));
+    },
+
+    reposition: function() {
+        var position = this.getIdealPosition();
+        $('#' + OpenLayers.Control.Crosshairs.DIV_ID).css({
+            left: position.x,
+            top: position.y});
+    },
+
+    CLASS_NAME: "OpenLayers.Control.Crosshairs"
+});
+
 /* Overridding the buttonDown function of PanZoom so that it does
    zoomTo(0) rather than zoomToMaxExtent()
 */