added lightboxes

app/assets/javascripts/application.js

@@ -495,10 +495,16 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
     $(this).parents('.CardOnGraph').find('.go-link').attr('href', link);
   });
   
+  // when you click the addmap button
   $('.addMap').click(function(event) {
     createNewMap();
   });
   
+  //bind lightbox clicks
+  $('.openLightbox').click(function() {
+    openLightbox($(this).attr('data-open'));
+  });
+  
   // bind keyboard handlers
   $('body').bind('keyup', function(e) {
     switch(e.which) {
@@ -691,3 +697,10 @@ function openNodeShowcard(node) {
   //node.setData('dim', 1, 'current');
   MetamapsModel.showcardInUse = node.id;
 }
+
+function openLightbox(which) {
+  $('.lightboxContent').hide();
+  $('#' + which).show();
+  $('#lightbox_overlay').show();
+  $('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px' );
+}

app/assets/stylesheets/application.css

@@ -1476,6 +1476,99 @@ background-size: 30px 30px;
 }
 
 
+
+
+/* lightboxes */
+
+#lightbox_overlay {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 1000000;
+  display:none;
+}
+
+#lightbox_main {
+  width: 550px;
+  height: auto;
+  margin: 0 auto;
+  z-index: 2;
+  position: relative;
+  top:50%;
+  background-color: transparent;
+}
+
+#lightbox_screen {
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  position: absolute;
+  background-color: #000;
+  opacity: 0.42;
+  filter: alpha(opacity=42);
+  -moz-opacity: 0.42;
+}
+
+#lightbox_overlay #lightbox_main #lightbox_header {
+padding: 6px 5px 1px 0;
+background-color: #333;
+font-weight: bold;
+height: 18px;
+border: solid 2px #000;
+}
+
+#lightbox_overlay #lightbox_main a#lightbox_close {
+  /*background-image: url(../images/barometer_close.png);*/
+  cursor: pointer;
+  height: 42px;
+  outline-color: -moz-use-text-color;
+  outline-style: none;
+  outline-width: medium;
+  overflow: hidden;
+  position: absolute;
+  top: -23px;
+  right: -22px;
+  width: 42px;
+  z-index: 4;
+  border: none;
+}
+
+#lightbox_content {
+  background: silver;
+  padding: 20px;
+}
+
+.lightboxContent h3 {
+ font-style: italic;
+ text-transform: uppercase;
+ font-family: 'vinyl';
+ font-size: 30px;
+ line-height:35px;
+ color:black;
+}
+
+.lightboxContent {
+  display:none;
+}
+
+.openLightbox {
+  cursor:pointer;
+}
+
+#about ul {
+  list-style:none;
+}
+#about ul li {
+  display:inline-block;
+  padding:5px;
+}
+#about li a {
+  color:#097A51;
+}
+
 /* --- styling the logo button ---*/
 /*.footer {
   width: 188px;
@@ -1561,7 +1654,7 @@ background-size: 22px 20px;
   height:124px;
   z-index:12;
   width:151px;
-  color: #67AF9F;
+  color: white;
   white-space: nowrap;
   text-align: center;
   font-size: 16px;

app/controllers/main_controller.rb

@@ -137,7 +137,7 @@ class MainController < ApplicationController
         desc = true
       end
       
-      search = term.downcase + '%'
+      search = desc ?  '%' + term.downcase + '%' : term.downcase + '%'
       query = desc ?  'LOWER("desc") like ?' : 'LOWER("name") like ?'
       if !user
         @maps = Map.where(query, search).limit(5).order('"name"')

app/views/layouts/_lightboxes.html.erb

@@ -0,0 +1,63 @@
+<%#
+  # @file
+  # The inner HTML of the account box that comes up in the bottom left
+  #%>
+
+
+<div id="lightbox_overlay">
+  <div id="lightbox_main">
+    <a id="lightbox_close" onclick="document.getElementById('lightbox_overlay').style.display = 'none';return false" href="#"></a>
+    <div id="lightbox_content">
+      
+      <div class="lightboxContent" id="about">
+        <h3>About Metamaps.cc</h3>
+        
+        <p>
+         (not going to be this text) 
+          METAMAPS IS A PLATFORM FOR VISIONING, MAGIC MAKING, PRODUCTIVE CONVERSATION, UNDERSTANDING SOMETHING, INNOVATION, FREE STYLE WEAVING AND ALL NIGHT BRAINSTORMING.
+        </p>
+        
+        <ul>
+          <li><a href="/faq">FAQ</a></li>
+          <li><a href="http://blog.metamaps.cc" target="_blank">blog</a></li>
+          <li><a href="https://plus.google.com/u/0/communities/115060009262157699234" target="_blank">community</a></li>
+          <li><a href="https://twitter.com/metamapps" target="_blank">@metamapps</a></li>
+          <li><a href="https://github.com/Connoropolous/metamaps_gen002" target="_blank">source code</a></li>
+          <li><a href="http://metamaps.cc/maps/331" target="_blank">terms</a></li>
+        </ul>
+        <div class="clearfloat"></div>
+      </div>
+      
+      <div class="lightboxContent" id="tutorial">
+        <h3>Tutorial</h3>
+        <iframe width="510" height="383" src="//www.youtube.com/embed/0Bd8XxlNG3U?rel=0" frameborder="0" allowfullscreen></iframe>
+      </div>
+      
+      <div class="lightboxContent" id="cheatsheet">
+        <h3>Quick Reference Guide</h3>
+        
+        <div class="cheatsheetBox">
+        
+        </div>
+        <div class="cheatsheetBox">
+        
+        </div>
+        <div class="cheatsheetBox">
+        
+        </div>
+        <div class="cheatsheetBox">
+        
+        </div>
+        <div class="cheatsheetBox">
+        
+        </div>
+        <div class="cheatsheetBox">
+        
+        </div>
+      </div>
+      
+    </div>
+  </div>
+  <div id="lightbox_screen" onclick="document.getElementById('lightbox_overlay').style.display = 'none';return false" style="height: 100%;"></div>
+</div>
+

app/views/layouts/application.html.erb

@@ -69,10 +69,8 @@
                     <div class="inBeta">beta</div>
                     <button class="button" onclick="BAROMETER.show();">feedback!</button>
                 </li>
-                <li class="meta">
+                <li class="meta openLightbox" data-open="about">about</li>
-                  <a href="#" target="_blank">about</a>
+                <li class="tutorial openLightbox" data-open="tutorial">tutorial</li>
-                </li>
-                <li class="tutorial"><a href="#" target="_blank">tutorial</a></li>
                 <li class="exploreMaps"><%= link_to "explore maps", maps_url %></li>
           </ul>
           <div id="mainTitle"><%= link_to "metamaps", root_url %></div><!--<div id="beta">beta</div>-->
@@ -89,12 +87,12 @@
     <%= render :partial => 'maps/new' %>
   <% end %>
   
-  <%= render :partial => 'layouts/ga' if Rails.env.production? %>
-  
     <style type='text/css'>@import url('http://getbarometer.s3.amazonaws.com/assets/barometer/css/barometer.css');</style>
     <script src='http://getbarometer.s3.amazonaws.com/assets/barometer/javascripts/barometer.js' type='text/javascript'></script>
     <script type="text/javascript" charset="utf-8">
       BAROMETER.load('Scqak8nyHdFEkezKMNeQp');
     </script>
+  <%= render :partial => 'layouts/lightboxes' %>
+  <%= render :partial => 'layouts/ga' if Rails.env.production? %>
 </body>
 </html>

app/views/maps/show.html.erb

@@ -34,7 +34,7 @@
 </div>
 
 <div class="index">
-  <div class="openCheatsheet"></div>
+  <div class="openCheatsheet openLightbox" data-open="cheatsheet"></div>
   <span><img width="35" height="35" src="/assets/map.png"></span>
   <span class="mapName"><%= @map.name %></span>
   <span class="mapInfo"></span>
@@ -187,7 +187,7 @@
       
       var openInfo = function(event) {
         clearTimeout(lT);
-        if (! sliding1 && event.srcElement.className != "openCheatsheet") { 
+        if (! sliding1 && event.srcElement.className != "openCheatsheet openLightbox") { 
             sliding1 = true;
             
             $('.mapInfoBox').fadeIn(200, function() {