{% extends 'base.html' %}

{% block main %}
     <!--  <textarea id="writing-field" rows="4" cols="50"></textarea> -->

     <div id="topbar">

     <form method="post">
     {{ form.csrf_token }}
     {{ form.title }}
    {{ form.writingfield }}
    <input value="submit" id="submit" type="submit">  <h1 style="display:inline-block;"> PARA .DOX</h1>
  </form>

     <div id="toolbar">

     <a href="#" id="insertImg">Insert image</a>
     <a href="#" data-command='insertCode'><i class="fa fa-code"></i></a>
     <a href="#" data-command='undo'><i class='fa fa-undo'></i></a>
  <a href="#" data-command='redo'><i class='fa fa-repeat'></i></a>
  <a href="#" data-command='bold'><i class='fa fa-bold'></i></a>
  <a href="#" data-command='italic'><i class='fa fa-italic'></i></a>
  <a href="#" data-command='underline'><i class='fa fa-underline'></i></a>
  <a href="#" data-command='strikeThrough'><i class='fa fa-strikethrough'></i></a>
  <a href="#" data-command='justifyLeft'><i class='fa fa-align-left'></i></a>
  <a href="#" data-command='justifyCenter'><i class='fa fa-align-center'></i></a>
  <a href="#" data-command='justifyRight'><i class='fa fa-align-right'></i></a>
  <a href="#" data-command='justifyFull'><i class='fa fa-align-justify'></i></a>
  <a href="#" data-command='indent'><i class='fa fa-indent'></i></a>
  <a href="#" data-command='outdent'><i class='fa fa-outdent'></i></a>
  <a href="#" data-command='insertUnorderedList'><i class='fa fa-list-ul'></i></a>
  <a href="#" data-command='insertOrderedList'><i class='fa fa-list-ol'></i></a>
  <!--<a href="#" data-command='h1'>H1</a>
  <a href="#" data-command='h2'>H2</a>-->
  <a href="#" data-command='createlink'><i class='fa fa-link'></i></a>
  <a href="#" data-command='unlink'><i class='fa fa-unlink'></i></a>
  <a href="#" data-command='insertimage'><i class='fa fa-image'></i></a>
  <a href="#" data-command='p'>P</a>
  <a href="#" data-command='subscript'><i class='fa fa-subscript'></i></a>
  <a href="#" data-command='superscript'><i class='fa fa-superscript'></i></a>

     </div>
   </div>

  <form id="upload_img" method="post" enctype="multipart/form-data">
    <label for="file">Select a file</label>
    <input name="file" type="file">
    <button id="submit_img" type="button">Upload</button>
    <p>Result Filename:&nbsp;<span id="resultFilename"> here</span></p>
    <p>Result Filesize:&nbsp;<span id="resultFilesize">here</span></p>
</form>

<div id="code_insert"><pre contenteditable="true">Insert code here</pre><button id="submit_code" type="button">insert</button></div>

        <div id="writing-field" contenteditable="true"></div>
      <div id="type_log"></div>
  </body>

<script>
var writing_field = $("#writing-field");
var writing_in_focus = false;
var last_word = "";
var current_word = "";
var number_selected=-1;
var caret_pos = 0;

writing_field.focusin(function() {
writing_in_focus = true;
})

writing_field.focusout(function() {
writing_in_focus = false;
})

