Stub out infobox

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
 ------------------------------------------------------- */
 

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>

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');
 

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;
+};