From ab5fa3a1b9d304200783c192e0f687625b094430 Mon Sep 17 00:00:00 2001
From: Allison Bailey <allison@soundgis.com>
Date: Wed, 18 Dec 2013 15:55:00 -0800
Subject: [PATCH] Left side bar for help text.  Ticket:
 https://github.com/aaronr/bboxfinder.com/issues/17

---
 css/bbox.css | 10 +++++++++-
 index.html   |  2 ++
 js/bbox.js   | 11 +++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/css/bbox.css b/css/bbox.css
index 44ed8f5..b537aaa 100644
--- a/css/bbox.css
+++ b/css/bbox.css
@@ -102,7 +102,7 @@ html, body, #map {
 
 #map-ui-proj {
     position: absolute;
-    top: 390px;
+    top: 420px;
     left: 10px;
     list-style: none;
     margin: 0;
@@ -218,6 +218,14 @@ html, body, #map {
     background-position: -63px -2px;
 }
 
+#help a.enabled {
+    background-position: -342px -2px;
+}
+
+#help a {
+    background-position: -93px -2px;
+}
+
 .zeroclipboard-is-hover {
   opacity:1 !important;
 }
diff --git a/index.html b/index.html
index 6af055d..f5bc7ac 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,7 @@
     <ul id="map-ui">
         <li id="create-geojson"><a title="Enter coordinates"></a></li>
         <li id="geolocation"><a class="active" title="My location"></a></li>
+        <li id="help"><a title="Help"></a></li>
     </ul>
     <div id="map"></div>
     <div id="rsidebar" >
@@ -41,6 +42,7 @@
       <textarea placeholder="Paste GeoJSON, WKT, ogrinfo extent output or a bbox in the format (xMin,yMin,xMax,yMax)" title="Paste It!"></textarea>
     </div>
     <div id="lsidebar">
+      <textarea readonly placeholder="Looking for a little help?" title="Help Me"></textarea>
     </div>
 
     <section id="info-box">
diff --git a/js/bbox.js b/js/bbox.js
index 0a1d66c..a323b08 100644
--- a/js/bbox.js
+++ b/js/bbox.js
@@ -678,6 +678,17 @@ $(document).ready(function() {
         $('#create-geojson a').toggleClass('enabled');
     });
 
+    // handle help button click events
+    $('#help').click(function(){
+        lsidebar.toggle();
+        $('#help a').toggleClass('enabled');
+    });
+    // close left sidebar with leaflet's "X"
+    $('.left a.close').click(function(){
+        $('#help a').toggleClass('enabled');
+    });
+
+
     // toggle #info-box
     $('#info-toggle-button').click(function(){
         $('#wgslabel, #projlabel').fadeToggle(200);