diff --git a/public/comment_paragraph_macro.js b/public/comment_paragraph_macro.js
index 397a403..fff6bd6 100644
--- a/public/comment_paragraph_macro.js
+++ b/public/comment_paragraph_macro.js
@@ -10,93 +10,48 @@ function getIdCommentParagraph(paragraphId){
   return paragraphId.substring(idx+1, paragraphId.length);
 }
 
-function teleportToBody(element){
-    var $ = jQuery;
-    element.detach();
-    $('body').append(element);
-}
-
-function moveCommentsToTheSide(paragraphId, mouseX, mouseY){
-  var $ = jQuery;
-  //var element = sideCommentForm;
-  //element.detach();
-  //if ( $('body #side_comment_form').size === 0){
-//    $('body').append(element);
-//  }
-  //element.css({top: 0, border-right: 20, position:'absolute'});
-}
+jQuery(document).ready(function($) {
+  $('.display-comment-form').unbind();
+  $('.display-comment-form').click(function(){
+    var $button = $(this);
+    showBox($button.parents('.post_comment_box'));
+    $($button).hide();
+    $button.closest('.page-comment-form').find('input').first().focus();
+    return false;
+  });
 
-//function buildSideCommentBlock(){
-//  var $ = jQuery;
-//  $("body").append('\
-//    <div align="left" id="side_comments_box" class="side-comments-box">\n\
-//      [side comments collumn]<BR>\n\
-//      [side comments collumn]<BR>\n\
-//    </div>\n\
-//  ');
-//  //Detects if there is any comment paragraph
-//  
-//  //  var button = jQuery('#page-comment-form-' + paragraphId +  ' a')[0];
-//}
+  $('#cancel-comment').die();
+  $('#cancel-comment').live("click", function(){
+    var $button = $(this);
+    showBox($button.parents('.post_comment_box'));
+    show_display_comment_button();
+    var page_comment_form = $button.parents('.page-comment-form');
+    page_comment_form.find('.errorExplanation').remove();
+    $(this).closest("textarea[name^='comment'").text("");
+    $(this).closest("div[class^='side-comment']").hide(); 
+    return false;
+  });
 
-function buildSideCommentBox(id, commentCount ){
-  var $ = jQuery;
-  //Search to top of the respective paragraph
-  var top = $('#comment_paragraph_' + id).offset().top;
-  var right = $('#comment_paragraph_' + id).offset().left + $('#comment_paragraph_' + id).width() + 20;
+  function showBox(div){
+    if(div.hasClass('closed')) {
+      div.removeClass('closed');
+      div.addClass('opened');
+    } 
+  }  
+  
   
-  var boxComments="\n\
-    <div class='side-comments-counter'\n\
-        id='side_comment_counter_" + id + "' style='top: " + top + "px; left: " + (right - 20) + "px;'  >+</div> \n\
-    </div>";
-    //<div class='side-comments-box'  id='side_comment_box_" + id + "' style='top: " + top + "px; left: " + right + "px;' ></div>"; 
-  return boxComments;
-}
-
-function putSideComments(){
-  var $ = jQuery;
-
-  $(".comment-count").each(function(index){
-    //Include all comments except the last
-    var idElement = $(this).attr('id');
-    if(idElement != undefined ){
-      var n = idElement.lastIndexOf('-');
-      var id_number =  idElement.substr(n + 1, idElement.length - n +1);
-      firstTimeOpenParagraph[id_number] = true;
-      commentParagraphIds.push(id_number);
-      var commentCount = $(this).text().trim();
-      commentCount = parseInt(commentCount);
-      var box = buildSideCommentBox(id_number, commentCount);
-      $('body').append(box);
-      if(commentCount > 0){
-        $('#side_comment_counter_' + id_number).text(commentCount);
-//        $('#side_comment_counter_' + id_number).show();
-      }
-      $('#side_comment_counter_' + id_number).show();
-    }
-  });      
-}
-
-
-
-jQuery(document).ready(function($) {
   //Hides old style ballons
   $("img[alt|=Comments]").hide();
-  //Hides old style counter
-  $(".comment-count").hide();
-  
   rangy.init();
   cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
-  
   //Add marked text bubble
   $("body").append('\
-      <a href="#" id="comment-bubble" style="width:120px;text-decoration: none">\
+      <a id="comment-bubble" style="width:120px;text-decoration: none">\
           <div align="center"  class="triangle-right" >Comentar<br>+</div>\
       </a>');
-  //buildSideCommentBlock();
-  //
+
   //Creates a side bubble for each paragraph with the amount of comments
-  putSideComments();
+  //putSideComments();
 
   $('.comment_paragraph').mouseover(function(){
     var paragraphId = getIdCommentParagraph($(this)[0].id);
@@ -112,43 +67,61 @@ jQuery(document).ready(function($) {
   
   $('.side-comments-counter').click(function(){
     hideAllComments();
-    var paragraphId = getIdCommentParagraph($(this).attr('id'));
-    $('#side_comment_box_' + paragraphId).toggle();  
+    var paragraphId = $(this).data('paragraph')
+    $('#side_comment_' + paragraphId).show();
+    $('#comments_list_toggle_paragraph_' + paragraphId).show();
+    console.log(paragraphId);
     //Loads the comments
     var url = $('#link_to_ajax_comments_' + paragraphId).data('url'); 
-    $('.comments_list_toggle_paragraph_' + paragraphId).show();
-    if(firstTimeOpenParagraph[paragraphId]===true ){
-      firstTimeOpenParagraph[paragraphId]=false;
-      $.ajax({
-        dataType: "script",
-        url: url
-      }).done(function() {
-        var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
-        button.click();
-        //teleportToBody($('.comments_list_toggle_paragraph_' + paragraphId));
-        var top = $('#comment_paragraph_' + paragraphId).offset().top;
-        var right = $('#comment_paragraph_' + paragraphId).offset().left + $('#comment_paragraph_' + paragraphId).width();
-        top += -120;
-        right+= -500;
-        $('.comments_list_toggle_paragraph_' + paragraphId).css('position','absolute');
-        $('.comments_list_toggle_paragraph_' + paragraphId).css('top',top);
-        $('.comments_list_toggle_paragraph_' + paragraphId).css('left',right);
-        $('.comments_list_toggle_paragraph_' + paragraphId).css('background','#FFFFFF');
-        $('label[for|=comment_title]').hide();
-        $('label[for|=comment_body]').css({top: -30, left: +20, position:'relative'});
-        $('.comment_form p').hide();
-        $('.comments_list_toggle_paragraph_' + paragraphId).width('250px');
-      });
-    }
+    firstTimeOpenParagraph[paragraphId]=false;
+    $.ajax({
+      dataType: "script",
+      url: url
+    }).done(function() {
+      var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
+      button.click();
+      alignSideComments(paragraphId);
+    });
   });
-
+  
+  
+  $('#comment-bubble').click(function(event){
+    this.hide();
+    hideAllComments();
+    $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
+    var url = $("#comment-bubble").data('url');
+    var paragraphId = $("#comment-bubble").data("paragraphId");
+    $('#side_comment_' + paragraphId).show();
+    $.ajax({
+      dataType: "script",
+      url: url
+    }).done(function() {
+      var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
+      button.click();
+      alignSideComments(paragraphId);  
+    });
+  });  
+   
+  function alignSideComments(paragraphId){
+//    var top = $('#comment_paragraph_' + paragraphId).offset().top;
+//    var right = $('#comment_paragraph_' + paragraphId).offset().left + $('#comment_paragraph_' + paragraphId).width();
+//    top += -120;
+//    right+= -500;
+//    $('.comments_list_toggle_paragraph_' + paragraphId).css('position','absolute');
+//    $('.comments_list_toggle_paragraph_' + paragraphId).css('display','inline');
+//    $('.comments_list_toggle_paragraph_' + paragraphId).css('top',top);
+//    $('.comments_list_toggle_paragraph_' + paragraphId).css('left',right);
+    $('.comments_list_toggle_paragraph_' + paragraphId).css('background','#FFFFFF');
+    $('label[for|=comment_title]').hide();
+    $('label[for|=comment_body]').css({top: -30, left: +20, position:'relative'});
+    $('.comment_form p').hide();
+    $('.comments_list_toggle_paragraph_' + paragraphId).width('250px');
+    $('.required-field').removeClass("required-field");
+  } 
    
   function hideAllComments(){
-    for (index = 0; index < commentParagraphIds.length; ++index) {
-      $('.comments_list_toggle_paragraph_' + commentParagraphIds[index]).hide();
-    }
+    $(".side-comment").hide();
   } 
-
   
   $("#comment-bubble").hide();
   //Undo previous highlight from the paragraph
@@ -162,13 +135,7 @@ jQuery(document).ready(function($) {
       rootElement.innerHTML = lastParagraph[paragraphId];
     }
   });
-  
-  
-//  $('#comment-bubble').mouseleave(function(){
-//    this.hide();
-//    $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
-//  });
- 
+
    //highlight area from the paragraph
   $('.comment_paragraph').mouseup(function(event){
     var paragraphId = getIdCommentParagraph($(this)[0].id);
@@ -200,31 +167,9 @@ jQuery(document).ready(function($) {
     rootElement.focus();
   });
   
- 
-//  $('#comment-bubble').click(function(event){
-//    this.hide();
-//    hideAllComments();
-//    $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
-//    var url = $("#comment-bubble").data('url');
-//    var paragraphId = $("#comment-bubble").data("paragraphId");
-//
-//    $('.comments_list_toggle_paragraph_' + paragraphId).show();
-//    $.ajax({
-//      dataType: "script",
-//      url: url
-//    }).done(function() {
-//      var button = $('#page-comment-form-' + paragraphId + ' a').get(0)
-//      button.click();
-//      window.location="#page-comment-form-" + paragraphId;
-////      //Move comments
-////      sideCommentForm = $('#side_comment_form');
-////      sideCommentForm.hide();
-////      sideCommentForm = $('.comment_form').first();
-////      sideCommentForm.attr("id",'side_comment_form');
-////      moveCommentsToTheSide(paragraphId, event.pageX, event.pageY);
-//    });
-//  });
-  
+  $('.article-body').mousedown(function(event){
+    $( ".commented-area" ).contents().unwrap();
+  });
 
   function processAnchor(){
     var anchor = window.location.hash;
@@ -244,19 +189,15 @@ jQuery(document).ready(function($) {
     }).done(function() {
       var button = $('#page-comment-form-' + comment_id + ' a').get(0)
       button.click();
-////        window.location="#page-comment-form-" + paragraphId;
-//      //Move comments
-//      sideCommentForm = $('#side_comment_form');
-//      sideCommentForm.hide();
-//      sideCommentForm = $('.comment_form').first();
-//      sideCommentForm.attr("id",'side_comment_form');
-//      moveCommentsToTheSide(paragraphId, event.pageX, event.pageY);
+      //alignSideComments(paragraphId); 
     });
   }
  
   processAnchor();
  
   $(document).on('mouseover', 'li.article-comment', function(){
+    console.log("mouseover");
+    
     var selected_area = $(this).find('input.paragraph_comment_area').val();
     var paragraph_id =  $(this).find('input.paragraph_id').val();
     var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
@@ -274,6 +215,7 @@ jQuery(document).ready(function($) {
   });
  
   $(document).on('mouseout', 'li.article-comment', function(){
+    console.log("mouseout");
     var paragraph_id =  $(this).find('input.paragraph_id').val();
     var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
   
@@ -288,7 +230,13 @@ jQuery(document).ready(function($) {
       sel.removeAllRanges();
     }
   });
-});
+  
+//  $('.icon-cancel').unbind('click').click(function(e){
+//    e.preventDefault();
+//    $(this).closest("textarea[name^='comment'").text("");
+//    $(this).closest("div[class^='comments_list_toggle_paragraph_']").hide(); 
+//  });
+}); // End of jQuery(document).ready(function($)
 
 function toggleParagraph(paragraph) {
   var div = jQuery('div.comments_list_toggle_paragraph_'+paragraph);
@@ -305,4 +253,4 @@ function loadCompleted(paragraph) {
     jQuery.scrollTo(jQuery(comment_paragraph_anchor));
     comment_paragraph_anchor = null;
   }
-}
+}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index e11c793..a86f5b7 100644
--- a/public/style.css
+++ b/public/style.css
@@ -21,15 +21,15 @@ div.article-comments-list-more{
 }
 
 .commented-area {
-  background-color: #FFFF66;
+  background-color: lightseagreen;
 }
 
 .comment_paragraph ::selection {
-  background: #FFFF66; /* WebKit/Blink Browsers */
+  background: lightseagreen; /* WebKit/Blink Browsers */
 }
 
 .comment_paragraph ::-moz-selection {
-  background: #FFFF66; /* Gecko Browsers */
+  background: lightseagreen; /* Gecko Browsers */
 }
 
 .comment_paragraph{
@@ -64,9 +64,20 @@ div.article-comments-list-more{
     width: 0;
 }
 
+.triangle-border {
+    position: relative;
+    padding: 15px;
+    margin: 1em 0 3em;
+    border: 5px solid #5a8f00;
+    color: #333;
+    background: #fff;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+}
+
 
-.side-comments-counter{
-   width: 20px;
+/*.side-comments-counter{
    top: 10px;
    border-style: solid;
    border-width: 1px;
@@ -77,7 +88,20 @@ div.article-comments-list-more{
    color: #FFFFFF;
    display: none;
    padding: 5px;
-}
+}*/
+
+/*.side-comments-counter:before {
+content: "";
+position: absolute;
+bottom: -20px;
+left: 40px;
+border-width: 20px 20px 0;
+border-style: solid;
+border-color: #5a8f00 transparent;
+display: block;
+width: 0;
+}*/
+
 
 #comment_title{
     display: none;
@@ -90,6 +114,22 @@ div[class^='comments_list_toggle_paragraph_'] {
    padding: 5px;
 }
 
+label[for="comment_title"]{
+   display: none;
+}
+
+#comments_list{
+   display: none;    
+}
+
+/*  Hides old style counter*/
+/*.comment-count{
+   display: none;    
+}*/
+
+
+
+
 
 
 /*.comment-details{
diff --git a/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb b/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
index 9ed3740..89d321a 100644
--- a/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
+++ b/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
@@ -1,38 +1,47 @@
 <div class="comments">
-  <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" >
-    <%= inner_html %>
-  </div>
-  <div align="center">
-    <%=
-      url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
-      link_to_remote(
-      image_tag("/plugins/comment_paragraph/images/comments.gif"),
-      {
-        :url => url,
-        :method => :post,
-        :condition => "!toggleParagraph(#{paragraph_id})",
-        :complete => "loadCompleted(#{paragraph_id})"
-      },
-      {
-        :id => "link_to_ajax_comments_#{paragraph_id}",
-        :'data-url' => url_for(url)  
-      }
-    )%>
-    <!-- FIXME: css file -->
-    <div  align="center" id="comments_paragraph_count_<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px; color: #5AC1FC">
-      <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
-        <%= count %>
-      </span>
-    </div>
-  </div>
-  <div class="comment-paragraph-loading-<%= paragraph_id %>"/>
-  <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" style="display:none">
-    <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>">
-    </div>
-    <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more">
-    </div>
-    <div id="page-comment-form-<%= paragraph_id %>" class='post_comment_box closed'>
-      <%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_id => paragraph_id}%>
-    </div>
-  </div>
-</div>
\ No newline at end of file
+  <table border="1">
+  <tr>
+    <td width="90%">
+      <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" >
+        <%= inner_html %>
+      </div>
+    </td>
+      <td>
+        <div  align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>"  data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px; color: #5AC1FC">
+          <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
+            <%= count %>
+          </span>
+        </div>
+      </td>
+      <td valign="top">
+        <div align="center">
+          <%=
+            url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
+            link_to_remote(
+            image_tag("/plugins/comment_paragraph/images/comments.gif"),
+            {
+              :url => url,
+              :method => :post,
+              :condition => "!toggleParagraph(#{paragraph_id})",
+              :complete => "loadCompleted(#{paragraph_id})"
+            },
+            {
+              :id => "link_to_ajax_comments_#{paragraph_id}",
+              :'data-url' => url_for(url)  
+            }
+          )%>
+        </div>
+          <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
+            <div class="comment-paragraph-loading-<%= paragraph_id %>" style="position: absolute;">
+              <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" >
+                <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>"></div>
+                <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
+                <div id="page-comment-form-<%= paragraph_id %>" class='post_comment_box closed'>
+                  <%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_id => paragraph_id}%>
+                </div>
+              </div>
+            </div>
+          </div>  
+      </td>
+    </tr>
+  </table>
\ No newline at end of file
--
libgit2 0.21.2