From 8820dc24b33c330f0e4017056b02986da58568cb Mon Sep 17 00:00:00 2001
From: Mike Gerwitz <mike@mikegerwitz.com>
Date: Thu, 24 Mar 2011 22:22:31 -0400
Subject: [PATCH] Began adding 'try easejs' block

---
 scripts/ui.js |  24 ++++++++++++
 style.css     | 106 ++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 101 insertions(+), 29 deletions(-)

diff --git a/scripts/ui.js b/scripts/ui.js
index f21a3b1..1146677 100644
--- a/scripts/ui.js
+++ b/scripts/ui.js
@@ -19,6 +19,9 @@
         $( '<div>' )
             .attr( 'id', 'try' )
             .text( 'Try It!' )
+            .addClass( 'btn' )
+            .addClass( 'large' )
+            .addClass( 'glow' )
             .mousedown( function( event )
             {
                 // prevent dragging from highlighting the text (so it looks more
@@ -43,11 +46,32 @@
 
     function getTry()
     {
+        var $txt;
+
         return $trybox || ( function createTryBox()
         {
             return $trybox = $( '<div>' )
                 .attr( 'id', 'trybox' )
                 .hide()
+                .append( $( '<h2>' ).text( 'Try ease.js' ) )
+                .append( $txt = $( '<textarea>' ).text (
+                    "Test"
+                ) )
+                .append( $( '<div>' )
+                    .attr( 'id', 'trybtns' )
+                    .append( $( '<div>' )
+                        .attr( 'id', 'run' )
+                        .text( 'Run' )
+                        .addClass( 'btn' )
+                        .addClass( 'med' )
+                        .addClass( 'green' )
+                        .click( function()
+                        {
+                            var Class = easejs.Class;
+                            eval( $txt.val() );
+                        } )
+                    )
+                )
                 .prependTo( '#content' );
         } )();
     }
diff --git a/style.css b/style.css
index 50f8119..34e2be8 100644
--- a/style.css
+++ b/style.css
@@ -102,32 +102,24 @@ p.copyright a, p.copyright a:link {
   0% {
     -webkit-box-shadow: 0 0 0px #ffffff;
   }
-  70% {
-    -webkit-box-shadow: 0 0 0px #ffffff;
-  }
   100% {
     -webkit-box-shadow: 0 0 5px #ffffff;
   }
 }
 
-#try {
-  position: relative;
-  width: 100px;
-  margin: 0px auto;
-  top: -2em;
+.btn {
+  display: inline-block;
 
   background-color: #f57900;
-  color: white;
-  font-size: 2em;
-  font-weight: bold;
-  text-shadow: black 2px 2px 5px;
-  cursor: pointer;
-  text-align: center;
+  color:           white;
+  font-weight:     bold;
+  cursor:          pointer;
+  text-align:      center;
 
   padding: 0.25em 0.5em;
 
-  border: 1px solid #ce5c00;
-  border-radius: 0.25em;
+  border:            1px solid #ce5c00;
+  border-radius:      0.25em;
   -moz-border-radius: 0.25em;
 
   background-image: -webkit-gradient(
@@ -142,31 +134,74 @@ p.copyright a, p.copyright a:link {
       rgb(245,123,0) 0%,
       rgb(206,93,0) 100%
   );
+}
 
+.btn.green {
+  border: 1px solid #4e9a06;
+
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0, rgb(116,210,22)),
+      color-stop(1, rgb(139,226,52))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(116,210,22) 0%,
+      rgb(139,226,52) 100%
+  );
+}
+
+.btn.med {
+  width: 75px;
+
+  font-size:   1.5em;
+  text-shadow: black 2px 2px 4px;
+}
+
+.btn.large {
+  width: 100px;
+
+  font-size:   2em;
+  text-shadow: black 2px 2px 5px;
+}
+
+.glow {
   -webkit-box-shadow: 0 0 5px #ffffff;
-  -moz-box-shadow: 0 0 5px #ffffff;
-  box-shadow:0 0 5px #ffffff;
+  -moz-box-shadow:    0 0 5px #ffffff;
+  box-shadow:         0 0 5px #ffffff;
 
-  -webkit-transition: -webkit-box-shadow 0.25s linear;
+  -webkit-transition:       -webkit-box-shadow 0.25s linear;
   -moz-transition-property: -moz-box-shadow;
   -moz-transition-duration: 0.25s;
 
-  -webkit-animation-name: pulse;
-  -webkit-animation-duration: 2s;
-  -webkit-animation-direction: alternate;
+  -webkit-animation-name:            pulse;
+  -webkit-animation-duration:        1s;
+  -webkit-animation-direction:       alternate;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-iteration-count: 1;
 }
 
-#try:hover {
-  -webkit-box-shadow:0 0 10px #ffffff;
-  -moz-box-shadow: 0 0 10px #ffffff;
-  box-shadow:0 0 10px #ffffff;
+.glow:hover {
+  -webkit-box-shadow: 0 0 10px #ffffff;
+  -moz-box-shadow:    0 0 10px #ffffff;
+  box-shadow:         0 0 10px #ffffff;
+}
+
+#try {
+  display:  block;
+  position: relative;
+
+  margin: 0px auto;
+  top:    -2em;
 }
 
 #trybox {
-  border: 1px solid #eeeeec;
-  border-radius: 0.5em;
+  position: relative;
+
+  border:             1px solid #eeeeec;
+  border-radius:      0.5em;
   -moz-border-radius: 0.5em;
 
   background-image: -webkit-gradient(
@@ -182,6 +217,19 @@ p.copyright a, p.copyright a:link {
       rgb(238,238,236) 100%
   );
 
-  height: 350px;
+  padding: 1em;
+}
+
+#trybox h2 {
+  margin: 0px 0px 1em 0px;
+}
+
+#trybox textarea {
+  width:  100%;
+  height: 20em;
+}
+
+#trybox #trybtns {
+  text-align: right;
 }