writing_field.on('keydown', function (e) {
  if (e.keyCode==40||e.keyCode==38||e.keyCode==13) {
      if(number_selected!=-1) e.preventDefault();
  }
});
//check for typing or click in textfield
writing_field.bind("click keyup" ,function(e) {

var input = writing_field.text();
if(e.key== " "){
last_word = "";
}
else{
last_word = last_word+e.key;
}

if (e.keyCode > 36 && e.keyCode < 41)
{
var cursorPos = getCaretPosition(document.getElementById("writing-field"));
}
if(e.keyCode==40)
{

number_selected++;
console.log(number_selected);
  if($('#autocomplete').children().length > 0){
    $('.proposal').css("background-color", "");
    $('.proposal').css("color", "");
      $('.proposal').eq(number_selected).css("background-color", "blue");
      $('.proposal').eq(number_selected).css("color", "white");
       return false;
  }

}
else if(e.keyCode==38)
{
number_selected--;
console.log(number_selected);
  if($('#autocomplete').children().length > 0){
    $('.proposal').css("background-color", "");
    $('.proposal').css("color", "");
      $('.proposal').eq(number_selected).css("background-color", "blue");
      $('.proposal').eq(number_selected).css("color", "white");
      return false;
  }

}
else if(e.keyCode==13 && number_selected!=-1){
var position = getCaretPosition(document.getElementById("writing-field"));
console.log("CARET POSITION:::: "+caret_pos)
console.log("CURRENT WORD:::: "+current_word)
 /*
 var content = writing_field.text();
var newContent = content.slice(0, caret_pos-current_word.length) +  content.slice(caret_pos);
writing_field.text(newContent);*/
setSelectionRange(document.getElementById("writing-field"),caret_pos-current_word.length ,caret_pos);
document.execCommand("delete", false,false);
//  SetCaretPosition(document.getElementById("writing-field"),caret_pos-current_word.length);
pasteHtmlAtCaret($('.proposal').eq(number_selected).find('b').text()+$('.proposal').eq(number_selected).find('span').text()+" <a class='linkTo' href='"+$('.proposal').eq(number_selected).find('.intext').text()+"'>→ "+$('.proposal').eq(number_selected).find('.intextname').text()+"</a>&nbsp;");
//pasteHtmlAtCaret("<a href='"+$('.proposal').eq(number_selected).find('.intext').text()+"'>"+$('.proposal').eq(number_selected).find('b').text()+$('.proposal').eq(number_selected).find('span').text()+"</a>");

//document.execCommand("insertHTML", false, "<a href='#'>"+$('.proposal').eq(number_selected).text()+"</a>");

  number_selected=-1;
}
else{
number_selected=-1;
}
caret_pos=getCaretPosition(document.getElementById("writing-field"));
console.log(caret_pos);
current_word = getWordAt(writing_field.text(),getCaretPosition(document.getElementById("writing-field")))
console.log(current_word)
//typeinfo at the bottom
$("#type_log").append(e.key );
updateScroll();
})
function getTextNodesIn(node) {
  var textNodes = [];
  if (node.nodeType == 3) {
      textNodes.push(node);
  } else {
      var children = node.childNodes;
      for (var i = 0, len = children.length; i < len; ++i) {
          textNodes.push.apply(textNodes, getTextNodesIn(children[i]));
      }
  }
  return textNodes;
}

function setSelectionRange(el, start, end) {
  if (document.createRange && window.getSelection) {
      var range = document.createRange();
      range.selectNodeContents(el);
      var textNodes = getTextNodesIn(el);
      var foundStart = false;
      var charCount = 0, endCharCount;

      for (var i = 0, textNode; textNode = textNodes[i++]; ) {
          endCharCount = charCount + textNode.length;
          if (!foundStart && start >= charCount
                  && (start < endCharCount ||
                  (start == endCharCount && i <= textNodes.length))) {
              range.setStart(textNode, start - charCount);
              foundStart = true;
          }
          if (foundStart && end <= endCharCount) {
              range.setEnd(textNode, end - charCount);
              break;
          }
          charCount = endCharCount;
      }

      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
  } else if (document.selection && document.body.createTextRange) {
      var textRange = document.body.createTextRange();
      textRange.moveToElementText(el);
      textRange.collapse(true);
      textRange.moveEnd("character", end);
      textRange.moveStart("character", start);
      textRange.select();
  }
}



function updateScroll(){
  $('#type_log').scrollTop($('#type_log')[0].scrollHeight);
}
function pasteHtmlAtCaret(html) {
  var sel, range;
  if (window.getSelection) {
      // IE9 and non-IE
      sel = window.getSelection();
      if (sel.getRangeAt && sel.rangeCount) {
          range = sel.getRangeAt(0);
          range.deleteContents();

          // Range.createContextualFragment() would be useful here but is
          // non-standard and not supported in all browsers (IE9, for one)
          var el = document.createElement("div");
          el.innerHTML = html;
          var frag = document.createDocumentFragment(), node, lastNode;
          while ( (node = el.firstChild) ) {
              lastNode = frag.appendChild(node);
          }
          range.insertNode(frag);

          // Preserve the selection
          if (lastNode) {
              range = range.cloneRange();
              range.setStartAfter(lastNode);
              range.collapse(true);
              sel.removeAllRanges();
              sel.addRange(range);
          }
      }
  } else if (document.selection && document.selection.type != "Control") {
      // IE < 9
      document.selection.createRange().pasteHTML(html);
  }
}


function getWordAt (str, pos) {

  // Perform type conversions.
  str = String(str);
  pos = Number(pos) >>> 0;

  // Search for the word's beginning and end.
  var left = str.slice(0, pos + 1).search(/\S+$/),
      right = str.slice(pos).search(/\s/);

  // The last word in the string is a special case.
  if (right < 0) {
      return str.slice(left);
  }

  // Return the word, using the located bounds to extract it from the string.
  return str.slice(left, right + pos);

}

