dgbuilder/public/ace/ace-diff.js

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else if (typeof exports === 'object') {
    module.exports = factory(require());
  } else {
    root.AceDiff = factory(root);
  }
}(this, function() {
  'use strict';

  var Range = require('ace/range').Range;

  var C = {
    DIFF_EQUAL: 0,
    DIFF_DELETE: -1,
    DIFF_INSERT: 1,
    EDITOR_RIGHT: 'right',
    EDITOR_LEFT: 'left',
    RTL: 'rtl',
    LTR: 'ltr',
    SVG_NS: 'http://www.w3.org/2000/svg',
    DIFF_GRANULARITY_SPECIFIC: 'specific',
    DIFF_GRANULARITY_BROAD: 'broad'
  };

  // our constructor
  function AceDiff(options) {
    this.options = {};

    extend(true, this.options, {
      mode: null,
      theme: null,
      diffGranularity: C.DIFF_GRANULARITY_BROAD,
      lockScrolling: false, // not implemented yet
      showDiffs: true,
      showConnectors: true,
      maxDiffs: 5000,
      left: {
        id: 'acediff-left-editor',
        content: null,
        mode: null,
        theme: null,
        editable: true,
        copyLinkEnabled: true
      },
      right: {
        id: 'acediff-right-editor',
        content: null,
        mode: null,
        theme: null,
        editable: true,
        copyLinkEnabled: true
      },
      classes: {
        gutterID: 'acediff-gutter',
        diff: 'acediff-diff',
        connector: 'acediff-connector',
        newCodeConnectorLink: 'acediff-new-code-connector-copy',
        newCodeConnectorLinkContent: '→',
        deletedCodeConnectorLink: 'acediff-deleted-code-connector-copy',
        deletedCodeConnectorLinkContent: '←',
        copyRightContainer: 'acediff-copy-right',
        copyLeftContainer: 'acediff-copy-left'
      },
      connectorYOffset: 0
    }, options);

    // instantiate the editors in an internal data structure that will store a little info about the diffs and
    // editor content
    this.editors = {
      left: {
        ace: ace.edit(this.options.left.id),
        markers: [],
        lineLengths: []
      },
      right: {
        ace: ace.edit(this.options.right.id),
        markers: [],
        lineLengths: []
      },
      editorHeight: null
    };

    addEventHandlers(this);

    this.lineHeight = this.editors.left.ace.renderer.lineHeight; // assumption: both editors have same line heights

    // set up the editors
    this.editors.left.ace.getSession().setMode(getMode(this, C.EDITOR_LEFT));
    this.editors.right.ace.getSession().setMode(getMode(this, C.EDITOR_RIGHT));
    this.editors.left.ace.setReadOnly(!this.options.left.editable);
    this.editors.right.ace.setReadOnly(!this.options.right.editable);
    this.editors.left.ace.setTheme(getTheme(this, C.EDITOR_LEFT));
    this.editors.right.ace.setTheme(getTheme(this, C.EDITOR_RIGHT));

    createCopyContainers(this);
    createGutter(this);

    // if the data is being supplied by an option, set the editor values now
    if (this.options.left.content) {
      this.editors.left.ace.setValue(this.options.left.content, -1);
    }
    if (this.options.right.content) {
      this.editors.right.ace.setValue(this.options.right.content, -1);
    }

    // store the visible height of the editors (assumed the same)
    this.editors.editorHeight = getEditorHeight(this);

    this.diff();
  }


  // our public API
  AceDiff.prototype = {

    // allows on-the-fly changes to the AceDiff instance settings
    setOptions: function(options) {
      extend(true, this.options, options);
      this.diff();
    },

    getNumDiffs: function() {
      return this.diffs.length;
    },

    // exposes the Ace editors in case the dev needs it
    getEditors: function() {
      return {
        left: this.editors.left.ace,
        right: this.editors.right.ace
      }
    },

    // our main diffing function. I actually don't think this needs to exposed: it's called automatically,
    // but just to be safe, it's included
    diff: function() {
      var dmp = new diff_match_patch();
      var val1 = this.editors.left.ace.getSession().getValue();
      var val2 = this.editors.right.ace.getSession().getValue();
      var diff = dmp.diff_main(val2, val1);
      dmp.diff_cleanupSemantic(diff);

      this.editors.left.lineLengths  = getLineLengths(this.editors.left);
      this.editors.right.lineLengths = getLineLengths(this.editors.right);

      // parse the raw diff into something a little more palatable
      var diffs = [];
      var offset = {
        left: 0,
        right: 0
      };

      diff.forEach(function(chunk) {
        var chunkType = chunk[0];
        var text = chunk[1];

        // oddly, occasionally the algorithm returns a diff with no changes made
        if (text.length === 0) {
          return;
        }
        if (chunkType === C.DIFF_EQUAL) {
          offset.left += text.length;
          offset.right += text.length;
        } else if (chunkType === C.DIFF_DELETE) {
          diffs.push(computeDiff(this, C.DIFF_DELETE, offset.left, offset.right, text));
          offset.right += text.length;

        } else if (chunkType === C.DIFF_INSERT) {
          diffs.push(computeDiff(this, C.DIFF_INSERT, offset.left, offset.right, text));
          offset.left += text.length;
        }
      }, this);

      // simplify our computed diffs; this groups together multiple diffs on subsequent lines
      this.diffs = simplifyDiffs(this, diffs);

      // if we're dealing with too many diffs, fail silently
      if (this.diffs.length > this.options.maxDiffs) {
        return;
      }

      clearDiffs(this);
      decorate(this);
    },

    destroy: function() {

      // destroy the two editors
      var leftValue = this.editors.left.ace.getValue();
      this.editors.left.ace.destroy();
      var oldDiv = this.editors.left.ace.container;
      var newDiv = oldDiv.cloneNode(false);
      newDiv.textContent = leftValue;
      oldDiv.parentNode.replaceChild(newDiv, oldDiv);

      var rightValue = this.editors.right.ace.getValue();
      this.editors.right.ace.destroy();
      oldDiv = this.editors.right.ace.container;
      newDiv = oldDiv.cloneNode(false);
      newDiv.textContent = rightValue;
      oldDiv.parentNode.replaceChild(newDiv, oldDiv);

      document.getElementById(this.options.classes.gutterID).innerHTML = '';
    }
  };


  function getMode(acediff, editor) {
    var mode = acediff.options.mode;
    if (editor === C.EDITOR_LEFT && acediff.options.left.mode !== null) {
      mode = acediff.options.left.mode;
    }
    if (editor === C.EDITOR_RIGHT && acediff.options.right.mode !== null) {
      mode = acediff.options.right.mode;
    }
    return mode;
  }


  function getTheme(acediff, editor) {
    var theme = acediff.options.theme;
    if (editor === C.EDITOR_LEFT && acediff.options.left.theme !== null) {
      theme = acediff.options.left.theme;
    }
    if (editor === C.EDITOR_RIGHT && acediff.options.right.theme !== null) {
      theme = acediff.options.right.theme;
    }
    return theme;
  }


  function addEventHandlers(acediff) {
    var leftLastScrollTime = new Date().getTime(),
        rightLastScrollTime = new Date().getTime(),
        now;

    acediff.editors.left.ace.getSession().on('changeScrollTop', function(scroll) {
      now = new Date().getTime();
      if (rightLastScrollTime + 50 < now) {
        updateGap(acediff, 'left', scroll);
      }
    });

    acediff.editors.right.ace.getSession().on('changeScrollTop', function(scroll) {
      now = new Date().getTime();
      if (leftLastScrollTime + 50 < now) {
        updateGap(acediff, 'right', scroll);
      }
    });

    var diff = acediff.diff.bind(acediff);
    acediff.editors.left.ace.on('change', diff);
    acediff.editors.right.ace.on('change', diff);

    if (acediff.options.left.copyLinkEnabled) {
      on('#' + acediff.options.classes.gutterID, 'click', '.' + acediff.options.classes.newCodeConnectorLink, function(e) {
        copy(acediff, e, C.LTR);
      });
    }
    if (acediff.options.right.copyLinkEnabled) {
      on('#' + acediff.options.classes.gutterID, 'click', '.' + acediff.options.classes.deletedCodeConnectorLink, function(e) {
        copy(acediff, e, C.RTL);
      });
    }

    var onResize = debounce(function() {
      acediff.editors.availableHeight = document.getElementById(acediff.options.left.id).offsetHeight;

      // TODO this should re-init gutter
      acediff.diff();
    }, 250);

    window.addEventListener('resize', onResize);
  }


  function copy(acediff, e, dir) {
    var diffIndex = parseInt(e.target.getAttribute('data-diff-index'), 10);
    var diff = acediff.diffs[diffIndex];
    var sourceEditor, targetEditor;

    var startLine, endLine, targetStartLine, targetEndLine;
    if (dir === C.LTR) {
      sourceEditor = acediff.editors.left;
      targetEditor = acediff.editors.right;
      startLine = diff.leftStartLine;
      endLine = diff.leftEndLine;
      targetStartLine = diff.rightStartLine;
      targetEndLine = diff.rightEndLine;
    } else {
      sourceEditor = acediff.editors.right;
      targetEditor = acediff.editors.left;
      startLine = diff.rightStartLine;
      endLine = diff.rightEndLine;
      targetStartLine = diff.leftStartLine;
      targetEndLine = diff.leftEndLine;
    }

    var contentToInsert = '';
    for (var i=startLine; i<endLine; i++) {
      contentToInsert += getLine(sourceEditor, i) + '\n';
    }

    var startContent = '';
    for (var i=0; i<targetStartLine; i++) {
      startContent += getLine(targetEditor, i) + '\n';
    }

    var endContent = '';
    var totalLines = targetEditor.ace.getSession().getLength();
    for (var i=targetEndLine; i<totalLines; i++) {
      endContent += getLine(targetEditor, i);
      if (i<totalLines-1) {
        endContent += '\n';
      }
    }

    endContent = endContent.replace(/\s*$/, '');

    // keep track of the scroll height
    var h = targetEditor.ace.getSession().getScrollTop();
    targetEditor.ace.getSession().setValue(startContent + contentToInsert + endContent);
    targetEditor.ace.getSession().setScrollTop(parseInt(h));

    acediff.diff();
  }


  function getLineLengths(editor) {
    var lines = editor.ace.getSession().doc.getAllLines();
    var lineLengths = [];
    lines.forEach(function(line) {
      lineLengths.push(line.length + 1); // +1 for the newline char
    });
    return lineLengths;
  }


  // shows a diff in one of the two editors.
  function showDiff(acediff, editor, startLine, endLine, className) {
    var editor = acediff.editors[editor];

    if (endLine < startLine) { // can this occur? Just in case.
      endLine = startLine;
    }

    var classNames = className + ' ' + ((endLine > startLine) ? 'lines' : 'targetOnly');
    endLine--; // because endLine is always + 1

    // to get Ace to highlight the full row we just set the start and end chars to 0 and 1
    editor.markers.push(editor.ace.session.addMarker(new Range(startLine, 0, endLine, 1), classNames, 'fullLine'));
  }


  // called onscroll. Updates the gap to ensure the connectors are all lining up
  function updateGap(acediff, editor, scroll) {

    clearDiffs(acediff);
    decorate(acediff);

    // reposition the copy containers containing all the arrows
    positionCopyContainers(acediff);
  }


  function clearDiffs(acediff) {
    acediff.editors.left.markers.forEach(function(marker) {
      this.editors.left.ace.getSession().removeMarker(marker);
    }, acediff);
    acediff.editors.right.markers.forEach(function(marker) {
      this.editors.right.ace.getSession().removeMarker(marker);
    }, acediff);
  }


  function addConnector(acediff, leftStartLine, leftEndLine, rightStartLine, rightEndLine) {
    var leftScrollTop  = acediff.editors.left.ace.getSession().getScrollTop();
    var rightScrollTop = acediff.editors.right.ace.getSession().getScrollTop();

    // All connectors, regardless of ltr or rtl have the same point system, even if p1 === p3 or p2 === p4
    //  p1   p2
    //
    //  p3   p4

    acediff.connectorYOffset = 1;

    var p1_x = -1;
    var p1_y = (leftStartLine * acediff.lineHeight) - leftScrollTop;
    var p2_x = acediff.gutterWidth + 1;
    var p2_y = rightStartLine * acediff.lineHeight - rightScrollTop;
    var p3_x = -1;
    var p3_y = (leftEndLine * acediff.lineHeight) - leftScrollTop + acediff.connectorYOffset;
    var p4_x = acediff.gutterWidth + 1;
    var p4_y = (rightEndLine * acediff.lineHeight) - rightScrollTop + acediff.connectorYOffset;
    var curve1 = getCurve(p1_x, p1_y, p2_x, p2_y);
    var curve2 = getCurve(p4_x, p4_y, p3_x, p3_y);

    var verticalLine1 = 'L' + p2_x + ',' + p2_y + ' ' + p4_x + ',' + p4_y;
    var verticalLine2 = 'L' + p3_x + ',' + p3_y + ' ' + p1_x + ',' + p1_y;
    var d = curve1 + ' ' + verticalLine1 + ' ' + curve2 + ' ' + verticalLine2;

    var el = document.createElementNS(C.SVG_NS, 'path');
    el.setAttribute('d', d);
    el.setAttribute('class', acediff.options.classes.connector);
    acediff.gutterSVG.appendChild(el);
  }


  function addCopyArrows(acediff, info, diffIndex) {
    if (info.leftEndLine > info.leftStartLine && acediff.options.left.copyLinkEnabled) {
      var arrow = createArrow({
        className: acediff.options.classes.newCodeConnectorLink,
        topOffset: info.leftStartLine * acediff.lineHeight,
        tooltip: 'Copy to right',
        diffIndex: diffIndex,
        arrowContent: acediff.options.classes.newCodeConnectorLinkContent
      });
      acediff.copyRightContainer.appendChild(arrow);
    }

    if (info.rightEndLine > info.rightStartLine && acediff.options.right.copyLinkEnabled) {
      var arrow = createArrow({
        className: acediff.options.classes.deletedCodeConnectorLink,
        topOffset: info.rightStartLine * acediff.lineHeight,
        tooltip: 'Copy to left',
        diffIndex: diffIndex,
        arrowContent: acediff.options.classes.deletedCodeConnectorLinkContent
      });
      acediff.copyLeftContainer.appendChild(arrow);
    }
  }


  function positionCopyContainers(acediff) {
    var leftTopOffset = acediff.editors.left.ace.getSession().getScrollTop();
    var rightTopOffset = acediff.editors.right.ace.getSession().getScrollTop();

    acediff.copyRightContainer.style.cssText = 'top: ' + (-leftTopOffset) + 'px';
    acediff.copyLeftContainer.style.cssText = 'top: ' + (-rightTopOffset) + 'px';
  }


  /**
   * This method takes the raw diffing info from the Google lib and returns a nice clean object of the following
   * form:
   * {
   *   leftStartLine:
   *   leftEndLine:
   *   rightStartLine:
   *   rightEndLine:
   * }
   *
   * Ultimately, that's all the info we need to highlight the appropriate lines in the left + right editor, add the
   * SVG connectors, and include the appropriate <<, >> arrows.
   *
   * Note: leftEndLine and rightEndLine are always the start of the NEXT line, so for a single line diff, there will
   * be 1 separating the startLine and endLine values. So if leftStartLine === leftEndLine or rightStartLine ===
   * rightEndLine, it means that new content from the other editor is being inserted and a single 1px line will be
   * drawn.
   */
  function computeDiff(acediff, diffType, offsetLeft, offsetRight, diffText) {
    var lineInfo = {};

    // this was added in to hack around an oddity with the Google lib. Sometimes it would include a newline
    // as the first char for a diff, other times not - and it would change when you were typing on-the-fly. This
    // is used to level things out so the diffs don't appear to shift around
    var newContentStartsWithNewline = /^\n/.test(diffText);

    if (diffType === C.DIFF_INSERT) {

      // pretty confident this returns the right stuff for the left editor: start & end line & char
      var info = getSingleDiffInfo(acediff.editors.left, offsetLeft, diffText);

      // this is the ACTUAL undoctored current line in the other editor. It's always right. Doesn't mean it's
      // going to be used as the start line for the diff though.
      var currentLineOtherEditor = getLineForCharPosition(acediff.editors.right, offsetRight);
      var numCharsOnLineOtherEditor = getCharsOnLine(acediff.editors.right, currentLineOtherEditor);
      var numCharsOnLeftEditorStartLine = getCharsOnLine(acediff.editors.left, info.startLine);
      var numCharsOnLine = getCharsOnLine(acediff.editors.left, info.startLine);

      // this is necessary because if a new diff starts on the FIRST char of the left editor, the diff can comes
      // back from google as being on the last char of the previous line so we need to bump it up one
      var rightStartLine = currentLineOtherEditor;
      if (numCharsOnLine === 0 && newContentStartsWithNewline) {
        newContentStartsWithNewline = false;
      }
      if (info.startChar === 0 && isLastChar(acediff.editors.right, offsetRight, newContentStartsWithNewline)) {
        rightStartLine = currentLineOtherEditor + 1;
      }

      var sameLineInsert = info.startLine === info.endLine;

      // whether or not this diff is a plain INSERT into the other editor, or overwrites a line take a little work to
      // figure out. This feels like the hardest part of the entire script.
      var numRows = 0;
      if (

        // dense, but this accommodates two scenarios:
        // 1. where a completely fresh new line is being inserted in left editor, we want the line on right to stay a 1px line
        // 2. where a new character is inserted at the start of a newline on the left but the line contains other stuff,
        //    we DO want to make it a full line
        (info.startChar > 0 || (sameLineInsert && diffText.length < numCharsOnLeftEditorStartLine)) &&

        // if the right editor line was empty, it's ALWAYS a single line insert [not an OR above?]
        numCharsOnLineOtherEditor > 0 &&

        // if the text being inserted starts mid-line
        (info.startChar < numCharsOnLeftEditorStartLine)) {
        numRows++;
      }

      lineInfo = {
        leftStartLine: info.startLine,
        leftEndLine: info.endLine + 1,
        rightStartLine: rightStartLine,
        rightEndLine: rightStartLine + numRows
      };

    } else {
      var info = getSingleDiffInfo(acediff.editors.right, offsetRight, diffText);

      var currentLineOtherEditor = getLineForCharPosition(acediff.editors.left, offsetLeft);
      var numCharsOnLineOtherEditor = getCharsOnLine(acediff.editors.left, currentLineOtherEditor);
      var numCharsOnRightEditorStartLine = getCharsOnLine(acediff.editors.right, info.startLine);
      var numCharsOnLine = getCharsOnLine(acediff.editors.right, info.startLine);

      // this is necessary because if a new diff starts on the FIRST char of the left editor, the diff can comes
      // back from google as being on the last char of the previous line so we need to bump it up one
      var leftStartLine = currentLineOtherEditor;
      if (numCharsOnLine === 0 && newContentStartsWithNewline) {
        newContentStartsWithNewline = false;
      }
      if (info.startChar === 0 && isLastChar(acediff.editors.left, offsetLeft, newContentStartsWithNewline)) {
        leftStartLine = currentLineOtherEditor + 1;
      }

      var sameLineInsert = info.startLine === info.endLine;
      var numRows = 0;
      if (

        // dense, but this accommodates two scenarios:
        // 1. where a completely fresh new line is being inserted in left editor, we want the line on right to stay a 1px line
        // 2. where a new character is inserted at the start of a newline on the left but the line contains other stuff,
        //    we DO want to make it a full line
        (info.startChar > 0 || (sameLineInsert && diffText.length < numCharsOnRightEditorStartLine)) &&

        // if the right editor line was empty, it's ALWAYS a single line insert [not an OR above?]
        numCharsOnLineOtherEditor > 0 &&

        // if the text being inserted starts mid-line
        (info.startChar < numCharsOnRightEditorStartLine)) {
          numRows++;
      }

      lineInfo = {
        leftStartLine: leftStartLine,
        leftEndLine: leftStartLine + numRows,
        rightStartLine: info.startLine,
        rightEndLine: info.endLine + 1
      };
    }

    return lineInfo;
  }


  // helper to return the startline, endline, startChar and endChar for a diff in a particular editor. Pretty
  // fussy function
  function getSingleDiffInfo(editor, offset, diffString) {
    var info = {
      startLine: 0,
      startChar: 0,
      endLine: 0,
      endChar: 0
    };
    var endCharNum = offset + diffString.length;
    var runningTotal = 0;
    var startLineSet = false,
        endLineSet = false;

    editor.lineLengths.forEach(function(lineLength, lineIndex) {
      runningTotal += lineLength;

      if (!startLineSet && offset < runningTotal) {
        info.startLine = lineIndex;
        info.startChar = offset - runningTotal + lineLength;
        startLineSet = true;
      }

      if (!endLineSet && endCharNum <= runningTotal) {
        info.endLine = lineIndex;
        info.endChar = endCharNum - runningTotal + lineLength;
        endLineSet = true;
      }
    });

    // if the start char is the final char on the line, it's a newline & we ignore it
    if (info.startChar > 0 && getCharsOnLine(editor, info.startLine) === info.startChar) {
      info.startLine++;
      info.startChar = 0;
    }

    // if the end char is the first char on the line, we don't want to highlight that extra line
    if (info.endChar === 0) {
      info.endLine--;
    }

    var endsWithNewline = /\n$/.test(diffString);
    if (info.startChar > 0 && endsWithNewline) {
      info.endLine++;
    }

    return info;
  }


  // note that this and everything else in this script uses 0-indexed row numbers
  function getCharsOnLine(editor, line) {
    return getLine(editor, line).length;
  }


  function getLine(editor, line) {
    return editor.ace.getSession().doc.getLine(line);
  }


  function getLineForCharPosition(editor, offsetChars) {
    var lines = editor.ace.getSession().doc.getAllLines(),
        foundLine = 0,
        runningTotal = 0;

    for (var i=0; i<lines.length; i++) {
      runningTotal += lines[i].length + 1; // +1 needed for newline char
      if (offsetChars <= runningTotal) {
        foundLine = i;
        break;
      }
    }
    return foundLine;
  }


  function isLastChar(editor, char, startsWithNewline) {
    var lines = editor.ace.getSession().doc.getAllLines(),
        runningTotal = 0,
        isLastChar = false;

    for (var i=0; i<lines.length; i++) {
      runningTotal += lines[i].length + 1; // +1 needed for newline char
      var comparison = runningTotal;
      if (startsWithNewline) {
        comparison--;
      }

      if (char === comparison) {
        isLastChar = true;
        break;
      }
    }
    return isLastChar;
  }


  function createArrow(info) {
    var el = document.createElement('div');
    var props = {
      'class': info.className,
      'style': 'top:' + info.topOffset + 'px',
      title: info.tooltip,
      'data-diff-index': info.diffIndex
    };
    for (var key in props) {
      el.setAttribute(key, props[key]);
    }
    el.innerHTML = info.arrowContent;
    return el;
  }


  function createGutter(acediff) {
    acediff.gutterHeight = document.getElementById(acediff.options.classes.gutterID).clientHeight;
    acediff.gutterWidth = document.getElementById(acediff.options.classes.gutterID).clientWidth;

    var leftHeight = getTotalHeight(acediff, C.EDITOR_LEFT);
    var rightHeight = getTotalHeight(acediff, C.EDITOR_RIGHT);
    var height = Math.max(leftHeight, rightHeight, acediff.gutterHeight);

    acediff.gutterSVG = document.createElementNS(C.SVG_NS, 'svg');
    acediff.gutterSVG.setAttribute('width', acediff.gutterWidth);
    acediff.gutterSVG.setAttribute('height', height);

    document.getElementById(acediff.options.classes.gutterID).appendChild(acediff.gutterSVG);
  }

  // acediff.editors.left.ace.getSession().getLength() * acediff.lineHeight
  function getTotalHeight(acediff, editor) {
    var ed = (editor === C.EDITOR_LEFT) ? acediff.editors.left : acediff.editors.right;
    return ed.ace.getSession().getLength() * acediff.lineHeight;
  }

  // creates two contains for positioning the copy left + copy right arrows
  function createCopyContainers(acediff) {
    acediff.copyRightContainer = document.createElement('div');
    acediff.copyRightContainer.setAttribute('class', acediff.options.classes.copyRightContainer);
    acediff.copyLeftContainer = document.createElement('div');
    acediff.copyLeftContainer.setAttribute('class', acediff.options.classes.copyLeftContainer);

    document.getElementById(acediff.options.classes.gutterID).appendChild(acediff.copyRightContainer);
    document.getElementById(acediff.options.classes.gutterID).appendChild(acediff.copyLeftContainer);
  }


  function clearGutter(acediff) {
    //gutter.innerHTML = '';

    var gutterEl  = document.getElementById(acediff.options.classes.gutterID);
	try{
    		gutterEl.removeChild(acediff.gutterSVG);
	}catch(err){
	}

    createGutter(acediff);
  }


  function clearArrows(acediff) {
    acediff.copyLeftContainer.innerHTML = '';
    acediff.copyRightContainer.innerHTML = '';
  }


  /*
   * This combines multiple rows where, say, line 1 => line 1, line 2 => line 2, line 3-4 => line 3. That could be
   * reduced to a single connector line 1=4 => line 1-3
   */
  function simplifyDiffs(acediff, diffs) {
    var groupedDiffs = [];

    function compare(val) {
      return (acediff.options.diffGranularity === C.DIFF_GRANULARITY_SPECIFIC) ? val < 1 : val <= 1;
    }

    diffs.forEach(function(diff, index) {
      if (index === 0) {
        groupedDiffs.push(diff);
        return;
      }

      // loop through all grouped diffs. If this new diff lies between an existing one, we'll just add to it, rather
      // than create a new one
      var isGrouped = false;
      for (var i=0; i<groupedDiffs.length; i++) {
        if (compare(Math.abs(diff.leftStartLine - groupedDiffs[i].leftEndLine)) &&
            compare(Math.abs(diff.rightStartLine - groupedDiffs[i].rightEndLine))) {

          // update the existing grouped diff to expand its horizons to include this new diff start + end lines
          groupedDiffs[i].leftStartLine = Math.min(diff.leftStartLine, groupedDiffs[i].leftStartLine);
          groupedDiffs[i].rightStartLine = Math.min(diff.rightStartLine, groupedDiffs[i].rightStartLine);
          groupedDiffs[i].leftEndLine = Math.max(diff.leftEndLine, groupedDiffs[i].leftEndLine);
          groupedDiffs[i].rightEndLine = Math.max(diff.rightEndLine, groupedDiffs[i].rightEndLine);
          isGrouped = true;
          break;
        }
      }

      if (!isGrouped) {
        groupedDiffs.push(diff);
      }
    });

    // clear out any single line diffs (i.e. single line on both editors)
    var fullDiffs = [];
    groupedDiffs.forEach(function(diff) {
      if (diff.leftStartLine === diff.leftEndLine && diff.rightStartLine === diff.rightEndLine) {
        return;
      }
      fullDiffs.push(diff);
    });

    return fullDiffs;
  }


  function decorate(acediff) {
    clearGutter(acediff);
    clearArrows(acediff);

    acediff.diffs.forEach(function(info, diffIndex) {
      if (this.options.showDiffs) {
        showDiff(this, C.EDITOR_LEFT, info.leftStartLine, info.leftEndLine, this.options.classes.diff);
        showDiff(this, C.EDITOR_RIGHT, info.rightStartLine, info.rightEndLine, this.options.classes.diff);

        if (this.options.showConnectors) {
          addConnector(this, info.leftStartLine, info.leftEndLine, info.rightStartLine, info.rightEndLine);
        }
        addCopyArrows(this, info, diffIndex);
      }
    }, acediff);
  }


  function extend() {
    var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {},
      i = 1,
      length = arguments.length,
      deep = false,
      toString = Object.prototype.toString,
      hasOwn = Object.prototype.hasOwnProperty,
      class2type = {
        "[object Boolean]": "boolean",
        "[object Number]": "number",
        "[object String]": "string",
        "[object Function]": "function",
        "[object Array]": "array",
        "[object Date]": "date",
        "[object RegExp]": "regexp",
        "[object Object]": "object"
      },

      jQuery = {
        isFunction: function(obj) {
          return jQuery.type(obj) === "function";
        },
        isArray: Array.isArray ||
        function(obj) {
          return jQuery.type(obj) === "array";
        },
        isWindow: function(obj) {
          return obj !== null && obj === obj.window;
        },
        isNumeric: function(obj) {
          return !isNaN(parseFloat(obj)) && isFinite(obj);
        },
        type: function(obj) {
          return obj === null ? String(obj) : class2type[toString.call(obj)] || "object";
        },
        isPlainObject: function(obj) {
          if (!obj || jQuery.type(obj) !== "object" || obj.nodeType) {
            return false;
          }
          try {
            if (obj.constructor && !hasOwn.call(obj, "constructor") && !hasOwn.call(obj.constructor.prototype, "isPrototypeOf")) {
              return false;
            }
          } catch (e) {
            return false;
          }
          var key;
          for (key in obj) {}
          return key === undefined || hasOwn.call(obj, key);
        }
      };
    if (typeof target === "boolean") {
      deep = target;
      target = arguments[1] || {};
      i = 2;
    }
    if (typeof target !== "object" && !jQuery.isFunction(target)) {
      target = {};
    }
    if (length === i) {
      target = this;
      --i;
    }
    for (i; i < length; i++) {
      if ((options = arguments[i]) !== null) {
        for (name in options) {
          src = target[name];
          copy = options[name];
          if (target === copy) {
            continue;
          }
          if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
            if (copyIsArray) {
              copyIsArray = false;
              clone = src && jQuery.isArray(src) ? src : [];
            } else {
              clone = src && jQuery.isPlainObject(src) ? src : {};
            }
            // WARNING: RECURSION
            target[name] = extend(deep, clone, copy);
          } else if (copy !== undefined) {
            target[name] = copy;
          }
        }
      }
    }

    return target;
  }


  function getScrollingInfo(acediff, dir) {
    return (dir == C.EDITOR_LEFT) ? acediff.editors.left.ace.getSession().getScrollTop() : acediff.editors.right.ace.getSession().getScrollTop();
  }


  function getEditorHeight(acediff) {
    //editorHeight: document.getElementById(acediff.options.left.id).clientHeight
    return document.getElementById(acediff.options.left.id).offsetHeight;
  }

  // generates a Bezier curve in SVG format
  function getCurve(startX, startY, endX, endY) {
    var w = endX - startX;
    var halfWidth = startX + (w / 2);

    // position it at the initial x,y coords
    var curve = 'M ' + startX + ' ' + startY +

      // now create the curve. This is of the form "C M,N O,P Q,R" where C is a directive for SVG ("curveto"),
      // M,N are the first curve control point, O,P the second control point and Q,R are the final coords
      ' C ' + halfWidth + ',' + startY + ' ' + halfWidth + ',' + endY + ' ' + endX + ',' + endY;

    return curve;
  }


  function on(elSelector, eventName, selector, fn) {
    var element = (elSelector === 'document') ? document : document.querySelector(elSelector);

    element.addEventListener(eventName, function(event) {
      var possibleTargets = element.querySelectorAll(selector);
      var target = event.target;

      for (var i = 0, l = possibleTargets.length; i < l; i++) {
        var el = target;
        var p = possibleTargets[i];

        while(el && el !== element) {
          if (el === p) {
            return fn.call(p, event);
          }
          el = el.parentNode;
        }
      }
    });
  }


  function debounce(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  }

  return AceDiff;

}));