From 9681ebd2522a955c0e58b7407aa70d925b4658a3 Mon Sep 17 00:00:00 2001
From: Ansis Brammanis <ansis.brammanis@gmail.com>
Date: Tue, 26 Feb 2013 12:02:15 -0500
Subject: [PATCH] Add rough description box for presets

---
 css/app.css            | 10 ++++++++++
 js/id/ui/presetgrid.js | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/css/app.css b/css/app.css
index 380ee0cdd..16ad86d8f 100644
--- a/css/app.css
+++ b/css/app.css
@@ -769,6 +769,16 @@ div.combobox {
     position: absolute;
 }
 
+.grid-entry .preset-help {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+}
+
+.preset-inspect {
+  position: relative;
+}
+
 .grid-entry .preset-icon-fill.area {
     position: absolute;
     opacity: 0.4;
diff --git a/js/id/ui/presetgrid.js b/js/id/ui/presetgrid.js
index 6087c5fb0..2ee182855 100644
--- a/js/id/ui/presetgrid.js
+++ b/js/id/ui/presetgrid.js
@@ -100,6 +100,41 @@ iD.ui.PresetGrid = function() {
         entered.append('div')
             .attr('class', function(d) { return 'preset-' + d.icon + ' icon'; });
 
+        var presetinspect;
+
+        entered.append('button')
+            .attr('tabindex', -1)
+            .attr('class', 'preset-help minor')
+            .on('click', function(d) {
+
+                // Display description box inline
+
+                d3.event.stopPropagation();
+
+                var entry = this.parentNode,
+                    index,
+                    entries = selection.selectAll('button.grid-entry');
+
+                if (presetinspect && presetinspect.remove().datum() === d) {
+                    presetinspect = null;
+                    return;
+                }
+
+                entries.each(function(d, i) {
+                    if (this === entry) index = i;
+                });
+
+                var selector = '.grid-entry:nth-child(' + (Math.floor(index/4) * 4 + 5 ) + ')';
+
+                presetinspect = selection.insert('div', selector)
+                    .attr('class', 'preset-inspect col12')
+                    .datum(d);
+
+                presetinspect.append('h2').text(d.title || d.name);
+            })
+            .append('span')
+                .attr('class', 'icon inspect');
+
         entered.append('span').attr('class','label').text(name);
 
         entries.exit().remove();