From 962b881830f9edb4f0b0b5aac3ece87c80af1f0a Mon Sep 17 00:00:00 2001
From: Matthew Somerville <matthew@mysociety.org>
Date: Fri, 17 Jun 2016 13:57:34 +0100
Subject: Tidy up JavaScript functions.

Split big functions into smaller more descriptive ones.
---
 web/js/map-OpenLayers.js | 979 +++++++++++++++++++++--------------------------
 1 file changed, 442 insertions(+), 537 deletions(-)

(limited to 'web/js/map-OpenLayers.js')

diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 361bd0e96..797502533 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -1,498 +1,489 @@
-// 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) {
-    lonlat = lonlat.clone().transform(
-        fixmystreet.map.getProjectionObject(),
-        new OpenLayers.Projection("EPSG:4326")
-    );
-    document.getElementById('fixmystreet.latitude').value = lonlat.lat || lonlat.y;
-    document.getElementById('fixmystreet.longitude').value = lonlat.lon || lonlat.x;
-
-    $.getJSON('/report/new/ajax', {
-        latitude: $('#fixmystreet\\.latitude').val(),
-        longitude: $('#fixmystreet\\.longitude').val()
-    }, function(data) {
-        if (data.error) {
-            if (!$('#side-form-error').length) {
-                $('<div id="side-form-error"/>').insertAfter($('#side-form'));
-            }
-            $('#side-form-error').html('<h1>' + translation_strings.reporting_a_problem + '</h1><p>' + data.error + '</p>').show();
-            $('#side-form').hide();
-            $('body').removeClass('with-notes');
-            return;
+var fixmystreet = fixmystreet || {};
+
+(function() {
+
+    fixmystreet.maps = {
+      // This function might be passed either an OpenLayers.LonLat (so has
+      // lon and lat) or an OpenLayers.Geometry.Point (so has x and y)
+      update_pin: function(lonlat) {
+        lonlat = lonlat.clone().transform(
+            fixmystreet.map.getProjectionObject(),
+            new OpenLayers.Projection("EPSG:4326")
+        );
+
+        document.getElementById('fixmystreet.latitude').value = lonlat.lat || lonlat.y;
+        document.getElementById('fixmystreet.longitude').value = lonlat.lon || lonlat.x;
+      },
+
+      begin_report: function(lonlat) {
+        if (fixmystreet.page == 'new') {
+            /* Already have a pin */
+            fixmystreet.markers.features[0].move(lonlat);
+        } else {
+            var markers = fixmystreet.maps.markers_list( [ [ lonlat.lat, lonlat.lon, 'green' ] ], false );
+            fixmystreet.bbox_strategy.deactivate();
+            fixmystreet.markers.removeAllFeatures();
+            fixmystreet.markers.addFeatures( markers );
+            drag.activate();
         }
-        $('#side-form, #site-logo').show();
-        var old_category = $("select#form_category").val();
-        $('#councils_text').html(data.councils_text);
-        $('#form_category_row').html(data.category);
-        if ($("select#form_category option[value=\""+old_category+"\"]").length) {
-            $("select#form_category").val(old_category);
+
+        // check to see if markers are visible. We click the
+        // link so that it updates the text in case they go
+        // back
+        if ( ! fixmystreet.markers.getVisibility() ) {
+            fixmystreet.state_pins_were_hidden = true;
+            $('#hide_pins_link').click();
         }
-        if ( data.extra_name_info && !$('#form_fms_extra_title').length ) {
-            // there might be a first name field on some cobrands
-            var lb = $('#form_first_name').prev();
-            if ( lb.length === 0 ) { lb = $('#form_name').prev(); }
-            lb.before(data.extra_name_info);
+      },
+
+      markers_list: function(pins, transform) {
+        var markers = [];
+        var size = fixmystreet.maps.marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset);
+        for (var i=0; i<pins.length; i++) {
+            var pin = pins[i];
+            var loc = new OpenLayers.Geometry.Point(pin[1], pin[0]);
+            if (transform) {
+                // The Strategy does this for us, so don't do it in that case.
+                loc.transform(
+                    new OpenLayers.Projection("EPSG:4326"),
+                    fixmystreet.map.getProjectionObject()
+                );
+            }
+            var marker = new OpenLayers.Feature.Vector(loc, {
+                colour: pin[2],
+                size: pin[5] || size,
+                faded: 0,
+                id: pin[3],
+                title: pin[4] || ''
+            });
+            markers.push( marker );
         }
+        return markers;
+      },
 
-        // If the category filter appears on the map and the user has selected
-        // something from it, then pre-fill the category field in the report,
-        // if it's a value already present in the drop-down.
-        var category = $("#filter_categories").val();
-        if (category !== undefined && $("#form_category option[value="+category+"]").length) {
-            $("#form_category").val(category);
+      markers_resize: function() {
+        var size = fixmystreet.maps.marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset);
+        for (var i = 0; i < fixmystreet.markers.features.length; i++) {
+            fixmystreet.markers.features[i].attributes.size = size;
         }
+        fixmystreet.markers.redraw();
+      },
 
-        var category_select = $("select#form_category");
-        if (category_select.val() != '-- Pick a category --') {
-            category_select.change();
+      marker_size_for_zoom: function(zoom) {
+        if (zoom >= 15) {
+            return 'normal';
+        } else if (zoom >= 13) {
+            return 'small';
+        } else {
+            return 'mini';
         }
-    });
+      }
+    };
 
-    if (!$('#side-form-error').is(':visible')) {
-        $('#side-form, #site-logo').show();
-        window.scrollTo(0, 0);
-    }
-}
-
-function fixmystreet_activate_drag() {
-    fixmystreet.drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, {
-        onComplete: function(feature, e) {
-            fixmystreet_update_pin( feature.geometry );
-        }
-    } );
-    fixmystreet.map.addControl( fixmystreet.drag );
-    fixmystreet.drag.activate();
-}
-
-function fixmystreet_zoomToBounds(bounds) {
-    if (!bounds) { return; }
-    var center = bounds.getCenterLonLat();
-    var z = fixmystreet.map.getZoomForExtent(bounds);
-    if ( z < 13 && $('html').hasClass('mobile') ) {
-        z = 13;
-    }
-    fixmystreet.map.setCenter(center, z);
-}
-
-function fms_markers_list(pins, transform) {
-    var markers = [];
-    var size = fms_marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset);
-    for (var i=0; i<pins.length; i++) {
-        var pin = pins[i];
-        var loc = new OpenLayers.Geometry.Point(pin[1], pin[0]);
-        if (transform) {
-            // The Strategy does this for us, so don't do it in that case.
-            loc.transform(
-                new OpenLayers.Projection("EPSG:4326"),
-                fixmystreet.map.getProjectionObject()
-            );
+    var drag = {
+        activate: function() {
+            this._drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, {
+                onComplete: function(feature, e) {
+                    fixmystreet.update_pin( feature.geometry );
+                }
+            } );
+            fixmystreet.map.addControl( this._drag );
+            this._drag.activate();
+        },
+        deactivate: function() {
+            this._drag.deactivate();
         }
-        var marker = new OpenLayers.Feature.Vector(loc, {
-            colour: pin[2],
-            size: pin[5] || size,
-            faded: 0,
-            id: pin[3],
-            title: pin[4] || ''
-        });
-        markers.push( marker );
-    }
-    return markers;
-}
-
-function fms_marker_size_for_zoom(zoom) {
-    if (zoom >= 15) {
-        return 'normal';
-    } else if (zoom >= 13) {
-        return 'small';
-    } else {
-        return 'mini';
-    }
-}
+    };
 
-function fms_markers_resize() {
-    var size = fms_marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset);
-    for (var i = 0; i < fixmystreet.markers.features.length; i++) {
-        fixmystreet.markers.features[i].attributes.size = size;
-    }
-    fixmystreet.markers.redraw();
-}
-
-// `markers.redraw()` in fms_markers_highlight will trigger an
-// `overFeature` event if the mouse cursor is still over the same
-// marker on the map, which would then run fms_markers_highlight
-// again, causing an infinite flicker while the cursor remains over
-// the same marker. We really only want to redraw the markers when
-// the cursor moves from one marker to another (ie: when there is an
-// overFeature followed by an outFeature followed by an overFeature).
-// Therefore, we keep track of the previous event in
-// fixmystreet.latest_map_hover_event and only call fms_markers_highlight
-// if we know the previous event was different to the current one.
-// (See the `overFeature` and `outFeature` callbacks inside of
-// fixmystreet.select_feature).
-
-function fms_markers_highlight(problem_id) {
-    for (var i = 0; i < fixmystreet.markers.features.length; i++) {
-        if (typeof problem_id == 'undefined') {
-            // There is no highlighted marker, so unfade this marker
-            fixmystreet.markers.features[i].attributes.faded = 0;
-        } else if (problem_id == fixmystreet.markers.features[i].attributes.id) {
-            // This is the highlighted marker, unfade it
-            fixmystreet.markers.features[i].attributes.faded = 0;
-        } else {
-            // This is not the hightlighted marker, fade it
-            fixmystreet.markers.features[i].attributes.faded = 1;
+    function zoomToBounds(bounds) {
+        if (!bounds) { return; }
+        var center = bounds.getCenterLonLat();
+        var z = fixmystreet.map.getZoomForExtent(bounds);
+        if ( z < 13 && $('html').hasClass('mobile') ) {
+            z = 13;
         }
+        fixmystreet.map.setCenter(center, z);
     }
-    fixmystreet.markers.redraw();
-}
 
-function fms_sidebar_highlight(problem_id) {
-    if (typeof problem_id !== 'undefined') {
-        var $a = $('.item-list--reports a[href$="' + problem_id + '"]');
-        $a.parent().addClass('hovered');
-    } else {
-        $('.item-list--reports .hovered').removeClass('hovered');
-    }
-}
-
-function fms_marker_click(problem_id) {
-    var $a = $('.item-list--reports a[href$="' + problem_id + '"]');
-    $a[0] && $a[0].click();
-}
-
-function fms_categories_or_status_changed() {
-    // If the category or status has changed we need to re-fetch map markers
-    fixmystreet.markers.refresh({force: true});
-}
-
-function fixmystreet_onload() {
-    if ( fixmystreet.area.length ) {
-        for (var i=0; i<fixmystreet.area.length; i++) {
-            var area = new OpenLayers.Layer.Vector("KML", {
-                strategies: [ new OpenLayers.Strategy.Fixed() ],
-                protocol: new OpenLayers.Protocol.HTTP({
-                    url: "/mapit/area/" + fixmystreet.area[i] + ".kml?simplify_tolerance=0.0001",
-                    format: new OpenLayers.Format.KML()
-                })
-            });
-            fixmystreet.map.addLayer(area);
-            if ( fixmystreet.area.length == 1 ) {
-                area.events.register('loadend', null, function(a,b,c) {
-                    if ( fixmystreet.area_format ) {
-                        area.styleMap.styles['default'].defaultStyle = fixmystreet.area_format;
-                    }
-                    fixmystreet_zoomToBounds( area.getDataExtent() );
-                });
+    // `markers.redraw()` in markers_highlight will trigger an
+    // `overFeature` event if the mouse cursor is still over the same
+    // marker on the map, which would then run markers_highlight
+    // again, causing an infinite flicker while the cursor remains over
+    // the same marker. We really only want to redraw the markers when
+    // the cursor moves from one marker to another (ie: when there is an
+    // overFeature followed by an outFeature followed by an overFeature).
+    // Therefore, we keep track of the previous event in
+    // fixmystreet.latest_map_hover_event and only call markers_highlight
+    // if we know the previous event was different to the current one.
+    // (See the `overFeature` and `outFeature` callbacks inside of
+    // fixmystreet.select_feature).
+
+    function markers_highlight(problem_id) {
+        for (var i = 0; i < fixmystreet.markers.features.length; i++) {
+            if (typeof problem_id == 'undefined') {
+                // There is no highlighted marker, so unfade this marker
+                fixmystreet.markers.features[i].attributes.faded = 0;
+            } else if (problem_id == fixmystreet.markers.features[i].attributes.id) {
+                // This is the highlighted marker, unfade it
+                fixmystreet.markers.features[i].attributes.faded = 0;
+            } else {
+                // This is not the hightlighted marker, fade it
+                fixmystreet.markers.features[i].attributes.faded = 1;
             }
         }
+        fixmystreet.markers.redraw();
     }
 
-    var pin_layer_style_map = new OpenLayers.StyleMap({
-        'default': new OpenLayers.Style({
-            graphicTitle: "${title}",
-            graphicOpacity: 1,
-            graphicZIndex: 11,
-            backgroundGraphicZIndex: 10
-        })
-    });
-    pin_layer_style_map.addUniqueValueRules('default', 'size', {
-        'normal': {
-            externalGraphic: fixmystreet.pin_prefix + "pin-${colour}.png",
-            graphicWidth: 48,
-            graphicHeight: 64,
-            graphicXOffset: -24,
-            graphicYOffset: -64,
-            backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow.png",
-            backgroundWidth: 60,
-            backgroundHeight: 30,
-            backgroundXOffset: -7,
-            backgroundYOffset: -30,
-            popupYOffset: -40
-        },
-        'big': {
-            externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-big.png",
-            graphicWidth: 78,
-            graphicHeight: 105,
-            graphicXOffset: -39,
-            graphicYOffset: -105,
-            backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow-big.png",
-            backgroundWidth: 88,
-            backgroundHeight: 40,
-            backgroundXOffset: -10,
-            backgroundYOffset: -35
-        },
-        'small': {
-            externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-small.png",
-            graphicWidth: 24,
-            graphicHeight: 32,
-            graphicXOffset: -12,
-            graphicYOffset: -32,
-            backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow-small.png",
-            backgroundWidth: 30,
-            backgroundHeight: 15,
-            backgroundXOffset: -4,
-            backgroundYOffset: -15,
-            popupYOffset: -20
-        },
-        'mini': {
-            externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-mini.png",
-            graphicWidth: 16,
-            graphicHeight: 20,
-            graphicXOffset: -8,
-            graphicYOffset: -20,
-            popupYOffset: -10
-        }
-    });
-    pin_layer_style_map.addUniqueValueRules('default', 'faded', {
-        0: {
-            graphicOpacity: 1
-        },
-        1: {
-            graphicOpacity: 0.15
+    function sidebar_highlight(problem_id) {
+        if (typeof problem_id !== 'undefined') {
+            var $a = $('.item-list--reports a[href$="' + problem_id + '"]');
+            $a.parent().addClass('hovered');
+        } else {
+            $('.item-list--reports .hovered').removeClass('hovered');
         }
-    });
-    var pin_layer_options = {
-        rendererOptions: {
-            yOrdering: true
-        },
-        styleMap: pin_layer_style_map
-    };
-    if (fixmystreet.page == 'around') {
-        fixmystreet.bbox_strategy = fixmystreet.bbox_strategy || new OpenLayers.Strategy.FixMyStreet();
-        pin_layer_options.strategies = [ fixmystreet.bbox_strategy ];
-        pin_layer_options.protocol = new OpenLayers.Protocol.FixMyStreet({
-            url: '/ajax',
-            params: fixmystreet.all_pins ? { all_pins: 1 } : { },
-            format: new OpenLayers.Format.FixMyStreet()
-        });
     }
-    fixmystreet.markers = new OpenLayers.Layer.Vector("Pins", pin_layer_options);
-    fixmystreet.markers.events.register( 'loadend', fixmystreet.markers, function(evt) {
-        if (fixmystreet.map.popups.length) {
-            fixmystreet.map.removePopup(fixmystreet.map.popups[0]);
-        }
-    });
 
-    var markers = fms_markers_list( fixmystreet.pins, true );
-    fixmystreet.markers.addFeatures( markers );
-
-    if (fixmystreet.page == 'around' || fixmystreet.page == 'reports' || fixmystreet.page == 'my') {
-        fixmystreet.select_feature = new OpenLayers.Control.SelectFeature(
-            fixmystreet.markers,
-            {
-                hover: true,
-                // Override clickFeature so that we can use it even though
-                // hover is true. http://gis.stackexchange.com/a/155675
-                clickFeature: function (feature) {
-                    fms_marker_click(feature.attributes.id);
-                },
-                overFeature: function (feature) {
-                    if (fixmystreet.latest_map_hover_event != 'overFeature') {
-                        document.getElementById('map').style.cursor = 'pointer';
-                        fms_markers_highlight(feature.attributes.id);
-                        fms_sidebar_highlight(feature.attributes.id);
-                        fixmystreet.latest_map_hover_event = 'overFeature';
-                    }
-                },
-                outFeature: function (feature) {
-                    if (fixmystreet.latest_map_hover_event != 'outFeature') {
-                        document.getElementById('map').style.cursor = '';
-                        fms_markers_highlight();
-                        fms_sidebar_highlight();
-                        fixmystreet.latest_map_hover_event = 'outFeature';
-                    }
-                }
-            }
-        );
-        fixmystreet.map.addControl( fixmystreet.select_feature );
-        fixmystreet.select_feature.activate();
-        fixmystreet.map.events.register( 'zoomend', null, fms_markers_resize );
-
-        // If the category filter dropdown exists on the page set up the
-        // event handlers to populate it and react to it changing
-        if ($("select#filter_categories").length) {
-            $("body").on("change", "#filter_categories", fms_categories_or_status_changed);
-        }
-        // Do the same for the status dropdown
-        if ($("select#statuses").length) {
-            $("body").on("change", "#statuses", fms_categories_or_status_changed);
-        }
-    } else if (fixmystreet.page == 'new') {
-        fixmystreet_activate_drag();
+    function marker_click(problem_id) {
+        var $a = $('.item-list--reports a[href$="' + problem_id + '"]');
+        $a[0] && $a[0].click();
     }
-    fixmystreet.map.addLayer(fixmystreet.markers);
 
-    if ( fixmystreet.zoomToBounds ) {
-        fixmystreet_zoomToBounds( fixmystreet.markers.getDataExtent() );
+    function categories_or_status_changed() {
+        // If the category or status has changed we need to re-fetch map markers
+        fixmystreet.markers.refresh({force: true});
     }
 
-    $('#hide_pins_link').click(function(e) {
-        e.preventDefault();
-        var showhide = [
-            'Show pins', 'Hide pins',
-            'Dangos pinnau', 'Cuddio pinnau',
-            "Vis nåler", "Skjul nåler",
-            "Zeige Stecknadeln", "Stecknadeln ausblenden"
-        ];
-        for (var i=0; i<showhide.length; i+=2) {
-            if (this.innerHTML == showhide[i]) {
-                fixmystreet.markers.setVisibility(true);
-                fixmystreet.select_feature.activate();
-                this.innerHTML = showhide[i+1];
-            } else if (this.innerHTML == showhide[i+1]) {
-                fixmystreet.markers.setVisibility(false);
-                fixmystreet.select_feature.deactivate();
-                this.innerHTML = showhide[i];
+    function onload() {
+        if ( fixmystreet.area.length ) {
+            for (var i=0; i<fixmystreet.area.length; i++) {
+                var area = new OpenLayers.Layer.Vector("KML", {
+                    strategies: [ new OpenLayers.Strategy.Fixed() ],
+                    protocol: new OpenLayers.Protocol.HTTP({
+                        url: "/mapit/area/" + fixmystreet.area[i] + ".kml?simplify_tolerance=0.0001",
+                        format: new OpenLayers.Format.KML()
+                    })
+                });
+                fixmystreet.map.addLayer(area);
+                if ( fixmystreet.area.length == 1 ) {
+                    area.events.register('loadend', null, function(a,b,c) {
+                        if ( fixmystreet.area_format ) {
+                            area.styleMap.styles['default'].defaultStyle = fixmystreet.area_format;
+                        }
+                        zoomToBounds( area.getDataExtent() );
+                    });
+                }
             }
         }
-    });
 
-    $('#all_pins_link').click(function(e) {
-        e.preventDefault();
-        fixmystreet.markers.setVisibility(true);
-        var texts = [
-            'en', 'Show old', 'Hide old',
-            'nb', 'Vis gamle', 'Skjul gamle',
-            'cy', 'Cynnwys hen adroddiadau', 'Cuddio hen adroddiadau'
-        ];
-        for (var i=0; i<texts.length; i+=3) {
-            if (this.innerHTML == texts[i+1]) {
-                this.innerHTML = texts[i+2];
-                fixmystreet.markers.protocol.options.params = { all_pins: 1 };
-                fixmystreet.markers.refresh( { force: true } );
-                lang = texts[i];
-            } else if (this.innerHTML == texts[i+2]) {
-                this.innerHTML = texts[i+1];
-                fixmystreet.markers.protocol.options.params = { };
-                fixmystreet.markers.refresh( { force: true } );
-                lang = texts[i];
+        var pin_layer_style_map = new OpenLayers.StyleMap({
+            'default': new OpenLayers.Style({
+                graphicTitle: "${title}",
+                graphicOpacity: 1,
+                graphicZIndex: 11,
+                backgroundGraphicZIndex: 10
+            })
+        });
+        pin_layer_style_map.addUniqueValueRules('default', 'size', {
+            'normal': {
+                externalGraphic: fixmystreet.pin_prefix + "pin-${colour}.png",
+                graphicWidth: 48,
+                graphicHeight: 64,
+                graphicXOffset: -24,
+                graphicYOffset: -64,
+                backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow.png",
+                backgroundWidth: 60,
+                backgroundHeight: 30,
+                backgroundXOffset: -7,
+                backgroundYOffset: -30,
+                popupYOffset: -40
+            },
+            'big': {
+                externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-big.png",
+                graphicWidth: 78,
+                graphicHeight: 105,
+                graphicXOffset: -39,
+                graphicYOffset: -105,
+                backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow-big.png",
+                backgroundWidth: 88,
+                backgroundHeight: 40,
+                backgroundXOffset: -10,
+                backgroundYOffset: -35
+            },
+            'small': {
+                externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-small.png",
+                graphicWidth: 24,
+                graphicHeight: 32,
+                graphicXOffset: -12,
+                graphicYOffset: -32,
+                backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow-small.png",
+                backgroundWidth: 30,
+                backgroundHeight: 15,
+                backgroundXOffset: -4,
+                backgroundYOffset: -15,
+                popupYOffset: -20
+            },
+            'mini': {
+                externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-mini.png",
+                graphicWidth: 16,
+                graphicHeight: 20,
+                graphicXOffset: -8,
+                graphicYOffset: -20,
+                popupYOffset: -10
             }
+        });
+        pin_layer_style_map.addUniqueValueRules('default', 'faded', {
+            0: {
+                graphicOpacity: 1
+            },
+            1: {
+                graphicOpacity: 0.15
+            }
+        });
+        var pin_layer_options = {
+            rendererOptions: {
+                yOrdering: true
+            },
+            styleMap: pin_layer_style_map
+        };
+        if (fixmystreet.page == 'around') {
+            fixmystreet.bbox_strategy = fixmystreet.bbox_strategy || new OpenLayers.Strategy.FixMyStreet();
+            pin_layer_options.strategies = [ fixmystreet.bbox_strategy ];
+            pin_layer_options.protocol = new OpenLayers.Protocol.FixMyStreet({
+                url: '/ajax',
+                params: fixmystreet.all_pins ? { all_pins: 1 } : { },
+                format: new OpenLayers.Format.FixMyStreet()
+            });
         }
-        if (lang == 'cy') {
-            document.getElementById('hide_pins_link').innerHTML = 'Cuddio pinnau';
-        } else if (lang == 'nb') {
-            document.getElementById('hide_pins_link').innerHTML = 'Skjul nåler';
-        } else {
-            document.getElementById('hide_pins_link').innerHTML = 'Hide pins';
-        }
-    });
-
-}
+        fixmystreet.markers = new OpenLayers.Layer.Vector("Pins", pin_layer_options);
+        fixmystreet.markers.events.register( 'loadend', fixmystreet.markers, function(evt) {
+            if (fixmystreet.map.popups.length) {
+                fixmystreet.map.removePopup(fixmystreet.map.popups[0]);
+            }
+        });
 
-$(function(){
+        var markers = fixmystreet.maps.markers_list( fixmystreet.pins, true );
+        fixmystreet.markers.addFeatures( markers );
+
+        if (fixmystreet.page == 'around' || fixmystreet.page == 'reports' || fixmystreet.page == 'my') {
+            fixmystreet.select_feature = new OpenLayers.Control.SelectFeature(
+                fixmystreet.markers,
+                {
+                    hover: true,
+                    // Override clickFeature so that we can use it even though
+                    // hover is true. http://gis.stackexchange.com/a/155675
+                    clickFeature: function (feature) {
+                        marker_click(feature.attributes.id);
+                    },
+                    overFeature: function (feature) {
+                        if (fixmystreet.latest_map_hover_event != 'overFeature') {
+                            document.getElementById('map').style.cursor = 'pointer';
+                            markers_highlight(feature.attributes.id);
+                            sidebar_highlight(feature.attributes.id);
+                            fixmystreet.latest_map_hover_event = 'overFeature';
+                        }
+                    },
+                    outFeature: function (feature) {
+                        if (fixmystreet.latest_map_hover_event != 'outFeature') {
+                            document.getElementById('map').style.cursor = '';
+                            markers_highlight();
+                            sidebar_highlight();
+                            fixmystreet.latest_map_hover_event = 'outFeature';
+                        }
+                    }
+                }
+            );
+            fixmystreet.map.addControl( fixmystreet.select_feature );
+            fixmystreet.select_feature.activate();
+            fixmystreet.map.events.register( 'zoomend', null, fixmystreet.maps.markers_resize );
+
+            // If the category filter dropdown exists on the page set up the
+            // event handlers to populate it and react to it changing
+            if ($("select#filter_categories").length) {
+                $("body").on("change", "#filter_categories", categories_or_status_changed);
+            }
+            // Do the same for the status dropdown
+            if ($("select#statuses").length) {
+                $("body").on("change", "#statuses", categories_or_status_changed);
+            }
+        } else if (fixmystreet.page == 'new') {
+            drag.activate();
+        }
+        fixmystreet.map.addLayer(fixmystreet.markers);
+
+        if ( fixmystreet.zoomToBounds ) {
+            zoomToBounds( fixmystreet.markers.getDataExtent() );
+        }
+
+        $('#hide_pins_link').click(function(e) {
+            e.preventDefault();
+            var showhide = [
+                'Show pins', 'Hide pins',
+                'Dangos pinnau', 'Cuddio pinnau',
+                "Vis nåler", "Skjul nåler",
+                "Zeige Stecknadeln", "Stecknadeln ausblenden"
+            ];
+            for (var i=0; i<showhide.length; i+=2) {
+                if (this.innerHTML == showhide[i]) {
+                    fixmystreet.markers.setVisibility(true);
+                    fixmystreet.select_feature.activate();
+                    this.innerHTML = showhide[i+1];
+                } else if (this.innerHTML == showhide[i+1]) {
+                    fixmystreet.markers.setVisibility(false);
+                    fixmystreet.select_feature.deactivate();
+                    this.innerHTML = showhide[i];
+                }
+            }
+        });
 
-    // Set specific map config - some other JS included in the
-    // template should define this
-    set_map_config();
+        $('#all_pins_link').click(function(e) {
+            e.preventDefault();
+            fixmystreet.markers.setVisibility(true);
+            var texts = [
+                'en', 'Show old', 'Hide old',
+                'nb', 'Vis gamle', 'Skjul gamle',
+                'cy', 'Cynnwys hen adroddiadau', 'Cuddio hen adroddiadau'
+            ];
+            for (var i=0; i<texts.length; i+=3) {
+                if (this.innerHTML == texts[i+1]) {
+                    this.innerHTML = texts[i+2];
+                    fixmystreet.markers.protocol.options.params = { all_pins: 1 };
+                    fixmystreet.markers.refresh( { force: true } );
+                    lang = texts[i];
+                } else if (this.innerHTML == texts[i+2]) {
+                    this.innerHTML = texts[i+1];
+                    fixmystreet.markers.protocol.options.params = { };
+                    fixmystreet.markers.refresh( { force: true } );
+                    lang = texts[i];
+                }
+            }
+            if (lang == 'cy') {
+                document.getElementById('hide_pins_link').innerHTML = 'Cuddio pinnau';
+            } else if (lang == 'nb') {
+                document.getElementById('hide_pins_link').innerHTML = 'Skjul nåler';
+            } else {
+                document.getElementById('hide_pins_link').innerHTML = 'Hide pins';
+            }
+        });
 
-    // Create the basics of the map
-    fixmystreet.map = new OpenLayers.Map(
-        "map", OpenLayers.Util.extend({
-            controls: fixmystreet.controls,
-            displayProjection: new OpenLayers.Projection("EPSG:4326")
-        }, fixmystreet.map_options)
-    );
+    }
 
-    // Set it up our way
+    $(function(){
 
-    var layer;
-    if (!fixmystreet.layer_options) {
-        fixmystreet.layer_options = [ {} ];
-    }
-    if (!fixmystreet.layer_name) {
-        fixmystreet.layer_name = "";
-    }
-    for (var i=0; i<fixmystreet.layer_options.length; i++) {
-        fixmystreet.layer_options[i] = OpenLayers.Util.extend({
-            // This option is used by XYZ-based layers
-            zoomOffset: fixmystreet.zoomOffset,
-            // This option is used by FixedZoomLevels-based layers
-            minZoomLevel: fixmystreet.zoomOffset,
-            // This option is thankfully used by them both
-            numZoomLevels: fixmystreet.numZoomLevels
-        }, fixmystreet.layer_options[i]);
-        if (fixmystreet.layer_options[i].matrixIds) {
-            layer = new fixmystreet.map_type(fixmystreet.layer_options[i]);
-        } else {
-            layer = new fixmystreet.map_type(fixmystreet.layer_name, fixmystreet.layer_options[i]);
-        }
-        fixmystreet.map.addLayer(layer);
-    }
+        // Set specific map config - some other JS included in the
+        // template should define this
+        fixmystreet.maps.config();
 
-    if (!fixmystreet.map.getCenter()) {
-        var centre = new OpenLayers.LonLat( fixmystreet.longitude, fixmystreet.latitude );
-        centre.transform(
-            new OpenLayers.Projection("EPSG:4326"),
-            fixmystreet.map.getProjectionObject()
+        // Create the basics of the map
+        fixmystreet.map = new OpenLayers.Map(
+            "map", OpenLayers.Util.extend({
+                controls: fixmystreet.controls,
+                displayProjection: new OpenLayers.Projection("EPSG:4326")
+            }, fixmystreet.map_options)
         );
-        fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3);
-    }
 
-    if (document.getElementById('mapForm')) {
-        var click = new OpenLayers.Control.Click();
-        fixmystreet.map.addControl(click);
-        click.activate();
-    }
-
-    $(window).hashchange(function(){
-        if (location.hash == '#report' && $('.rap-notes').is(':visible')) {
-            $('.rap-notes-close').click();
-            return;
+        // Set it up our way
+
+        var layer;
+        if (!fixmystreet.layer_options) {
+            fixmystreet.layer_options = [ {} ];
+        }
+        if (!fixmystreet.layer_name) {
+            fixmystreet.layer_name = "";
+        }
+        for (var i=0; i<fixmystreet.layer_options.length; i++) {
+            fixmystreet.layer_options[i] = OpenLayers.Util.extend({
+                // This option is used by XYZ-based layers
+                zoomOffset: fixmystreet.zoomOffset,
+                // This option is used by FixedZoomLevels-based layers
+                minZoomLevel: fixmystreet.zoomOffset,
+                // This option is thankfully used by them both
+                numZoomLevels: fixmystreet.numZoomLevels
+            }, fixmystreet.layer_options[i]);
+            if (fixmystreet.layer_options[i].matrixIds) {
+                layer = new fixmystreet.map_type(fixmystreet.layer_options[i]);
+            } else {
+                layer = new fixmystreet.map_type(fixmystreet.layer_name, fixmystreet.layer_options[i]);
+            }
+            fixmystreet.map.addLayer(layer);
         }
 
-        if (location.hash && location.hash != '#') {
-            return;
+        if (!fixmystreet.map.getCenter()) {
+            var centre = new OpenLayers.LonLat( fixmystreet.longitude, fixmystreet.latitude );
+            centre.transform(
+                new OpenLayers.Projection("EPSG:4326"),
+                fixmystreet.map.getProjectionObject()
+            );
+            fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3);
         }
 
-        // Okay, back to around view.
-        fixmystreet.bbox_strategy.activate();
-        fixmystreet.markers.refresh( { force: true } );
-        if ( fixmystreet.state_pins_were_hidden ) {
-            // If we had pins hidden when we clicked map (which had to show the pin layer as I'm doing it in one layer), hide them again.
-            $('#hide_pins_link').click();
+        if (document.getElementById('mapForm')) {
+            var click = new OpenLayers.Control.Click();
+            fixmystreet.map.addControl(click);
+            click.activate();
         }
-        fixmystreet.drag.deactivate();
-        $('#side-form').hide();
-        $('#side').show();
-        $('body').removeClass('with-notes');
-        fixmystreet.map.updateSize(); // required after changing the size of the map element
-        $('#sub_map_links').show();
-        //only on mobile
-        $('#mob_sub_map_links').remove();
-        $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map);
-        fixmystreet.page = 'around';
-    });
 
-    // Hide the pin filter submit button. Not needed because we'll use JS
-    // to refresh the map when the filter inputs are changed.
-    $(".report-list-filters [type=submit]").hide();
+        $(window).hashchange(function(){
+            if (location.hash == '#report' && $('.rap-notes').is(':visible')) {
+                $('.rap-notes-close').click();
+                return;
+            }
+
+            if (location.hash && location.hash != '#') {
+                return;
+            }
 
-    if (fixmystreet.page == "my" || fixmystreet.page == "reports") {
-        $(".report-list-filters select").change(function() {
-            $(this).closest("form").submit();
+            // Okay, back to around view.
+            fixmystreet.bbox_strategy.activate();
+            fixmystreet.markers.refresh( { force: true } );
+            if ( fixmystreet.state_pins_were_hidden ) {
+                // If we had pins hidden when we clicked map (which had to show the pin layer as I'm doing it in one layer), hide them again.
+                $('#hide_pins_link').click();
+            }
+            drag.deactivate();
+            $('#side-form').hide();
+            $('#side').show();
+            $('body').removeClass('with-notes');
+            fixmystreet.map.updateSize(); // required after changing the size of the map element
+            $('#sub_map_links').show();
+            //only on mobile
+            $('#mob_sub_map_links').remove();
+            $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map);
+            fixmystreet.page = 'around';
         });
-    }
 
-    // Vector layers must be added onload as IE sucks
-    if ($.browser.msie) {
-        $(window).load(fixmystreet_onload);
-    } else {
-        fixmystreet_onload();
-    }
+        // Hide the pin filter submit button. Not needed because we'll use JS
+        // to refresh the map when the filter inputs are changed.
+        $(".report-list-filters [type=submit]").hide();
+
+        if (fixmystreet.page == "my" || fixmystreet.page == "reports") {
+            $(".report-list-filters select").change(function() {
+                $(this).closest("form").submit();
+            });
+        }
+
+        // Vector layers must be added onload as IE sucks
+        if ($.browser.msie) {
+            $(window).load(onload);
+        } else {
+            onload();
+        }
+
+        (function() {
+            var timeout;
+            $('.item-list--reports').on('mouseenter', '.item-list--reports__item', function(){
+                var href = $('a', this).attr('href');
+                var id = parseInt(href.replace(/^.*[/]([0-9]+)$/, '$1'));
+                clearTimeout(timeout);
+                markers_highlight(id);
+            }).on('mouseleave', '.item-list--reports__item', function(){
+                timeout = setTimeout(markers_highlight, 50);
+            });
+        })();
+    });
+
+// End maps closure
+})();
 
-    (function() {
-        var timeout;
-        $('.item-list--reports').on('mouseenter', '.item-list--reports__item', function(){
-            var href = $('a', this).attr('href');
-            var id = parseInt(href.replace(/^.*[/]([0-9]+)$/, '$1'));
-            clearTimeout(timeout);
-            fms_markers_highlight(id);
-        }).on('mouseleave', '.item-list--reports__item', function(){
-            timeout = setTimeout(fms_markers_highlight, 50);
-        });
-    })();
-});
 
 /* Overridding the buttonDown function of PanZoom so that it does
    zoomTo(0) rather than zoomToMaxExtent()
@@ -657,7 +648,7 @@ OpenLayers.Format.FixMyStreet = OpenLayers.Class(OpenLayers.Format.JSON, {
         if (typeof(obj.current) != 'undefined' && (current = document.getElementById('current'))) {
             current.innerHTML = obj.current;
         }
-        return fms_markers_list( obj.pins, false );
+        return fixmystreet.maps.markers_list( obj.pins, false );
     },
     CLASS_NAME: "OpenLayers.Format.FixMyStreet"
 });
@@ -685,96 +676,10 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
     },
 
     trigger: function(e) {
-        var cobrand = $('meta[name="cobrand"]').attr('content');
         var lonlat = fixmystreet.map.getLonLatFromViewPortPx(e.xy);
-        if (fixmystreet.page == 'new') {
-            /* Already have a pin */
-            fixmystreet.markers.features[0].move(lonlat);
-        } else {
-            var markers = fms_markers_list( [ [ lonlat.lat, lonlat.lon, 'green' ] ], false );
-            fixmystreet.bbox_strategy.deactivate();
-            fixmystreet.markers.removeAllFeatures();
-            fixmystreet.markers.addFeatures( markers );
-            fixmystreet_activate_drag();
-        }
-
-        // check to see if markers are visible. We click the
-        // link so that it updates the text in case they go
-        // back
-        if ( ! fixmystreet.markers.getVisibility() ) {
-            fixmystreet.state_pins_were_hidden = true;
-            $('#hide_pins_link').click();
-        }
-
-        // Store pin location in form fields, and check coverage of point
-        fixmystreet_update_pin(lonlat);
-
-        // It's possible to invoke the OpenLayers.Control `trigger` callback
-        // multiple times in a row (eg: by clicking on the map multiple times,
-        // to reposition your report).
-        // But there is some stuff we only want to happen the first time you
-        // switch from the "around" view to the "new" report view.
-        // So, here we check whether we've already transitioned into the "new"
-        // report view, and if so, we return from the callback early,
-        // skipping the remainder of the setup stuff.
-        if (fixmystreet.page == 'new') {
-            fixmystreet.map.panDuration = 100;
-            fixmystreet.map.panTo(lonlat);
-            fixmystreet.map.panDuration = 50;
-            return;
-        }
-
-        // If there are notes to be displayed, add the .with-notes class
-        // to make the sidebar wider.
-        if ($('#report-a-problem-sidebar').length) {
-            $('body').addClass('with-notes');
-        }
-
-        /* For some reason on IOS5 if you use the jQuery show method it
-         * doesn't display the JS validation error messages unless you do this
-         * or you cause a screen redraw by changing the phone orientation.
-         * NB: This has to happen after the call to show() in fixmystreet_update_pin */
-        if ( navigator.userAgent.match(/like Mac OS X/i)) {
-            document.getElementById('side-form').style.display = 'block';
-        }
-        $('#side').hide();
-
-        fixmystreet.map.updateSize(); // required after changing the size of the map element
-
-        fixmystreet.map.panDuration = 100;
-        fixmystreet.map.panTo(lonlat);
-        fixmystreet.map.panDuration = 50;
-
-        $('#sub_map_links').hide();
-        if ($('html').hasClass('mobile')) {
-            var $map_box = $('#map_box'),
-                width = $map_box.width(),
-                height = $map_box.height();
-            $map_box.append( '<p id="mob_sub_map_links">' + '<a href="#" id="try_again">' + translation_strings.try_again + '</a>' + '<a href="#ok" id="mob_ok">' + translation_strings.ok + '</a>' + '</p>' ).css({ position: 'relative', width: width, height: height, marginBottom: '1em' });
-            // Making it relative here makes it much easier to do the scrolling later
-
-            $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.right_place);
-
-            // mobile user clicks 'ok' on map
-            $('#mob_ok').toggle(function(){
-                //scroll the height of the map box instead of the offset
-                //of the #side-form or whatever as we will probably want
-                //to do this on other pages where #side-form might not be
-                $('html, body').animate({ scrollTop: height-60 }, 1000, function(){
-                    $('#mob_sub_map_links').addClass('map_complete');
-                    $('#mob_ok').text(translation_strings.map);
-                });
-            }, function(){
-                $('html, body').animate({ scrollTop: 0 }, 1000, function(){
-                    $('#mob_sub_map_links').removeClass('map_complete');
-                    $('#mob_ok').text(translation_strings.ok);
-                });
-            });
-        }
+        fixmystreet.begin_report(lonlat);
 
-        fixmystreet.page = 'new';
-        location.hash = 'report';
-        if ( typeof ga !== 'undefined' && cobrand == 'fixmystreet' ) {
+        if ( typeof ga !== 'undefined' && window.cobrand == 'fixmystreet' ) {
             ga('send', 'pageview', { 'page': '/map_click' } );
         }
     }
-- 
cgit v1.2.3