<!doctype html>
<meta charset=utf-8>
<meta name=viewport content='width=device-width'>
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<title> patch.diff </title>

<link rel=stylesheet href=/lib/cm/cm.css>
<link rel=stylesheet href=/lib/css/ui.css>


<form id=toolbar name=export method=post target=_blank
  enctype=multipart/form-data>
  <a href='/'
     class="item crumb root-crumb"></a>
  <a href='/demo/'
     class="item crumb ">demo</a>
  <a href='/demo/patch.diff/'
     class="item crumb ">patch.diff</a>
  <a class=item id=preview title=preview><img src=/lib/icons/eye_open.png></a>
  <a class=item id=validate title=validate><img src=/lib/icons/ok_2.png></a>
  <a class=item id=run title=run><img src=/lib/icons/play.png></a>
  <a class="item right" id=settings title=settings><img src=/lib/icons/settings.png></a>
  <select onchange=selectTheme(this) class="item right" id=theme
    title=theme>
   <option>default</option>
   <option>ambiance</option>
   <option>blackboard</option>
   <option>cobalt</option>
   <option>eclipse</option>
   <option>elegant</option>
   <option>erlang-dark</option>
   <option>lesser-dark</option>
   <option>monokai</option>
   <option>neat</option>
   <option>night</option>
   <option>rubyblue</option>
   <option>vibrant-ink</option>
   <option>xq-dark</option>
  </select>
  <a class="item right" id=download title=download download><img src=/lib/icons/download_alt.png></a>
  <a class="item right" id=dictate title=dictate><img src=/lib/icons/microphone.png></a>
  <a class="item right" id=sync-state title='sync state'><span></span><img src=/lib/img/offline.svg></a>
  <input type=hidden name=code>
  <input type=hidden name=file>
  <input type=hidden name=lang>
  <input type=hidden name=ucn_text>
  <input type=hidden name=ucn_text_mime>
  <input type=hidden name=ucn_task value=conformance>
  <input type=hidden name=run value=True>
</form>

<div id=wrapper class=panel></div>

<base target=_parent>

<script src=/lib/cm/cm.js></script>
<script src=/lib/js/canop/lib.js></script>
<script src=/lib/js/canop/cm.js></script>
<script src=/app/text/page.js></script>

