From 2bac9135374b1cfc311d5e2cb4926f47e70b18a1 Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Mon, 10 Dec 2012 18:36:36 -0500
Subject: [PATCH] styled opacity slider + fixed tooltips.

---
 css/app.css               | 30 ++++++++++++++++++++++----
 js/id/ui/layerswitcher.js | 45 ++++++++++++++++++++-------------------
 2 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/css/app.css b/css/app.css
index 02c9cc004..1a106d2cd 100644
--- a/css/app.css
+++ b/css/app.css
@@ -430,13 +430,33 @@ button.Browse .label {
 }
 
 .opacity-options li {
+    position: relative;
     height: 100%;
     display: block;
     float: left;
+    cursor: pointer;
 }
 
-.layerswitcher-control a.opacity {
-    background:#4672ff;
+.opacity-options li .select-box{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+}
+
+.layerswitcher-control li:hover .select-box,
+.layerswitcher-control li.selected .select-box {
+    border: 2px solid #4672ff;
+    background: rgba(70, 114, 255, .5);
+    opacity: .5;
+}
+.layerswitcher-control li.selected:hover .select-box,
+.layerswitcher-control li.selected .select-box {
+    opacity: 1;
+}
+
+.layerswitcher-control .opacity {
+    background:#222;
     display:inline-block;
     width:20px;
     height:18px;
@@ -590,7 +610,8 @@ div.typeahead a {
 .tooltip {
     white-space: normal;
     position: absolute;
-    z-index: 1030;
+    z-index: -1000;
+    height: 0;
     padding: 5px;
     opacity: 0;
     display: block;
@@ -601,6 +622,8 @@ div.typeahead a {
 .tooltip.in {
     opacity: 0.8;
     filter: alpha(opacity=80);
+    z-index: 1030;
+    height: auto;
 }
 
 .tooltip.top {
@@ -619,7 +642,6 @@ div.typeahead a {
   margin-left: -5px;
 }
 
-
 .tooltip-inner {
     max-width: 200px;
     min-width: 100px;
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
index d9ee05b02..4dab8a921 100644
--- a/js/id/ui/layerswitcher.js
+++ b/js/id/ui/layerswitcher.js
@@ -2,13 +2,16 @@ iD.layerswitcher = function(map) {
     var event = d3.dispatch('cancel', 'save'),
         sources = [{
             name: 'Bing',
-            source: iD.BackgroundSource.Bing
+            source: iD.BackgroundSource.Bing,
+            description: 'High quality satellite imagery'
         }, {
             name: 'TIGER 2012',
-            source: iD.BackgroundSource.Tiger2012
+            source: iD.BackgroundSource.Tiger2012,
+            description: 'Public domain road data from the US Government'
         }, {
             name: 'OSM',
-            source: iD.BackgroundSource.OSM
+            source: iD.BackgroundSource.OSM,
+            description: 'The default OpenStreetMap layer'
         }],
         opacities = [1, 0.5, 0];
 
@@ -34,30 +37,28 @@ iD.layerswitcher = function(map) {
             .attr('data-original-title', 'Adjust the opacity')
             .call(bootstrap.tooltip().placement('right'))
             .attr('class', 'opacity-options')
-            .selectAll('a.opacity')
+            .selectAll('div.opacity')
             .data(opacities)
             .enter()
-            .append('li').append('a').attr('class', 'opacity')
+            .append('li')
+              .on('click', function(d) {
+                  d3.select('#tile-g')
+                      .transition()
+                      .style('opacity', d)
+                      .attr('data-opacity', d);
+                  d3.selectAll('.opacity-options li')
+                  .classed('selected', false)
+                  d3.select(this)
+                  .classed('selected', true)
+              })
+            .html("<div class='select-box'></div>")
+            .append('div')
+            .attr('class', 'opacity')
             .style('opacity', function(d) {
                 return d;
-            })
-            .on('mouseover', function(d) {
-                d3.select('#tile-g')
-                    .transition()
-                    .style('opacity', d);
-            })
-            .on('mouseout', function(d) {
-                var o = d3.select('#tile-g').attr('data-opacity');
-                d3.select('#tile-g')
-                    .transition()
-                    .style('opacity', o);
-            })
-            .on('click', function(d) {
-                d3.select('#tile-g')
-                    .transition()
-                    .style('opacity', d)
-                    .attr('data-opacity', d);
             });
+            // Make sure there is an active selection by default
+            d3.select('.opacity-options li').classed('selected', true)
 
         function selectLayer(d) {
             content.selectAll('a.layer')