Beginning of 'Try It' button

index.html

@@ -19,8 +19,10 @@
     </div>
 
     <div id="content">
-      <br clear="both" />
-
+      <noscript>
+        <strong>Please enable JavaScript to take advantage of the interactive
+        features of this website.</strong>
+      </noscript>
       <p>
         ease.js is a collection of CommonJS modules intended to &ldquo;ease&rdquo;
         the transition into JavaScript from other Object-Oriented languages. It
@@ -39,5 +41,11 @@
     <p class="copyright">
       Copyright &copy; 2011 <a href="http://mikegerwitz.name">Mike Gerwitz</a>
     </p>
+
+    <script type="text/javascript"
+      src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
+    </script>
+    <script type="text/javascript" src="scripts/ease-full.js"></script>
+    <script type="text/javascript" src="scripts/ui.js"></script>
   </body>
 </html>

scripts/ui.js

@@ -0,0 +1,55 @@
+/**
+ * Page enhancements for ease.js website
+ *
+ *  Copyright (C) 2010 Mike Gerwitz
+ */
+
+( function()
+{
+    var $trybox = null;
+
+    $( document ).ready( function()
+    {
+        appendTry();
+    } );
+
+
+    function appendTry()
+    {
+        $( '<div>' )
+            .attr( 'id', 'try' )
+            .text( 'Try It!' )
+            .mousedown( function( event )
+            {
+                // prevent dragging from highlighting the text (so it looks more
+                // like an image)
+                event.preventDefault();
+            } )
+            .click( function( event )
+            {
+                var $try = getTry();
+
+                $( this ).text(
+                    ( $try.is( ':visible' ) )
+                        ? 'Try It!'
+                        : 'Hide It'
+                );
+
+                $try.slideToggle();
+            } )
+            .appendTo( '#header' );
+    }
+
+
+    function getTry()
+    {
+        return $trybox || ( function createTryBox()
+        {
+            return $trybox = $( '<div>' )
+                .attr( 'id', 'trybox' )
+                .hide()
+                .prependTo( '#content' );
+        } )();
+    }
+} )();
+

style.css

@@ -98,3 +98,58 @@ p.copyright a, p.copyright a:link {
   color: #babdb6;
 }
 
+#try {
+  position: relative;
+  width: 100px;
+  margin: 0px auto;
+  top: -2em;
+
+  background-color: #f57900;
+  color: white;
+  font-size: 2em;
+  font-weight: bold;
+  text-shadow: black 2px 2px 5px;
+  cursor: pointer;
+  text-align: center;
+
+  padding: 0.25em 0.5em;
+
+  border: 1px solid #ce5c00;
+  border-radius: 0.25em;
+  -moz-border-radius: 0.25em;
+
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0, rgb(245,123,0)),
+      color-stop(1, rgb(206,93,0))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(245,123,0) 0%,
+      rgb(206,93,0) 100%
+  );
+}
+
+#trybox {
+  border: 1px solid #eeeeec;
+  border-radius: 0.5em;
+  -moz-border-radius: 0.5em;
+
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0, rgb(186,189,182)),
+      color-stop(1, rgb(238,238,236))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(186,189,182) 0%,
+      rgb(238,238,236) 100%
+  );
+
+  height: 350px;
+}
+