Merge branch 'harrogate-zurich-fixes'

19 files changed, 218 insertions, 293 deletions

diff --git a/perllib/FixMyStreet/Map/WMTSBase.pm b/perllib/FixMyStreet/Map/WMTSBase.pm
index e35ae13c9..909ada1d6 100644
--- a/perllib/FixMyStreet/Map/WMTSBase.pm
+++ b/perllib/FixMyStreet/Map/WMTSBase.pm
@@ -202,9 +202,9 @@ sub get_map_hash {
         map_type => 'OpenLayers.Layer.WMTS',
         tiles => $self->map_tiles( %params ),
         copyright => $self->copyright(),
-        zoom => $params{zoom},,
+        zoom => $params{zoom},
         zoomOffset => $self->zoom_parameters->{min_zoom_level},
-        numZoomLevels => $self->zoom_parameters->{default_zoom},
+        numZoomLevels => $self->zoom_parameters->{zoom_levels},
         tile_size => $self->tile_parameters->{size},
         tile_dpi => $self->tile_parameters->{dpi},
         tile_urls => encode_json $self->tile_parameters->{urls},
@@ -241,7 +241,7 @@ sub latlon_to_tile($$$$) {
         lon => $tile_params->{origin_x},
         lat => $tile_params->{origin_y}
     };
-    my $res = $scales[$matrix_id] /
+    my $res = $scales[$zoom] /
         ($tile_params->{inches_per_unit} * $tile_params->{dpi});
         # OpenLayers.INCHES_PER_UNIT[units] * OpenLayers.DOTS_PER_INCH
 
@@ -282,13 +282,12 @@ sub tile_to_latlon {
     my ($self, $fx, $fy, $zoom) = @_;
 
     my $tile_params = $self->tile_parameters;
-    my $matrix_id = $zoom + $self->zoom_parameters->{id_offset};
     my @scales = $self->scales;
     my $tileOrigin = {
         lon => $tile_params->{origin_x},
         lat => $tile_params->{origin_y}
     };
-    my $res = $scales[$matrix_id] /
+    my $res = $scales[$zoom] /
         ($tile_params->{inches_per_unit} * $tile_params->{dpi});
         # OpenLayers.INCHES_PER_UNIT[units] * OpenLayers.DOTS_PER_INCH
 
diff --git a/perllib/FixMyStreet/Map/Zurich.pm b/perllib/FixMyStreet/Map/Zurich.pm
index 3b97f947f..1e302bdda 100644
--- a/perllib/FixMyStreet/Map/Zurich.pm
+++ b/perllib/FixMyStreet/Map/Zurich.pm
@@ -13,7 +13,7 @@ sub zoom_parameters {
         zoom_levels    => scalar $self->scales,
         default_zoom   => 5,
         min_zoom_level => 0,
-        id_offset      => 0,
+        id_offset      => 2,
     };
     return $params;
 }
@@ -29,7 +29,7 @@ sub tile_parameters {
         wmts_version    => '1.0.0',
         layer_style     => 'default',
         matrix_set      => 'default028mm',
-        suffix          => '', # appended to tile URLs
+        suffix          => '.jpg', # appended to tile URLs
         size            => 512, # pixels
         dpi             => 96,
         inches_per_unit => 39.3701, # BNG uses metres
diff --git a/templates/web/base/maps/noscript_map.html b/templates/web/base/maps/noscript_map.html
index 6ef2f813a..c477ec5ac 100644
--- a/templates/web/base/maps/noscript_map.html
+++ b/templates/web/base/maps/noscript_map.html
@@ -23,7 +23,7 @@
             src="[% map.tiles.3 %]"
             style="top:256px; left:256px;">
     </div>
-    <div id="[% nsm_prefix %]pins">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div>
+    <div id="[% nsm_prefix %]pins">[% FOR pin IN map.pins %][% INCLUDE 'maps/pin.html' %][% END %]</div>
     [% INCLUDE compass %]
 </div>
 
@@ -49,24 +49,3 @@
     <div style="position: absolute; left: 13px; top: 99px; width: 18px; height: 18px;"><a rel="nofollow" href="[% zoom_out %]"><img style="position: relative; width: 18px; height: 18px;" src="[% start %]/js/OpenLayers/img/zoom-minus-mini.png" border="0"></a></div>
 </div>
 [% END %]
-
-
-[% BLOCK pin %]
-
-[% IF pin.id %]
-<a title="[% pin.title | html %]" href="[% c.cobrand.base_url_for_report( pin.problem ) %][% pin.problem.url %]">
-[%- END -%]
-<img border="0" src="[% start %][% c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png' %]"
-[% IF js -%]
-    class="pin js-pin" data-lat="[% pin.latitude %]" data-lon="[% pin.longitude %]"
-    data-colour="[% pin.colour %]" data-id="[% pin.id %]"
-    data-title="[% pin.title | html %]" data-type="[% pin.type %]"
-[% ELSE -%]
-    class="pin"
-[% END -%]
-    alt="[% loc('Problem') %]" style="top:[% pin.py - 64 %]px; left:[% pin.px - 24 %]px; position: absolute;">
-[%- IF pin.id -%]
-</a>
-[% END %]
-
-[% END %]
diff --git a/templates/web/base/maps/pin.html b/templates/web/base/maps/pin.html
new file mode 100644
index 000000000..7dfce0bb3
--- /dev/null
+++ b/templates/web/base/maps/pin.html
@@ -0,0 +1,16 @@
+[% DEFAULT pin_style = 'top:' _ (pin.py - 64) _ 'px; left:' _ (pin.px - 24) _ 'px; position: absolute;' -%]
+[% IF pin.id %]
+<a title="[% pin.title | html %]" href="[% c.cobrand.base_url_for_report( pin.problem ) %][% pin.problem.url %]">
+[%- END -%]
+<img border="0" src="[% start %][% c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png' %]"
+[% IF js -%]
+    class="pin js-pin" data-lat="[% pin.latitude %]" data-lon="[% pin.longitude %]"
+    data-colour="[% pin.colour %]" data-id="[% pin.id %]"
+    data-title="[% pin.title | html %]" data-type="[% pin.type %]"
+[% ELSE -%]
+    class="pin"
+[% END -%]
+    alt="[% loc('Problem') %]" style="[% pin_style %]">
+[%- IF pin.id -%]
+</a>
+[% END %]
diff --git a/templates/web/bristol/maps/noscript_map.html b/templates/web/bristol/maps/noscript_map.html
index 1941cdd4c..0b4fe1ebf 100644
--- a/templates/web/bristol/maps/noscript_map.html
+++ b/templates/web/bristol/maps/noscript_map.html
@@ -45,26 +45,12 @@
 
 
 [% BLOCK pin %]
-
-[% IF pin.id %]
-<a title="[% pin.title | html %]" href="[% c.uri_for('/report/' _ pin.id) %]">
-[%- END -%]
-<img
-    data-foo="[% pin.px %],[% pin.py %]/ [% map.tile_size %]*[% map.cols %],[% map.rows %]"
-    border="0"
-    class="pin"
-    src="[% c.uri_for( c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png') %]"
-    alt="[% loc('Problem') %]"
-    style="
-        top: [% pin.py / ( map.tile_size * map.rows ) * 100  %]%;
-        left: [% pin.px / ( map.tile_size * map.cols ) * 100  %]%;
-        position: absolute;
-        margin-left: -24px; /* Half of 48px wide image */
-        margin-top: -64px; /* All of 64px tall image */
-    "
->
-[%- IF pin.id -%]
-</a>
+[%
+    SET pin_top = pin.py / ( map.tile_size * map.rows ) * 100;
+    SET pin_left = pin.px / ( map.tile_size * map.cols ) * 100;
+    # -24px half of 48px wide image, -64px all of 64px tall image
+    INCLUDE 'maps/pin.html'
+        pin_style = 'top:' _ pin_top _ '%; left:' _ pin_left _ '%; position:absolute; margin-left:-24px; margin-top:-64px;'
+%]
 [% END %]
 
-[% END %]
diff --git a/templates/web/harrogate/footer.html b/templates/web/harrogate/footer.html
index 47eef161b..2cbe8f986 100644
--- a/templates/web/harrogate/footer.html
+++ b/templates/web/harrogate/footer.html
@@ -36,6 +36,7 @@
     [% END %]
 
     [% INCLUDE 'common_footer_tags.html' %]
+    <script src="[% version('/cobrands/harrogate/js.js') %]"></script>
 
 </body>
 </html>
diff --git a/templates/web/harrogate/report/new/after_category.html b/templates/web/harrogate/report/new/after_category.html
index b67019353..c00185d74 100644
--- a/templates/web/harrogate/report/new/after_category.html
+++ b/templates/web/harrogate/report/new/after_category.html
@@ -1,34 +1,3 @@
-<script>
-    // we link to the informational articles rather than the forms, because in some
-    // cases the former have more information or links to track progress of faults
-    // etc..
-    var links = {
-        'Bus stops': 'http://www.northyorks.gov.uk/article/25853/Bus-stops-and-shelters',
-        // Pavements/footpaths (multiple options)
-        'Potholes': 'http://www.northyorks.gov.uk/article/25215/Roads---potholes',
-        // Roads/highways (multiple options)
-        'Road traffic signs': 'http://www.northyorks.gov.uk/article/25667/Road-signs-and-bollards',
-        // Street lighting (not considered, as also a Harrogate category)
-        'Traffic lights': 'http://www.northyorks.gov.uk/article/25626/Traffic-lights',
-        'default': 'http://www.northyorks.gov.uk/article/28237/Report-it-online'
-    };
-    $(function () {
-        var notice = $('.nycc-notice');
-        $("#problem_form").on("change.category", "select#form_category", function(){
-            var cat = $(this).val();
-            if (cat.search(/NYCC/) > 0) {
-                cat = cat.replace(' (NYCC)', '');
-                var link = links[cat] || links ['default'];
-                notice.find('a').attr({ href: link });
-                notice.show();
-            }
-            else {
-                notice.hide();
-            }
-
-        });
-    });
-</script>
 <noscript>
   <p class="nycc-notice">
     Please report issues for categories labelled <b>(NYCC)</b> directly to
diff --git a/templates/web/harrogate/report/new/councils_extra_text.html b/templates/web/harrogate/report/new/councils_extra_text.html
index 92dc93452..91cceca11 100644
--- a/templates/web/harrogate/report/new/councils_extra_text.html
+++ b/templates/web/harrogate/report/new/councils_extra_text.html
@@ -1,10 +1 @@
-<div id="council_responsibilities_note">
-<p>
-<b>NB:</b> though we will forward your request as appropriate, 
-reports for problems managed by North Yorkshire County Council are not shown on this map. 
-View all problems in that area on 
-<a href="https://www.fixmystreet.com/reports/North+Yorkshire">FixMyStreet.com</a>.
-</p>
-</div>
-
 Do not use this to <a href="/faq#emergencies">report emergencies outside of working hours</a>. 
diff --git a/templates/web/hart/report/new/councils_extra_text.html b/templates/web/hart/report/new/councils_extra_text.html
index b72cd878b..91cceca11 100644
--- a/templates/web/hart/report/new/councils_extra_text.html
+++ b/templates/web/hart/report/new/councils_extra_text.html
@@ -1,10 +1 @@
-<div id="hart_hants_note">
-<p>
-<b>NB:</b> though we will forward your request as appropriate, 
-reports for problems managed by Hampshire County Council are not shown on this map. 
-View all problems in this area on 
-<a href="https://www.fixmystreet.com/reports/Hampshire">FixMyStreet.com</a>.
-</p>
-</div>
-
 Do not use this to <a href="/faq#emergencies">report emergencies outside of working hours</a>. 
diff --git a/templates/web/zurich/admin/header.html b/templates/web/zurich/admin/header.html
index a423cf22f..40847f190 100644
--- a/templates/web/zurich/admin/header.html
+++ b/templates/web/zurich/admin/header.html
@@ -24,14 +24,3 @@
     select { width: auto; }
     .admin-report-edit select { max-width: 100%; }
 </style>
-<script>
-$(function(){
-    $('.row-link').hover(function(){
-        $(this).toggleClass("active");
-    }).click(function(){
-        window.location = this.getElementsByTagName('a')[0];
-    }).find('td:last').hide();
-    $('th.edit').hide();
-});
-</script>
-
diff --git a/templates/web/zurich/admin/report_edit-sdm.html b/templates/web/zurich/admin/report_edit-sdm.html
index b8de2a5ef..509ddfd7c 100644
--- a/templates/web/zurich/admin/report_edit-sdm.html
+++ b/templates/web/zurich/admin/report_edit-sdm.html
@@ -101,12 +101,6 @@
 
 <div class="admin-report-edit admin-report-edit--interact">
 
-<script type="text/javascript">
-    $(function(){
-        $('#map_box .noscript').clone().removeClass('noscript').addClass('map_clone print-only').prependTo('.admin-report-edit--interact');
-    });
-</script>
-
 <p align="right" class="screen-only"><input type="submit" name="send_back" value="[% loc('Not for my subdivision') %]"></p>
 <p align="right" class="screen-only"><input type="submit" name="not_contactable" value="[% loc('Customer not contactable') %]"></p>
 
@@ -124,15 +118,6 @@
 <p class="screen-only">
     <label for="time_spent">[% loc('Time spent (in minutes):') %]</label>
     <input type="text" name="time_spent" id="form_time_spent" style="width: 4em" value="0">
-    <script>
-        $(function () {
-            $('#form_time_spent').spinner({
-                spin: function (e, ui) {
-                    if (ui.value < 0) { return false }
-                }
-            });
-        });
-    </script>
 </p>
 
 <p class="clearfix screen-only">
diff --git a/templates/web/zurich/admin/report_edit.html b/templates/web/zurich/admin/report_edit.html
index 215373eca..4ef55e75a 100644
--- a/templates/web/zurich/admin/report_edit.html
+++ b/templates/web/zurich/admin/report_edit.html
@@ -107,7 +107,7 @@
     <dd>[% problem.get_time_spent %]</dd>
 
   [% IF problem.photo %]
-    <dd>
+    <dd data-confirm="[% loc('Rotating this photo will discard unsaved changes to the report.') | html %]">
       [% FOR photo IN problem.photos %]
         <div class="update-img">
             <a href="[% c.cobrand.base_url %][% photo.url_temp_full %]" rel="fancy">
@@ -131,12 +131,6 @@
 
 [% status_message %]
 
-<script type="text/javascript">
-    $(function(){
-        $('#map_box .noscript').clone().removeClass('noscript').addClass('map_clone print-only').prependTo('.admin-report-edit--interact');
-    });
-</script>
-
 <dl [% IF status_message %]class="with-message"[% END %]>
 
     <dt class="screen-only">
@@ -157,7 +151,7 @@
         <span class="mock-label">[% loc('State:') %]</span>
     </dt>
     <dd class="screen-only">
-        <select name="state"  id="state">
+        <select name="state"  id="state" data-pstate="[% pstate %]">
             <option value="">--</option>
           [% FOREACH s IN states %]
             <option [% 'selected ' IF s.state == pstate %] value="[% s.state %]">[% s.trans %]</option>
@@ -300,108 +294,6 @@
 
 </div>
 
-<script type="text/javascript">
-$(function(){
-    var form_fields_changed = false;
-
-    $('#form_time_spent').spinner({
-        spin: function (e, ui) {
-            if (ui.value < 0) { return false }
-            form_fields_changed = true;
-        }
-    });
-
-    setTimeout(function(){
-        $('.message-updated').fadeOut(250, function(){
-            $(this).remove();
-        });
-    }, 5000);
-
-    // When the user changes a select box, this bit of code
-    // makes the labels for the other two select boxes grey.
-    $('.assignation__select, .assignation select').change(function(){
-        if (this.value == "") {
-            $('.assignation').css('color', '#000');
-        } else {
-            var a = $(this).closest('li').css('color', '#000');
-            $('.assignation select').not(this).val("");
-            $('.assignation').not(a).css('color', '#999');
-        }
-    });
-
-    $('#state').change(function(){
-        // Show or hide the automatic reply field
-        var state = $(this).val();
-
-        // show or disable assignation, templates, public_response, publish if
-        // same or different state to the one we started on
-        if ((state === '[% pstate %]')) {
-            $('input[name=publish_response]').show();
-            $('.response_templates_select').show();
-            $('#status_update_container').show();
-
-            if (state === 'confirmed') {
-                $('#assignation__category').show();
-                $('#assignation__subdivision').show();
-            }
-            if ((state === 'closed') || (state === 'investigating')) {
-                $('#assignation__external').show();
-            } else {
-                $('#assignation__external').hide();
-            }
-        }
-        else {
-            $('input[name=publish_response]').hide();
-            $('.response_templates_select').hide();
-            $('#status_update_container').hide();
-
-            $('#assignation__category').hide();
-            $('#assignation__subdivision').hide();
-            $('#assignation__category select').val('');
-            $('#assignation__subdivision select').val('');
-
-            $('#assignation__external select').val('');
-            $('#assignation__external').hide();
-            $('#external_body').hide();
-            $('#third_personal, label[for=third_personal]').hide();
-        }
-
-    }).change();
-
-    $("form#report_edit input[type=submit]").click(function() {
-        $("form#report_edit").data("clicked_button", $(this).attr("name"));
-    });
-
-    $("form#report_edit").submit(function() {
-        // Make sure the external body field has a value if it's visible
-        // and the form is submitted as a 'save' action (i.e. not a rotate
-        // photo).
-        var clicked = $(this).data("clicked_button");
-        if (clicked == "publish_response" || clicked == "Submit changes") {
-            var visible = $("select#body_external:visible").length > 0;
-            var val = parseInt($("select#body_external").val());
-            if (visible && isNaN(val)) {
-                $("#assignation__external .error").removeClass("hidden");
-                $("select#body_external").focus().get(0).scrollIntoView();
-                return false;
-            }
-        }
-        // If the user has clicked to rotate a photo and has edited other
-        // fields, ask for confirmation before submitting the form
-        if (/rotate_photo/.test(clicked) && form_fields_changed) {
-            var message = "[% loc('Rotating this photo will discard unsaved changes to the report.') %]";
-            if (!confirm(message)) {
-                return false;
-            }
-        }
-    });
-
-    $("form#report_edit").find("input, select, textarea").change(function() {
-        form_fields_changed = true;
-    });
-});
-</script>
-
 <div id="print_report_map" class="print-only">
 [% INCLUDE 'maps/noscript_map.html' map=print_report_map nsm_prefix="large_" %]
 </div>
diff --git a/templates/web/zurich/admin/response_templates_select.html b/templates/web/zurich/admin/response_templates_select.html
index c0f4104c8..853956a0d 100644
--- a/templates/web/zurich/admin/response_templates_select.html
+++ b/templates/web/zurich/admin/response_templates_select.html
@@ -1,25 +1,8 @@
-[% template_name="templates_for_${for}" %]
-
-[% response_templates = problem.response_templates %]
 <div class="response_templates_select">
-<select id="[% template_name %]">
-    <option value="">[% loc('Choose a template') %]</option>
-[% FOR t IN response_templates %]
-    <option value="[% t.id %]"> [% t.title | html %] </option>
-[% END %]
-</select>
+    <select id="templates_for_[% for %]" class="js-template-name" data-for="[% for %]">
+        <option value="">[% loc('Choose a template') %]</option>
+      [% FOR t IN problem.response_templates %]
+        <option value="[% t.text | html %]"> [% t.title | html %] </option>
+      [% END %]
+    </select>
 </div>
-<script>
-    $(function () {
-        var response_template_texts = {
-            [% FOR t IN response_templates %]
-                [% t.id %]: '[% t.text | escape_js %]' [% loop.last ? '' : ',' %]
-            [% END %]
-        };
-        $('#[% template_name %]').change(function () {
-            var val = $(this).val();
-            var text = response_template_texts[val];
-            $('#[% for %]').val( text );
-        });
-    });
-</script>
diff --git a/templates/web/zurich/around/intro.html b/templates/web/zurich/around/intro.html
index b60fa7388..c113afca7 100644
--- a/templates/web/zurich/around/intro.html
+++ b/templates/web/zurich/around/intro.html
@@ -1,11 +1 @@
             <h1>[% loc('Report, view, or discuss local problems') %]</h1>
-
-<!-- FIXME Better place for this -->
-<script>
-    $(function() {
-        $( "#pc" ).autocomplete({
-            minLength: 3,
-            source: "/ajax/geocode"
-        });
-    });
-</script>
diff --git a/templates/web/zurich/footer.html b/templates/web/zurich/footer.html
index c5f7685a0..98c24964e 100644
--- a/templates/web/zurich/footer.html
+++ b/templates/web/zurich/footer.html
@@ -35,7 +35,10 @@
     </div>
     </div>
 
+    <script src="[% version('/cobrands/zurich/validation_rules.js') %]"></script>
     [% INCLUDE 'common_footer_tags.html' %]
+    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" charset="utf-8"></script>
+    <script src="[% version('/cobrands/zurich/js.js') %]"></script>
 
 </body>
 </html>
diff --git a/templates/web/zurich/header.html b/templates/web/zurich/header.html
index 7697a6055..303d861a4 100644
--- a/templates/web/zurich/header.html
+++ b/templates/web/zurich/header.html
@@ -20,9 +20,6 @@
         <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css">
 
         [% INCLUDE 'common_header_tags.html' %]
-        <script src="[% version('/cobrands/zurich/validation_rules.js') %]"></script>
-
-        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" charset="utf-8"></script>
 
         [% INCLUDE 'tracking_code.html' %]
 
diff --git a/templates/web/zurich/maps/noscript_map.html b/templates/web/zurich/maps/noscript_map.html
index 1941cdd4c..2ebfcbf11 100644
--- a/templates/web/zurich/maps/noscript_map.html
+++ b/templates/web/zurich/maps/noscript_map.html
@@ -45,26 +45,11 @@
 
 
 [% BLOCK pin %]
-
-[% IF pin.id %]
-<a title="[% pin.title | html %]" href="[% c.uri_for('/report/' _ pin.id) %]">
-[%- END -%]
-<img
-    data-foo="[% pin.px %],[% pin.py %]/ [% map.tile_size %]*[% map.cols %],[% map.rows %]"
-    border="0"
-    class="pin"
-    src="[% c.uri_for( c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png') %]"
-    alt="[% loc('Problem') %]"
-    style="
-        top: [% pin.py / ( map.tile_size * map.rows ) * 100  %]%;
-        left: [% pin.px / ( map.tile_size * map.cols ) * 100  %]%;
-        position: absolute;
-        margin-left: -24px; /* Half of 48px wide image */
-        margin-top: -64px; /* All of 64px tall image */
-    "
->
-[%- IF pin.id -%]
-</a>
-[% END %]
-
+[%
+    SET pin_top = pin.py / ( map.tile_size * map.rows ) * 100;
+    SET pin_left = pin.px / ( map.tile_size * map.cols ) * 100;
+    # -24px half of 48px wide image, -64px all of 64px tall image
+    INCLUDE 'maps/pin.html'
+        pin_style = 'top:' _ pin_top _ '%; left:' _ pin_left _ '%; position:absolute; margin-left:-24px; margin-top:-64px;'
+%]
 [% END %]
diff --git a/web/cobrands/harrogate/js.js b/web/cobrands/harrogate/js.js
new file mode 100644
index 000000000..3c0e41d26
--- /dev/null
+++ b/web/cobrands/harrogate/js.js
@@ -0,0 +1,34 @@
+// we link to the informational articles rather than the forms, because in some
+// cases the former have more information or links to track progress of faults
+// etc..
+
+(function() {
+
+var links = {
+    'Bus stops': 'http://www.northyorks.gov.uk/article/25853/Bus-stops-and-shelters',
+    // Pavements/footpaths (multiple options)
+    'Potholes': 'http://www.northyorks.gov.uk/article/25215/Roads---potholes',
+    // Roads/highways (multiple options)
+    'Road traffic signs': 'http://www.northyorks.gov.uk/article/25667/Road-signs-and-bollards',
+    // Street lighting (not considered, as also a Harrogate category)
+    'Traffic lights': 'http://www.northyorks.gov.uk/article/25626/Traffic-lights',
+    'default': 'http://www.northyorks.gov.uk/article/28237/Report-it-online'
+};
+
+$(function () {
+    var notice = $('.nycc-notice');
+    $("#problem_form").on("change.category", "select#form_category", function(){
+        var cat = $(this).val();
+        if (cat.search(/NYCC/) > 0) {
+            cat = cat.replace(' (NYCC)', '');
+            var link = links[cat] || links ['default'];
+            notice.find('a').attr({ href: link });
+            notice.show();
+        }
+        else {
+            notice.hide();
+        }
+    });
+});
+
+})();
diff --git a/web/cobrands/zurich/js.js b/web/cobrands/zurich/js.js
new file mode 100644
index 000000000..d895789f1
--- /dev/null
+++ b/web/cobrands/zurich/js.js
@@ -0,0 +1,135 @@
+$(function() {
+    // Front page
+
+    $( "#pc" ).autocomplete({
+        minLength: 3,
+        source: "/ajax/geocode"
+    });
+
+    /*
+     * Admin things
+     */
+
+    // Row highlighting/clicking
+
+    $('.row-link').hover(function(){
+        $(this).toggleClass("active");
+    }).click(function(){
+        window.location = this.getElementsByTagName('a')[0];
+    }).find('td:last').hide();
+
+    $('th.edit').hide();
+
+    // Map copy for printing
+
+    if ($('.admin-report-edit--interact').length) {
+        $('#map_box .noscript').clone().removeClass('noscript').addClass('map_clone print-only').prependTo('.admin-report-edit--interact');
+    }
+
+    // Response templates
+
+    $('.js-template-name').change(function() {
+        var $this = $(this);
+        $('#' + $this.data('for')).val($this.val());
+    });
+
+    // Report editing
+
+    var form_fields_changed = false;
+
+    $('#form_time_spent').spinner({
+        spin: function (e, ui) {
+            if (ui.value < 0) { return false; }
+            form_fields_changed = true;
+        }
+    });
+
+    setTimeout(function(){
+        $('.message-updated').fadeOut(250, function(){
+            $(this).remove();
+        });
+    }, 5000);
+
+    // When the user changes a select box, this bit of code
+    // makes the labels for the other two select boxes grey.
+    $('.assignation__select, .assignation select').change(function(){
+        if (this.value === "") {
+            $('.assignation').css('color', '#000');
+        } else {
+            var a = $(this).closest('li').css('color', '#000');
+            $('.assignation select').not(this).val("");
+            $('.assignation').not(a).css('color', '#999');
+        }
+    });
+
+    $('form#report_edit #state').change(function(){
+        // Show or hide the automatic reply field
+        var state = $(this).val();
+
+        // show or disable assignation, templates, public_response, publish if
+        // same or different state to the one we started on
+        if (state === $(this).data('pstate')) {
+            $('input[name=publish_response]').show();
+            $('.response_templates_select').show();
+            $('#status_update_container').show();
+
+            if (state === 'confirmed') {
+                $('#assignation__category').show();
+                $('#assignation__subdivision').show();
+            }
+            if ((state === 'closed') || (state === 'investigating')) {
+                $('#assignation__external').show();
+            } else {
+                $('#assignation__external').hide();
+            }
+        }
+        else {
+            $('input[name=publish_response]').hide();
+            $('.response_templates_select').hide();
+            $('#status_update_container').hide();
+
+            $('#assignation__category').hide();
+            $('#assignation__subdivision').hide();
+            $('#assignation__category select').val('');
+            $('#assignation__subdivision select').val('');
+
+            $('#assignation__external select').val('');
+            $('#assignation__external').hide();
+            $('#external_body').hide();
+            $('#third_personal, label[for=third_personal]').hide();
+        }
+
+    }).change();
+
+    $("form#report_edit input[type=submit]").click(function() {
+        $("form#report_edit").data("clicked_button", $(this).attr("name"));
+    });
+
+    $("form#report_edit").submit(function() {
+        // Make sure the external body field has a value if it's visible
+        // and the form is submitted as a 'save' action (i.e. not a rotate
+        // photo).
+        var clicked = $(this).data("clicked_button");
+        if (clicked == "publish_response" || clicked == "Submit changes") {
+            var visible = $("select#body_external:visible").length > 0;
+            var val = parseInt($("select#body_external").val(), 10);
+            if (visible && isNaN(val)) {
+                $("#assignation__external .error").removeClass("hidden");
+                $("select#body_external").focus().get(0).scrollIntoView();
+                return false;
+            }
+        }
+        // If the user has clicked to rotate a photo and has edited other
+        // fields, ask for confirmation before submitting the form
+        if (/rotate_photo/.test(clicked) && form_fields_changed) {
+            var message = $(this).parent().data('confirm');
+            if (!confirm(message)) {
+                return false;
+            }
+        }
+    });
+
+    $("form#report_edit").find("input, select, textarea").change(function() {
+        form_fields_changed = true;
+    });
+});