item info and a hacks section

css/index.css

@@ -52,9 +52,34 @@
   background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); 
   border: solid 1px #ccc;
   border-radius: 8px;
-  display: block;
+  display: inline-block;
   margin: 4px;
   padding: 8px 8px 6px 8px;
-  
-
 }
+
+.app-info
+{
+  display: inline-block;
+  border: 1px solid #dedede;
+  background: #eee;
+  max-width: 144px;
+  overflow: hidden;
+  margin: 0 0 0 8px;
+  padding: 8px;
+  vertical-align: top;
+}
+
+.app-info h2
+{
+  color: #444;
+  font-size: 1.2em;
+  margin: 0;
+  padding: 0;
+}
+
+.app-info span
+{
+  color: #222;
+  font-size: .8em;
+}
+

index.html

@@ -39,6 +39,15 @@
         <ul id="appsExternal">
         </ul>
       </div>
+
+      <div class="blurb">
+        unfinished demos &amp; hacks
+      </div>
+
+      <div class="apps">
+        <ul id="appsHacks">
+        </ul>
+      </div>
     </div>
   </div>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

js/index.js

@@ -1,25 +1,64 @@
 $(function () {
-  var appsSurii = [ "Settings", "Tiny Cartridge" ],
+  function makeItem( name, item ) {
+    return '<li><a href="' + item.url + '" title="' + name + '"><img alt="" src="' + name + '/surii-icon.png" /><div class="app-info" style="display: none;"><h2>' + name + '</h2>' + '<span>' + (item.desc || '') + '</span>' + '</div></a></span></li>';
+  }
+
+  var appsSurii = {
+        "Settings": {
+          url: "Settings/",
+          desc: "surii.net settings"
+        },
+        "Tiny Cartridge": {
+          url: "Tiny Cartridge/",
+          desc: "3DS news"
+        }
+      },
       appsExternal = {
-        "OkiwiDS": "http://okiwids.co.cc/3DS/"
+        "OkiwiDS": {
+          url: "http://okiwids.co.cc/3DS/",
+          desc: "web browsing, games, chat"
+        }
+      },
+      appsHacks = {
+        "ryanttb": {
+          url: "hack/",
+          desc: "3DS browser tricks"
+        }
       },
       appItems = "",
       i = 0,
-      appEx;
+      appName,
+      selected = null;
 
-  for ( ; i < appsSurii.length; i++ ) {
-    appItems += '<li><a href="' + appsSurii[ i ] + '/" title="' + appsSurii[ i ] + '"><img alt="" src="' + appsSurii[ i ] + '/surii-icon.png" /></a></li>';
+  for ( appName in appsSurii ) {
+    appItems += makeItem( appName, appsSurii[ appName ] );
   }
 
   $("#appsSurii").html( appItems );
 
   appItems = "";
-  for ( appEx in appsExternal ) {
-    appItems += '<li><a href="' + appsExternal[ appEx ] + '" title="' + appEx + '"><img alt="" src="' + appEx + '/surii-icon.png" /></a></li>';
+  for ( appName in appsExternal ) {
+    appItems += makeItem( appName, appsExternal[ appName ] );
   }
 
   $("#appsExternal").html( appItems );
 
+  appItems = "";
+  for ( appName in appsHacks ) {
+    appItems += makeItem( appName, appsHacks[ appName ] );
+  }
+
+  $("#appsHacks").html( appItems );
+
+  $( "a" ).click( function( ) {
+    if ( this !== selected ) {
+      $( selected ).find( ".app-info" ).hide( );
+      $( this ).focus( ).find( ".app-info" ).show( );
+      selected = this;
+      return false;
+    }
+  } );
+
   if ( !surii.friendCode ) { 
     alert( "You have not entered your\n3DS Friend Code!\nPlease open Settings.\n\nSome games & apps require\na Friend Code to save data\nor interact with other users." );
   }