Left side bar for help text. Ticket: #17

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

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">

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