woohoo, resizable

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
 .sass-cache/
+CoffeeScript.wdgt/

sass/style.scss

@@ -2,25 +2,37 @@
 @import 'compass/utilities';
 
 $padding: 10px;
-$width: 1000px - ($padding * 2);
-$height: 460px - ($padding * 2);
-
-$textarea-width: ($width - $padding) / 2;
-$textarea-height: $height - image_height('logo.png') - $padding;
 
 body {
-  form {
-    background-color: #181A3A;
-    @include border-radius($padding);
-    padding: $padding;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  opacity: 0.85;
 
-    width: $width;
-    height: $height;
-    @include clearfix;
+  #resize {
+    position: absolute;
+    bottom: $padding + 22px;
+    right: 16px;
+
+    -apple-dashboard-region: dashboard-region(control rectangle);
+  }
+
+  form {
+    position: absolute;
+    background: url('banding.png') repeat #181A3A;
+    @include border-radius($padding);
+
+    top: $padding;
+    left: $padding;
+    bottom: $padding;
+    right: $padding;
 
     header {
       margin-bottom: $padding;
-      position: relative;
+      position: absolute;
+      top: $padding;
+      left: $padding;
+      right: $padding;
 
       @include background(
         linear-gradient(#eee, #f8f8f8)
@@ -43,9 +55,10 @@ body {
       #error {
         position: absolute;
         right: 0;
-        width: $width - image_width('logo.png') - $padding;
-        height: image_height('logo.png') - ($padding * 2);
-        margin-left: $padding;
+        top: 0;
+        bottom: 0;
+        left: image_width('logo.png') + $padding;
+
         @include border-right-radius($padding / 2);
 
         padding: $padding 0;
@@ -72,8 +85,16 @@ body {
     }
   }
 
+  div {
+    position: absolute;
+    bottom: $padding;
+    right: $padding;
+    left: $padding;
+    top: ($padding * 2) + image_height('logo.png');
+
     textarea {
-    @include float-left;
+      position: absolute;
+
       border: none;
       background: transparent;
       font: {
@@ -81,11 +102,16 @@ body {
         size: 10px;
       }
       color: #DEF;
-    width: $textarea-width;
-    height: $textarea-height;
+      height: 100%;
+      width: 49%;
+
+      &#coffee-script {
+        left: 0;
+      }
 
       &#javascript {
-      margin-left: $padding 
+        right: 0;
+      }
     }
   }
 }

src/index.html

@@ -19,6 +19,24 @@ jQuery(->
   recompile()
 
   $('a').click(-> widget.openURL($(this).attr('href')))
+
+  growboxInset = null
+
+  mouseUp = ->
+    $(document).unbind('mousemove mouseup')
+    false
+
+  mouseMove = (event) ->
+    x = event.pageX + growboxInset.x
+    y = event.pageY + growboxInset.y
+
+    window.resizeTo(x, y)
+    false
+    
+  $('#resize').mousedown (event) ->
+    $(document).mousemove(mouseMove).mouseup(mouseUp)
+    growboxInset = {x:(window.innerWidth - event.pageX), y:(window.innerHeight - event.pageY)}
+    false
 )
     </script>
   </head>
@@ -28,11 +46,14 @@ jQuery(->
         <a href="http://jashkenas.github.com/coffee-script/" target="_new" id="logo">CoffeeScript</a>
         <div id="error"></div>
       </header>
+      <div>
         <textarea name="coffee-script" id="coffee-script">class HelloWorld
   constructor: ->
     console.log("Hello world!")</textarea>
         <textarea name="javascript" id="javascript"></textarea>
+      </div>
     </form>
+    <img id='resize' src='/System/Library/WidgetResources/resize.png' />
   </body>
 </html>
 

src/style.css

@@ -1,20 +1,35 @@
+body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  opacity: 0.85;
+}
+body #resize {
+  position: absolute;
+  bottom: 32px;
+  right: 16px;
+  -apple-dashboard-region: dashboard-region(control rectangle);
+}
 body form {
-  background-color: #181A3A;
+  position: absolute;
+  background: url("banding.png") repeat #181a3a;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -o-border-radius: 10px;
   -ms-border-radius: 10px;
   -khtml-border-radius: 10px;
   border-radius: 10px;
-  padding: 10px;
-  width: 980px;
-  height: 440px;
-  overflow: hidden;
-  *zoom: 1;
+  top: 10px;
+  left: 10px;
+  bottom: 10px;
+  right: 10px;
 }
 body form header {
   margin-bottom: 10px;
-  position: relative;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  right: 10px;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #f8f8f8));
   background: -webkit-linear-gradient(#eeeeee, #f8f8f8);
   background: -moz-linear-gradient(#eeeeee, #f8f8f8);
@@ -44,9 +59,9 @@ body form header a {
 body form header #error {
   position: absolute;
   right: 0;
-  width: 745px;
-  height: 30px;
-  margin-left: 10px;
+  top: 0;
+  bottom: 0;
+  left: 235px;
   -moz-border-radius-topright: 5px;
   -webkit-border-top-right-radius: 5px;
   -o-border-top-right-radius: 5px;
@@ -76,17 +91,26 @@ body form header #error span {
   color: #D00;
   padding-right: 10px;
 }
-body textarea {
-  display: inline;
-  float: left;
+body div {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  left: 10px;
+  top: 70px;
+}
+body div textarea {
+  position: absolute;
   border: none;
   background: transparent;
   font-family: Monaco, Consolas, "Lucida Console", monospace;
   font-size: 10px;
   color: #DEF;
-  width: 485px;
-  height: 380px;
+  height: 100%;
+  width: 49%;
 }
-body textarea#javascript {
-  margin-left: 10px;
+body div textarea#coffee-script {
+  left: 0;
+}
+body div textarea#javascript {
+  right: 0;
 }