Updated for 3.4.2

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "Mergely",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "homepage": "https://github.com/wickedest/Mergely",
   "description": "Merge and diff documents online",
   "main": [
@@ -29,7 +29,7 @@
     "url": "git://github.com/wickedest/Mergely"
   },
   "dependencies": {
-    "mergely": "https://github.com/wickedest/Mergely.git#3.4.0",
+    "mergely": "https://github.com/wickedest/Mergely.git#3.4.2",
     "jquery": "<=2.1.3",
     "codemirror": "<=5.11.0"
   }

lib/mergely.js

@@ -297,15 +297,15 @@ jQuery.extend(Mgly.diff.prototype, {
 	},
 	_optimize: function(ctx) {
 		var start = 0, end = 0;
-		while (start < ctx.length) {
-			while ((start < ctx.length) && (ctx.modified[start] == undefined || ctx.modified[start] == false)) {
+		while (start < ctx.codes.length) {
+			while ((start < ctx.codes.length) && (ctx.modified[start] == undefined || ctx.modified[start] == false)) {
 				start++;
 			}
 			end = start;
-			while ((end < ctx.length) && (ctx.modified[end] == true)) {
+			while ((end < ctx.codes.length) && (ctx.modified[end] == true)) {
 				end++;
 			}
-			if ((end < ctx.length) && (ctx.ctx[start] == ctx.codes[end])) {
+			if ((end < ctx.codes.length) && (ctx.codes[start] == ctx.codes[end])) {
 				ctx.modified[start] = false;
 				ctx.modified[end] = true;
 			}
@@ -677,7 +677,12 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		if (this.settings.rhs_margin != 'left') {
 			this.element.append(rmargin);
 		}
-		//codemirror
+
+		// get current diff border color
+		var color = $('<div style="display:none" class="mergely current start" />').appendTo('body').css('border-top-color');
+		this.current_diff_color = color;
+
+		// codemirror
 		var cmstyle = '#' + this.id + ' .CodeMirror-gutter-text { padding: 5px 0 0 0; }' +
 			'#' + this.id + ' .CodeMirror-lines pre, ' + '#' + this.id + ' .CodeMirror-gutter-text pre { line-height: 18px; }' +
 			'.CodeMirror-linewidget { overflow: hidden; };';
@@ -728,30 +733,35 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			sz(true);
 		}
 
-		this.editor[this.id + '-lhs'].on('gutterClick', function(cm, n) {
-			return $(this.changes).filter(function (i, change) {
-				if (n >= change['lhs-line-from'] && n <= change['lhs-line-to']) {
+		// scrollToDiff() from gutter
+		function gutterClicked(side, line, ev) {
+			// The "Merge left/right" buttons are also located in the gutter.
+			// Don't interfere with them:
+			if (ev.target && (jQuery(ev.target).closest('.merge-button').length > 0)) {
+				return;
+			}
+
+			// See if the user clicked the line number of a difference:
+			var i, change;
+			for (i = 0; i < this.changes.length; i++) {
+				change = this.changes[i];
+				if (line >= change[side+'-line-from'] && line <= change[side+'-line-to']) {
 					this._current_diff = i;
-					return true;
+					// I really don't like this here - something about gutterClick does not
+					// like mutating editor here.  Need to trigger the scroll to diff from
+					// a timeout.
+					setTimeout(function() { this.scrollToDiff(); }.bind(this), 10);
+					break;
 				}
-			}.bind(this));
-			// I really don't like this here - something about gutterClick does not
-			// like mutating editor here.  Need to trigger the scroll to diff from
-			// a timeout.
-			setTimeout(function() { this.scrollToDiff(); }.bind(this), 10);
+			}
+		}
+
+		this.editor[this.id + '-lhs'].on('gutterClick', function(cm, n, gutterClass, ev) {
+			gutterClicked.call(this, 'lhs', n, ev);
 		}.bind(this));
 
-		this.editor[this.id + '-rhs'].on('gutterClick', function(cm, n) {
-			$(this.changes).filter(function (i, change) {
-				if (n >= change['rhs-line-from'] && n <= change['rhs-line-to']) {
-					this._current_diff = i;
-					return true;
-				}
-			}.bind(this));
-			// I really don't like this here - something about gutterClick does not
-			// like mutating editor here.  Need to trigger the scroll to diff from
-			// a timeout.
-			setTimeout(function() { this.scrollToDiff(); }.bind(this), 10);
+		this.editor[this.id + '-rhs'].on('gutterClick', function(cm, n, gutterClass, ev) {
+			gutterClicked.call(this, 'rhs', n, ev);
 		}.bind(this));
 
 		//bind
@@ -1132,7 +1142,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		return changes;
 	},
 	_markup_changes: function (editor_name1, editor_name2, changes) {
-		jQuery('.merge-button').remove(); // clear
+		this.element.find('.merge-button').remove(); //clear
 		
 		var self = this;
 		var led = this.editor[editor_name1];
@@ -1315,7 +1325,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		
 		// merge buttons
 		var ed = {lhs:led, rhs:red};
-		jQuery('.merge-button').on('click', function(ev){
+		this.element.find('.merge-button').on('click', function(ev){
 			// side of mouseenter
 			var side = 'rhs';
 			var oside = 'lhs';
@@ -1482,9 +1492,9 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		for (var i = 0; i < changes.length; ++i) {
 			var change = changes[i];
 			var fill = this.settings.fgcolor[change['op']];
-            if (this._current_diff==i) {
-                fill = '#000';
-            }
+			if (this._current_diff === i) {
+				fill = this.current_diff_color;
+			}
 
 			this.trace('draw', change);
 			// margin indicators