particlesJS("particles-js", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#049125"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#73a76c","opacity":0.4,"width":1},"move":{"enable":true,"speed":1.5782952832645452,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":false,"mode":"repulse"},"onclick":{"enable":false,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});

// Init NLP Compromise
var nlp = window.nlp;
G = new jsnx.Graph();
// Look up table for terms - let's not worry about collisions
entityLUT = {};
colorLUT = {"people":"#d7191c",
           "organizations": "#fdae61",
           "places":"#2c7bb6"}
/* global dataTags */
dataTags = {};

function getColourFromWord(word) {
  word_type = entityLUT[word];
  color = colorLUT[word_type];
  return color;
}
function build_options(class_name) {
  var mark_options = {
   // "className": class_name,
    "each": function(element) {
      setTimeout(function() {
        $(element).addClass(class_name);
      }, 500);
    }
  };
  return mark_options;
}

interact('.draggable')
  .draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    },
    // enable autoScroll
    autoScroll: true,

    // call this function on every dragmove event
    onmove: dragMoveListener,
    // call this function on every dragend event
    onend: function (event) {
    }
  });

  function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }

  // this is used later in the resizing and gesture demos
  window.dragMoveListener = dragMoveListener;
// enable draggables to be dropped into this
interact('#ner-dropzone').dropzone({
  // only accept elements matching this CSS selector
  accept: '.draggable',
  // Require a 75% element overlap for a drop to be possible
  overlap: 0.15,

  // listen for drop related events:

  ondropactivate: function (event) {
    // add active dropzone feedback
    event.target.classList.add('drop-active');
  },
  ondragenter: function (event) {
    var draggableElement = event.relatedTarget,
        dropzoneElement = event.target;

    // feedback the possibility of a drop
    dropzoneElement.classList.add('drop-target');
    draggableElement.classList.add('can-drop');
  },
  ondragleave: function (event) {
    // remove the drop feedback style
    event.target.classList.remove('drop-target');
    event.relatedTarget.classList.remove('can-drop');
    //event.relatedTarget.children[0].textContent = "Raw";
    //document.getElementById('ner-output').innerHTML = "";
    //event.relatedTarget.textContent = 'Dragged out';
  },
  ondrop: function (event) {
    event.relatedTarget.children[0].className = 'proc_ner'
    event.relatedTarget.children[0].textContent = "Entities Extracted";
    var doc_content = event.relatedTarget.children[2].innerHTML;
    var this_doc_id = event.relatedTarget.id;
    var instance = new Mark(document.querySelector("#"+this_doc_id));
    var resp = nlp(doc_content);
    instance.mark(resp.places().out('array'), build_options('places'));
    instance.mark(resp.people().out('array'), build_options('people'));
    instance.mark(resp.dates().out('array'), build_options('dates'));
    instance.mark(resp.organizations().out('array'), build_options('organizations'));
    if(!dataTags.hasOwnProperty(event.relatedTarget.id)) {
      dataTags[this_doc_id] = resp.topics().out('array');
      
      resp.places().out('array').forEach(function(elem){
        entityLUT[elem] = "places"; 
      });   
      
      resp.people().out('array').forEach(function(elem){
        entityLUT[elem] = "people"; 
      });   
      
      resp.organizations().out('array').forEach(function(elem){
        entityLUT[elem] = "organizations"; 
      });   
      
       console.log(entityLUT);
       
    }
  },
  ondropdeactivate: function (event) {
    // remove active dropzone feedback
    event.target.classList.remove('drop-active');
    event.target.classList.remove('drop-target');
  }
});

interact('#graph-dropzone').dropzone({
  // only accept elements matching this CSS selector
  accept: '.draggable',
  // Require a 75% element overlap for a drop to be possible
  overlap: 0.15,

  // listen for drop related events:

  ondropactivate: function (event) {
    // add active dropzone feedback
    event.target.classList.add('drop-active');
  },
  ondragenter: function (event) {
    var draggableElement = event.relatedTarget,
        dropzoneElement = event.target;

    // feedback the possibility of a drop
    dropzoneElement.classList.add('drop-target');
    draggableElement.classList.add('can-drop');
  },
  ondragleave: function (event) {
    // remove the drop feedback style
    event.target.classList.remove('drop-target');
    event.relatedTarget.classList.remove('can-drop');
    //event.relatedTarget.children[0].textContent = "Raw";
    //document.getElementById('ner-output').innerHTML = "";
    //event.relatedTarget.textContent = 'Dragged out';
  },
  ondrop: function (event) {
    console.log(event.relatedTarget.children[0].className);
    if(event.relatedTarget.children[0].className === "proc_ner" ) {
      build_graph(event.relatedTarget.id);
      event.relatedTarget.children[0].className = 'proc_graph';
      event.relatedTarget.children[0].textContent = "Added to Graph";     
    }
  },
  ondropdeactivate: function (event) {
    // remove active dropzone feedback
    event.target.classList.remove('drop-active');
    event.target.classList.remove('drop-target');
  }
});

function build_graph(document) {
 
      if (dataTags.hasOwnProperty(document)) {
          // do stuff
        G.addNode(document, {"color": "#c0c0c0"});
        dataTags[document].forEach(function(element) {
          G.addNode(element, {"color":getColourFromWord(element)});
          G.addEdge(element, document);
          //console.log(element);
        })
          
      }
  
  jsnx.draw(G, {
    element: '#graph_canvas',
    layoutAttr: {
      charge: -500,
      linkDistance: 100
    },
    edgeStyle: {fill:'grey'},
    withLabels: true,
    nodeStyle: {
      fill: function(d) { 
        return d.data.color; 
        }
    }, 
    labelStyle: {fill: 'white', stroke: '2px', "font-size":'20px'},
    stickyDrag: true,
    //nodeShape: "rectangle",
    nodeAttr: {
      r: function(d) {
        // `d` has the properties `node`, `data` and `G`
        return 20;
      }
    }
});
}