Clicking on scale bar will toggle units from imperial/metric

(re: #2351)

css/app.css

@@ -2434,6 +2434,10 @@ div.full-screen > button:hover {
     max-height: 30px;
     float: left;
     clear: left;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 #info-block {
@@ -2446,6 +2450,10 @@ div.full-screen > button:hover {
     width: 100%;
 }
 
+#scale:hover {
+    cursor: pointer;
+}
+
 #scale text {
     font: 12px sans-serif;
     stroke: none;

js/id/ui/scale.js

@@ -1,11 +1,11 @@
 iD.ui.Scale = function(context) {
     var projection = context.projection,
+        imperial = (iD.detect().locale.toLowerCase() === 'en-us'),
         maxLength = 180,
         tickHeight = 8;
 
     function scaleDefs(loc1, loc2) {
         var lat = (loc2[1] + loc1[1]) / 2,
-            imperial = (iD.detect().locale.toLowerCase() === 'en-us'),
             conversion = (imperial ? 3.28084 : 1),
             dist = iD.geo.lonToMeters(loc2[0] - loc1[0], lat) * conversion,
             scale = { dist: 0, px: 0, text: '' },
@@ -64,16 +64,23 @@ iD.ui.Scale = function(context) {
             .text(scale.text);
     }
 
+
     return function(selection) {
+        function switchUnits() {
+            imperial = !imperial;
+            selection.call(update);
+        }
+
         var g = selection.append('svg')
             .attr('id', 'scale')
+            .on('click', switchUnits)
             .append('g')
             .attr('transform', 'translate(10,11)');
 
         g.append('path').attr('id', 'scalepath');
         g.append('text').attr('id', 'scaletext');
 
-        update(selection);
+        selection.call(update);
 
         context.map().on('move.scale', function() {
             update(selection);