more cleaning up of comment box. javascript stuff.

app/views/comments/_new_comment.html.haml

@@ -1,7 +1,7 @@
 = form_for Comment.new, :remote => true do |f|
   %p
     %label{:for => "comment_text_on_#{post.id}"} Comment
-    = f.text_area :text, :rows => 2, :id => "comment_text_on_#{post.id}"
+    = f.text_area :text, :rows => 1, :id => "comment_text_on_#{post.id}", :class => "comment_box"
   = f.hidden_field :post_id, :value => post.id
-  %p
+  %p{:style => "text-align:right;"}
-    = f.submit "Comment"
+    = f.submit "Comment", :class => "comment_submit"

public/javascripts/view.js

@@ -61,6 +61,27 @@ $(document).ready(function(){
     speed: 3000
   });
 
+
+  //comments/////
+
+  $(".comment_box").live('focus', function(evt){
+    var $this = $(this);
+    $this.attr("rows", 2);
+    $this.parents("p").parents("form").children("p").children(".comment_submit").fadeIn(200);
+  });
+
+  $(".comment_box").live('blur', function(evt){
+    var $this = $(this);
+    if( $this.val() == '' ) {
+      $this.parents("p").parents("form").children("p").children(".comment_submit").fadeOut(0);
+      $this.attr("rows", 1);
+    }
+  });
+
+  $(".comment_submit").live('click', function(evt){
+    $this.parents("p").parents("form").children("p").children(".comment_box").attr("rows", 1);
+  });
+
   //buttons//////
   
 

public/stylesheets/application.css

@@ -201,6 +201,10 @@ form {
   padding: 0;
     padding-left: 65px; }
 
+input.comment_submit {
+  display: none;
+  margin-right: -10px; }
+
 ul.comment_set {
   margin: 0;
     margin-top: 1em;

public/stylesheets/sass/application.sass

@@ -248,6 +248,12 @@ form
   :padding 0
     :left 65px
 
+input.comment_submit
+  :display none
+  :margin
+    :right -10px
+  
+
 ul.comment_set
   :margin 0
     :top 1em