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

<title> data.patch </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='/canop/'
     class="item crumb ">canop</a>
  <a href='/canop/data.patch/'
     class="item crumb ">data.patch</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 = "/canop/data.patch";
    var permission = "w";
    var mime = "text/x-diff" || 'text/plain';
    var username = undefined;
    var codeMirrorParams = {
      mode: mime,
      value: "diff --git a/canop.js b/canop.js\nindex 84241d1..bfc9d55 100644\n--- a/canop.js\n+++ b/canop.js\n@@ -374,8 +374,10 @@ function Client(params) {\n   this.listeners = {};\n \n   if (params.data !== undefined) {\n+    // Holds the current data including local operations.\n+    this.data = data;\n     this.canon.add([], 0, params.data, this.base, this.localId);\n-  }\n+  } else { this.data = null; }\n   this.send = params.send || function() {};\n   this.nextClientId = 1;\n   this.clients = {};\n@@ -452,7 +454,8 @@ Client.prototype = {\n       var json = protocol[2];\n       var base = protocol[3];\n       this.localId = machine;\n-      this.receiveChange([1, [], [[[base, machine, 0], [63, 0, json]]]]);\n+      this.data = json;\n+      //this.receiveChange([1, [], [[[base, machine, 0], [63, 0, json]]]]);\n     } else if (messageType === 2) {  // Diff.\n       this.receiveChange(protocol);\n     }\n@@ -639,6 +642,10 @@ Client.prototype = {\n       }\n     }\n   },\n+  get: function get(path) {\n+    // TODO: find object to apply this on.\n+    return this.data;\n+  },\n   add: function addOp(path, key, value) {\n     // TODO: find object to apply this on.\n     this.local.add(path, key, value, this.base, this.localId);\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>