var ie = (typeof document.selection != "undefined" && document.selection.type != "Control") && true;
var w3 = (typeof window.getSelection != "undefined") && true;
function getCaretPosition(element) {
  var caretOffset = 0;
  if (w3) {
      var range = window.getSelection().getRangeAt(0);
      var preCaretRange = range.cloneRange();
      preCaretRange.selectNodeContents(element);
      preCaretRange.setEnd(range.endContainer, range.endOffset);
      caretOffset = preCaretRange.toString().length;
  } else if (ie) {
      var textRange = document.selection.createRange();
      var preCaretTextRange = document.body.createTextRange();
      preCaretTextRange.moveToElementText(element);
      preCaretTextRange.setEndPoint("EndToEnd", textRange);
      caretOffset = preCaretTextRange.text.length;
  }
  return caretOffset;
}


//time between keystrokes
var last;
var output = $('#output');
writing_field.on('input', function() {
  var n = new Date()
  var time = (last - n);
  console.log(time + ' ms');
  last = n;
});






['#writing-field'].forEach(function (selector) {
var element = document.querySelector(selector);
var fontSize = getComputedStyle(element).getPropertyValue('font-size');

var rect = document.createElement('div');
document.body.appendChild(rect);
rect.id = "autocomplete"
rect.style.position = 'absolute';
rect.style.height = "auto";
rect.style.width = "auto";

['keyup', 'click', 'scroll'].forEach(function (event) {
 element.addEventListener(event, update);
});

function update() {

  if(event.keyCode != 40 && event.keyCode != 38){
  // Set `debug` to true in order to see the mirror div. Default false.
  console.log(getSelectionCoords());
  var coordinates = getSelectionCoords();
  console.log("SCROOOLLL"+document.scrollingElement.scrollTop)
  //console.log('(top, left, height) = (%s, %s, %s)', coordinates.top, coordinates.left, coordinates.height);
  rect.style.top =
    + document.scrollingElement.scrollTop
    + coordinates.y
    + 30
    + 'px';
  rect.style.left =
    - element.scrollLeft
    + coordinates.x
    + 'px';
    getProposals(current_word);
  }
}
});

function getProposals(input_word){

var autocomplete = document.getElementById("autocomplete")
while (autocomplete.firstChild) {
  autocomplete.removeChild(autocomplete.firstChild);
}

var ajaxfinished = true;
var requestProposals

if(input_word.length>1){

if(!ajaxfinished) {requestProposals.abort();}

ajaxfinished = false;
requestProposals = $.ajax({
    url: '/api/beginwith='+current_word+'',
    dataType: 'json',
    success: function (data) {
      ajaxfinished = true;
      data.forEach(function(p){
      var proposal = document.createElement('div');
      autocomplete.appendChild(proposal);
      proposal.className = "proposal";
      var result = p.word;
      proposal.innerHTML = "<div class='incoming'>in</div> <b>"+current_word+"</b>"+"<span>"+result.substring(current_word.length)+"</span><div hidden='True' class='intext'>"+p.intext+"</div><div class='intextname'>"+p.intextname+"</div><div class='context'>"+p.context+"</div><div hidden='True' class='wordnumber'>"+p.wordnumber+"</div>";

      });
      $(".proposal").on("mousedown",function(e){
        e.preventDefault();
        var position = getCaretPosition(document.getElementById("writing-field"));
        console.log("CARET POSITION:::: "+caret_pos)
      console.log("CURRENT WORD:::: "+current_word)
         /*
         var content = writing_field.text();
        var newContent = content.slice(0, caret_pos-current_word.length) +  content.slice(caret_pos);
        writing_field.text(newContent);*/
      setSelectionRange(document.getElementById("writing-field"),caret_pos-current_word.length ,caret_pos);
      document.execCommand("delete", false,false);
      //  SetCaretPosition(document.getElementById("writing-field"),caret_pos-current_word.length);
      //" <a class='linkTo' href='"+str(link)+"'>→ "+frompost.title+"</a>"
        pasteHtmlAtCaret($(this).find('b').text()+$(this).find('span').text()+" <a class='linkTo' href='"+$(this).find('.intext').text()+"'>→ "+$(this).find('.intextname').text()+"</a>&nbsp;");
        $("#writing-field").get(0).focus();

        SetCaretPosition(document.getElementById("writing-field"),caret_pos+$(this).find('span').text().length+1);
      })
      $(".incoming").on("mousedown",function(e){
          $(".proposal").unbind('mousedown');
        $.ajax({url: "/api/link={{ post.pid }}+wordnum="+$(this).siblings(".wordnumber").first().text()+"+document="+$(this).siblings(".intext").first().text() , success: function(result){
    $("#div1").html(result);
  }});

      })


    }
});



}
else{
}
}

