From 52af8d3cbc121ab23242557a338e795a54ddc72a Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@7thposition.com>
Date: Tue, 31 Mar 2015 22:49:02 -0400
Subject: [PATCH] Stub out infobox

---
 css/app.css      | 14 ++++++++++++
 index.html       |  1 +
 js/id/ui.js      |  5 +++++
 js/id/ui/info.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 75 insertions(+)
 create mode 100644 js/id/ui/info.js

diff --git a/css/app.css b/css/app.css
index 2eccfbe2d..ad1690e84 100644
--- a/css/app.css
+++ b/css/app.css
@@ -2149,6 +2149,20 @@ img.wiki-image {
     stroke-width: 5;
 }
 
+/* Info Box
+------------------------------------------------------- */
+.infobox {
+    position: absolute;
+    overflow: hidden;
+    top: 220px;
+    width: 200px;
+    height: 150px;
+    z-index: 5;
+    background:rgba(0,0,0,.8);
+    border-radius: 0 0 0 4px;
+}
+
+
 /* About Section
 ------------------------------------------------------- */
 
diff --git a/index.html b/index.html
index fd5e3aeba..fa0d704ab 100644
--- a/index.html
+++ b/index.html
@@ -76,6 +76,7 @@
 
         <script src="js/id/ui.js"></script>
         <script src='js/id/ui/intro.js'></script>
+        <script src='js/id/ui/info.js'></script>
         <script src='js/id/ui/attribution.js'></script>
         <script src='js/id/ui/radial_menu.js'></script>
         <script src='js/id/ui/inspector.js'></script>
diff --git a/js/id/ui.js b/js/id/ui.js
index e61c3160d..4e889fafe 100644
--- a/js/id/ui.js
+++ b/js/id/ui.js
@@ -37,6 +37,11 @@ iD.ui = function(context) {
             .style('display', 'none')
             .call(iD.ui.MapInMap(context));
 
+        content.append('div')
+            .attr('class', 'infobox')
+            .style('display', 'none')
+            .call(iD.ui.Info(context));
+
         bar.append('div')
             .attr('class', 'spacer col4');
 
diff --git a/js/id/ui/info.js b/js/id/ui/info.js
new file mode 100644
index 000000000..4f4d5fcc8
--- /dev/null
+++ b/js/id/ui/info.js
@@ -0,0 +1,55 @@
+iD.ui.Info = function(context) {
+    var key = 'I';
+
+    function info(selection) {
+
+        function redraw() {
+            if (hidden()) return;
+        }
+
+
+        function hidden() {
+            return selection.style('display') === 'none';
+        }
+
+
+        function toggle() {
+            if (d3.event) d3.event.preventDefault();
+
+            if (hidden()) {
+                selection
+                    .style('display', 'block')
+                    .style('opacity', 0)
+                    .transition()
+                    .duration(200)
+                    .style('opacity', 1);
+
+                redraw();
+
+            } else {
+                selection
+                    .style('display', 'block')
+                    .style('opacity', 1)
+                    .transition()
+                    .duration(200)
+                    .style('opacity', 0)
+                    .each('end', function() {
+                        d3.select(this).style('display', 'none');
+                    });
+            }
+        }
+
+        context.map()
+            .on('drawn.info', redraw);
+
+        redraw();
+
+        var keybinding = d3.keybinding('info')
+            .on(key, toggle);
+
+        d3.select(document)
+            .call(keybinding);
+    }
+
+    return info;
+};