<script>
  (function () {
    // UI elements
    var validate = document.querySelector('#validate');
    var preview = document.querySelector('#preview');
    var run = document.querySelector('#run');
    var download = document.querySelector('#download');
    var settings = document.querySelector('#settings');
    var wrapper = document.querySelector('#wrapper');
    var delay;

    // Update UI elements on content changes
    function onChange() {
      postMessage(cm.getValue(), '*');
    }

    function betterTab(cm) {
      if (cm.somethingSelected()) {
        cm.indentSelection('add');
      } else {
        cm.replaceSelection(cm.getOption("indentWithTabs")? "\t":
          Array(cm.getOption("indentUnit") + 1).join(" "), "end", "+input");
      }
    }
    function betterShiftTab(cm) { cm.indentSelection('subtract'); }

    var path = "/demo/patch.diff";
    var permission = "w";
    var mime = "text/x-diff" || 'text/plain';
    var username = undefined;
    var codeMirrorParams = {
      mode: mime,
      value: "diff --git a/index.html b/index.html\nindex c1d9156..7764744 100644\n--- a/index.html\n+++ b/index.html\n@@ -95,7 +95,8 @@ StringStream.prototype = {\n     \u003cscript>\n     you bet\n     yeah lol\n       var editor = CodeMirror.fromTextArea(document.getElementById(\"code\"), {\n         lineNumbers: true,\n-        autoMatchBrackets: true\n+        autoMatchBrackets: true,\n+      onGutterClick: function(x){console.log(x);}\n       });\n     \u003c/script>\n   \u003c/body>\ndiff --git a/lib/codemirror.js b/lib/codemirror.js\nindex 04646a9..9a39cc7 100644\n--- a/lib/codemirror.js\n+++ b/lib/codemirror.js\n@@ -399,10 +399,16 @@ var CodeMirror = (function() {\n     }\n \n     function onMouseDown(e) {\n-      var start = posFromMouse(e), last = start;\n+      var start = posFromMouse(e), last = start, target = e.target();\n       if (!start) return;\n       setCursor(start.line, start.ch, false);\n       if (e.button() != 1) return;\n+      if (target.parentNode == gutter) {\n+        if (options.onGutterClick)\n+          options.onGutterClick(indexOf(gutter.childNodes, target) + showingFrom);\n+        return;\n+      }\n+\n       if (!focused) onFocus();\n \n       e.stop();\n@@ -808,7 +814,7 @@ var CodeMirror = (function() {\n       for (var i = showingFrom; i \u003c showingTo; ++i) {\n         var marker = lines[i].gutterMarker;\n         if (marker) html.push('\u003cdiv class=\"' + marker.style + '\">' + htmlEscape(marker.text) + '\u003c/div>');\n-        else html.push(\"\u003cdiv>\" + (options.lineNumbers ? i + 1 : \"\\u00a0\") + \"\u003c/div>\");\n+        else html.push(\"\u003cdiv>\" + (options.lineNumbers ? i + options.firstLineNumber : \"\\u00a0\") + \"\u003c/div>\");\n       }\n       gutter.style.display = \"none\"; // TODO test whether this actually helps\n       gutter.innerHTML = html.join(\"\");\n@@ -1371,10 +1377,8 @@ var CodeMirror = (function() {\n         if (option == \"parser\") setParser(value);\n         else if (option === \"lineNumbers\") setLineNumbers(value);\n         else if (option === \"gutter\") setGutter(value);\n-        else if (option === \"readOnly\") options.readOnly = value;\n-        else if (option === \"indentUnit\") {options.indentUnit = indentUnit = value; setParser(options.parser);}\n-        else if (/^(?:enterMode|tabMode|indentWithTabs|readOnly|autoMatchBrackets|undoDepth)$/.test(option)) options[option] = value;\n-        else throw new Error(\"Can't set option \" + option);\n+        else if (option === \"indentUnit\") {options.indentUnit = value; setParser(options.parser);}\n+        else options[option] = value;\n       },\n       cursorCoords: cursorCoords,\n       undo: operation(undo),\n@@ -1402,7 +1406,8 @@ var CodeMirror = (function() {\n       replaceRange: operation(replaceRange),\n \n       operation: function(f){return operation(f)();},\n-      refresh: function(){updateDisplay([{from: 0, to: lines.length}]);}\n+      refresh: function(){updateDisplay([{from: 0, to: lines.length}]);},\n+      getInputField: function(){return input;}\n     };\n     return instance;\n   }\n@@ -1420,6 +1425,7 @@ var CodeMirror = (function() {\n     readOnly: false,\n     onChange: null,\n     onCursorActivity: null,\n+    onGutterClick: null,\n     autoMatchBrackets: false,\n     workTime: 200,\n     workDelay: 300,\n\n",
      autofocus: true,
      lineNumbers: true,
      lineWrapping: true,
      matchBrackets: true,
      autoCloseBrackets: '()[]{}""',
      continueComments: true,
      extraKeys: {
        Tab: betterTab,
        'Shift-Tab': betterShiftTab
      },
      readOnly: 'nocursor'  // It'll be writable when the connection is set up.
    };
    var extraCodeMirrorParams = undefined || {};
    Object.keys(extraCodeMirrorParams).forEach(function(key) {
      codeMirrorParams[key] = extraCodeMirrorParams[key];
    });

    // CodeMirror editor
    var cm = window.cm = CodeMirror(wrapper, codeMirrorParams);
    // Hack to make wrapped text indented.
    var charWidth = cm.defaultCharWidth();
    cm.on('renderLine', function(cm, line, elt) {
      var off = CodeMirror.countColumn(line.text, null, cm.getOption('tabSize'))
        * charWidth;
      var basePadding = 4;
      elt.style.textIndent = '-' + off + 'px';
      elt.style.paddingLeft = (basePadding + off) + 'px';
    });
    cm.refresh();
    cm.on('change', onChange);
    onChange();     // Send the initial value.

    // Operational Transformation
    var canopClient = new canop.Client();
    canop.wire.websocket(canopClient, {
      url: "ws" + window.location.protocol.slice(4) + "//" +
        window.location.host + window.location.pathname + "?op=edit&app=text",
    });
    canop.ui.codemirror(canopClient, cm);
    canopClient.once('ready', function() {
      if (/^[wx]$/.test(permission)) {
        cm.setOption('readOnly', false);
        canopClient.signal({name: username});
      }
    });
    var syncState = document.getElementById('sync-state');
    var syncImg = document.querySelector('#sync-state > img');
    var setSyncText = function() {
      if (canopClient.clientCount > 1) {
        syncState.title = canopClient.clientCount + ' users';
      } else if (canopClient.clientState === 0) {
        syncState.title = 'offline';
      } else if (canopClient.clientState === 1) {
        syncState.title = 'syncing';
      } else if (canopClient.clientState === 2) {
        syncState.title = 'synced';
      }
    };
    canopClient.on('synced', function() {
      syncImg.src = '/lib/img/synced.svg';
      setSyncText();
    });
    canopClient.on('syncing', function() {
      syncImg.src = '/lib/img/syncing.svg';
      setSyncText();
    });
    canopClient.on('unsyncable', function(e) {
      syncImg.src = '/lib/img/offline.svg';
      setSyncText();
      if (e && e.name === 'UnknownBaseError') {
        alert("We cannot merge your changes with the server. Please reload.");
      }
    });
    canopClient.on('signal', function() { setSyncText(); });

    // General button actions
    validate.target = run.target = download.target = settings.target = '_blank';
    download.href = path + '?app=data';
    settings.href = path + '?app=meta';

    // Mime type specific environments
    if (environment[mime]) environment[mime](path);

  })();

</script>

<!-- Google Analytics -->
<script>var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-27876347-1']);_gaq.push(['_trackPageview']);(function(){var ga=document.createElement('script');ga.type='text/javascript';ga.async=true;ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s);})()</script>
