3 files changed, 67 insertions, 5 deletions
diff --git a/src/templates/templates/communityfeed.ftl b/src/templates/templates/communityfeed.ftl
index e1ef191..b80ef9c 100644
--- a/src/templates/templates/communityfeed.ftl
+++ b/src/templates/templates/communityfeed.ftl
@@ -7,15 +7,29 @@
         <article>
             <div class="question" id="${thread.id}">
                 Q: ${thread.message.message!""}
-                <div><a class="reply" href="#">Answer</a></div>
+                <div><a class="reply" href="#" onclick="answerQuestion('${thread.id}'); return false;">Answer</a></div>
+            </div>
+            <div class="answer hidden" id="answer-${thread.id}">
+                <form action="${dynamicRoot}/feed/${chapter}/${thread.id}" method="post">
+                    <textarea name="question" rows="5" defaultValue="Write your reply."></textarea>
+                    <div><a class="send" href="#" onclick="$(this).closest('form').submit(); return false;">Send</a></div>
+                </form>
             </div>
             <#list messages as msg>
                 <div class="answer" id="${msg.id}">
                     A: ${msg.message!""}
-                    <a class="readmore" href="#">(continue)</a>
+                    <#--<a class="readmore" href="#">(continue)</a>-->
                 </div>
             </#list>
         </article>
     </#list>
+    <article>
+        <div class="question">
+            <form action="${dynamicRoot}/feed/${chapter}" name="newquestion" method="post">
+                <textarea name="question" rows="5" defaultValue="Ask your own question."></textarea>
+                <div><a class="send" href="#" onclick="$(this).closest('form').submit(); return false;">Send</a></div>
+            </form>
+        </div>
+    </article>
 </div>
 
diff --git a/web/scripts/growth.js b/web/scripts/growth.js
index 8cd46b0..86ac21f 100644
--- a/web/scripts/growth.js
+++ b/web/scripts/growth.js
@@ -87,6 +87,24 @@ $(document).ready(function()
         video.removeAttribute("controls");
     }
 
+    $('textarea').bind({
+        focus: function () {
+            var self = $(this);
+
+            if (self.val() == self.attr('defaultValue')) {
+                self.val('').removeClass('default');
+            };
+        },
+        blur: function () {
+            var self = $(this),
+                val = jQuery.trim(self.val());
+
+            if (val == "" || val == self.attr('defaultValue')) {
+              self.val(self.attr('defaultValue')).addClass('default');
+            };
+        }
+    }).trigger('blur');
+
     $("#banner").slideDown();
 });
 
@@ -281,3 +299,7 @@ function submitClassForm()
 
     return false;
 }
+
+function answerQuestion(id) {
+    $("#answer-" + id).slideDown();
+}
diff --git a/web/style.css b/web/style.css
index 83bdee7..4253a66 100644
--- a/web/style.css
+++ b/web/style.css
@@ -5,6 +5,14 @@ html, body {
     height: 100%;
 }
 
+.hidden {
+    display: none;
+}
+
+.default {
+    color: #BDBDBD;
+}
+
 a {
     color: #BDBDBD;
     text-decoration: underline;
@@ -357,7 +365,7 @@ footer a:hover {
 
 #thefeed .question, #thefeed .answer {
     padding: 1.5em;
-    border-radius: 5px;
+    border-radius: 10px;
 }
 
 #thefeed article .question {
@@ -369,8 +377,7 @@ footer a:hover {
     background: #f6f6f6;
 }
 
-#thefeed article .question div {
-    margin-top: 1em;
+#thefeed article div div {
     text-align: right;
 }
 
@@ -395,6 +402,25 @@ footer a:hover {
     font-weight: bold;
 }
 
+#thefeed textarea {
+    background: #fff;
+    width: 100%;
+    margin: 0;
+    -webkit-appearance: none;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    border: 1px solid;
+    border-color: #848484 #c1c1c1 #e1e1e1;
+    vertical-align: top;
+}
+
+#thefeed a.send {
+    color: #fc6200;
+    text-decoration: none;
+    font-size: 80%;
+}
+
 #videoplayer {
     display: none;
     text-align: center;