on hover of link show options

public/javascripts/views/task.js

@@ -24,10 +24,11 @@ taskTemplate
       'blur .edit': 'close',
       'keyup .edit': 'handleKeyup',
       'keypress .edit': 'update',
-      'mouseover .task-wrappper':'showOptions',
-      'mouseout .task-wrappper':'hideOptions',
+      'mouseover .link':'showOptions',
+      'mouseout .link':'hideOptions',
       'click .complete':'markComplete',
-      'click .uncomplete':'unmarkComlete'
+      'click .uncomplete':'unmarkComlete',
+      'click .note':'addNote'
     },
 
     initialize: function() {
@@ -128,6 +129,10 @@ taskTemplate
     
     unmarkComlete:function(){
        this.model.toggelCompletedStatus('N');
+    },
+
+    addNote:function(){
+      this.$el.find('.divNote').show();
     }
 
  });

public/templates/task.html

@@ -2,15 +2,7 @@
 <div class="task">
     <div class="link">•
 
-    </div>
-     <%  if(model.is_completed=='Y'){%>
-      <input value="<%= model.content %>" data-id="<%= model.id %>" class="edit task-completed">
-      <%}else {%>
-       <input value="<%= model.content %>" data-id="<%= model.id %>" class="edit">
-      <%}%>
-   
-</div>
-<div class="options">
+      <div class="options">
     <div class="options-left">
         <div class="mouse-tip"></div>
       <%  if(model.is_completed=='Y'){%>
@@ -29,4 +21,17 @@
         </a>
     </div>
 </div>
+
+    </div>
+     <%  if(model.is_completed=='Y'){%>
+      <input value="<%= model.content %>" data-id="<%= model.id %>" class="edit task-completed">
+      <%}else {%>
+       <input value="<%= model.content %>" data-id="<%= model.id %>" class="edit">
+      <%}%>
+      <div class="divNote">
+        <textarea></textarea>
+      </div>
+   
+</div>
+
 </div>