working with textarea

Evandro Jr
1 parent b826b0e6
Showing 5 changed files with 591 additions and 13 deletions Show diff stats
controllers/profile/comment_paragraph_plugin_profile_controller.rb
lib/ext/comment.rb
public/comment_paragraph_macro.js
public/jquery.autosize.js
views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
@@ -4,7 +4,7 @@ class CommentParagraphPluginProfileController &lt; ProfileController
   def view_comments
     @article_id = params[:article_id]
     @paragraph_id = params[:paragraph_id]
-
+    
     article = profile.articles.find(@article_id)
     @paragraph_comment_page = (params[:paragraph_comment_page] || 1).to_i
@@ -3,12 +3,14 @@ require_dependency &#39;comment&#39;
 class Comment
   scope :without_paragraph, :conditions => {:paragraph_id => nil }
-
+  
+  settings_items :comment_paragraph_selected_area, :type => :string
+ 
   scope :in_paragraph, proc { |paragraph_id| {
       :conditions => ['paragraph_id = ?', paragraph_id]
     }
   }
-  attr_accessible :paragraph_id
+  attr_accessible :paragraph_id, :comment_paragraph_selected_area
 end
 var comment_paragraph_anchor;
 jQuery(document).ready(function($) {
+  
+  jQuery('.autoexpand-text-area').autosize();
+  
   var anchor = window.location.hash;
   if(anchor.length==0) return;
@@ -8,7 +11,7 @@ jQuery(document).ready(function($) {
   if($('div[data-macro=comment_paragraph_plugin/allow_comment]').length==0) return; //comment_paragraph_plugin/allow_comment div must exists
   var comment_id = val[1];
   if(!/^\d+$/.test(comment_id)) return; //test for integer
-
+  
   comment_paragraph_anchor = anchor;
   var url = '/plugin/comment_paragraph/public/comment_paragraph/'+comment_id;
   $.getJSON(url, function(data) {
@@ -37,3 +40,291 @@ function loadCompleted(paragraph) {
     comment_paragraph_anchor = null;
   }
 }
+
+//Return a string with the beggining and the end of the selection of a text area separated by colon
+function getSelectionBounderies(textareaId){
+    
+    var textarea = document.getElementById(textareaId);
+    if ('selectionStart' in textarea) {
+            // check whether some text is selected in the textarea
+        if (textarea.selectionStart != textarea.selectionEnd) {
+            alert(textarea.selectionStart + ":" + textarea.selectionEnd)
+            return textarea.selectionStart + ":" + textarea.selectionEnd;
+        }
+    }
+    
+    return false
+}
+
+/*!
+	Autosize v1.18.9 - 2014-05-27
+	Automatically adjust textarea height based on user input.
+	(c) 2014 Jack Moore - http://www.jacklmoore.com/autosize
+	license: http://www.opensource.org/licenses/mit-license.php
+*/
+(function ($) {
+	var
+	defaults = {
+		className: 'autosizejs',
+		id: 'autosizejs',
+		append: '\n',
+		callback: false,
+		resizeDelay: 10,
+		placeholder: true
+	},
+
+	// border:0 is unnecessary, but avoids a bug in Firefox on OSX
+	copy = '<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',
+
+	// line-height is conditionally included because IE7/IE8/old Opera do not return the correct value.
+	typographyStyles = [
+		'fontFamily',
+		'fontSize',
+		'fontWeight',
+		'fontStyle',
+		'letterSpacing',
+		'textTransform',
+		'wordSpacing',
+		'textIndent'
+	],
+
+	// to keep track which textarea is being mirrored when adjust() is called.
+	mirrored,
+
+	// the mirror element, which is used to calculate what size the mirrored element should be.
+	mirror = $(copy).data('autosize', true)[0];
+
+	// test that line-height can be accurately copied.
+	mirror.style.lineHeight = '99px';
+	if ($(mirror).css('lineHeight') === '99px') {
+		typographyStyles.push('lineHeight');
+	}
+	mirror.style.lineHeight = '';
+
+	$.fn.autosize = function (options) {
+		if (!this.length) {
+			return this;
+		}
+
+		options = $.extend({}, defaults, options || {});
+
+		if (mirror.parentNode !== document.body) {
+			$(document.body).append(mirror);
+		}
+
+		return this.each(function () {
+			var
+			ta = this,
+			$ta = $(ta),
+			maxHeight,
+			minHeight,
+			boxOffset = 0,
+			callback = $.isFunction(options.callback),
+			originalStyles = {
+				height: ta.style.height,
+				overflow: ta.style.overflow,
+				overflowY: ta.style.overflowY,
+				wordWrap: ta.style.wordWrap,
+				resize: ta.style.resize
+			},
+			timeout,
+			width = $ta.width(),
+			taResize = $ta.css('resize');
+
+			if ($ta.data('autosize')) {
+				// exit if autosize has already been applied, or if the textarea is the mirror element.
+				return;
+			}
+			$ta.data('autosize', true);
+
+			if ($ta.css('box-sizing') === 'border-box' || $ta.css('-moz-box-sizing') === 'border-box' || $ta.css('-webkit-box-sizing') === 'border-box'){
+				boxOffset = $ta.outerHeight() - $ta.height();
+			}
+
+			// IE8 and lower return 'auto', which parses to NaN, if no min-height is set.
+			minHeight = Math.max(parseInt($ta.css('minHeight'), 10) - boxOffset || 0, $ta.height());
+
+			$ta.css({
+				overflow: 'hidden',
+				overflowY: 'hidden',
+				wordWrap: 'break-word' // horizontal overflow is hidden, so break-word is necessary for handling words longer than the textarea width
+			});
+
+			if (taResize === 'vertical') {
+				$ta.css('resize','none');
+			} else if (taResize === 'both') {
+				$ta.css('resize', 'horizontal');
+			}
+
+			// The mirror width must exactly match the textarea width, so using getBoundingClientRect because it doesn't round the sub-pixel value.
+			// window.getComputedStyle, getBoundingClientRect returning a width are unsupported, but also unneeded in IE8 and lower.
+			function setWidth() {
+				var width;
+				var style = window.getComputedStyle ? window.getComputedStyle(ta, null) : false;
+				
+				if (style) {
+
+					width = ta.getBoundingClientRect().width;
+
+					if (width === 0 || typeof width !== 'number') {
+						width = parseInt(style.width,10);
+					}
+
+					$.each(['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'], function(i,val){
+						width -= parseInt(style[val],10);
+					});
+				} else {
+					width = $ta.width();
+				}
+
+				mirror.style.width = Math.max(width,0) + 'px';
+			}
+
+			function initMirror() {
+				var styles = {};
+
+				mirrored = ta;
+				mirror.className = options.className;
+				mirror.id = options.id;
+				maxHeight = parseInt($ta.css('maxHeight'), 10);
+
+				// mirror is a duplicate textarea located off-screen that
+				// is automatically updated to contain the same text as the
+				// original textarea.  mirror always has a height of 0.
+				// This gives a cross-browser supported way getting the actual
+				// height of the text, through the scrollTop property.
+				$.each(typographyStyles, function(i,val){
+					styles[val] = $ta.css(val);
+				});
+				
+				$(mirror).css(styles).attr('wrap', $ta.attr('wrap'));
+
+				setWidth();
+
+				// Chrome-specific fix:
+				// When the textarea y-overflow is hidden, Chrome doesn't reflow the text to account for the space
+				// made available by removing the scrollbar. This workaround triggers the reflow for Chrome.
+				if (window.chrome) {
+					var width = ta.style.width;
+					ta.style.width = '0px';
+					var ignore = ta.offsetWidth;
+					ta.style.width = width;
+				}
+			}
+
+			// Using mainly bare JS in this function because it is going
+			// to fire very often while typing, and needs to very efficient.
+			function adjust() {
+				var height, original;
+
+				if (mirrored !== ta) {
+					initMirror();
+				} else {
+					setWidth();
+				}
+
+				if (!ta.value && options.placeholder) {
+					// If the textarea is empty, copy the placeholder text into 
+					// the mirror control and use that for sizing so that we 
+					// don't end up with placeholder getting trimmed.
+					mirror.value = ($ta.attr("placeholder") || '') + options.append;
+				} else {
+					mirror.value = ta.value + options.append;
+				}
+
+				mirror.style.overflowY = ta.style.overflowY;
+				original = parseInt(ta.style.height,10);
+
+				// Setting scrollTop to zero is needed in IE8 and lower for the next step to be accurately applied
+				mirror.scrollTop = 0;
+
+				mirror.scrollTop = 9e4;
+
+				// Using scrollTop rather than scrollHeight because scrollHeight is non-standard and includes padding.
+				height = mirror.scrollTop;
+
+				if (maxHeight && height > maxHeight) {
+					ta.style.overflowY = 'scroll';
+					height = maxHeight;
+				} else {
+					ta.style.overflowY = 'hidden';
+					if (height < minHeight) {
+						height = minHeight;
+					}
+				}
+
+				height += boxOffset;
+
+				if (original !== height) {
+					ta.style.height = height + 'px';
+					if (callback) {
+						options.callback.call(ta,ta);
+					}
+				}
+			}
+
+			function resize () {
+				clearTimeout(timeout);
+				timeout = setTimeout(function(){
+					var newWidth = $ta.width();
+
+					if (newWidth !== width) {
+						width = newWidth;
+						adjust();
+					}
+				}, parseInt(options.resizeDelay,10));
+			}
+
+			if ('onpropertychange' in ta) {
+				if ('oninput' in ta) {
+					// Detects IE9.  IE9 does not fire onpropertychange or oninput for deletions,
+					// so binding to onkeyup to catch most of those occasions.  There is no way that I
+					// know of to detect something like 'cut' in IE9.
+					$ta.on('input.autosize keyup.autosize', adjust);
+				} else {
+					// IE7 / IE8
+					$ta.on('propertychange.autosize', function(){
+						if(event.propertyName === 'value'){
+							adjust();
+						}
+					});
+				}
+			} else {
+				// Modern Browsers
+				$ta.on('input.autosize', adjust);
+			}
+
+			// Set options.resizeDelay to false if using fixed-width textarea elements.
+			// Uses a timeout and width check to reduce the amount of times adjust needs to be called after window resize.
+
+			if (options.resizeDelay !== false) {
+				$(window).on('resize.autosize', resize);
+			}
+
+			// Event for manual triggering if needed.
+			// Should only be needed when the value of the textarea is changed through JavaScript rather than user input.
+			$ta.on('autosize.resize', adjust);
+
+			// Event for manual triggering that also forces the styles to update as well.
+			// Should only be needed if one of typography styles of the textarea change, and the textarea is already the target of the adjust method.
+			$ta.on('autosize.resizeIncludeStyle', function() {
+				mirrored = null;
+				adjust();
+			});
+
+			$ta.on('autosize.destroy', function(){
+				mirrored = null;
+				clearTimeout(timeout);
+				$(window).off('resize', resize);
+				$ta
+					.off('autosize')
+					.off('.autosize')
+					.css(originalStyles)
+					.removeData('autosize');
+			});
+
+			// Call adjust in case the textarea already contains text.
+			adjust();
+		});
+	};
+}(window.jQuery || window.$)); // jQuery or jQuery-like library, such as Zepto
 \ No newline at end of file
@@ -0,0 +1,272 @@
+/*!
+	Autosize v1.18.9 - 2014-05-27
+	Automatically adjust textarea height based on user input.
+	(c) 2014 Jack Moore - http://www.jacklmoore.com/autosize
+	license: http://www.opensource.org/licenses/mit-license.php
+*/
+(function ($) {
+	var
+	defaults = {
+		className: 'autosizejs',
+		id: 'autosizejs',
+		append: '\n',
+		callback: false,
+		resizeDelay: 10,
+		placeholder: true
+	},
+
+	// border:0 is unnecessary, but avoids a bug in Firefox on OSX
+	copy = '<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',
+
+	// line-height is conditionally included because IE7/IE8/old Opera do not return the correct value.
+	typographyStyles = [
+		'fontFamily',
+		'fontSize',
+		'fontWeight',
+		'fontStyle',
+		'letterSpacing',
+		'textTransform',
+		'wordSpacing',
+		'textIndent'
+	],
+
+	// to keep track which textarea is being mirrored when adjust() is called.
+	mirrored,
+
+	// the mirror element, which is used to calculate what size the mirrored element should be.
+	mirror = $(copy).data('autosize', true)[0];
+
+	// test that line-height can be accurately copied.
+	mirror.style.lineHeight = '99px';
+	if ($(mirror).css('lineHeight') === '99px') {
+		typographyStyles.push('lineHeight');
+	}
+	mirror.style.lineHeight = '';
+
+	$.fn.autosize = function (options) {
+		if (!this.length) {
+			return this;
+		}
+
+		options = $.extend({}, defaults, options || {});
+
+		if (mirror.parentNode !== document.body) {
+			$(document.body).append(mirror);
+		}
+
+		return this.each(function () {
+			var
+			ta = this,
+			$ta = $(ta),
+			maxHeight,
+			minHeight,
+			boxOffset = 0,
+			callback = $.isFunction(options.callback),
+			originalStyles = {
+				height: ta.style.height,
+				overflow: ta.style.overflow,
+				overflowY: ta.style.overflowY,
+				wordWrap: ta.style.wordWrap,
+				resize: ta.style.resize
+			},
+			timeout,
+			width = $ta.width(),
+			taResize = $ta.css('resize');
+
+			if ($ta.data('autosize')) {
+				// exit if autosize has already been applied, or if the textarea is the mirror element.
+				return;
+			}
+			$ta.data('autosize', true);
+
+			if ($ta.css('box-sizing') === 'border-box' || $ta.css('-moz-box-sizing') === 'border-box' || $ta.css('-webkit-box-sizing') === 'border-box'){
+				boxOffset = $ta.outerHeight() - $ta.height();
+			}
+
+			// IE8 and lower return 'auto', which parses to NaN, if no min-height is set.
+			minHeight = Math.max(parseInt($ta.css('minHeight'), 10) - boxOffset || 0, $ta.height());
+
+			$ta.css({
+				overflow: 'hidden',
+				overflowY: 'hidden',
+				wordWrap: 'break-word' // horizontal overflow is hidden, so break-word is necessary for handling words longer than the textarea width
+			});
+
+			if (taResize === 'vertical') {
+				$ta.css('resize','none');
+			} else if (taResize === 'both') {
+				$ta.css('resize', 'horizontal');
+			}
+
+			// The mirror width must exactly match the textarea width, so using getBoundingClientRect because it doesn't round the sub-pixel value.
+			// window.getComputedStyle, getBoundingClientRect returning a width are unsupported, but also unneeded in IE8 and lower.
+			function setWidth() {
+				var width;
+				var style = window.getComputedStyle ? window.getComputedStyle(ta, null) : false;
+				
+				if (style) {
+
+					width = ta.getBoundingClientRect().width;
+
+					if (width === 0 || typeof width !== 'number') {
+						width = parseInt(style.width,10);
+					}
+
+					$.each(['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'], function(i,val){
+						width -= parseInt(style[val],10);
+					});
+				} else {
+					width = $ta.width();
+				}
+
+				mirror.style.width = Math.max(width,0) + 'px';
+			}
+
+			function initMirror() {
+				var styles = {};
+
+				mirrored = ta;
+				mirror.className = options.className;
+				mirror.id = options.id;
+				maxHeight = parseInt($ta.css('maxHeight'), 10);
+
+				// mirror is a duplicate textarea located off-screen that
+				// is automatically updated to contain the same text as the
+				// original textarea.  mirror always has a height of 0.
+				// This gives a cross-browser supported way getting the actual
+				// height of the text, through the scrollTop property.
+				$.each(typographyStyles, function(i,val){
+					styles[val] = $ta.css(val);
+				});
+				
+				$(mirror).css(styles).attr('wrap', $ta.attr('wrap'));
+
+				setWidth();
+
+				// Chrome-specific fix:
+				// When the textarea y-overflow is hidden, Chrome doesn't reflow the text to account for the space
+				// made available by removing the scrollbar. This workaround triggers the reflow for Chrome.
+				if (window.chrome) {
+					var width = ta.style.width;
+					ta.style.width = '0px';
+					var ignore = ta.offsetWidth;
+					ta.style.width = width;
+				}
+			}
+
+			// Using mainly bare JS in this function because it is going
+			// to fire very often while typing, and needs to very efficient.
+			function adjust() {
+				var height, original;
+
+				if (mirrored !== ta) {
+					initMirror();
+				} else {
+					setWidth();
+				}
+
+				if (!ta.value && options.placeholder) {
+					// If the textarea is empty, copy the placeholder text into 
+					// the mirror control and use that for sizing so that we 
+					// don't end up with placeholder getting trimmed.
+					mirror.value = ($ta.attr("placeholder") || '') + options.append;
+				} else {
+					mirror.value = ta.value + options.append;
+				}
+
+				mirror.style.overflowY = ta.style.overflowY;
+				original = parseInt(ta.style.height,10);
+
+				// Setting scrollTop to zero is needed in IE8 and lower for the next step to be accurately applied
+				mirror.scrollTop = 0;
+
+				mirror.scrollTop = 9e4;
+
+				// Using scrollTop rather than scrollHeight because scrollHeight is non-standard and includes padding.
+				height = mirror.scrollTop;
+
+				if (maxHeight && height > maxHeight) {
+					ta.style.overflowY = 'scroll';
+					height = maxHeight;
+				} else {
+					ta.style.overflowY = 'hidden';
+					if (height < minHeight) {
+						height = minHeight;
+					}
+				}
+
+				height += boxOffset;
+
+				if (original !== height) {
+					ta.style.height = height + 'px';
+					if (callback) {
+						options.callback.call(ta,ta);
+					}
+				}
+			}
+
+			function resize () {
+				clearTimeout(timeout);
+				timeout = setTimeout(function(){
+					var newWidth = $ta.width();
+
+					if (newWidth !== width) {
+						width = newWidth;
+						adjust();
+					}
+				}, parseInt(options.resizeDelay,10));
+			}
+
+			if ('onpropertychange' in ta) {
+				if ('oninput' in ta) {
+					// Detects IE9.  IE9 does not fire onpropertychange or oninput for deletions,
+					// so binding to onkeyup to catch most of those occasions.  There is no way that I
+					// know of to detect something like 'cut' in IE9.
+					$ta.on('input.autosize keyup.autosize', adjust);
+				} else {
+					// IE7 / IE8
+					$ta.on('propertychange.autosize', function(){
+						if(event.propertyName === 'value'){
+							adjust();
+						}
+					});
+				}
+			} else {
+				// Modern Browsers
+				$ta.on('input.autosize', adjust);
+			}
+
+			// Set options.resizeDelay to false if using fixed-width textarea elements.
+			// Uses a timeout and width check to reduce the amount of times adjust needs to be called after window resize.
+
+			if (options.resizeDelay !== false) {
+				$(window).on('resize.autosize', resize);
+			}
+
+			// Event for manual triggering if needed.
+			// Should only be needed when the value of the textarea is changed through JavaScript rather than user input.
+			$ta.on('autosize.resize', adjust);
+
+			// Event for manual triggering that also forces the styles to update as well.
+			// Should only be needed if one of typography styles of the textarea change, and the textarea is already the target of the adjust method.
+			$ta.on('autosize.resizeIncludeStyle', function() {
+				mirrored = null;
+				adjust();
+			});
+
+			$ta.on('autosize.destroy', function(){
+				mirrored = null;
+				clearTimeout(timeout);
+				$(window).off('resize', resize);
+				$ta
+					.off('autosize')
+					.off('.autosize')
+					.css(originalStyles)
+					.removeData('autosize');
+			});
+
+			// Call adjust in case the textarea already contains text.
+			adjust();
+		});
+	};
+}(window.jQuery || window.$)); // jQuery or jQuery-like library, such as Zepto
 <div class="comments">
-  <div class="comment_paragraph_<%= paragraph_id %>" style="float: left">
-    <div style="float: left">
+  <textarea id="comment_area_<%= paragraph_id %>" readonly="true" cols="60"  style="border: none;text-align: justify" class='autoexpand-text-area'>
+    <%= inner_html %>
+  </textarea>
+  <script>
+    jQuery("#comment_area_<%= paragraph_id %>").mouseup(function() {
+      var selected_area=getSelectionBounderies("comment_area_<%= paragraph_id %>")
+      form = jQuery('.comment_paragraph_<%= paragraph_id %>').parent().find('form');
+      if (form.find('input.selected_area').length === 0){
+        jQuery('<input>').attr({
+          class: 'selected_area',
+          name: 'comment[comment_paragraph_selected_area]',
+          value: selected_area
+        }).appendTo(form)
+      }else{
+        form.find('input.selected_area').val(selected_area)
+      }
+    });
+  </script>  
+  <div class="comment_paragraph_<%= paragraph_id %>" align="center">
     <%= link_to_remote(image_tag("/plugins/comment_paragraph/images/comments.gif"),
         :url => { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id},
         :method => :post,
         :condition => "!toggleParagraph(#{paragraph_id})",
         :complete => "loadCompleted(#{paragraph_id})")%>
-    </div>
-    <!-- FIXME: css file -->
-    <div id="comments_paragraph_count_<%= paragraph_id %>" style="float: right; 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>
-    <%= inner_html %>
+    <!-- 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>
+    <br><br>
   </div>
   <div class="comment-paragraph-loading-<%= paragraph_id %>"/>
	@@ -4,7 +4,7 @@ class CommentParagraphPluginProfileController < ProfileController		@@ -4,7 +4,7 @@ class CommentParagraphPluginProfileController < ProfileController
4	def view_comments	4	def view_comments
5	@article_id = params[:article_id]	5	@article_id = params[:article_id]
6	@paragraph_id = params[:paragraph_id]	6	@paragraph_id = params[:paragraph_id]
7	-	7	+
8	article = profile.articles.find(@article_id)	8	article = profile.articles.find(@article_id)
9	@paragraph_comment_page = (params[:paragraph_comment_page] \|\| 1).to_i	9	@paragraph_comment_page = (params[:paragraph_comment_page] \|\| 1).to_i
10		10
1	var comment_paragraph_anchor;	1	var comment_paragraph_anchor;
2	jQuery(document).ready(function($) {	2	jQuery(document).ready(function($) {
		3	+
		4	+ jQuery('.autoexpand-text-area').autosize();
		5	+
3	var anchor = window.location.hash;	6	var anchor = window.location.hash;
4	if(anchor.length==0) return;	7	if(anchor.length==0) return;
5		8
	@@ -8,7 +11,7 @@ jQuery(document).ready(function($) {		@@ -8,7 +11,7 @@ jQuery(document).ready(function($) {
8	if($('div[data-macro=comment_paragraph_plugin/allow_comment]').length==0) return; //comment_paragraph_plugin/allow_comment div must exists	11	if($('div[data-macro=comment_paragraph_plugin/allow_comment]').length==0) return; //comment_paragraph_plugin/allow_comment div must exists
9	var comment_id = val[1];	12	var comment_id = val[1];
10	if(!/^\d+$/.test(comment_id)) return; //test for integer	13	if(!/^\d+$/.test(comment_id)) return; //test for integer
11	-	14	+
12	comment_paragraph_anchor = anchor;	15	comment_paragraph_anchor = anchor;
13	var url = '/plugin/comment_paragraph/public/comment_paragraph/'+comment_id;	16	var url = '/plugin/comment_paragraph/public/comment_paragraph/'+comment_id;
14	$.getJSON(url, function(data) {	17	$.getJSON(url, function(data) {
	@@ -37,3 +40,291 @@ function loadCompleted(paragraph) {		@@ -37,3 +40,291 @@ function loadCompleted(paragraph) {
37	comment_paragraph_anchor = null;	40	comment_paragraph_anchor = null;
38	}	41	}
39	}	42	}
		43	+
		44	+//Return a string with the beggining and the end of the selection of a text area separated by colon
		45	+function getSelectionBounderies(textareaId){
		46	+
		47	+ var textarea = document.getElementById(textareaId);
		48	+ if ('selectionStart' in textarea) {
		49	+ // check whether some text is selected in the textarea
		50	+ if (textarea.selectionStart != textarea.selectionEnd) {
		51	+ alert(textarea.selectionStart + ":" + textarea.selectionEnd)
		52	+ return textarea.selectionStart + ":" + textarea.selectionEnd;
		53	+ }
		54	+ }
		55	+
		56	+ return false
		57	+}
		58	+
		59	+/*!
		60	+ Autosize v1.18.9 - 2014-05-27
		61	+ Automatically adjust textarea height based on user input.
		62	+ (c) 2014 Jack Moore - http://www.jacklmoore.com/autosize
		63	+ license: http://www.opensource.org/licenses/mit-license.php
		64	+*/
		65	+(function ($) {
		66	+ var
		67	+ defaults = {
		68	+ className: 'autosizejs',
		69	+ id: 'autosizejs',
		70	+ append: '\n',
		71	+ callback: false,
		72	+ resizeDelay: 10,
		73	+ placeholder: true
		74	+ },
		75	+
		76	+ // border:0 is unnecessary, but avoids a bug in Firefox on OSX
		77	+ copy = '<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',
		78	+
		79	+ // line-height is conditionally included because IE7/IE8/old Opera do not return the correct value.
		80	+ typographyStyles = [
		81	+ 'fontFamily',
		82	+ 'fontSize',
		83	+ 'fontWeight',
		84	+ 'fontStyle',
		85	+ 'letterSpacing',
		86	+ 'textTransform',
		87	+ 'wordSpacing',
		88	+ 'textIndent'
		89	+ ],
		90	+
		91	+ // to keep track which textarea is being mirrored when adjust() is called.
		92	+ mirrored,
		93	+
		94	+ // the mirror element, which is used to calculate what size the mirrored element should be.
		95	+ mirror = $(copy).data('autosize', true)[0];
		96	+
		97	+ // test that line-height can be accurately copied.
		98	+ mirror.style.lineHeight = '99px';
		99	+ if ($(mirror).css('lineHeight') === '99px') {
		100	+ typographyStyles.push('lineHeight');
		101	+ }
		102	+ mirror.style.lineHeight = '';
		103	+
		104	+ $.fn.autosize = function (options) {
		105	+ if (!this.length) {
		106	+ return this;
		107	+ }
		108	+
		109	+ options = $.extend({}, defaults, options \|\| {});
		110	+
		111	+ if (mirror.parentNode !== document.body) {
		112	+ $(document.body).append(mirror);
		113	+ }
		114	+
		115	+ return this.each(function () {
		116	+ var
		117	+ ta = this,
		118	+ $ta = $(ta),
		119	+ maxHeight,
		120	+ minHeight,
		121	+ boxOffset = 0,
		122	+ callback = $.isFunction(options.callback),
		123	+ originalStyles = {
		124	+ height: ta.style.height,
		125	+ overflow: ta.style.overflow,
		126	+ overflowY: ta.style.overflowY,
		127	+ wordWrap: ta.style.wordWrap,
		128	+ resize: ta.style.resize
		129	+ },
		130	+ timeout,
		131	+ width = $ta.width(),
		132	+ taResize = $ta.css('resize');
		133	+
		134	+ if ($ta.data('autosize')) {
		135	+ // exit if autosize has already been applied, or if the textarea is the mirror element.
		136	+ return;
		137	+ }
		138	+ $ta.data('autosize', true);
		139	+
		140	+ if ($ta.css('box-sizing') === 'border-box' \|\| $ta.css('-moz-box-sizing') === 'border-box' \|\| $ta.css('-webkit-box-sizing') === 'border-box'){
		141	+ boxOffset = $ta.outerHeight() - $ta.height();
		142	+ }
		143	+
		144	+ // IE8 and lower return 'auto', which parses to NaN, if no min-height is set.
		145	+ minHeight = Math.max(parseInt($ta.css('minHeight'), 10) - boxOffset \|\| 0, $ta.height());
		146	+
		147	+ $ta.css({
		148	+ overflow: 'hidden',
		149	+ overflowY: 'hidden',
		150	+ wordWrap: 'break-word' // horizontal overflow is hidden, so break-word is necessary for handling words longer than the textarea width
		151	+ });
		152	+
		153	+ if (taResize === 'vertical') {
		154	+ $ta.css('resize','none');
		155	+ } else if (taResize === 'both') {
		156	+ $ta.css('resize', 'horizontal');
		157	+ }
		158	+
		159	+ // The mirror width must exactly match the textarea width, so using getBoundingClientRect because it doesn't round the sub-pixel value.
		160	+ // window.getComputedStyle, getBoundingClientRect returning a width are unsupported, but also unneeded in IE8 and lower.
		161	+ function setWidth() {
		162	+ var width;
		163	+ var style = window.getComputedStyle ? window.getComputedStyle(ta, null) : false;
		164	+
		165	+ if (style) {
		166	+
		167	+ width = ta.getBoundingClientRect().width;
		168	+
		169	+ if (width === 0 \|\| typeof width !== 'number') {
		170	+ width = parseInt(style.width,10);
		171	+ }
		172	+
		173	+ $.each(['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'], function(i,val){
		174	+ width -= parseInt(style[val],10);
		175	+ });
		176	+ } else {
		177	+ width = $ta.width();
		178	+ }
		179	+
		180	+ mirror.style.width = Math.max(width,0) + 'px';
		181	+ }
		182	+
		183	+ function initMirror() {
		184	+ var styles = {};
		185	+
		186	+ mirrored = ta;
		187	+ mirror.className = options.className;
		188	+ mirror.id = options.id;
		189	+ maxHeight = parseInt($ta.css('maxHeight'), 10);
		190	+
		191	+ // mirror is a duplicate textarea located off-screen that
		192	+ // is automatically updated to contain the same text as the
		193	+ // original textarea. mirror always has a height of 0.
		194	+ // This gives a cross-browser supported way getting the actual
		195	+ // height of the text, through the scrollTop property.
		196	+ $.each(typographyStyles, function(i,val){
		197	+ styles[val] = $ta.css(val);
		198	+ });
		199	+
		200	+ $(mirror).css(styles).attr('wrap', $ta.attr('wrap'));
		201	+
		202	+ setWidth();
		203	+
		204	+ // Chrome-specific fix:
		205	+ // When the textarea y-overflow is hidden, Chrome doesn't reflow the text to account for the space
		206	+ // made available by removing the scrollbar. This workaround triggers the reflow for Chrome.
		207	+ if (window.chrome) {
		208	+ var width = ta.style.width;
		209	+ ta.style.width = '0px';
		210	+ var ignore = ta.offsetWidth;
		211	+ ta.style.width = width;
		212	+ }
		213	+ }
		214	+
		215	+ // Using mainly bare JS in this function because it is going
		216	+ // to fire very often while typing, and needs to very efficient.
		217	+ function adjust() {
		218	+ var height, original;
		219	+
		220	+ if (mirrored !== ta) {
		221	+ initMirror();
		222	+ } else {
		223	+ setWidth();
		224	+ }
		225	+
		226	+ if (!ta.value && options.placeholder) {
		227	+ // If the textarea is empty, copy the placeholder text into
		228	+ // the mirror control and use that for sizing so that we
		229	+ // don't end up with placeholder getting trimmed.
		230	+ mirror.value = ($ta.attr("placeholder") \|\| '') + options.append;
		231	+ } else {
		232	+ mirror.value = ta.value + options.append;
		233	+ }
		234	+
		235	+ mirror.style.overflowY = ta.style.overflowY;
		236	+ original = parseInt(ta.style.height,10);
		237	+
		238	+ // Setting scrollTop to zero is needed in IE8 and lower for the next step to be accurately applied
		239	+ mirror.scrollTop = 0;
		240	+
		241	+ mirror.scrollTop = 9e4;
		242	+
		243	+ // Using scrollTop rather than scrollHeight because scrollHeight is non-standard and includes padding.
		244	+ height = mirror.scrollTop;
		245	+
		246	+ if (maxHeight && height > maxHeight) {
		247	+ ta.style.overflowY = 'scroll';
		248	+ height = maxHeight;
		249	+ } else {
		250	+ ta.style.overflowY = 'hidden';
		251	+ if (height < minHeight) {
		252	+ height = minHeight;
		253	+ }
		254	+ }
		255	+
		256	+ height += boxOffset;
		257	+
		258	+ if (original !== height) {
		259	+ ta.style.height = height + 'px';
		260	+ if (callback) {
		261	+ options.callback.call(ta,ta);
		262	+ }
		263	+ }
		264	+ }
		265	+
		266	+ function resize () {
		267	+ clearTimeout(timeout);
		268	+ timeout = setTimeout(function(){
		269	+ var newWidth = $ta.width();
		270	+
		271	+ if (newWidth !== width) {
		272	+ width = newWidth;
		273	+ adjust();
		274	+ }
		275	+ }, parseInt(options.resizeDelay,10));
		276	+ }
		277	+
		278	+ if ('onpropertychange' in ta) {
		279	+ if ('oninput' in ta) {
		280	+ // Detects IE9. IE9 does not fire onpropertychange or oninput for deletions,
		281	+ // so binding to onkeyup to catch most of those occasions. There is no way that I
		282	+ // know of to detect something like 'cut' in IE9.
		283	+ $ta.on('input.autosize keyup.autosize', adjust);
		284	+ } else {
		285	+ // IE7 / IE8
		286	+ $ta.on('propertychange.autosize', function(){
		287	+ if(event.propertyName === 'value'){
		288	+ adjust();
		289	+ }
		290	+ });
		291	+ }
		292	+ } else {
		293	+ // Modern Browsers
		294	+ $ta.on('input.autosize', adjust);
		295	+ }
		296	+
		297	+ // Set options.resizeDelay to false if using fixed-width textarea elements.
		298	+ // Uses a timeout and width check to reduce the amount of times adjust needs to be called after window resize.
		299	+
		300	+ if (options.resizeDelay !== false) {
		301	+ $(window).on('resize.autosize', resize);
		302	+ }
		303	+
		304	+ // Event for manual triggering if needed.
		305	+ // Should only be needed when the value of the textarea is changed through JavaScript rather than user input.
		306	+ $ta.on('autosize.resize', adjust);
		307	+
		308	+ // Event for manual triggering that also forces the styles to update as well.
		309	+ // Should only be needed if one of typography styles of the textarea change, and the textarea is already the target of the adjust method.
		310	+ $ta.on('autosize.resizeIncludeStyle', function() {
		311	+ mirrored = null;
		312	+ adjust();
		313	+ });
		314	+
		315	+ $ta.on('autosize.destroy', function(){
		316	+ mirrored = null;
		317	+ clearTimeout(timeout);
		318	+ $(window).off('resize', resize);
		319	+ $ta
		320	+ .off('autosize')
		321	+ .off('.autosize')
		322	+ .css(originalStyles)
		323	+ .removeData('autosize');
		324	+ });
		325	+
		326	+ // Call adjust in case the textarea already contains text.
		327	+ adjust();
		328	+ });
		329	+ };
		330	+}(window.jQuery \|\| window.$)); // jQuery or jQuery-like library, such as Zepto
40	\ No newline at end of file	331	\ No newline at end of file
@@ -0,0 +1,272 @@		@@ -0,0 +1,272 @@
	1	+/*!
	2	+ Autosize v1.18.9 - 2014-05-27
	3	+ Automatically adjust textarea height based on user input.
	4	+ (c) 2014 Jack Moore - http://www.jacklmoore.com/autosize
	5	+ license: http://www.opensource.org/licenses/mit-license.php
	6	+*/
	7	+(function ($) {
	8	+ var
	9	+ defaults = {
	10	+ className: 'autosizejs',
	11	+ id: 'autosizejs',
	12	+ append: '\n',
	13	+ callback: false,
	14	+ resizeDelay: 10,
	15	+ placeholder: true
	16	+ },
	17	+
	18	+ // border:0 is unnecessary, but avoids a bug in Firefox on OSX
	19	+ copy = '<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',
	20	+
	21	+ // line-height is conditionally included because IE7/IE8/old Opera do not return the correct value.
	22	+ typographyStyles = [
	23	+ 'fontFamily',
	24	+ 'fontSize',
	25	+ 'fontWeight',
	26	+ 'fontStyle',
	27	+ 'letterSpacing',
	28	+ 'textTransform',
	29	+ 'wordSpacing',
	30	+ 'textIndent'
	31	+ ],
	32	+
	33	+ // to keep track which textarea is being mirrored when adjust() is called.
	34	+ mirrored,
	35	+
	36	+ // the mirror element, which is used to calculate what size the mirrored element should be.
	37	+ mirror = $(copy).data('autosize', true)[0];
	38	+
	39	+ // test that line-height can be accurately copied.
	40	+ mirror.style.lineHeight = '99px';
	41	+ if ($(mirror).css('lineHeight') === '99px') {
	42	+ typographyStyles.push('lineHeight');
	43	+ }
	44	+ mirror.style.lineHeight = '';
	45	+
	46	+ $.fn.autosize = function (options) {
	47	+ if (!this.length) {
	48	+ return this;
	49	+ }
	50	+
	51	+ options = $.extend({}, defaults, options \|\| {});
	52	+
	53	+ if (mirror.parentNode !== document.body) {
	54	+ $(document.body).append(mirror);
	55	+ }
	56	+
	57	+ return this.each(function () {
	58	+ var
	59	+ ta = this,
	60	+ $ta = $(ta),
	61	+ maxHeight,
	62	+ minHeight,
	63	+ boxOffset = 0,
	64	+ callback = $.isFunction(options.callback),
	65	+ originalStyles = {
	66	+ height: ta.style.height,
	67	+ overflow: ta.style.overflow,
	68	+ overflowY: ta.style.overflowY,
	69	+ wordWrap: ta.style.wordWrap,
	70	+ resize: ta.style.resize
	71	+ },
	72	+ timeout,
	73	+ width = $ta.width(),
	74	+ taResize = $ta.css('resize');
	75	+
	76	+ if ($ta.data('autosize')) {
	77	+ // exit if autosize has already been applied, or if the textarea is the mirror element.
	78	+ return;
	79	+ }
	80	+ $ta.data('autosize', true);
	81	+
	82	+ if ($ta.css('box-sizing') === 'border-box' \|\| $ta.css('-moz-box-sizing') === 'border-box' \|\| $ta.css('-webkit-box-sizing') === 'border-box'){
	83	+ boxOffset = $ta.outerHeight() - $ta.height();
	84	+ }
	85	+
	86	+ // IE8 and lower return 'auto', which parses to NaN, if no min-height is set.
	87	+ minHeight = Math.max(parseInt($ta.css('minHeight'), 10) - boxOffset \|\| 0, $ta.height());
	88	+
	89	+ $ta.css({
	90	+ overflow: 'hidden',
	91	+ overflowY: 'hidden',
	92	+ wordWrap: 'break-word' // horizontal overflow is hidden, so break-word is necessary for handling words longer than the textarea width
	93	+ });
	94	+
	95	+ if (taResize === 'vertical') {
	96	+ $ta.css('resize','none');
	97	+ } else if (taResize === 'both') {
	98	+ $ta.css('resize', 'horizontal');
	99	+ }
	100	+
	101	+ // The mirror width must exactly match the textarea width, so using getBoundingClientRect because it doesn't round the sub-pixel value.
	102	+ // window.getComputedStyle, getBoundingClientRect returning a width are unsupported, but also unneeded in IE8 and lower.
	103	+ function setWidth() {
	104	+ var width;
	105	+ var style = window.getComputedStyle ? window.getComputedStyle(ta, null) : false;
	106	+
	107	+ if (style) {
	108	+
	109	+ width = ta.getBoundingClientRect().width;
	110	+
	111	+ if (width === 0 \|\| typeof width !== 'number') {
	112	+ width = parseInt(style.width,10);
	113	+ }
	114	+
	115	+ $.each(['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'], function(i,val){
	116	+ width -= parseInt(style[val],10);
	117	+ });
	118	+ } else {
	119	+ width = $ta.width();
	120	+ }
	121	+
	122	+ mirror.style.width = Math.max(width,0) + 'px';
	123	+ }
	124	+
	125	+ function initMirror() {
	126	+ var styles = {};
	127	+
	128	+ mirrored = ta;
	129	+ mirror.className = options.className;
	130	+ mirror.id = options.id;
	131	+ maxHeight = parseInt($ta.css('maxHeight'), 10);
	132	+
	133	+ // mirror is a duplicate textarea located off-screen that
	134	+ // is automatically updated to contain the same text as the
	135	+ // original textarea. mirror always has a height of 0.
	136	+ // This gives a cross-browser supported way getting the actual
	137	+ // height of the text, through the scrollTop property.
	138	+ $.each(typographyStyles, function(i,val){
	139	+ styles[val] = $ta.css(val);
	140	+ });
	141	+
	142	+ $(mirror).css(styles).attr('wrap', $ta.attr('wrap'));
	143	+
	144	+ setWidth();
	145	+
	146	+ // Chrome-specific fix:
	147	+ // When the textarea y-overflow is hidden, Chrome doesn't reflow the text to account for the space
	148	+ // made available by removing the scrollbar. This workaround triggers the reflow for Chrome.
	149	+ if (window.chrome) {
	150	+ var width = ta.style.width;
	151	+ ta.style.width = '0px';
	152	+ var ignore = ta.offsetWidth;
	153	+ ta.style.width = width;
	154	+ }
	155	+ }
	156	+
	157	+ // Using mainly bare JS in this function because it is going
	158	+ // to fire very often while typing, and needs to very efficient.
	159	+ function adjust() {
	160	+ var height, original;
	161	+
	162	+ if (mirrored !== ta) {
	163	+ initMirror();
	164	+ } else {
	165	+ setWidth();
	166	+ }
	167	+
	168	+ if (!ta.value && options.placeholder) {
	169	+ // If the textarea is empty, copy the placeholder text into
	170	+ // the mirror control and use that for sizing so that we
	171	+ // don't end up with placeholder getting trimmed.
	172	+ mirror.value = ($ta.attr("placeholder") \|\| '') + options.append;
	173	+ } else {
	174	+ mirror.value = ta.value + options.append;
	175	+ }
	176	+
	177	+ mirror.style.overflowY = ta.style.overflowY;
	178	+ original = parseInt(ta.style.height,10);
	179	+
	180	+ // Setting scrollTop to zero is needed in IE8 and lower for the next step to be accurately applied
	181	+ mirror.scrollTop = 0;
	182	+
	183	+ mirror.scrollTop = 9e4;
	184	+
	185	+ // Using scrollTop rather than scrollHeight because scrollHeight is non-standard and includes padding.
	186	+ height = mirror.scrollTop;
	187	+
	188	+ if (maxHeight && height > maxHeight) {
	189	+ ta.style.overflowY = 'scroll';
	190	+ height = maxHeight;
	191	+ } else {
	192	+ ta.style.overflowY = 'hidden';
	193	+ if (height < minHeight) {
	194	+ height = minHeight;
	195	+ }
	196	+ }
	197	+
	198	+ height += boxOffset;
	199	+
	200	+ if (original !== height) {
	201	+ ta.style.height = height + 'px';
	202	+ if (callback) {
	203	+ options.callback.call(ta,ta);
	204	+ }
	205	+ }
	206	+ }
	207	+
	208	+ function resize () {
	209	+ clearTimeout(timeout);
	210	+ timeout = setTimeout(function(){
	211	+ var newWidth = $ta.width();
	212	+
	213	+ if (newWidth !== width) {
	214	+ width = newWidth;
	215	+ adjust();
	216	+ }
	217	+ }, parseInt(options.resizeDelay,10));
	218	+ }
	219	+
	220	+ if ('onpropertychange' in ta) {
	221	+ if ('oninput' in ta) {
	222	+ // Detects IE9. IE9 does not fire onpropertychange or oninput for deletions,
	223	+ // so binding to onkeyup to catch most of those occasions. There is no way that I
	224	+ // know of to detect something like 'cut' in IE9.
	225	+ $ta.on('input.autosize keyup.autosize', adjust);
	226	+ } else {
	227	+ // IE7 / IE8
	228	+ $ta.on('propertychange.autosize', function(){
	229	+ if(event.propertyName === 'value'){
	230	+ adjust();
	231	+ }
	232	+ });
	233	+ }
	234	+ } else {
	235	+ // Modern Browsers
	236	+ $ta.on('input.autosize', adjust);
	237	+ }
	238	+
	239	+ // Set options.resizeDelay to false if using fixed-width textarea elements.
	240	+ // Uses a timeout and width check to reduce the amount of times adjust needs to be called after window resize.
	241	+
	242	+ if (options.resizeDelay !== false) {
	243	+ $(window).on('resize.autosize', resize);
	244	+ }
	245	+
	246	+ // Event for manual triggering if needed.
	247	+ // Should only be needed when the value of the textarea is changed through JavaScript rather than user input.
	248	+ $ta.on('autosize.resize', adjust);
	249	+
	250	+ // Event for manual triggering that also forces the styles to update as well.
	251	+ // Should only be needed if one of typography styles of the textarea change, and the textarea is already the target of the adjust method.
	252	+ $ta.on('autosize.resizeIncludeStyle', function() {
	253	+ mirrored = null;
	254	+ adjust();
	255	+ });
	256	+
	257	+ $ta.on('autosize.destroy', function(){
	258	+ mirrored = null;
	259	+ clearTimeout(timeout);
	260	+ $(window).off('resize', resize);
	261	+ $ta
	262	+ .off('autosize')
	263	+ .off('.autosize')
	264	+ .css(originalStyles)
	265	+ .removeData('autosize');
	266	+ });
	267	+
	268	+ // Call adjust in case the textarea already contains text.
	269	+ adjust();
	270	+ });
	271	+ };
	272	+}(window.jQuery \|\| window.$)); // jQuery or jQuery-like library, such as Zepto
1	<div class="comments">	1	<div class="comments">
2	- <div class="comment_paragraph_<%= paragraph_id %>" style="float: left">
3	- <div style="float: left">	2	+ <textarea id="comment_area_<%= paragraph_id %>" readonly="true" cols="60" style="border: none;text-align: justify" class='autoexpand-text-area'>
		3	+ <%= inner_html %>
		4	+ </textarea>
		5	+ <script>
		6	+ jQuery("#comment_area_<%= paragraph_id %>").mouseup(function() {
		7	+ var selected_area=getSelectionBounderies("comment_area_<%= paragraph_id %>")
		8	+ form = jQuery('.comment_paragraph_<%= paragraph_id %>').parent().find('form');
		9	+ if (form.find('input.selected_area').length === 0){
		10	+ jQuery('<input>').attr({
		11	+ class: 'selected_area',
		12	+ name: 'comment[comment_paragraph_selected_area]',
		13	+ value: selected_area
		14	+ }).appendTo(form)
		15	+ }else{
		16	+ form.find('input.selected_area').val(selected_area)
		17	+ }
		18	+ });
		19	+ </script>
		20	+ <div class="comment_paragraph_<%= paragraph_id %>" align="center">
4	<%= link_to_remote(image_tag("/plugins/comment_paragraph/images/comments.gif"),	21	<%= link_to_remote(image_tag("/plugins/comment_paragraph/images/comments.gif"),
5	:url => { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id},	22	:url => { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id},
6	:method => :post,	23	:method => :post,
7	:condition => "!toggleParagraph(#{paragraph_id})",	24	:condition => "!toggleParagraph(#{paragraph_id})",
8	:complete => "loadCompleted(#{paragraph_id})")%>	25	:complete => "loadCompleted(#{paragraph_id})")%>
9	- </div>
10	- <!-- FIXME: css file -->
11	- <div id="comments_paragraph_count_<%= paragraph_id %>" style="float: right; vertical-align: middle; padding-left: 3px; padding-right: 5px; color: #5AC1FC"><span id="comment-count-<%= paragraph_id %>" class='comment-count'><%= count %></span></div>
12		26
13	- </div>
14	-
15	- <div>
16	- <%= inner_html %>	27	+ <!-- FIXME: css file -->
		28	+ <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>
		29	+ <br><br>
17	</div>	30	</div>
18		31
19	<div class="comment-paragraph-loading-<%= paragraph_id %>"/>	32	<div class="comment-paragraph-loading-<%= paragraph_id %>"/>