// Move caret to a specific point in a DOM element
function SetCaretPosition(el, pos){

  // Loop through all child nodes
  for(var node of el.childNodes){
      if(node.nodeType == 3){ // we have a text node
          if(node.length >= pos){
              // finally add our range
              var range = document.createRange(),
                  sel = window.getSelection();
              range.setStart(node,pos);
              range.collapse(true);
              sel.removeAllRanges();
              sel.addRange(range);
              return -1; // we are done
          }else{
              pos -= node.length;
          }
      }else{
          pos = SetCaretPosition(node,pos);
          if(pos == -1){
              return -1; // no need to finish the for loop
          }
      }
  }
  return pos; // needed because of recursion stuff
}

function getSelectionCoords() {
  var sel = document.selection, range, rect;
  var x = 0, y = 0;
  if (sel) {
      if (sel.type != "Control") {
          range = sel.createRange();
          range.collapse(true);
          x = range.boundingLeft;
          y = range.boundingTop;
      }
  } else if (window.getSelection) {
      sel = window.getSelection();
      if (sel.rangeCount) {
          range = sel.getRangeAt(0).cloneRange();
          if (range.getClientRects) {
              range.collapse(true);
              if (range.getClientRects().length>0){
                  rect = range.getClientRects()[0];
                  x = rect.left;
                  y = rect.top;
              }
          }
          // Fall back to inserting a temporary element
          if (x == 0 && y == 0) {
              var span = document.createElement("span");
              if (span.getClientRects) {
                  // Ensure span has dimensions and position by
                  // adding a zero-width space character
                  span.appendChild( document.createTextNode("\u200b") );
                  range.insertNode(span);
                  rect = span.getClientRects()[0];
                  x = rect.left;
                  y = rect.top;
                  var spanParent = span.parentNode;
                  spanParent.removeChild(span);

                  // Glue any broken text nodes back together
                  spanParent.normalize();
              }
          }
      }
  }
  return { x: x, y: y };
}

$("#insertImg").click(function (){

  $("#upload_img").fadeToggle()

})


  function insertCode(){
$("#code_insert").fadeOut();
    $("#writing-field").focus();
    SetCaretPosition(document.getElementById("writing-field"),caret_pos);
    pasteHtmlAtCaret($("#code_insert pre").text());
  }

function insertImage(filename){
$("#upload_img").fadeOut();
$("#writing-field").focus();
SetCaretPosition(document.getElementById("writing-field"),caret_pos);

pasteHtmlAtCaret("<img class='textimage' src='/img/"+filename+"'>");


}

$('#submit').click(function () {
        var mysave = $('#writing-field').html();
        $('#writingfield').val(mysave);
    });
$( window ).on( "load", function() {
$('#writing-field').html($('#writingfield').val());
$('.title').hide()
})

  $('#submit_code').click(function() {
      insertCode();
  })
$(function() {
    $('#submit_img').click(function() {
        event.preventDefault();
        var form_data = new FormData($('#upload_img')[0]);
        $.ajax({
            type: 'POST',
            url: '/uploadajax',
            data: form_data,
            contentType: false,
            processData: false,
            dataType: 'json'
        }).done(function(data, textStatus, jqXHR){
            console.log(data);
            console.log(textStatus);
            console.log(jqXHR);
            console.log('Success!');
            $("#resultFilename").text(data['name']);
            insertImage(data['name']);
            $("#resultFilesize").text(data['size']);
        }).fail(function(data){
            alert('error!');
        });
    });
});

$('#toolbar a').click(function(e) {
  var command = $(this).data('command');
  if(command == 'insertCode'){
      $("#code_insert").fadeToggle()
  }
  if (command == 'h1' || command == 'h2' || command == 'p') {
    document.execCommand('formatBlock', false, command);
  }
  if (command == 'forecolor' || command == 'backcolor') {
    document.execCommand($(this).data('command'), false, $(this).data('value'));
  }
    if (command == 'createlink' || command == 'insertimage') {
  url = prompt('Enter the link here: ','http:\/\/'); document.execCommand($(this).data('command'), false, url);
  }
  else document.execCommand($(this).data('command'), false, null);
});



</script>


{% endblock %}