Update for 3.4.5

issue-69: invalidates changes before editor content is replaced

bower.json

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

doc/index.html

@@ -60,7 +60,7 @@
 				<p>
 					Then, create a div for the editor:
 				</p>
-				<pre class="code">&lt;div id="compare"&gt;&lt;div&gt;</pre>
+				<pre class="code">&lt;div id="compare"&gt;&lt;/div&gt;</pre>
 				<p>
 					Then, initialize the 'compare' div with the mergely jquery plugin, setting
 					options as required:

editor/editor.js

@@ -114,6 +114,7 @@ $(document).ready(function() {
 	var optmap = {
 		au: 'autoupdate',
 		ws: 'ignorews',
+		cs: 'ignorecase',
 		sb: 'sidebar',
 		vp: 'viewport',
 		wl: 'wrap_lines',
@@ -146,7 +147,7 @@ $(document).ready(function() {
 	var color_defaults = {
 		cb: 'cccccc', cg: 'fafafa',
 		ab: 'a3d1ff', ag: 'ddeeff',
-		db: 'ff7f7f', dg: 'edc0c0'
+		db: 'ff7f7f', dg: 'ffe9e9'
 	};
 	applyParameterCss(false);
 
@@ -223,6 +224,15 @@ $(document).ready(function() {
 				updateHistory(params);
 			}
 		},
+		'options-ignorecase': {
+			get: function() { return ed.mergely('options').ignorecase },
+			set: function(value) {
+				var cs = !ed.mergely('options').ignorecase;
+				ed.mergely('options', {ignorecase: cs});
+				var params = updateQueryStringParam('cs', cs ? 1 : 0, 0);
+				updateHistory(params);
+			}
+		},
 		'options-sidebars': {
 			get: function() { console.log('sidebar', this); return ed.mergely('options').sidebar },
 			set: function(value) {
@@ -237,7 +247,7 @@ $(document).ready(function() {
 			set: function(value) {
 				var vp = !ed.mergely('options').viewport;
 				ed.mergely('options', {viewport: vp});
-				var params = updateQueryStringParam('vp', vp ? 1 : 0, 1);
+				var params = updateQueryStringParam('vp', vp ? 1 : 0, 0);
 				updateHistory(params);
 			}
 		},
@@ -348,6 +358,7 @@ $(document).ready(function() {
 			'options-swapmargin',
 			'options-viewport',
 			'options-ignorews',
+			'options-ignorecase',
 			'options-wrap',
 			'options-linenumbers',
 			].indexOf(id) >= 0) {
@@ -664,24 +675,29 @@ $(document).ready(function() {
 	}
 	// Explicitly save/update a url parameter using HTML5's replaceState().
 	function updateQueryStringParam(key, value, defaultValue, urlQueryString) {
-		var newParam = key + '=' + value,
-			params = '?' + newParam;
-
-		// If the "search" string exists, then build params from it
-		if (!urlQueryString) {
-			urlQueryString = document.location.search;
+		urlQueryString = urlQueryString || document.location.search;
+		var parts = urlQueryString.replace(/^\?/, '').split(/&/), found = false;
+		for (var i in parts) {
+			if (parts[i].startsWith(key + '=')) {
+				found = true;
+				if (value === defaultValue) {
+					// value is default value, remove option
+					parts.splice(i, 1);
+				}
+				else {
+					// make new value
+					parts[i] = key + '=' + value;
+				}
+				break;
+			}
+			else if (parts[i].length === 0) {
+				parts.splice(i, 1);
+				break;
+			}
 		}
-		keyRegex = new RegExp('([\?&])' + key + '[^&]*');
-		if (value === defaultValue) {
-			params = urlQueryString.replace(keyRegex, '');
+		if (!found) {
+			parts.push(key + '=' + value);
 		}
-		else if (urlQueryString.match(keyRegex) !== null) {
-			// update if only if value exists
-			params = urlQueryString.replace(keyRegex, '$1' + newParam);
-		}
-		else { // Otherwise, add it to end of query string
-			params = urlQueryString + '&' + newParam;
-		}
-		return params;
+		return (parts.length) ? '?' + parts.join('&') : '';
 	}
 });

editor/editor.php

@@ -52,7 +52,7 @@ if (isset($_GET['debug'])) {
 	<script type="text/javascript" src="/Mergely/lib/searchcursor.js"></script>
 
 	<script type="text/javascript">
-        var key = '<?php echo $key; ?>';
+        var key = '<?php echo htmlspecialchars($key, ENT_QUOTES, 'UTF-8'); ?>';
         var isSample = key == 'usaindep';
     </script>
     
@@ -81,7 +81,7 @@ if (isset($_GET['debug'])) {
 }(document, 'script', 'facebook-jssdk'));</script>
 
 
-    <div id="banner"></div>
+    <a href="/"><div id="banner"></div></a>
     
     <!-- menu -->
     <ul id="main-menu">
@@ -140,6 +140,7 @@ if (isset($_GET['debug'])) {
             <ul>
                 <li id="options-wrap">Wrap lines</li>
                 <li id="options-ignorews">Ignore white space</li>
+                <li id="options-ignorecase">Ignore case</li>
                 <li class="separator"></li>
                 <li id="options-viewport" title="Improves performance for large files">Enable viewport</li>
                 <li id="options-sidebars" title="Improves performance for large files">Enable side bars</li>

lib/codemirror.css

@@ -4,10 +4,7 @@
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
   height: 300px;
-}
-.CodeMirror-scroll {
-  /* Set scrolling behaviour here */
-  overflow: auto;
+  color: black;
 }
 
 /* PADDING */
@@ -36,8 +33,7 @@
   min-width: 20px;
   text-align: right;
   color: #999;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
+  white-space: nowrap;
 }
 
 .CodeMirror-guttermarker { color: black; }
@@ -45,19 +41,21 @@
 
 /* CURSOR */
 
-.CodeMirror div.CodeMirror-cursor {
+.CodeMirror-cursor {
   border-left: 1px solid black;
+  border-right: none;
+  width: 0;
 }
 /* Shown when moving in bi-directional text */
 .CodeMirror div.CodeMirror-secondarycursor {
   border-left: 1px solid silver;
 }
-.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
+.cm-fat-cursor .CodeMirror-cursor {
   width: auto;
   border: 0;
   background: #7e7;
 }
-.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursors {
+.cm-fat-cursor div.CodeMirror-cursors {
   z-index: 1;
 }
 
@@ -67,27 +65,28 @@
   -webkit-animation: blink 1.06s steps(1) infinite;
   -moz-animation: blink 1.06s steps(1) infinite;
   animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
 }
 @-moz-keyframes blink {
-  0% { background: #7e7; }
-  50% { background: none; }
-  100% { background: #7e7; }
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
 }
 @-webkit-keyframes blink {
-  0% { background: #7e7; }
-  50% { background: none; }
-  100% { background: #7e7; }
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
 }
 @keyframes blink {
-  0% { background: #7e7; }
-  50% { background: none; }
-  100% { background: #7e7; }
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
 }
 
 /* Can style cursor different in overwrite (non-insert) mode */
-div.CodeMirror-overwrite div.CodeMirror-cursor {}
+.CodeMirror-overwrite .CodeMirror-cursor {}
 
-.cm-tab { display: inline-block; }
+.cm-tab { display: inline-block; text-decoration: inherit; }
 
 .CodeMirror-ruler {
   border-left: 1px solid #ccc;
@@ -96,6 +95,15 @@ div.CodeMirror-overwrite div.CodeMirror-cursor {}
 
 /* DEFAULT THEME */
 
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
 .cm-s-default .cm-keyword {color: #708;}
 .cm-s-default .cm-atom {color: #219;}
 .cm-s-default .cm-number {color: #164;}
@@ -115,20 +123,14 @@ div.CodeMirror-overwrite div.CodeMirror-cursor {}
 .cm-s-default .cm-bracket {color: #997;}
 .cm-s-default .cm-tag {color: #170;}
 .cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
 .cm-s-default .cm-hr {color: #999;}
 .cm-s-default .cm-link {color: #00c;}
 
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-
 .cm-s-default .cm-error {color: #f00;}
 .cm-invalidchar {color: #f00;}
 
+.CodeMirror-composing { border-bottom: 2px solid; }
+
 /* Default styles for common addons */
 
 div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
@@ -142,14 +144,13 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
    the editor. You probably shouldn't touch them. */
 
 .CodeMirror {
-  line-height: 1;
   position: relative;
   overflow: hidden;
   background: white;
-  color: black;
 }
 
 .CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
   /* 30px is the magic margin used to hide the element's real scrollbars */
   /* See overflow: hidden in .CodeMirror */
   margin-bottom: -30px; margin-right: -30px;
@@ -157,18 +158,14 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   height: 100%;
   outline: none; /* Prevent dragging from highlighting the element */
   position: relative;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
 }
 .CodeMirror-sizer {
   position: relative;
   border-right: 30px solid transparent;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
 }
 
 /* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actuall scrolling happens, thus preventing shaking and
+   before actual scrolling happens, thus preventing shaking and
    flickering artifacts. */
 .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
   position: absolute;
@@ -194,26 +191,38 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-gutters {
   position: absolute; left: 0; top: 0;
-  padding-bottom: 30px;
   z-index: 3;
 }
 .CodeMirror-gutter {
   white-space: normal;
   height: 100%;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  padding-bottom: 30px;
-  margin-bottom: -32px;
   display: inline-block;
+  margin-bottom: -30px;
   /* Hack to make IE7 behave */
   *zoom:1;
   *display:inline;
 }
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
 .CodeMirror-gutter-elt {
   position: absolute;
   cursor: default;
   z-index: 4;
 }
+.CodeMirror-gutter-wrapper {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
 
 .CodeMirror-lines {
   cursor: text;
@@ -234,6 +243,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   z-index: 2;
   position: relative;
   overflow: visible;
+  -webkit-tap-highlight-color: transparent;
 }
 .CodeMirror-wrap pre {
   word-wrap: break-word;
@@ -255,8 +265,18 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-widget {}
 
-.CodeMirror-wrap .CodeMirror-scroll {
-  overflow-x: hidden;
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
 }
 
 .CodeMirror-measure {
@@ -266,19 +286,19 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   overflow: hidden;
   visibility: hidden;
 }
-.CodeMirror-measure pre { position: static; }
 
-.CodeMirror div.CodeMirror-cursor {
-  position: absolute;
-  border-right: none;
-  width: 0;
-}
+.CodeMirror-cursor { position: absolute; }
+.CodeMirror-measure pre { position: static; }
 
 div.CodeMirror-cursors {
   visibility: hidden;
   position: relative;
   z-index: 3;
 }
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
 .CodeMirror-focused div.CodeMirror-cursors {
   visibility: visible;
 }
@@ -286,6 +306,8 @@ div.CodeMirror-cursors {
 .CodeMirror-selected { background: #d9d9d9; }
 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
 .CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
 
 .cm-searching {
   background: #ffa;
@@ -305,5 +327,8 @@ div.CodeMirror-cursors {
   }
 }
 
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }

lib/mergely.css

@@ -12,17 +12,19 @@
 .mergely-column { border: 1px solid #ccc; }
 .mergely-active { border: 1px solid #a3d1ff; }
 
+.mergely.a,.mergely.d,.mergely.c { color: #000; }
+
 .mergely.a.rhs.start { border-top: 1px solid #a3d1ff; }
 .mergely.a.lhs.start.end,
 .mergely.a.rhs.end { border-bottom: 1px solid #a3d1ff; }
 .mergely.a.rhs { background-color: #ddeeff; }
-.mergely.a.lhs.start.end.first { border-bottom: 0; border-top: 1px solid #a3d1ff; }
+.mergely.a.lhs.start.end.first { border-bottom-width: 0; border-top: 1px solid #a3d1ff; }
 
-.mergely.d.lhs { background-color: #edc0c0; }
+.mergely.d.lhs { background-color: #ffe9e9; }
 .mergely.d.lhs.end,
-.mergely.d.rhs.start.end { border-bottom: 1px solid #ff7f7f; }
-.mergely.d.rhs.start.end.first { border-bottom: 0; border-top: 1px solid #ff7f7f; }
-.mergely.d.lhs.start { border-top: 1px solid #ff7f7f; }
+.mergely.d.rhs.start.end { border-bottom: 1px solid #f8e8e8; }
+.mergely.d.rhs.start.end.first { border-bottom-width: 0; border-top: 1px solid #f8e8e8; }
+.mergely.d.lhs.start { border-top: 1px solid #f8e8e8; }
 
 .mergely.c.lhs,
 .mergely.c.rhs { background-color: #fafafa; }
@@ -32,4 +34,16 @@
 .mergely.c.rhs.end { border-bottom: 1px solid #a3a3a3; }
 
 .mergely.ch.a.rhs { background-color: #ddeeff; }
-.mergely.ch.d.lhs { background-color: #edc0c0; text-decoration: line-through; color: #888; }
+.mergely.ch.d.lhs { background-color: #ffe9e9; text-decoration: line-through; color: red !important; }
+
+.mergely.current.start { border-top: 1px solid #000 !important; }
+.mergely.current.end { border-bottom: 1px solid #000 !important; }
+.mergely.current.lhs.a.start.end,
+.mergely.current.rhs.d.start.end { border-top-width: 0 !important; }
+
+.mergely.current.lhs.a.start.end.empty,
+.mergely.current.rhs.d.start.end.empty { border-top-width: 1px !important; border-bottom-width: 0px !important; }
+
+.mergely.current.CodeMirror-linenumber { color: #F9F9F9; font-weight: bold; background-color: #777; }
+.CodeMirror-linenumber { cursor: pointer; }
+.CodeMirror-code { color: #717171; }

lib/mergely.js

@@ -1,4 +1,4 @@
-"use strict"; 
+"use strict";
 
 (function( window, document, jQuery, CodeMirror ){
 
@@ -9,7 +9,7 @@ Mgly.Timer = function(){
 	self.start = function() { self.t0 = new Date().getTime(); };
 	self.stop = function() {
 		var t1 = new Date().getTime();
-		var d = t1 - self.t0; 
+		var d = t1 - self.t0;
 		self.t0 = t1;
 		return d;
 	};
@@ -126,6 +126,9 @@ jQuery.extend(Mgly.CodeifyText.prototype, {
 			if (this.options.ignorews) {
 				line = line.replace(/\s+/g, '');
 			}
+			if (this.options.ignorecase) {
+				line = line.toLowerCase();
+			}
 			var aCode = this._diff_codes[line];
 			if (aCode != undefined) {
 				ctx.codes[i] = aCode;
@@ -177,11 +180,11 @@ jQuery.extend(Mgly.diff.prototype, {
 			var change = 'c';
 			if (item.lhs_deleted_count == 0 && item.rhs_inserted_count > 0) change = 'a';
 			else if (item.lhs_deleted_count > 0 && item.rhs_inserted_count == 0) change = 'd';
-			
+
 			if (item.lhs_deleted_count == 1) lhs_str = item.lhs_start + 1;
 			else if (item.lhs_deleted_count == 0) lhs_str = item.lhs_start;
 			else lhs_str = (item.lhs_start + 1) + ',' + (item.lhs_start + item.lhs_deleted_count);
-			
+
 			if (item.rhs_inserted_count == 1) rhs_str = item.rhs_start + 1;
 			else if (item.rhs_inserted_count == 0) rhs_str = item.rhs_start;
 			else rhs_str = (item.rhs_start + 1) + ',' + (item.rhs_start + item.rhs_inserted_count);
@@ -297,15 +300,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;
 			}
@@ -373,7 +376,7 @@ jQuery.extend(Mgly.mergely.prototype, {
 Mgly.CodeMirrorDiffView = function(el, options) {
 	CodeMirror.defineExtension('centerOnCursor', function() {
 		var coords = this.cursorCoords(null, 'local');
-		this.scrollTo(null, 
+		this.scrollTo(null,
 			(coords.y + coords.yBot) / 2 - (this.getScrollerElement().clientHeight / 2));
 	});
 	this.init(el, options);
@@ -391,6 +394,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			sidebar: true,
 			viewport: false,
 			ignorews: false,
+			ignorecase: false,
 			fadein: 'fast',
 			editor_width: '650px',
 			editor_height: '400px',
@@ -449,15 +453,15 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		};
 		this.lhs_cmsettings = {};
 		this.rhs_cmsettings = {};
-		
+
 		// save this element for faster queries
 		this.element = jQuery(el);
-		
+
 		// save options if there are any
 		if (options && options.cmsettings) jQuery.extend(this.lhs_cmsettings, cmsettings, options.cmsettings, options.lhs_cmsettings);
 		if (options && options.cmsettings) jQuery.extend(this.rhs_cmsettings, cmsettings, options.cmsettings, options.rhs_cmsettings);
 		//if (options) jQuery.extend(this.settings, options);
-		
+
 		// bind if the element is destroyed
 		this.element.bind('destroyed', jQuery.proxy(this.teardown, this));
 
@@ -480,9 +484,11 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		this.unbind();
 	},
 	lhs: function(text) {
+		this.changes = []; // invalidate existing changes
 		this.editor[this.id + '-lhs'].setValue(text);
 	},
 	rhs: function(text) {
+		this.changes = []; // invalidate existing changes
 		this.editor[this.id + '-rhs'].setValue(text);
 	},
 	update: function() {
@@ -494,10 +500,18 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 	scrollToDiff: function(direction) {
 		if (!this.changes.length) return;
 		if (direction == 'next') {
-			this._current_diff = Math.min(++this._current_diff, this.changes.length - 1);
+			if (this._current_diff == this.changes.length -1) {
+				this._current_diff = 0;
+			} else {
+				this._current_diff = Math.min(++this._current_diff, this.changes.length - 1);
+			}
 		}
-		else {
-			this._current_diff = Math.max(--this._current_diff, 0);
+		else if (direction == 'prev') {
+			if (this._current_diff == 0) {
+				this._current_diff = this.changes.length - 1;
+			} else {
+				this._current_diff = Math.max(--this._current_diff, 0);
+			}
 		}
 		this._scroll_to_change(this.changes[this._current_diff]);
 		this._changed(this.id + '-lhs', this.id + '-rhs');
@@ -539,10 +553,10 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		if (this.settings.hasOwnProperty('sidebar')) {
 			// dynamically enable sidebars
 			if (this.settings.sidebar) {
-				jQuery(this.element).find('.mergely-margin').css({display: 'block'});
+				this.element.find('.mergely-margin').css({display: 'block'});
 			}
 			else {
-				jQuery(this.element).find('.mergely-margin').css({display: 'none'});
+				this.element.find('.mergely-margin').css({display: 'none'});
 			}
 		}
 		var le, re;
@@ -614,7 +628,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			this.prev_query[side] = query;
 		}
 		var cursor = this.cursor[this.id];
-		
+
 		if (cursor[direction]()) {
 			editor.setSelection(cursor.from(), cursor.to());
 		}
@@ -659,7 +673,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		}
 		this.merge_rhs_button = jQuery(merge_rhs_button);
 		this.merge_lhs_button = jQuery(merge_lhs_button);
-		
+
 		// create the textarea and canvas elements
 		var height = this.settings.editor_height;
 		var width = this.settings.editor_width;
@@ -677,7 +691,12 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		if (this.settings.rhs_margin != 'left') {
 			this.element.append(rmargin);
 		}
-		//codemirror
+
+		// get current diff border color
+		var color = jQuery('<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; };';
@@ -689,12 +708,12 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		jQuery('<style type="text/css">' + cmstyle + '</style>').appendTo('head');
 
 		//bind
-		var rhstx = jQuery('#' + this.id + '-rhs').get(0);
+		var rhstx = this.element.find('#' + this.id + '-rhs').get(0);
 		if (!rhstx) {
 			console.error('rhs textarea not defined - Mergely not initialized properly');
 			return;
 		}
-		var lhstx = jQuery('#' + this.id + '-lhs').get(0);
+		var lhstx = this.element.find('#' + this.id + '-lhs').get(0);
 		if (!rhstx) {
 			console.error('lhs textarea not defined - Mergely not initialized properly');
 			return;
@@ -727,6 +746,38 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			);
 			sz(true);
 		}
+
+		// 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;
+					// 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;
+				}
+			}
+		}
+
+		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, gutterClass, ev) {
+			gutterClicked.call(this, 'rhs', n, ev);
+		}.bind(this));
+
 		//bind
 		var setv;
 		if (this.settings.lhs) {
@@ -744,23 +795,12 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var self = this;
 		var led = self.editor[self.id+'-lhs'];
 		var red = self.editor[self.id+'-rhs'];
-
-		var yref = led.getScrollerElement().offsetHeight * 0.5; // center between >0 and 1/2
-
 		// set cursors
 		led.setCursor(Math.max(change["lhs-line-from"],0), 0); // use led.getCursor().ch ?
 		red.setCursor(Math.max(change["rhs-line-from"],0), 0);
-
-		// using directly CodeMirror breaks canvas alignment
-		// var ly = led.charCoords({line: Math.max(change["lhs-line-from"],0), ch: 0}, "local").top;
-
-		// calculate scroll offset for current change. Warning: returns relative y position so we scroll to 0 first.
-		led.scrollTo(null, 0);
-		red.scrollTo(null, 0);
-		self._calculate_offsets(self.id+'-lhs', self.id+'-rhs', [change]);
-		led.scrollTo(null, Math.max(change["lhs-y-start"]-yref, 0));
-		red.scrollTo(null, Math.max(change["rhs-y-start"]-yref, 0));
-		// right pane should simply follows
+		if (change["lhs-line-to"] >= 0) {
+			led.scrollIntoView({line: change["lhs-line-to"]});
+		}
 	},
 
 	_scrolling: function(editor_name) {
@@ -777,23 +817,23 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var midline = this.editor[editor_name].coordsChar({left:0, top:this.midway});
 		var top_to = scroller.scrollTop();
 		var left_to = scroller.scrollLeft();
-		
+
 		this.trace('scroll', 'side', editor_name);
 		this.trace('scroll', 'midway', this.midway);
 		this.trace('scroll', 'midline', midline);
 		this.trace('scroll', 'top_to', top_to);
 		this.trace('scroll', 'left_to', left_to);
-		
+
 		var editor_name1 = this.id + '-lhs';
 		var editor_name2 = this.id + '-rhs';
-		
+
 		for (var name in this.editor) {
 			if (!this.editor.hasOwnProperty(name)) continue;
 			if (editor_name == name) continue; //same editor
 			var this_side = editor_name.replace(this.id + '-', '');
 			var other_side = name.replace(this.id + '-', '');
 			var top_adjust = 0;
-			
+
 			// find the last change that is less than or within the midway point
 			// do not move the rhs until the lhs end point is >= the rhs end point.
 			var last_change = null;
@@ -811,14 +851,14 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 							force_scroll = true;
 						}
 						else {
-							top_adjust += 
-								(change[this_side+'-y-end'] - change[this_side+'-y-start']) - 
+							top_adjust +=
+								(change[this_side+'-y-end'] - change[this_side+'-y-start']) -
 								(change[other_side+'-y-end'] - change[other_side+'-y-start']);
 						}
 					}
 				}
 			}
-			
+
 			var vp = this.editor[name].getViewport();
 			var scroll = true;
 			if (last_change) {
@@ -835,7 +875,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				this.editor[name].scrollTo(left_to, top_to - top_adjust);
 			}
 			else this.trace('scroll', 'not scrolling other side');
-			
+
 			if (this.settings.autoupdate) {
 				var timer = new Mgly.Timer();
 				this._calculate_offsets(editor_name1, editor_name2, this.changes);
@@ -891,12 +931,12 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			editor.operation(clear_changes);
 		}
 		self.chfns[name] = [];
-		
+
 		var ex = this._draw_info(this.id + '-lhs', this.id + '-rhs');
 		var ctx_lhs = ex.clhs.get(0).getContext('2d');
 		var ctx_rhs = ex.crhs.get(0).getContext('2d');
 		var ctx = ex.dcanvas.getContext('2d');
-		
+
 		ctx_lhs.beginPath();
 		ctx_lhs.fillStyle = this.settings.bgcolor;
 		ctx_lhs.strokeStyle = '#888';
@@ -908,7 +948,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		ctx_rhs.strokeStyle = '#888';
 		ctx_rhs.fillRect(0, 0, 6.5, ex.visible_page_height);
 		ctx_rhs.strokeRect(0, 0, 6.5, ex.visible_page_height);
-		
+
 		ctx.beginPath();
 		ctx.fillStyle = '#fff';
 		ctx.fillRect(0, 0, this.draw_mid_width, ex.visible_page_height);
@@ -921,7 +961,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		this.trace('change', 'diff time', timer.stop());
 		this.changes = Mgly.DiffParser(d.normal_form());
 		this.trace('change', 'parse time', timer.stop());
-		if (this._current_diff === undefined) {
+		if (this._current_diff === undefined && this.changes.length) {
 			// go to first difference on start-up
 			this._current_diff = 0;
 			this._scroll_to_change(this.changes[0]);
@@ -986,16 +1026,16 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var saveY = this.editor[editor_name1].getScrollInfo().top;
 		// temporarily scroll to top
 		this.editor[editor_name1].scrollTo(null, 0);
-		
-		// this is the distance from the top of the screen to the top of the 
+
+		// this is the distance from the top of the screen to the top of the
 		// content of the first codemirror editor
-		var topnode = jQuery('#' + this.id + ' .CodeMirror-measure').first();
+		var topnode = this.element.find('.CodeMirror-measure').first();
 		var top_offset = topnode.offset().top - 4;
 		if(!top_offset) return false;
-		
+
 		// restore editor's scroll position
 		this.editor[editor_name1].scrollTo(null, saveY);
-		
+
 		this.draw_top_offset = 0.5 - top_offset;
 		return true;
 	},
@@ -1025,10 +1065,10 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var lhschc = this.editor[editor_name1].charCoords({line: 0});
 		var rhschc = this.editor[editor_name2].charCoords({line: 0});
 		var vp = this._get_viewport(editor_name1, editor_name2);
-		
+
 		for (var i = 0; i < changes.length; ++i) {
 			var change = changes[i];
-			
+
 			if (!this.settings.sidebar && !this._is_change_in_view(vp, change)) {
 				// if the change is outside the viewport, skip
 				delete change['lhs-y-start'];
@@ -1041,7 +1081,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			var llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
 			var rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
 			var rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
-			
+
 			var ls, le, rs, re, tls, tle, lhseh, lhssh, rhssh, rhseh;
 			if (this.editor[editor_name1].getOption('lineWrapping') || this.editor[editor_name2].getOption('lineWrapping')) {
 				// If using line-wrapping, we must get the height of the line
@@ -1052,7 +1092,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				tle = this.editor[editor_name1].cursorCoords({line: llt, ch: 0}, 'page');
 				lhseh = this.editor[editor_name1].getLineHandle(llt);
 				le = { top: tle.top, bottom: tle.top + lhseh.height };
-				
+
 				tls = this.editor[editor_name2].cursorCoords({line: rlf, ch: 0}, 'page');
 				rhssh = this.editor[editor_name2].getLineHandle(rlf);
 				rs = { top: tls.top, bottom: tls.top + rhssh.height };
@@ -1063,24 +1103,24 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 			else {
 				// If not using line-wrapping, we can calculate the line position
-				ls = { 
-					top: lhschc.top + llf * this.em_height, 
+				ls = {
+					top: lhschc.top + llf * this.em_height,
 					bottom: lhschc.bottom + llf * this.em_height + 2
 				};
 				le = {
-					top: lhschc.top + llt * this.em_height, 
+					top: lhschc.top + llt * this.em_height,
 					bottom: lhschc.bottom + llt * this.em_height + 2
 				};
 				rs = {
-					top: rhschc.top + rlf * this.em_height, 
+					top: rhschc.top + rlf * this.em_height,
 					bottom: rhschc.bottom + rlf * this.em_height + 2
 				};
 				re = {
-					top: rhschc.top + rlt * this.em_height, 
+					top: rhschc.top + rlt * this.em_height,
 					bottom: rhschc.bottom + rlt * this.em_height + 2
 				};
 			}
-			
+
 			if (change['op'] == 'a') {
 				// adds (right), normally start from the end of the lhs,
 				// except for the case when the start of the rhs is 0
@@ -1118,11 +1158,12 @@ 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];
 		var red = this.editor[editor_name2];
+		var current_diff = this._current_diff;
 
 		var timer = new Mgly.Timer();
 		led.operation(function() {
@@ -1132,11 +1173,20 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				var llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
 				var rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
 				var rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
-				
+
 				var clazz = ['mergely', 'lhs', change['op'], 'cid-' + i];
 				led.addLineClass(llf, 'background', 'start');
 				led.addLineClass(llt, 'background', 'end');
-				
+				if (change['lhs-line-from'] < 0) {
+					clazz.push('empty');
+				}
+
+				if (current_diff == i) {
+					if (llf != llt) {
+						led.addLineClass(llf, 'background', 'current');
+					}
+					led.addLineClass(llt, 'background', 'current');
+				}
 				if (llf == 0 && llt == 0 && rlf == 0) {
 					led.addLineClass(llf, 'background', clazz.join(' '));
 					led.addLineClass(llf, 'background', 'first');
@@ -1148,7 +1198,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 						led.addLineClass(j, 'background', clazz.join(' '));
 					}
 				}
-				
+
 				if (!red.getOption('readOnly')) {
 					// add widgets to lhs, if rhs is not read only
 					var rhs_button = self.merge_rhs_button.clone();
@@ -1164,7 +1214,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		});
 
 		var vp = this._get_viewport(editor_name1, editor_name2);
-		
+
 		this.trace('change', 'markup lhs-editor time', timer.stop());
 		red.operation(function() {
 			for (var i = 0; i < changes.length; ++i) {
@@ -1173,16 +1223,25 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				var llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
 				var rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
 				var rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
-				
+
 				if (!self._is_change_in_view(vp, change)) {
 					// if the change is outside the viewport, skip
 					continue;
 				}
-				
+
 				var clazz = ['mergely', 'rhs', change['op'], 'cid-' + i];
 				red.addLineClass(rlf, 'background', 'start');
 				red.addLineClass(rlt, 'background', 'end');
-				
+				if (change['rhs-line-from'] < 0) {
+					clazz.push('empty');
+				}
+
+				if (current_diff == i) {
+					if (rlf != rlt) {
+						red.addLineClass(rlf, 'background', 'current');
+					}
+					red.addLineClass(rlt, 'background', 'current');
+				}
 				if (rlf == 0 && rlt == 0 && llf == 0) {
 					red.addLineClass(rlf, 'background', clazz.join(' '));
 					red.addLineClass(rlf, 'background', 'first');
@@ -1209,7 +1268,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 		});
 		this.trace('change', 'markup rhs-editor time', timer.stop());
-		
+
 		// mark text deleted, LCS changes
 		var marktext = [], i, j, k, p;
 		for (i = 0; this.settings.lcs && i < changes.length; ++i) {
@@ -1218,7 +1277,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			var llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
 			var rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
 			var rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
-			
+
 			if (!this._is_change_in_view(vp, change)) {
 				// if the change is outside the viewport, skip
 				continue;
@@ -1234,7 +1293,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 			else if (change['op'] == 'c') {
 				// apply LCS changes to each line
-				for (j = llf, k = rlf, p = 0; 
+				for (j = llf, k = rlf, p = 0;
 					 ((j >= 0) && (j <= llt)) || ((k >= 0) && (k <= rlt));
 					 ++j, ++k) {
 					var lhs_line, rhs_line;
@@ -1265,7 +1324,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 		}
 		this.trace('change', 'LCS marktext time', timer.stop());
-		
+
 		// mark changes outside closure
 		led.operation(function() {
 			// apply lhs markup
@@ -1283,11 +1342,12 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				self.chfns[self.id + '-rhs'].push(m[0].markText(m[1], m[2], m[3]));
 			}
 		});
+
 		this.trace('change', 'LCS markup time', timer.stop());
-		
+
 		// 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';
@@ -1311,6 +1371,34 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			self._merge_change(change, side, oside);
 			return false;
 		});
+
+		// gutter markup
+		var lhsLineNumbers = jQuery('#mergely-lhs ~ .CodeMirror').find('.CodeMirror-linenumber');
+		var rhsLineNumbers = jQuery('#mergely-rhs ~ .CodeMirror').find('.CodeMirror-linenumber');
+		rhsLineNumbers.removeClass('mergely current');
+		lhsLineNumbers.removeClass('mergely current');
+		for (var i = 0; i < changes.length; ++i) {
+			if (current_diff == i && change.op !== 'd') {
+				var change = changes[i];
+				var j, jf = change['rhs-line-from'], jt = change['rhs-line-to'] + 1;
+				for (j = jf; j < jt; j++) {
+					var n = (j + 1).toString();
+					rhsLineNumbers
+						.filter(function(i, node) { return jQuery(node).text() === n; })
+					.addClass('mergely current');
+				}
+			}
+			if (current_diff == i && change.op !== 'a') {
+				var change = changes[i];
+				jf = change['lhs-line-from'], jt = change['lhs-line-to'] + 1;
+				for (j = jf; j < jt; j++) {
+					var n = (j + 1).toString();
+					lhsLineNumbers.filter(function(i, node) { return jQuery(node).text() === n; })
+					.addClass('mergely current');
+				}
+			}
+		}
+
 		this.trace('change', 'markup buttons time', timer.stop());
 	},
 	_merge_change :	function(change, side, oside) {
@@ -1323,7 +1411,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var text = ed[side].getRange(
 			CodeMirror.Pos(change[side + '-line-from'], 0),
 			CodeMirror.Pos(change[side + '-line-to'] + 1, 0));
-		
+
 		if (change['op'] == 'c') {
 			ed[oside].replaceRange(text,
 				CodeMirror.Pos(change[oside + '-line-from'], 0),
@@ -1370,8 +1458,8 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var gutter_height = jQuery(this.editor[editor_name1].getScrollerElement()).children(':first-child').height();
 		var dcanvas = document.getElementById(editor_name1 + '-' + editor_name2 + '-canvas');
 		if (dcanvas == undefined) throw 'Failed to find: ' + editor_name1 + '-' + editor_name2 + '-canvas';
-		var clhs = jQuery('#' + this.id + '-lhs-margin');
-		var crhs = jQuery('#' + this.id + '-rhs-margin');
+		var clhs = this.element.find('#' + this.id + '-lhs-margin');
+		var crhs = this.element.find('#' + this.id + '-rhs-margin');
 		return {
 			visible_page_height: visible_page_height,
 			gutter_height: gutter_height,
@@ -1401,14 +1489,14 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		this.trace('draw', 'visible_page_ratio', ex.visible_page_ratio);
 		this.trace('draw', 'lhs-scroller-top', ex.lhs_scroller.scrollTop());
 		this.trace('draw', 'rhs-scroller-top', ex.rhs_scroller.scrollTop());
-		
-		jQuery.each(jQuery.find('#' + this.id + ' canvas'), function () {
+
+		jQuery.each(this.element.find('canvas'), function () {
 			jQuery(this).get(0).height = ex.visible_page_height;
 		});
-		
+
 		ex.clhs.unbind('click');
 		ex.crhs.unbind('click');
-		
+
 		ctx_lhs.beginPath();
 		ctx_lhs.fillStyle = this.settings.bgcolor;
 		ctx_lhs.strokeStyle = '#888';
@@ -1424,6 +1512,10 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var vp = this._get_viewport(editor_name1, editor_name2);
 		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 = this.current_diff_color;
+			}
 
 			this.trace('draw', change);
 			// margin indicators
@@ -1434,41 +1526,41 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			this.trace('draw', 'marker calculated', lhs_y_start, lhs_y_end, rhs_y_start, rhs_y_end);
 
 			ctx_lhs.beginPath();
-			ctx_lhs.fillStyle = this.settings.fgcolor[(this._current_diff==i?'c':'')+change['op']];
+			ctx_lhs.fillStyle = fill;
 			ctx_lhs.strokeStyle = '#000';
 			ctx_lhs.lineWidth = 0.5;
 			ctx_lhs.fillRect(1.5, lhs_y_start, 4.5, Math.max(lhs_y_end - lhs_y_start, 5));
 			ctx_lhs.strokeRect(1.5, lhs_y_start, 4.5, Math.max(lhs_y_end - lhs_y_start, 5));
 
 			ctx_rhs.beginPath();
-			ctx_rhs.fillStyle = this.settings.fgcolor[(this._current_diff==i?'c':'')+change['op']];
+			ctx_rhs.fillStyle = fill;
 			ctx_rhs.strokeStyle = '#000';
 			ctx_rhs.lineWidth = 0.5;
 			ctx_rhs.fillRect(1.5, rhs_y_start, 4.5, Math.max(rhs_y_end - rhs_y_start, 5));
 			ctx_rhs.strokeRect(1.5, rhs_y_start, 4.5, Math.max(rhs_y_end - rhs_y_start, 5));
-			
+
 			if (!this._is_change_in_view(vp, change)) {
 				continue;
 			}
-			
+
 			lhs_y_start = change['lhs-y-start'];
 			lhs_y_end = change['lhs-y-end'];
 			rhs_y_start = change['rhs-y-start'];
 			rhs_y_end = change['rhs-y-end'];
-			
+
 			var radius = 3;
-			
+
 			// draw left box
 			ctx.beginPath();
-			ctx.strokeStyle = this.settings.fgcolor[(this._current_diff==i?'c':'')+change['op']];
+			ctx.strokeStyle = fill;
 			ctx.lineWidth = (this._current_diff==i) ? 1.5 : 1;
-			
+
 			var rectWidth = this.draw_lhs_width;
 			var rectHeight = lhs_y_end - lhs_y_start - 1;
 			var rectX = this.draw_lhs_min;
 			var rectY = lhs_y_start;
 			// top and top top-right corner
-			
+
 			// draw left box
 			ctx.moveTo(rectX, rectY);
 			if (navigator.appName == 'Microsoft Internet Explorer') {
@@ -1489,7 +1581,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				ctx.lineTo(rectX, rectY + rectHeight);
 			}
 			ctx.stroke();
-			
+
 			rectWidth = this.draw_rhs_width;
 			rectHeight = rhs_y_end - rhs_y_start - 1;
 			rectX = this.draw_rhs_max;
@@ -1513,7 +1605,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				ctx.lineTo(rectX, rectY + rectHeight);
 			}
 			ctx.stroke();
-			
+
 			// connect boxes
 			var cx = this.draw_lhs_min + this.draw_lhs_width;
 			var cy = lhs_y_start + (lhs_y_end + 1 - lhs_y_start) / 2.0;
@@ -1536,7 +1628,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		// visible window feedback
 		ctx_lhs.fillStyle = this.settings.vpcolor;
 		ctx_rhs.fillStyle = this.settings.vpcolor;
-		
+
 		var lto = ex.clhs.height() * ex.visible_page_ratio;
 		var lfrom = (ex.lhs_scroller.scrollTop() / ex.gutter_height) * ex.clhs.height();
 		var rto = ex.crhs.height() * ex.visible_page_ratio;
@@ -1547,10 +1639,10 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		this.trace('draw', 'visible_page_ratio', ex.visible_page_ratio);
 		this.trace('draw', 'lhs from', lfrom, 'lhs to', lto);
 		this.trace('draw', 'rhs from', rfrom, 'rhs to', rto);
-		
+
 		ctx_lhs.fillRect(1.5, lfrom, 4.5, lto);
 		ctx_rhs.fillRect(1.5, rfrom, 4.5, rto);
-		
+
 		ex.clhs.click(function (ev) {
 			var y = ev.pageY - ex.lhs_xyoffset.top - (lto / 2);
 			var sto = Math.max(0, (y / mcanvas_lhs.height) * ex.lhs_scroller.get(0).scrollHeight);
@@ -1558,7 +1650,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		});
 		ex.crhs.click(function (ev) {
 			var y = ev.pageY - ex.rhs_xyoffset.top - (rto / 2);
-			var sto = Math.max(0, (y / mcanvas_rhs.height) * ex.rhs_scroller.get(0).scrollHeight);			
+			var sto = Math.max(0, (y / mcanvas_rhs.height) * ex.rhs_scroller.get(0).scrollHeight);
 			ex.rhs_scroller.scrollTop(sto);
 		});
 	},
@@ -1566,14 +1658,14 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		if(this.settings._debug.indexOf(name) >= 0) {
 			arguments[0] = name + ':';
 			console.log([].slice.apply(arguments));
-		} 
+		}
 	}
 });
 
 jQuery.pluginMaker = function(plugin) {
 	// add the plugin function as a jQuery plugin
 	jQuery.fn[plugin.prototype.name] = function(options) {
-		// get the arguments 
+		// get the arguments
 		var args = jQuery.makeArray(arguments),
 		after = args.slice(1);
 		var rc;