var _ = require("lodash/core");
var math = require("./util/math")();
var linkCreator = require("./parsing/linkCreator")();
var elementTools = require("./util/elementTools")();
// add some maps for nodes and properties -- used for object generation
var nodePrototypeMap = require("./elements/nodes/nodeMap")();
var propertyPrototypeMap = require("./elements/properties/propertyMap")();


module.exports = function ( graphContainerSelector ){
  var graph = {},
    CARDINALITY_HDISTANCE = 20,
    CARDINALITY_VDISTANCE = 10,
    curveFunction = d3.svg.line()
      .x(function ( d ){
        return d.x;
      })
      .y(function ( d ){
        return d.y;
      })
      .interpolate("cardinal"),
    options = require("./options")(),
    parser = require("./parser")(graph),
    language = "default",
    paused = false,
    // Container for visual elements
    graphContainer,
    nodeContainer,
    labelContainer,
    cardinalityContainer,
    linkContainer,
    // Visual elements
    nodeElements,
    initialLoad = true,
    updateRenderingDuringSimulation = false,
    labelGroupElements,
    linkGroups,
    linkPathElements,
    cardinalityElements,
    // Internal data
    classNodes,
    labelNodes,
    links,
    properties,
    unfilteredData,
    // Graph behaviour
    force,
    dragBehaviour,
    zoomFactor = 1.0,
    centerGraphViewOnLoad = false,
    transformAnimation = false,
    graphTranslation = [0, 0],
    graphUpdateRequired = false,
    pulseNodeIds = [],
    nodeArrayForPulse = [],
    nodeMap = [],
    locationId = 0,
    defaultZoom = 1.0,
    defaultTargetZoom = 0.8,
    global_dof = -1,
    touchDevice = false,
    last_touch_time,
    originalD3_dblClickFunction = null,
    originalD3_touchZoomFunction = null,
    
    // editing elements
    deleteGroupElement,
    addDataPropertyGroupElement,
    editContainer,
    draggerLayer = null,
    draggerObjectsArray = [],
    delayedHider,
    nodeFreezer,
    hoveredNodeElement = null,
    currentlySelectedNode = null,
    hoveredPropertyElement = null,
    draggingStarted = false,
    frozenDomainForPropertyDragger,
    frozenRangeForPropertyDragger,
    
    eP = 0, // id for new properties
    eN = 0, // id for new Nodes
    editMode = true,
    debugContainer = d3.select("#FPS_Statistics"),
    finishedLoadingSequence = false,
    
    ignoreOtherHoverEvents = false,
    forceNotZooming = false,
    now, then, // used for fps computation
    showFPS = false,
    seenEditorHint = false,
    seenFilterWarning = false,
    showFilterWarning = false,
    
    keepDetailsCollapsedOnLoading = true,
    adjustingGraphSize = false,
    showReloadButtonAfterLayoutOptimization = false,
    zoom;
  //var prefixModule=require("./prefixRepresentationModule")(graph);
  var NodePrototypeMap = createLowerCasePrototypeMap(nodePrototypeMap);
  var PropertyPrototypeMap = createLowerCasePrototypeMap(propertyPrototypeMap);
  var classDragger = require("./classDragger")(graph);
  var rangeDragger = require("./rangeDragger")(graph);
  var domainDragger = require("./domainDragger")(graph);
  var shadowClone = require("./shadowClone")(graph);
  
  graph.math = function (){
    return math;
  };
  /** --------------------------------------------------------- **/
  /** -- getter and setter definitions                       -- **/
  /** --------------------------------------------------------- **/
  graph.isEditorMode = function (){
    return editMode;
  };
  graph.getGlobalDOF = function (){
    return global_dof;
  };
  graph.setGlobalDOF = function ( val ){
    global_dof = val;
  };
  
  graph.updateZoomSliderValueFromOutside = function (){
    graph.options().zoomSlider().updateZoomSliderValue(zoomFactor);
  };
  
  graph.setDefaultZoom = function ( val ){
    defaultZoom = val;
    graph.reset();
    graph.options().zoomSlider().updateZoomSliderValue(defaultZoom);
  };
  graph.setTargetZoom = function ( val ){
    defaultTargetZoom = val;
  };
  graph.graphOptions = function (){
    return options;
  };
  
  graph.scaleFactor = function (){
    return zoomFactor;
  };
  graph.translation = function (){
    return graphTranslation;
  };
  
  // Returns the visible nodes
  graph.graphNodeElements = function (){
    return nodeElements;
  };
  // Returns the visible Label Nodes
  graph.graphLabelElements = function (){
    return labelNodes;
  };
  
  graph.graphLinkElements = function (){
    return links;
  };
  
  graph.setSliderZoom = function ( val ){
    
    var cx = 0.5 * graph.options().width();
    var cy = 0.5 * graph.options().height();
    var cp = getWorldPosFromScreen(cx, cy, graphTranslation, zoomFactor);
    var sP = [cp.x, cp.y, graph.options().height() / zoomFactor];
    var eP = [cp.x, cp.y, graph.options().height() / val];
    var pos_intp = d3.interpolateZoom(sP, eP);
    
    graphContainer.attr("transform", transform(sP, cx, cy))
      .transition()
      .duration(1)
      .attrTween("transform", function (){
        return function ( t ){
          return transform(pos_intp(t), cx, cy);
        };
      })
      .each("end", function (){
        graphContainer.attr("transform", "translate(" + graphTranslation + ")scale(" + zoomFactor + ")");
        zoom.translate(graphTranslation);
        zoom.scale(zoomFactor);
        graph.options().zoomSlider().updateZoomSliderValue(zoomFactor);
      });
  };
  
  
  graph.setZoom = function ( value ){
    zoom.scale(value);
  };
  
  graph.setTranslation = function ( translation ){
    zoom.translate([translation[0], translation[1]]);
  };
  
  graph.options = function (){
    return options;
  };
  // search functionality
  graph.getUpdateDictionary = function (){
    return parser.getDictionary();
  };
  
  graph.language = function ( newLanguage ){
    if ( !arguments.length ) return language;
    
    // Just update if the language changes
    if ( language !== newLanguage ) {
      language = newLanguage || "default";
      redrawContent();
      recalculatePositions();
      graph.options().searchMenu().requestDictionaryUpdate();
      graph.resetSearchHighlight();
    }
    return graph;
  };
  
  
  /** --------------------------------------------------------- **/
  /** graph / rendering  related functions                      **/
  /** --------------------------------------------------------- **/
  
  // Initializes the graph.
  function initializeGraph(){
    
    options.graphContainerSelector(graphContainerSelector);
    var moved = false;
    force = d3.layout.force()
      .on("tick", hiddenRecalculatePositions);
    
    dragBehaviour = d3.behavior.drag()
      .origin(function ( d ){
        return d;
      })
      .on("dragstart", function ( d ){
        d3.event.sourceEvent.stopPropagation(); // Prevent panning
        graph.ignoreOtherHoverEvents(true);
        if ( d.type && d.type() === "Class_dragger" ) {
          classDragger.mouseButtonPressed = true;
          clearTimeout(delayedHider);
          classDragger.selectedViaTouch(true);
          d.parentNode().locked(true);
          draggingStarted = true;
        } else if ( d.type && d.type() === "Range_dragger" ) {
          graph.ignoreOtherHoverEvents(true);
          clearTimeout(delayedHider);
          frozenDomainForPropertyDragger = shadowClone.parentNode().domain();
          frozenRangeForPropertyDragger = shadowClone.parentNode().range();
          shadowClone.setInitialPosition();
          shadowClone.hideClone(false);
          shadowClone.hideParentProperty(true);
          shadowClone.updateElement();
          deleteGroupElement.classed("hidden", true);
          addDataPropertyGroupElement.classed("hidden", true);
          frozenDomainForPropertyDragger.frozen(true);
          frozenDomainForPropertyDragger.locked(true);
          frozenRangeForPropertyDragger.frozen(true);
          frozenRangeForPropertyDragger.locked(true);
          domainDragger.updateElement();
          domainDragger.mouseButtonPressed = true;
          rangeDragger.updateElement();
          rangeDragger.mouseButtonPressed = true;
          //  shadowClone.setPosition(d.x, d.y);
          
          
        } else if ( d.type && d.type() === "Domain_dragger" ) {
          graph.ignoreOtherHoverEvents(true);
          clearTimeout(delayedHider);
          frozenDomainForPropertyDragger = shadowClone.parentNode().domain();
          frozenRangeForPropertyDragger = shadowClone.parentNode().range();
          shadowClone.setInitialPosition();
          shadowClone.hideClone(false);
          shadowClone.hideParentProperty(true);
          shadowClone.updateElement();
          deleteGroupElement.classed("hidden", true);
          addDataPropertyGroupElement.classed("hidden", true);
          
          frozenDomainForPropertyDragger.frozen(true);
          frozenDomainForPropertyDragger.locked(true);
          frozenRangeForPropertyDragger.frozen(true);
          frozenRangeForPropertyDragger.locked(true);
          domainDragger.updateElement();
          domainDragger.mouseButtonPressed = true;
          rangeDragger.updateElement();
          rangeDragger.mouseButtonPressed = true;
        }
        else {
          d.locked(true);
          moved = false;
        }
      })
      .on("drag", function ( d ){
        
        if ( d.type && d.type() === "Class_dragger" ) {
          clearTimeout(delayedHider);
          classDragger.setPosition(d3.event.x, d3.event.y);
        } else if ( d.type && d.type() === "Range_dragger" ) {
          clearTimeout(delayedHider);
          rangeDragger.setPosition(d3.event.x, d3.event.y);
          shadowClone.setPosition(d3.event.x, d3.event.y);
          domainDragger.updateElementViaRangeDragger(d3.event.x, d3.event.y);
        }
        else if ( d.type && d.type() === "Domain_dragger" ) {
          clearTimeout(delayedHider);
          domainDragger.setPosition(d3.event.x, d3.event.y);
          shadowClone.setPositionDomain(d3.event.x, d3.event.y);
          rangeDragger.updateElementViaDomainDragger(d3.event.x, d3.event.y);
        }
        
        else {
          d.px = d3.event.x;
          d.py = d3.event.y;
          force.resume();
          updateHaloRadius();
          moved = true;
          if ( d.renderType && d.renderType() === "round" ) {
            classDragger.setParentNode(d);
          }
          
        }
      })
      .on("dragend", function ( d ){
        graph.ignoreOtherHoverEvents(false);
        if ( d.type && d.type() === "Class_dragger" ) {
          var nX = classDragger.x;
          var nY = classDragger.y;
          clearTimeout(delayedHider);
          classDragger.mouseButtonPressed = false;
          classDragger.selectedViaTouch(false);
          d.setParentNode(d.parentNode());
          
          var draggerEndPos = [nX, nY];
          var targetNode = graph.getTargetNode(draggerEndPos);
          if ( targetNode ) {
            createNewObjectProperty(d.parentNode(), targetNode, draggerEndPos);
          }
          if ( touchDevice === false ) {
            editElementHoverOut();
          }
          draggingStarted = false;
        } else if ( d.type && d.type() === "Range_dragger" ) {
          graph.ignoreOtherHoverEvents(false);
          frozenDomainForPropertyDragger.frozen(false);
          frozenDomainForPropertyDragger.locked(false);
          frozenRangeForPropertyDragger.frozen(false);
          frozenRangeForPropertyDragger.locked(false);
          rangeDragger.mouseButtonPressed = false;
          domainDragger.mouseButtonPressed = false;
          domainDragger.updateElement();
          rangeDragger.updateElement();
          shadowClone.hideClone(true);
          var rX = rangeDragger.x;
          var rY = rangeDragger.y;
          var rangeDraggerEndPos = [rX, rY];
          var targetRangeNode = graph.getTargetNode(rangeDraggerEndPos);
          if ( elementTools.isDatatype(targetRangeNode) === true ) {
            targetRangeNode = null;
            console.log("---------------TARGET NODE IS A DATATYPE/ LITERAL ------------");
          }
          
          if ( targetRangeNode === null ) {
            d.reDrawEverthing();
            shadowClone.hideParentProperty(false);
          }
          else {
            d.updateRange(targetRangeNode);
            graph.update();
            shadowClone.hideParentProperty(false);
          }
        } else if ( d.type && d.type() === "Domain_dragger" ) {
          graph.ignoreOtherHoverEvents(false);
          frozenDomainForPropertyDragger.frozen(false);
          frozenDomainForPropertyDragger.locked(false);
          frozenRangeForPropertyDragger.frozen(false);
          frozenRangeForPropertyDragger.locked(false);
          rangeDragger.mouseButtonPressed = false;
          domainDragger.mouseButtonPressed = false;
          domainDragger.updateElement();
          rangeDragger.updateElement();
          shadowClone.hideClone(true);
          
          var dX = domainDragger.x;
          var dY = domainDragger.y;
          var domainDraggerEndPos = [dX, dY];
          var targetDomainNode = graph.getTargetNode(domainDraggerEndPos);
          if ( elementTools.isDatatype(targetDomainNode) === true ) {
            targetDomainNode = null;
            console.log("---------------TARGET NODE IS A DATATYPE/ LITERAL ------------");
          }
          shadowClone.hideClone(true);
          if ( targetDomainNode === null ) {
            d.reDrawEverthing();
            shadowClone.hideParentProperty(false);
          }
          else {
            d.updateDomain(targetDomainNode);
            graph.update();
            shadowClone.hideParentProperty(false);
          }
        }
        
        else {
          d.locked(false);
          var pnp = graph.options().pickAndPinModule();
          if ( pnp.enabled() === true && moved === true ) {
            if ( d.id ) { // node
              pnp.handle(d, true);
            }
            if ( d.property ) {
              pnp.handle(d.property(), true);
            }
          }
        }
      });
    
    // Apply the zooming factor.
    zoom = d3.behavior.zoom()
      .duration(150)
      .scaleExtent([options.minMagnification(), options.maxMagnification()])
      .on("zoom", zoomed);
    
    draggerObjectsArray.push(classDragger);
    draggerObjectsArray.push(rangeDragger);
    draggerObjectsArray.push(domainDragger);
    draggerObjectsArray.push(shadowClone);
    force.stop();
  }
  
  graph.lazyRefresh = function (){
    redrawContent();
    recalculatePositions();
  };
  
  graph.adjustingGraphSize = function ( val ){
    adjustingGraphSize = val;
  };
  
  graph.showReloadButtonAfterLayoutOptimization = function ( show ){
    showReloadButtonAfterLayoutOptimization = show;
  };
  
  
  function hiddenRecalculatePositions(){
    finishedLoadingSequence = false;
    if ( graph.options().loadingModule().successfullyLoadedOntology() === false ) {
      force.stop();
      d3.select("#progressBarValue").node().innerHTML = "";
      graph.updateProgressBarMode();
      graph.options().loadingModule().showErrorDetailsMessage(hiddenRecalculatePositions);
      if ( keepDetailsCollapsedOnLoading && adjustingGraphSize === false ) {
        graph.options().loadingModule().collapseDetails("hiddenRecalculatePositions");
      }
      return;
    }
    if ( updateRenderingDuringSimulation === false ) {
      var value = 1.0 - 10 * force.alpha();
      var percent = parseInt(200 * value) + "%";
      graph.options().loadingModule().setPercentValue(percent);
      d3.select("#progressBarValue").style("width", percent);
      d3.select("#progressBarValue").node().innerHTML = percent;
      
      if ( value > 0.49 ) {
        updateRenderingDuringSimulation = true;
        // show graph container;
        if ( graphContainer ) {
          graphContainer.style("opacity", "1");
          percent = "100%";
          d3.select("#progressBarValue").style("width", percent);
          d3.select("#progressBarValue").node().innerHTML = percent;
          graph.options().ontologyMenu().append_message_toLastBulletPoint("done");
          d3.select("#reloadCachedOntology").classed("hidden", !showReloadButtonAfterLayoutOptimization);
          if ( showFilterWarning === true && seenFilterWarning === false ) {
            graph.options().warningModule().showFilterHint();
            seenFilterWarning = true;
          }
        }
        
        if ( initialLoad ) {
          if ( graph.paused() === false )
            force.resume(); // resume force
          initialLoad = false;
          
        }
        
        
        finishedLoadingSequence = true;
        if ( showFPS === true ) {
          force.on("tick", recalculatePositionsWithFPS);
          recalculatePositionsWithFPS();
        }
        else {
          force.on("tick", recalculatePositions);
          recalculatePositions();
        }
        
        if ( centerGraphViewOnLoad === true && force.nodes().length > 0 ) {
          if ( force.nodes().length < 10 ) graph.forceRelocationEvent(true); // uses dynamic zoomer;
          else graph.forceRelocationEvent();
          centerGraphViewOnLoad = false;
          // console.log("--------------------------------------")
        }
        
        
        graph.showEditorHintIfNeeded();
        
        if ( graph.options().loadingModule().missingImportsWarning() === false ) {
          graph.options().loadingModule().hideLoadingIndicator();
          graph.options().ontologyMenu().append_bulletPoint("Successfully loaded ontology");
          graph.options().loadingModule().setSuccessful();
        } else {
          graph.options().loadingModule().showWarningDetailsMessage();
          graph.options().ontologyMenu().append_bulletPoint("Loaded ontology with warnings");
        }
      }
    }
  }
  
  graph.showEditorHintIfNeeded = function (){
    if ( seenEditorHint === false && editMode === true ) {
      seenEditorHint = true;
      graph.options().warningModule().showEditorHint();
    }
  };
  
  graph.setForceTickFunctionWithFPS = function (){
    showFPS = true;
    if ( force && finishedLoadingSequence === true ) {
      force.on("tick", recalculatePositionsWithFPS);
    }
    
  };
  graph.setDefaultForceTickFunction = function (){
    showFPS = false;
    if ( force && finishedLoadingSequence === true ) {
      force.on("tick", recalculatePositions);
    }
  };
  function recalculatePositionsWithFPS(){
    // compute the fps
    
    recalculatePositions();
    now = Date.now();
    var diff = now - then;
    var fps = (1000 / (diff)).toFixed(2);
    
    debugContainer.node().innerHTML = "FPS: " + fps + "<br>" + "Nodes: " + force.nodes().length + "<br>" + "Links: " + force.links().length;
    then = Date.now();
    
  }
  
  function recalculatePositions(){
    // Set node positions
    
    
    // add switch for edit mode to make this faster;
    if ( !editMode ) {
      nodeElements.attr("transform", function ( node ){
        return "translate(" + node.x + "," + node.y + ")";
      });
      
      // Set label group positions
      labelGroupElements.attr("transform", function ( label ){
        var position;
        
        // force centered positions on single-layered links
        var link = label.link();
        if ( link.layers().length === 1 && !link.loops() ) {
          var linkDomainIntersection = math.calculateIntersection(link.range(), link.domain(), 0);
          var linkRangeIntersection = math.calculateIntersection(link.domain(), link.range(), 0);
          position = math.calculateCenter(linkDomainIntersection, linkRangeIntersection);
          label.x = position.x;
          label.y = position.y;
        }
        return "translate(" + label.x + "," + label.y + ")";
      });
      // Set link paths and calculate additional information
      linkPathElements.attr("d", function ( l ){
        if ( l.isLoop() ) {
          return math.calculateLoopPath(l);
        }
        var curvePoint = l.label();
        var pathStart = math.calculateIntersection(curvePoint, l.domain(), 1);
        var pathEnd = math.calculateIntersection(curvePoint, l.range(), 1);
        
        return curveFunction([pathStart, curvePoint, pathEnd]);
      });
      
      // Set cardinality positions
      cardinalityElements.attr("transform", function ( property ){
        
        var label = property.link().label(),
          pos = math.calculateIntersection(label, property.range(), CARDINALITY_HDISTANCE),
          normalV = math.calculateNormalVector(label, property.range(), CARDINALITY_VDISTANCE);
        
        return "translate(" + (pos.x + normalV.x) + "," + (pos.y + normalV.y) + ")";
      });
      
      
      updateHaloRadius();
      return;
    }
    
    // TODO: this is Editor redraw function // we need to make this faster!!
    
    
    nodeElements.attr("transform", function ( node ){
      return "translate(" + node.x + "," + node.y + ")";
    });
    
    // Set label group positions
    labelGroupElements.attr("transform", function ( label ){
      var position;
      
      // force centered positions on single-layered links
      var link = label.link();
      if ( link.layers().length === 1 && !link.loops() ) {
        var linkDomainIntersection = math.calculateIntersection(link.range(), link.domain(), 0);
        var linkRangeIntersection = math.calculateIntersection(link.domain(), link.range(), 0);
        position = math.calculateCenter(linkDomainIntersection, linkRangeIntersection);
        label.x = position.x;
        label.y = position.y;
        label.linkRangeIntersection = linkRangeIntersection;
        label.linkDomainIntersection = linkDomainIntersection;
        if ( link.property().focused() === true || hoveredPropertyElement !== undefined ) {
          rangeDragger.updateElement();
          domainDragger.updateElement();
          // shadowClone.setPosition(link.property().range().x,link.property().range().y);
          // shadowClone.setPositionDomain(link.property().domain().x,link.property().domain().y);
        }
      } else {
        label.linkDomainIntersection = math.calculateIntersection(link.label(), link.domain(), 0);
        label.linkRangeIntersection = math.calculateIntersection(link.label(), link.range(), 0);
        if ( link.property().focused() === true || hoveredPropertyElement !== undefined ) {
          rangeDragger.updateElement();
          domainDragger.updateElement();
          // shadowClone.setPosition(link.property().range().x,link.property().range().y);
          // shadowClone.setPositionDomain(link.property().domain().x,link.property().domain().y);
        }
        
      }
      return "translate(" + label.x + "," + label.y + ")";
    });
    // Set link paths and calculate additional information
    linkPathElements.attr("d", function ( l ){
      if ( l.isLoop() ) {
        
        var ptrAr = math.getLoopPoints(l);
        l.label().linkRangeIntersection = ptrAr[1];
        l.label().linkDomainIntersection = ptrAr[0];
        
        if ( l.property().focused() === true || hoveredPropertyElement !== undefined ) {
          rangeDragger.updateElement();
          domainDragger.updateElement();
        }
        return math.calculateLoopPath(l);
      }
      var curvePoint = l.label();
      var pathStart = math.calculateIntersection(curvePoint, l.domain(), 1);
      var pathEnd = math.calculateIntersection(curvePoint, l.range(), 1);
      l.linkRangeIntersection = pathStart;
      l.linkDomainIntersection = pathEnd;
      if ( l.property().focused() === true || hoveredPropertyElement !== undefined ) {
        domainDragger.updateElement();
        rangeDragger.updateElement();
        // shadowClone.setPosition(l.property().range().x,l.property().range().y);
        // shadowClone.setPositionDomain(l.property().domain().x,l.property().domain().y);
      }
      return curveFunction([pathStart, curvePoint, pathEnd]);
    });
    
    // Set cardinality positions
    cardinalityElements.attr("transform", function ( property ){
      
      var label = property.link().label(),
        pos = math.calculateIntersection(label, property.range(), CARDINALITY_HDISTANCE),
        normalV = math.calculateNormalVector(label, property.range(), CARDINALITY_VDISTANCE);
      
      return "translate(" + (pos.x + normalV.x) + "," + (pos.y + normalV.y) + ")";
    });
    
    if ( hoveredNodeElement ) {
      setDeleteHoverElementPosition(hoveredNodeElement);
      setAddDataPropertyHoverElementPosition(hoveredNodeElement);
      if ( draggingStarted === false ) {
        classDragger.setParentNode(hoveredNodeElement);
      }
    }
    if ( hoveredPropertyElement ) {
      setDeleteHoverElementPositionProperty(hoveredPropertyElement);
    }
    
    updateHaloRadius();
  }
  
  graph.updatePropertyDraggerElements = function ( property ){
    if ( property.type() !== "owl:DatatypeProperty" ) {
      
      shadowClone.setParentProperty(property);
      rangeDragger.setParentProperty(property);
      rangeDragger.hideDragger(false);
      rangeDragger.addMouseEvents();
      domainDragger.setParentProperty(property);
      domainDragger.hideDragger(false);
      domainDragger.addMouseEvents();
      
    }
    else {
      rangeDragger.hideDragger(true);
      domainDragger.hideDragger(true);
      shadowClone.hideClone(true);
    }
  };
  
  function addClickEvents(){
    function executeModules( selectedElement ){
      options.selectionModules().forEach(function ( module ){
        module.handle(selectedElement);
      });
    }
    
    nodeElements.on("click", function ( clickedNode ){
      
      // manaual double clicker // helper for iphone 6 etc...
      if ( touchDevice === true && doubletap() === true ) {
        d3.event.stopPropagation();
        if ( editMode === true ) {
          clickedNode.raiseDoubleClickEdit(defaultIriValue(clickedNode));
        }
      }
      else {
        executeModules(clickedNode);
      }
    });
    
    nodeElements.on("dblclick", function ( clickedNode ){
      
      d3.event.stopPropagation();
      if ( editMode === true ) {
        clickedNode.raiseDoubleClickEdit(defaultIriValue(clickedNode));
      }
    });
    
    labelGroupElements.selectAll(".label").on("click", function ( clickedProperty ){
      executeModules(clickedProperty);
      
      // this is for enviroments that do not define dblClick function;
      if ( touchDevice === true && doubletap() === true ) {
        d3.event.stopPropagation();
        if ( editMode === true ) {
          clickedProperty.raiseDoubleClickEdit(defaultIriValue(clickedProperty));
        }
      }
      
      // currently removed the selection of an element to invoke the dragger
      // if (editMode===true && clickedProperty.editingTextElement!==true) {
      //     return;
      //      // We say that Datatype properties are not allowed to have domain range draggers
      //      if (clickedProperty.focused() && clickedProperty.type() !== "owl:DatatypeProperty") {
      //          shadowClone.setParentProperty(clickedProperty);
      //          rangeDragger.setParentProperty(clickedProperty);
      //          rangeDragger.hideDragger(false);
      //          rangeDragger.addMouseEvents();
      //          domainDragger.setParentProperty(clickedProperty);
      //          domainDragger.hideDragger(false);
      //          domainDragger.addMouseEvents();
      //
      //          if (clickedProperty.domain()===clickedProperty.range()){
      //              clickedProperty.labelObject().increasedLoopAngle=true;
      //              recalculatePositions();
      //
      //          }
      //
      //      } else if (clickedProperty.focused() && clickedProperty.type() === "owl:DatatypeProperty") {
      //          shadowClone.setParentProperty(clickedProperty);
      //          rangeDragger.setParentProperty(clickedProperty);
      //          rangeDragger.hideDragger(true);
      //          rangeDragger.addMouseEvents();
      //          domainDragger.setParentProperty(clickedProperty);
      //          domainDragger.hideDragger(false);
      //          domainDragger.addMouseEvents();
      //
      //      }
      //      else {
      //          rangeDragger.hideDragger(true);
      //          domainDragger.hideDragger(true);
      //          if (clickedProperty.domain()===clickedProperty.range()){
      //              clickedProperty.labelObject().increasedLoopAngle=false;
      //              recalculatePositions();
      //
      //          }
      //      }
      //  }
    });
    labelGroupElements.selectAll(".label").on("dblclick", function ( clickedProperty ){
      d3.event.stopPropagation();
      if ( editMode === true ) {
        clickedProperty.raiseDoubleClickEdit(defaultIriValue(clickedProperty));
      }
      
    });
  }
  
  function defaultIriValue( element ){
    // get the iri of that element;
    if ( graph.options().getGeneralMetaObject().iri ) {
      var str2Compare = graph.options().getGeneralMetaObject().iri + element.id();
      return element.iri() === str2Compare;
    }
    return false;
  }
  
  /** Adjusts the containers current scale and position. */
  function zoomed(){
    if ( forceNotZooming === true ) {
      zoom.translate(graphTranslation);
      zoom.scale(zoomFactor);
      return;
    }
    
    
    var zoomEventByMWheel = false;
    if ( d3.event.sourceEvent ) {
      if ( d3.event.sourceEvent.deltaY ) zoomEventByMWheel = true;
    }
    if ( zoomEventByMWheel === false ) {
      if ( transformAnimation === true ) {
        return;
      }
      zoomFactor = d3.event.scale;
      graphTranslation = d3.event.translate;
      graphContainer.attr("transform", "translate(" + graphTranslation + ")scale(" + zoomFactor + ")");
      updateHaloRadius();
      graph.options().zoomSlider().updateZoomSliderValue(zoomFactor);
      return;
    }
    /** animate the transition **/
    zoomFactor = d3.event.scale;
    graphTranslation = d3.event.translate;
    graphContainer.transition()
      .tween("attr.translate", function (){
        return function ( t ){
          transformAnimation = true;
          var tr = d3.transform(graphContainer.attr("transform"));
          graphTranslation[0] = tr.translate[0];
          graphTranslation[1] = tr.translate[1];
          zoomFactor = tr.scale[0];
          updateHaloRadius();
          graph.options().zoomSlider().updateZoomSliderValue(zoomFactor);
        };
      })
      .each("end", function (){
        transformAnimation = false;
      })
      .attr("transform", "translate(" + graphTranslation + ")scale(" + zoomFactor + ")")
      .ease('linear')
      .duration(250);
  }// end of zoomed function
  
  function redrawGraph(){
    remove();
    
    graphContainer = d3.selectAll(options.graphContainerSelector())
      .append("svg")
      .classed("vowlGraph", true)
      .attr("width", options.width())
      .attr("height", options.height())
      .call(zoom)
      .append("g");
    // add touch and double click functions
    
    var svgGraph = d3.selectAll(".vowlGraph");
    originalD3_dblClickFunction = svgGraph.on("dblclick.zoom");
    originalD3_touchZoomFunction = svgGraph.on("touchstart");
    svgGraph.on("touchstart", touchzoomed);
    if ( editMode === true ) {
      svgGraph.on("dblclick.zoom", graph.modified_dblClickFunction);
    }
    else {
      svgGraph.on("dblclick.zoom", originalD3_dblClickFunction);
    }
    
  }
  
  function generateEditElements(){
    addDataPropertyGroupElement = editContainer.append('g')
      .classed("hidden-in-export", true)
      .classed("hidden", true)
      .classed("addDataPropertyElement", true)
      .attr("transform", "translate(" + 0 + "," + 0 + ")");
    
    
    addDataPropertyGroupElement.append("circle")
    // .classed("deleteElement", true)
      .attr("r", 12)
      .attr("cx", 0)
      .attr("cy", 0)
      .append("title").text("Add Datatype Property");
    
    addDataPropertyGroupElement.append("line")
    // .classed("deleteElementIcon ",true)
      .attr("x1", -8)
      .attr("y1", 0)
      .attr("x2", 8)
      .attr("y2", 0)
      .append("title").text("Add Datatype Property");
    
    addDataPropertyGroupElement.append("line")
    // .classed("deleteElementIcon",true)
      .attr("x1", 0)
      .attr("y1", -8)
      .attr("x2", 0)
      .attr("y2", 8)
      .append("title").text("Add Datatype Property");
    
    if ( graph.options().useAccuracyHelper() ) {
      addDataPropertyGroupElement.append("circle")
        .attr("r", 15)
        .attr("cx", -7)
        .attr("cy", 7)
        .classed("superHiddenElement", true)
        .classed("superOpacityElement", !graph.options().showDraggerObject());
    }
    
    
    deleteGroupElement = editContainer.append('g')
      .classed("hidden-in-export", true)
      .classed("hidden", true)
      .classed("deleteParentElement", true)
      .attr("transform", "translate(" + 0 + "," + 0 + ")");
    
    deleteGroupElement.append("circle")
      .attr("r", 12)
      .attr("cx", 0)
      .attr("cy", 0)
      .append("title").text("Delete This Node");
    
    var crossLen = 5;
    deleteGroupElement.append("line")
      .attr("x1", -crossLen)
      .attr("y1", -crossLen)
      .attr("x2", crossLen)
      .attr("y2", crossLen)
      .append("title").text("Delete This Node");
    
    deleteGroupElement.append("line")
      .attr("x1", crossLen)
      .attr("y1", -crossLen)
      .attr("x2", -crossLen)
      .attr("y2", crossLen)
      .append("title").text("Delete This Node");
    
    if ( graph.options().useAccuracyHelper() ) {
      deleteGroupElement.append("circle")
        .attr("r", 15)
        .attr("cx", 7)
        .attr("cy", -7)
        .classed("superHiddenElement", true)
        .classed("superOpacityElement", !graph.options().showDraggerObject());
    }
    
    
  }
  
  graph.getUnfilteredData = function (){
    return unfilteredData;
  };
  
  graph.getClassDataForTtlExport = function (){
    var allNodes = unfilteredData.nodes;
    var nodeData = [];
    for ( var i = 0; i < allNodes.length; i++ ) {
      if ( allNodes[i].type() !== "rdfs:Literal" &&
        allNodes[i].type() !== "rdfs:Datatype" &&
        allNodes[i].type() !== "owl:Thing" ) {
        nodeData.push(allNodes[i]);
      }
    }
    return nodeData;
  };
  
  graph.getPropertyDataForTtlExport = function (){
    var propertyData = [];
    var allProperties = unfilteredData.properties;
    for ( var i = 0; i < allProperties.length; i++ ) {
      // currently using only the object properties
      if ( allProperties[i].type() === "owl:ObjectProperty" ||
        allProperties[i].type() === "owl:DatatypeProperty" ||
        allProperties[i].type() === "owl:ObjectProperty"
      
      ) {
        propertyData.push(allProperties[i]);
      } else {
        if ( allProperties[i].type() === "rdfs:subClassOf" ) {
          allProperties[i].baseIri("http://www.w3.org/2000/01/rdf-schema#");
          allProperties[i].iri("http://www.w3.org/2000/01/rdf-schema#subClassOf");
        }
        if ( allProperties[i].type() === "owl:disjointWith" ) {
          allProperties[i].baseIri("http://www.w3.org/2002/07/owl#");
          allProperties[i].iri("http://www.w3.org/2002/07/owl#disjointWith");
        }
      }
    }
    return propertyData;
  };
  
  graph.getAxiomsForTtlExport = function (){
    var axioms = [];
    var allProperties = unfilteredData.properties;
    for ( var i = 0; i < allProperties.length; i++ ) {
      // currently using only the object properties
      if ( allProperties[i].type() === "owl:ObjectProperty" ||
        allProperties[i].type() === "owl:DatatypeProperty" ||
        allProperties[i].type() === "owl:ObjectProperty" ||
        allProperties[i].type() === "rdfs:subClassOf"
      ) {
      } else {
      }
    }
    return axioms;
  };
  
  
  graph.getUnfilteredData = function (){
    return unfilteredData;
  };
  
  graph.getClassDataForTtlExport = function (){
    var allNodes = unfilteredData.nodes;
    var nodeData = [];
    for ( var i = 0; i < allNodes.length; i++ ) {
      if ( allNodes[i].type() !== "rdfs:Literal" &&
        allNodes[i].type() !== "rdfs:Datatype" &&
        allNodes[i].type() !== "owl:Thing" ) {
        nodeData.push(allNodes[i]);
      }
    }
    return nodeData;
  };
  
  
  function redrawContent(){
    var markerContainer;
    
    if ( !graphContainer ) {
      return;
    }
    
    // Empty the graph container
    graphContainer.selectAll("*").remove();
    
    // Last container -> elements of this container overlap others
    linkContainer = graphContainer.append("g").classed("linkContainer", true);
    cardinalityContainer = graphContainer.append("g").classed("cardinalityContainer", true);
    labelContainer = graphContainer.append("g").classed("labelContainer", true);
    nodeContainer = graphContainer.append("g").classed("nodeContainer", true);
    
    // adding editing Elements
    var draggerPathLayer = graphContainer.append("g").classed("linkContainer", true);
    draggerLayer = graphContainer.append("g").classed("editContainer", true);
    editContainer = graphContainer.append("g").classed("editContainer", true);
    
    draggerPathLayer.classed("hidden-in-export", true);
    editContainer.classed("hidden-in-export", true);
    draggerLayer.classed("hidden-in-export", true);
    
    // Add an extra container for all markers
    markerContainer = linkContainer.append("defs");
    var drElement = draggerLayer.selectAll(".node")
      .data(draggerObjectsArray).enter()
      .append("g")
      .classed("node", true)
      .classed("hidden-in-export", true)
      .attr("id", function ( d ){
        return d.id();
      })
      .call(dragBehaviour);
    drElement.each(function ( node ){
      node.svgRoot(d3.select(this));
      node.svgPathLayer(draggerPathLayer);
      if ( node.type() === "shadowClone" ) {
        node.drawClone();
        node.hideClone(true);
      } else {
        node.drawNode();
        node.hideDragger(true);
      }
    });
    generateEditElements();
    
    
    // Add an extra container for all markers
    markerContainer = linkContainer.append("defs");
    
    // Draw nodes
    
    if ( classNodes === undefined ) classNodes = [];
    
    nodeElements = nodeContainer.selectAll(".node")
      .data(classNodes).enter()
      .append("g")
      .classed("node", true)
      .attr("id", function ( d ){
        return d.id();
      })
      .call(dragBehaviour);
    nodeElements.each(function ( node ){
      node.draw(d3.select(this));
    });
    
    
    if ( labelNodes === undefined ) labelNodes = [];
    
    // Draw label groups (property + inverse)
    labelGroupElements = labelContainer.selectAll(".labelGroup")
      .data(labelNodes).enter()
      .append("g")
      .classed("labelGroup", true)
      .call(dragBehaviour);
    
    labelGroupElements.each(function ( label ){
      var success = label.draw(d3.select(this));
      label.property().labelObject(label);
      // Remove empty groups without a label.
      if ( !success ) {
        d3.select(this).remove();
      }
    });
    // Place subclass label groups on the bottom of all labels
    labelGroupElements.each(function ( label ){
      // the label might be hidden e.g. in compact notation
      if ( !this.parentNode ) {
        return;
      }
      
      if ( elementTools.isRdfsSubClassOf(label.property()) ) {
        var parentNode = this.parentNode;
        parentNode.insertBefore(this, parentNode.firstChild);
      }
    });
    if ( properties === undefined ) properties = [];
    // Draw cardinality elements
    cardinalityElements = cardinalityContainer.selectAll(".cardinality")
      .data(properties).enter()
      .append("g")
      .classed("cardinality", true);
    
    cardinalityElements.each(function ( property ){
      var success = property.drawCardinality(d3.select(this));
      
      // Remove empty groups without a label.
      if ( !success ) {
        d3.select(this).remove();
      }
    });
    // Draw links
    if ( links === undefined ) links = [];
    linkGroups = linkContainer.selectAll(".link")
      .data(links).enter()
      .append("g")
      .classed("link", true);
    
    linkGroups.each(function ( link ){
      link.draw(d3.select(this), markerContainer);
    });
    linkPathElements = linkGroups.selectAll("path");
    // Select the path for direct access to receive a better performance
    addClickEvents();
  }
  
  function remove(){
    if ( graphContainer ) {
      // Select the parent element because the graph container is a group (e.g. for zooming)
      d3.select(graphContainer.node().parentNode).remove();
    }
  }
  
  initializeGraph(); // << call the initialization function
  
  graph.updateCanvasContainerSize = function (){
    if ( graphContainer ) {
      var svgElement = d3.selectAll(".vowlGraph");
      svgElement.attr("width", options.width());
      svgElement.attr("height", options.height());
      graphContainer.attr("transform", "translate(" + graphTranslation + ")scale(" + zoomFactor + ")");
    }
  };
  
  // Loads all settings, removes the old graph (if it exists) and draws a new one.
  graph.start = function (){
    force.stop();
    loadGraphData(true);
    redrawGraph();
    graph.update(true);
    
    if ( graph.options().loadingModule().successfullyLoadedOntology() === false ) {
      graph.options().loadingModule().setErrorMode();
    }
    
  };
  
  // Updates only the style of the graph.
  graph.updateStyle = function (){
    refreshGraphStyle();
    if ( graph.options().loadingModule().successfullyLoadedOntology() === false ) {
      force.stop();
    } else {
      force.start();
    }
  };
  
  graph.reload = function (){
    loadGraphData();
    graph.update();
    
  };
  
  graph.load = function (){
    force.stop();
    loadGraphData();
    refreshGraphData();
    for ( var i = 0; i < labelNodes.length; i++ ) {
      var label = labelNodes[i];
      if ( label.property().x && label.property().y ) {
        label.x = label.property().x;
        label.y = label.property().y;
        // also set the prev position of the label
        label.px = label.x;
        label.py = label.y;
      }
    }
    graph.update();
  };
  
  graph.fastUpdate = function (){
    // fast update function for editor calls;
    // -- experimental ;
    quick_refreshGraphData();
    updateNodeMap();
    force.start();
    redrawContent();
    graph.updatePulseIds(nodeArrayForPulse);
    refreshGraphStyle();
    updateHaloStyles();
    
  };
  
  graph.getNodeMapForSearch = function (){
    return nodeMap;
  };
  function updateNodeMap(){
    nodeMap = [];
    var node;
    for ( var j = 0; j < force.nodes().length; j++ ) {
      node = force.nodes()[j];
      if ( node.id ) {
        nodeMap[node.id()] = j;
        // check for equivalents
        var eqs = node.equivalents();
        if ( eqs.length > 0 ) {
          for ( var e = 0; e < eqs.length; e++ ) {
            var eqObject = eqs[e];
            nodeMap[eqObject.id()] = j;
          }
        }
      }
      if ( node.property ) {
        nodeMap[node.property().id()] = j;
        var inverse = node.inverse();
        if ( inverse ) {
          nodeMap[inverse.id()] = j;
        }
      }
    }
  }
  
  function updateHaloStyles(){
    var haloElement;
    var halo;
    var node;
    for ( var j = 0; j < force.nodes().length; j++ ) {
      node = force.nodes()[j];
      if ( node.id ) {
        haloElement = node.getHalos();
        if ( haloElement ) {
          halo = haloElement.selectAll(".searchResultA");
          halo.classed("searchResultA", false);
          halo.classed("searchResultB", true);
        }
      }
      
      if ( node.property ) {
        haloElement = node.property().getHalos();
        if ( haloElement ) {
          halo = haloElement.selectAll(".searchResultA");
          halo.classed("searchResultA", false);
          halo.classed("searchResultB", true);
        }
      }
    }
  }
  
  // Updates the graphs displayed data and style.
  graph.update = function ( init ){
    var validOntology = graph.options().loadingModule().successfullyLoadedOntology();
    if ( validOntology === false && (init && init === true) ) {
      graph.options().loadingModule().collapseDetails();
      return;
    }
    if ( validOntology === false ) {
      return;
    }
    
    keepDetailsCollapsedOnLoading = false;
    refreshGraphData();
    // update node map
    updateNodeMap();
    
    force.start();
    redrawContent();
    graph.updatePulseIds(nodeArrayForPulse);
    refreshGraphStyle();
    updateHaloStyles();
  };
  
  graph.paused = function ( p ){
    if ( !arguments.length ) return paused;
    paused = p;
    graph.updateStyle();
    return graph;
  };
  // resetting the graph
  graph.reset = function (){
    // window size
    var w = 0.5 * graph.options().width();
    var h = 0.5 * graph.options().height();
    // computing initial translation for the graph due tue the dynamic default zoom level
    var tx = w - defaultZoom * w;
    var ty = h - defaultZoom * h;
    zoom.translate([tx, ty])
      .scale(defaultZoom);
  };
  
  
  graph.zoomOut = function (){
    
    var minMag = options.minMagnification(),
      maxMag = options.maxMagnification();
    var stepSize = (maxMag - minMag) / 10;
    var val = zoomFactor - stepSize;
    if ( val < minMag ) val = minMag;
    
    var cx = 0.5 * graph.options().width();
    var cy = 0.5 * graph.options().height();
    var cp = getWorldPosFromScreen(cx, cy, graphTranslation, zoomFactor);
    var sP = [cp.x, cp.y, graph.options().height() / zoomFactor];
    var eP = [cp.x, cp.y, graph.options().height() / val];
    var pos_intp = d3.interpolateZoom(sP, eP);
    
    graphContainer.attr("transform", transform(sP, cx, cy))
      .transition()
      .duration(250)
      .attrTween("transform", function (){
        return function ( t ){
          return transform(pos_intp(t), cx, cy);
        };
      })
      .each("end", function (){
        graphContainer.attr("transform", "translate(" + graphTranslation + ")scale(" + zoomFactor + ")");
        zoom.translate(graphTranslation);
        zoom.scale(zoomFactor);
        updateHaloRadius();
        options.zoomSlider().updateZoomSliderValue(zoomFactor);
      });
    
  };
  
  graph.zoomIn = function (){
    var minMag = options.minMagnification(),
      maxMag = options.maxMagnification();
    var stepSize = (maxMag - minMag) / 10;
    var val = zoomFactor + stepSize;
    if ( val > maxMag ) val = maxMag;
    var cx = 0.5 * graph.options().width();
    var cy = 0.5 * graph.options().height();
    var cp = getWorldPosFromScreen(cx, cy, graphTranslation, zoomFactor);
    var sP = [cp.x, cp.y, graph.options().height() / zoomFactor];
    var eP = [cp.x, cp.y, graph.options().height() / val];
    var pos_intp = d3.interpolateZoom(sP, eP);
    
    graphContainer.attr("transform", transform(sP, cx, cy))
      .transition()
      .duration(250)
      .attrTween("transform", function (){
        return function ( t ){
          return transform(pos_intp(t), cx, cy);
        };
      })
      .each("end", function (){
        graphContainer.attr("transform", "translate(" + graphTranslation + ")scale(" + zoomFactor + ")");
        zoom.translate(graphTranslation);
        zoom.scale(zoomFactor);
        updateHaloRadius();
        options.zoomSlider().updateZoomSliderValue(zoomFactor);
      });
    
    
  };
  
  /** --------------------------------------------------------- **/
  /** -- data related handling                               -- **/
  /** --------------------------------------------------------- **/
  
  var cachedJsonOBJ = null;
  graph.clearAllGraphData = function (){
    if ( graph.graphNodeElements() && graph.graphNodeElements().length > 0 ) {
      cachedJsonOBJ = graph.options().exportMenu().createJSON_exportObject();
    } else {
      cachedJsonOBJ = null;
    }
    force.stop();
    if ( unfilteredData ) {
      unfilteredData.nodes = [];
      unfilteredData.properties = [];
    }
  };
  graph.getCachedJsonObj = function (){
    return cachedJsonOBJ;
  };
  
  // removes data when data could not be loaded
  graph.clearGraphData = function (){
    force.stop();
    var sidebar = graph.options().sidebar();
    if ( sidebar )
      sidebar.clearOntologyInformation();
    if ( graphContainer )
      redrawGraph();
  };
  
  function generateDictionary( data ){
    var i;
    var originalDictionary = [];
    var nodes = data.nodes;
    for ( i = 0; i < nodes.length; i++ ) {
      // check if node has a label
      if ( nodes[i].labelForCurrentLanguage() !== undefined )
        originalDictionary.push(nodes[i]);
    }
    var props = data.properties;
    for ( i = 0; i < props.length; i++ ) {
      if ( props[i].labelForCurrentLanguage() !== undefined )
        originalDictionary.push(props[i]);
    }
    parser.setDictionary(originalDictionary);
    
    var literFilter = graph.options().literalFilter();
    var idsToRemove = literFilter.removedNodes();
    var originalDict = parser.getDictionary();
    var newDict = [];
    
    // go through the dictionary and remove the ids;
    for ( i = 0; i < originalDict.length; i++ ) {
      var dictElement = originalDict[i];
      var dictElementId;
      if ( dictElement.property )
        dictElementId = dictElement.property().id();
      else
        dictElementId = dictElement.id();
      // compare against the removed ids;
      var addToDictionary = true;
      for ( var j = 0; j < idsToRemove.length; j++ ) {
        var currentId = idsToRemove[j];
        if ( currentId === dictElementId ) {
          addToDictionary = false;
        }
      }
      if ( addToDictionary === true ) {
        newDict.push(dictElement);
      }
    }
    // tell the parser that the dictionary is updated
    parser.setDictionary(newDict);
    
  }
  
  graph.updateProgressBarMode = function (){
    var loadingModule = graph.options().loadingModule();
    
    var state = loadingModule.getProgressBarMode();
    switch ( state ) {
      case  0:
        loadingModule.setErrorMode();
        break;
      case  1:
        loadingModule.setBusyMode();
        break;
      case  2:
        loadingModule.setPercentMode();
        break;
      default:
        loadingModule.setPercentMode();
    }
  };
  
  graph.setFilterWarning = function ( val ){
    showFilterWarning = val;
  };
  function loadGraphData( init ){
    // reset the locate button and previously selected locations and other variables
    
    var loadingModule = graph.options().loadingModule();
    force.stop();
    
    force.nodes([]);
    force.links([]);
    nodeArrayForPulse = [];
    pulseNodeIds = [];
    locationId = 0;
    d3.select("#locateSearchResult").classed("highlighted", false);
    d3.select("#locateSearchResult").node().title = "Nothing to locate";
    graph.clearGraphData();
    
    if ( init ) {
      force.stop();
      return;
    }
    
    showFilterWarning = false;
    parser.parse(options.data());
    unfilteredData = {
      nodes: parser.nodes(),
      properties: parser.properties()
    };
    // fixing class and property id counter for the editor
    eN = unfilteredData.nodes.length + 1;
    eP = unfilteredData.properties.length + 1;
    
    
    // using the ids of elements if to ensure that loaded elements will not get the same id;
    for ( var p = 0; p < unfilteredData.properties.length; p++ ) {
      var currentId = unfilteredData.properties[p].id();
      if ( currentId.indexOf('objectProperty') !== -1 ) {
        // could be ours;
        var idStr = currentId.split('objectProperty');
        if ( idStr[0].length === 0 ) {
          var idInt = parseInt(idStr[1]);
          if ( eP < idInt ) {
            eP = idInt + 1;
          }
        }
      }
    }
    // using the ids of elements if to ensure that loaded elements will not get the same id;
    for ( var n = 0; n < unfilteredData.nodes.length; n++ ) {
      var currentId_Nodes = unfilteredData.nodes[n].id();
      if ( currentId_Nodes.indexOf('Class') !== -1 ) {
        // could be ours;
        var idStr_Nodes = currentId_Nodes.split('Class');
        if ( idStr_Nodes[0].length === 0 ) {
          var idInt_Nodes = parseInt(idStr_Nodes[1]);
          if ( eN < idInt_Nodes ) {
            eN = idInt_Nodes + 1;
          }
        }
      }
    }
    
    initialLoad = true;
    graph.options().warningModule().closeFilterHint();
    
    // loading handler
    updateRenderingDuringSimulation = true;
    var validOntology = graph.options().loadingModule().successfullyLoadedOntology();
    if ( graphContainer && validOntology === true ) {
      
      updateRenderingDuringSimulation = false;
      graph.options().ontologyMenu().append_bulletPoint("Generating visualization ... ");
      loadingModule.setPercentMode();
      
      if ( unfilteredData.nodes.length > 0 ) {
        graphContainer.style("opacity", "0");
        force.on("tick", hiddenRecalculatePositions);
      } else {
        graphContainer.style("opacity", "1");
        if ( showFPS === true ) {
          force.on("tick", recalculatePositionsWithFPS);
        }
        else {
          force.on("tick", recalculatePositions);
        }
      }
      
      force.start();
    } else {
      force.stop();
      graph.options().ontologyMenu().append_bulletPoint("Failed to load ontology");
      loadingModule.setErrorMode();
    }
    // update prefixList(
    // update general MetaOBJECT
    graph.options().clearMetaObject();
    graph.options().clearGeneralMetaObject();
    graph.options().editSidebar().clearMetaObjectValue();
    if ( options.data() !== undefined ) {
      var header = options.data().header;
      if ( header ) {
        if ( header.iri ) {
          graph.options().addOrUpdateGeneralObjectEntry("iri", header.iri);
        }
        if ( header.title ) {
          graph.options().addOrUpdateGeneralObjectEntry("title", header.title);
        }
        if ( header.author ) {
          graph.options().addOrUpdateGeneralObjectEntry("author", header.author);
        }
        if ( header.version ) {
          graph.options().addOrUpdateGeneralObjectEntry("version", header.version);
        }
        if ( header.description ) {
          graph.options().addOrUpdateGeneralObjectEntry("description", header.description);
        }
        if ( header.prefixList ) {
          var pL = header.prefixList;
          for ( var pr in pL ) {
            if ( pL.hasOwnProperty(pr) ) {
              var val = pL[pr];
              graph.options().addPrefix(pr, val);
            }
          }
        }
        // get other metadata;
        if ( header.other ) {
          var otherObjects = header.other;
          for ( var name in otherObjects ) {
            if ( otherObjects.hasOwnProperty(name) ) {
              var otherObj = otherObjects[name];
              if ( otherObj.hasOwnProperty("identifier") && otherObj.hasOwnProperty("value") ) {
                graph.options().addOrUpdateMetaObjectEntry(otherObj.identfier, otherObj.value);
              }
            }
          }
        }
      }
    }
    // update more meta OBJECT
    // Initialize filters with data to replicate consecutive filtering
    var initializationData = _.clone(unfilteredData);
    options.filterModules().forEach(function ( module ){
      initializationData = filterFunction(module, initializationData, true);
    });
    // generate dictionary here ;
    generateDictionary(unfilteredData);
    
    parser.parseSettings();
    graphUpdateRequired = parser.settingsImported();
    centerGraphViewOnLoad = true;
    if ( parser.settingsImportGraphZoomAndTranslation() === true ) {
      centerGraphViewOnLoad = false;
    }
    graph.options().searchMenu().requestDictionaryUpdate();
    graph.options().editSidebar().updateGeneralOntologyInfo();
    graph.options().editSidebar().updatePrefixUi();
    graph.options().editSidebar().updateElementWidth();
  }
  
  graph.handleOnLoadingError = function (){
    force.stop();
    graph.clearGraphData();
    graph.options().ontologyMenu().append_bulletPoint("Failed to load ontology");
    d3.select("#progressBarValue").node().innherHTML = "";
    d3.select("#progressBarValue").classed("busyProgressBar", false);
    graph.options().loadingModule().setErrorMode();
    graph.options().loadingModule().showErrorDetailsMessage();
  };
  
  function quick_refreshGraphData(){
    links = linkCreator.createLinks(properties);
    labelNodes = links.map(function ( link ){
      return link.label();
    });
    
    storeLinksOnNodes(classNodes, links);
    setForceLayoutData(classNodes, labelNodes, links);
  }
  
  //Applies the data of the graph options object and parses it. The graph is not redrawn.
  function refreshGraphData(){
    var shouldExecuteEmptyFilter = options.literalFilter().enabled();
    graph.executeEmptyLiteralFilter();
    options.literalFilter().enabled(shouldExecuteEmptyFilter);
    
    var preprocessedData = _.clone(unfilteredData);
    
    // Filter the data
    options.filterModules().forEach(function ( module ){
      preprocessedData = filterFunction(module, preprocessedData);
    });
    options.focuserModule().handle(undefined, true);
    classNodes = preprocessedData.nodes;
    properties = preprocessedData.properties;
    links = linkCreator.createLinks(properties);
    labelNodes = links.map(function ( link ){
      return link.label();
    });
    storeLinksOnNodes(classNodes, links);
    setForceLayoutData(classNodes, labelNodes, links);
    // for (var i = 0; i < classNodes.length; i++) {
    //     if (classNodes[i].setRectangularRepresentation)
    //         classNodes[i].setRectangularRepresentation(graph.options().rectangularRepresentation());
    // }
  }
  
  function filterFunction( module, data, initializing ){
    links = linkCreator.createLinks(data.properties);
    storeLinksOnNodes(data.nodes, links);
    
    if ( initializing ) {
      if ( module.initialize ) {
        module.initialize(data.nodes, data.properties);
      }
    }
    module.filter(data.nodes, data.properties);
    return {
      nodes: module.filteredNodes(),
      properties: module.filteredProperties()
    };
  }
  
  
  /** --------------------------------------------------------- **/
  /** -- force-layout related functions                      -- **/
  /** --------------------------------------------------------- **/
  function storeLinksOnNodes( nodes, links ){
    for ( var i = 0, nodesLength = nodes.length; i < nodesLength; i++ ) {
      var node = nodes[i],
        connectedLinks = [];
      
      // look for properties where this node is the domain or range
      for ( var j = 0, linksLength = links.length; j < linksLength; j++ ) {
        var link = links[j];
        
        if ( link.domain() === node || link.range() === node ) {
          connectedLinks.push(link);
        }
      }
      node.links(connectedLinks);
    }
  }
  
  function setForceLayoutData( classNodes, labelNodes, links ){
    var d3Links = [];
    links.forEach(function ( link ){
      d3Links = d3Links.concat(link.linkParts());
    });
    
    var d3Nodes = [].concat(classNodes).concat(labelNodes);
    setPositionOfOldLabelsOnNewLabels(force.nodes(), labelNodes);
    
    force.nodes(d3Nodes)
      .links(d3Links);
  }
  
  // The label nodes are positioned randomly, because they are created from scratch if the data changes and lose
  // their position information. With this hack the position of old labels is copied to the new labels.
  function setPositionOfOldLabelsOnNewLabels( oldLabelNodes, labelNodes ){
    labelNodes.forEach(function ( labelNode ){
      for ( var i = 0; i < oldLabelNodes.length; i++ ) {
        var oldNode = oldLabelNodes[i];
        if ( oldNode.equals(labelNode) ) {
          labelNode.x = oldNode.x;
          labelNode.y = oldNode.y;
          labelNode.px = oldNode.px;
          labelNode.py = oldNode.py;
          break;
        }
      }
    });
  }
  
  // Applies all options that don't change the graph data.
  function refreshGraphStyle(){
    zoom = zoom.scaleExtent([options.minMagnification(), options.maxMagnification()]);
    if ( graphContainer ) {
      zoom.event(graphContainer);
    }
    
    force.charge(function ( element ){
      var charge = options.charge();
      if ( elementTools.isLabel(element) ) {
        charge *= 0.8;
      }
      return charge;
    })
      .size([options.width(), options.height()])
      .linkDistance(calculateLinkPartDistance)
      .gravity(options.gravity())
      .linkStrength(options.linkStrength()); // Flexibility of links
    
    force.nodes().forEach(function ( n ){
      n.frozen(paused);
    });
  }
  
  function calculateLinkPartDistance( linkPart ){
    var link = linkPart.link();
    
    if ( link.isLoop() ) {
      return options.loopDistance();
    }
    
    // divide by 2 to receive the length for a single link part
    var linkPartDistance = getVisibleLinkDistance(link) / 2;
    linkPartDistance += linkPart.domain().actualRadius();
    linkPartDistance += linkPart.range().actualRadius();
    return linkPartDistance;
  }
  
  function getVisibleLinkDistance( link ){
    if ( elementTools.isDatatype(link.domain()) || elementTools.isDatatype(link.range()) ) {
      return options.datatypeDistance();
    } else {
      return options.classDistance();
    }
  }
  
  /** --------------------------------------------------------- **/
  /** -- animation functions for the nodes --                   **/
  /** --------------------------------------------------------- **/
  
  graph.animateDynamicLabelWidth = function (){
    var wantedWidth = options.dynamicLabelWidth();
    var i;
    for ( i = 0; i < classNodes.length; i++ ) {
      var nodeElement = classNodes[i];
      if ( elementTools.isDatatype(nodeElement) ) {
        nodeElement.animateDynamicLabelWidth(wantedWidth);
      }
    }
    for ( i = 0; i < properties.length; i++ ) {
      properties[i].animateDynamicLabelWidth(wantedWidth);
    }
  };
  
  
  /** --------------------------------------------------------- **/
  /** -- halo and localization functions --                     **/
  /** --------------------------------------------------------- **/
  function updateHaloRadius(){
    if ( pulseNodeIds && pulseNodeIds.length > 0 ) {
      var forceNodes = force.nodes();
      for ( var i = 0; i < pulseNodeIds.length; i++ ) {
        var node = forceNodes[pulseNodeIds[i]];
        if ( node ) {
          if ( node.property ) {
            // match search strings with property label
            if ( node.property().inverse ) {
              var searchString = graph.options().searchMenu().getSearchString().toLowerCase();
              var name = node.property().labelForCurrentLanguage().toLowerCase();
              if ( name === searchString ) computeDistanceToCenter(node);
              else {
                node.property().removeHalo();
                if ( node.property().inverse() ) {
                  if ( !node.property().inverse().getHalos() )
                    node.property().inverse().drawHalo();
                  computeDistanceToCenter(node, true);
                }
                if ( node.property().equivalents() ) {
                  var eq = node.property().equivalents();
                  for ( var e = 0; e < eq.length; e++ ) {
                    if ( !eq[e].getHalos() )
                      eq[e].drawHalo();
                  }
                  if ( !node.property().getHalos() )
                    node.property().drawHalo();
                  computeDistanceToCenter(node, false);
                  
                }
              }
            }
          }
          computeDistanceToCenter(node);
        }
      }
    }
  }
  
  function getScreenCoords( x, y, translate, scale ){
    var xn = translate[0] + x * scale;
    var yn = translate[1] + y * scale;
    return { x: xn, y: yn };
  }
  
  function getClickedScreenCoords( x, y, translate, scale ){
    var xn = (x - translate[0]) / scale;
    var yn = (y - translate[1]) / scale;
    return { x: xn, y: yn };
  }
  
  
  function computeDistanceToCenter( node, inverse ){
    var container = node;
    var w = graph.options().width();
    var h = graph.options().height();
    var posXY = getScreenCoords(node.x, node.y, graphTranslation, zoomFactor);
    
    var highlightOfInv = false;
    
    if ( inverse && inverse === true ) {
      highlightOfInv = true;
      posXY = getScreenCoords(node.x, node.y + 20, graphTranslation, zoomFactor);
    }
    var x = posXY.x;
    var y = posXY.y;
    var nodeIsRect = false;
    var halo;
    var roundHalo;
    var rectHalo;
    var borderPoint_x = 0;
    var borderPoint_y = 0;
    var defaultRadius;
    var offset = 15;
    var radius;
    
    if ( node.property && highlightOfInv === true ) {
      if ( node.property().inverse() ) {
        rectHalo = node.property().inverse().getHalos().select("rect");
        
      } else {
        if ( node.property().getHalos() )
          rectHalo = node.property().getHalos().select("rect");
        else {
          node.property().drawHalo();
          rectHalo = node.property().getHalos().select("rect");
        }
      }
      rectHalo.classed("hidden", true);
      if ( node.property().inverse() ) {
        if ( node.property().inverse().getHalos() ) {
          roundHalo = node.property().inverse().getHalos().select("circle");
        }
      } else {
        roundHalo = node.property().getHalos().select("circle");
      }
      if ( roundHalo.node() === null ) {
        radius = node.property().inverse().width() + 15;
        
        roundHalo = node.property().inverse().getHalos().append("circle")
          .classed("searchResultB", true)
          .classed("searchResultA", false)
          .attr("r", radius + 15);
        
      }
      halo = roundHalo; // swap the halo to be round
      nodeIsRect = true;
      container = node.property().inverse();
    }
    
    if ( node.id ) {
      if ( !node.getHalos() ) return; // something went wrong before
      halo = node.getHalos().select("rect");
      if ( halo.node() === null ) {
        // this is a round node
        nodeIsRect = false;
        roundHalo = node.getHalos().select("circle");
        defaultRadius = node.actualRadius();
        roundHalo.attr("r", defaultRadius + offset);
        halo = roundHalo;
      } else { // this is a rect node
        nodeIsRect = true;
        rectHalo = node.getHalos().select("rect");
        rectHalo.classed("hidden", true);
        roundHalo = node.getHalos().select("circle");
        if ( roundHalo.node() === null ) {
          radius = node.width();
          roundHalo = node.getHalos().append("circle")
            .classed("searchResultB", true)
            .classed("searchResultA", false)
            .attr("r", radius + offset);
        }
        halo = roundHalo;
      }
    }
    if ( node.property && !inverse ) {
      if ( !node.property().getHalos() ) return; // something went wrong before
      rectHalo = node.property().getHalos().select("rect");
      rectHalo.classed("hidden", true);
      
      roundHalo = node.property().getHalos().select("circle");
      if ( roundHalo.node() === null ) {
        radius = node.property().width();
        
        roundHalo = node.property().getHalos().append("circle")
          .classed("searchResultB", true)
          .classed("searchResultA", false)
          .attr("r", radius + 15);
        
      }
      halo = roundHalo; // swap the halo to be round
      nodeIsRect = true;
      container = node.property();
    }
    
    if ( x < 0 || x > w || y < 0 || y > h ) {
      // node outside viewport;
      // check for quadrant and get the correct boarder point (intersection with viewport)
      if ( x < 0 && y < 0 ) {
        borderPoint_x = 0;
        borderPoint_y = 0;
      } else if ( x > 0 && x < w && y < 0 ) {
        borderPoint_x = x;
        borderPoint_y = 0;
      } else if ( x > w && y < 0 ) {
        borderPoint_x = w;
        borderPoint_y = 0;
      } else if ( x > w && y > 0 && y < h ) {
        borderPoint_x = w;
        borderPoint_y = y;
      } else if ( x > w && y > h ) {
        borderPoint_x = w;
        borderPoint_y = h;
      } else if ( x > 0 && x < w && y > h ) {
        borderPoint_x = x;
        borderPoint_y = h;
      } else if ( x < 0 && y > h ) {
        borderPoint_x = 0;
        borderPoint_y = h;
      } else if ( x < 0 && y > 0 && y < h ) {
        borderPoint_x = 0;
        borderPoint_y = y;
      }
      // kill all pulses of nodes that are outside the viewport
      container.getHalos().select("rect").classed("searchResultA", false);
      container.getHalos().select("circle").classed("searchResultA", false);
      container.getHalos().select("rect").classed("searchResultB", true);
      container.getHalos().select("circle").classed("searchResultB", true);
      halo.classed("hidden", false);
      // compute in pixel coordinates length of difference vector
      var borderRadius_x = borderPoint_x - x;
      var borderRadius_y = borderPoint_y - y;
      
      var len = borderRadius_x * borderRadius_x + borderRadius_y * borderRadius_y;
      len = Math.sqrt(len);
      
      var normedX = borderRadius_x / len;
      var normedY = borderRadius_y / len;
      
      len = len + 20; // add 20 px;
      
      // re-normalized vector
      var newVectorX = normedX * len + x;
      var newVectorY = normedY * len + y;
      // compute world coordinates of this point
      var wX = (newVectorX - graphTranslation[0]) / zoomFactor;
      var wY = (newVectorY - graphTranslation[1]) / zoomFactor;
      
      // compute distance in world coordinates
      var dx = wX - node.x;
      var dy = wY - node.y;
      if ( highlightOfInv === true )
        dy = wY - node.y - 20;
      
      if ( highlightOfInv === false && node.property && node.property().inverse() )
        dy = wY - node.y + 20;
      
      var newRadius = Math.sqrt(dx * dx + dy * dy);
      halo = container.getHalos().select("circle");
      // sanity checks and setting new halo radius
      if ( !nodeIsRect ) {
        defaultRadius = node.actualRadius() + offset;
        if ( newRadius < defaultRadius ) {
          newRadius = defaultRadius;
        }
        halo.attr("r", newRadius);
      } else {
        defaultRadius = 0.5 * container.width();
        if ( newRadius < defaultRadius )
          newRadius = defaultRadius;
        halo.attr("r", newRadius);
      }
    } else { // node is in viewport , render original;
      // reset the halo to original radius
      defaultRadius = node.actualRadius() + 15;
      if ( !nodeIsRect ) {
        halo.attr("r", defaultRadius);
      } else { // this is rectangular node render as such
        halo = container.getHalos().select("rect");
        halo.classed("hidden", false);
        //halo.classed("searchResultB", true);
        //halo.classed("searchResultA", false);
        var aCircHalo = container.getHalos().select("circle");
        aCircHalo.classed("hidden", true);
        
        container.getHalos().select("rect").classed("hidden", false);
        container.getHalos().select("circle").classed("hidden", true);
      }
    }
  }
  
  function transform( p, cx, cy ){
    // one iteration step for the locate target animation
    zoomFactor = graph.options().height() / p[2];
    graphTranslation = [(cx - p[0] * zoomFactor), (cy - p[1] * zoomFactor)];
    updateHaloRadius();
    // update the values in case the user wants to break the animation
    zoom.translate(graphTranslation);
    zoom.scale(zoomFactor);
    graph.options().zoomSlider().updateZoomSliderValue(zoomFactor);
    return "translate(" + graphTranslation[0] + "," + graphTranslation[1] + ")scale(" + zoomFactor + ")";
  }
  
  graph.zoomToElementInGraph = function ( element ){
    targetLocationZoom(element);
  };
  graph.updateHaloRadius = function ( element ){
    computeDistanceToCenter(element);
  };
  
  function targetLocationZoom( target ){
    // store the original information
    var cx = 0.5 * graph.options().width();
    var cy = 0.5 * graph.options().height();
    var cp = getWorldPosFromScreen(cx, cy, graphTranslation, zoomFactor);
    var sP = [cp.x, cp.y, graph.options().height() / zoomFactor];
    
    var zoomLevel = Math.max(defaultZoom + 0.5 * defaultZoom, defaultTargetZoom);
    var eP = [target.x, target.y, graph.options().height() / zoomLevel];
    var pos_intp = d3.interpolateZoom(sP, eP);
    
    var lenAnimation = pos_intp.duration;
    if ( lenAnimation > 2500 ) {
      lenAnimation = 2500;
    }
    
    graphContainer.attr("transform", transform(sP, cx, cy))
      .transition()
      .duration(lenAnimation)
      .attrTween("transform", function (){
        return function ( t ){
          return transform(pos_intp(t), cx, cy);
        };
      })
      .each("end", function (){
        graphContainer.attr("transform", "translate(" + graphTranslation + ")scale(" + zoomFactor + ")");
        zoom.translate(graphTranslation);
        zoom.scale(zoomFactor);
        updateHaloRadius();
      });
  }
  
  function getWorldPosFromScreen( x, y, translate, scale ){
    var temp = scale[0], xn, yn;
    if ( temp ) {
      xn = (x - translate[0]) / temp;
      yn = (y - translate[1]) / temp;
    } else {
      xn = (x - translate[0]) / scale;
      yn = (y - translate[1]) / scale;
    }
    return { x: xn, y: yn };
  }
  
  graph.locateSearchResult = function (){
    if ( pulseNodeIds && pulseNodeIds.length > 0 ) {
      // move the center of the viewport to this location
      if ( transformAnimation === true ) return; // << prevents incrementing the location id if we are in an animation
      var node = force.nodes()[pulseNodeIds[locationId]];
      locationId++;
      locationId = locationId % pulseNodeIds.length;
      if ( node.id ) node.foreground();
      if ( node.property ) node.property().foreground();
      
      targetLocationZoom(node);
    }
  };
  
  graph.resetSearchHighlight = function (){
    // get all nodes (handle also already filtered nodes )
    pulseNodeIds = [];
    nodeArrayForPulse = [];
    // clear from stored nodes
    var nodes = unfilteredData.nodes;
    var props = unfilteredData.properties;
    var j;
    for ( j = 0; j < nodes.length; j++ ) {
      var node = nodes[j];
      if ( node.removeHalo )
        node.removeHalo();
    }
    for ( j = 0; j < props.length; j++ ) {
      var prop = props[j];
      if ( prop.removeHalo )
        prop.removeHalo();
    }
  };
  
  graph.updatePulseIds = function ( nodeIdArray ){
    pulseNodeIds = [];
    for ( var i = 0; i < nodeIdArray.length; i++ ) {
      var selectedId = nodeIdArray[i];
      var forceId = nodeMap[selectedId];
      if ( forceId !== undefined ) {
        var le_node = force.nodes()[forceId];
        if ( le_node.id ) {
          if ( pulseNodeIds.indexOf(forceId) === -1 ) {
            pulseNodeIds.push(forceId);
          }
        }
        if ( le_node.property ) {
          if ( pulseNodeIds.indexOf(forceId) === -1 ) {
            pulseNodeIds.push(forceId);
          }
        }
      }
    }
    locationId = 0;
    if ( pulseNodeIds.length > 0 ) {
      d3.select("#locateSearchResult").classed("highlighted", true);
      d3.select("#locateSearchResult").node().title = "Locate search term";
    }
    else {
      d3.select("#locateSearchResult").classed("highlighted", false);
      d3.select("#locateSearchResult").node().title = "Nothing to locate";
    }
    
  };
  
  graph.highLightNodes = function ( nodeIdArray ){
    if ( nodeIdArray.length === 0 ) {
      return; // nothing to highlight
    }
    pulseNodeIds = [];
    nodeArrayForPulse = nodeIdArray;
    var missedIds = [];
    
    // identify the force id to highlight
    for ( var i = 0; i < nodeIdArray.length; i++ ) {
      var selectedId = nodeIdArray[i];
      var forceId = nodeMap[selectedId];
      if ( forceId !== undefined ) {
        var le_node = force.nodes()[forceId];
        if ( le_node.id ) {
          if ( pulseNodeIds.indexOf(forceId) === -1 ) {
            pulseNodeIds.push(forceId);
            le_node.foreground();
            le_node.drawHalo();
          }
        }
        if ( le_node.property ) {
          if ( pulseNodeIds.indexOf(forceId) === -1 ) {
            pulseNodeIds.push(forceId);
            le_node.property().foreground();
            le_node.property().drawHalo();
          }
        }
      }
      else {
        missedIds.push(selectedId);
      }
    }
    
    if ( missedIds.length === nodeIdArray.length ) {
      
    }
    // store the highlight on the missed nodes;
    var s_nodes = unfilteredData.nodes;
    var s_props = unfilteredData.properties;
    for ( i = 0; i < missedIds.length; i++ ) {
      var missedId = missedIds[i];
      // search for this in the nodes;
      for ( var n = 0; n < s_nodes.length; n++ ) {
        var nodeId = s_nodes[n].id();
        if ( nodeId === missedId ) {
          s_nodes[n].drawHalo();
        }
      }
      for ( var p = 0; p < s_props.length; p++ ) {
        var propId = s_props[p].id();
        if ( propId === missedId ) {
          s_props[p].drawHalo();
        }
      }
    }
    if ( missedIds.length === nodeIdArray.length ) {
      d3.select("#locateSearchResult").classed("highlighted", false);
    }
    else {
      d3.select("#locateSearchResult").classed("highlighted", true);
    }
    locationId = 0;
    updateHaloRadius();
  };
  
  graph.hideHalos = function (){
    var haloElements = d3.selectAll(".searchResultA,.searchResultB");
    haloElements.classed("hidden", true);
    return haloElements;
  };
  
  function nodeInViewport( node, property ){
    
    var w = graph.options().width();
    var h = graph.options().height();
    var posXY = getScreenCoords(node.x, node.y, graphTranslation, zoomFactor);
    var x = posXY.x;
    var y = posXY.y;
    
    var retVal = !(x < 0 || x > w || y < 0 || y > h);
    return retVal;
  }
  
  graph.getBoundingBoxForTex = function (){
    var halos = graph.hideHalos();
    var bbox = graphContainer.node().getBoundingClientRect();
    halos.classed("hidden", false);
    var w = graph.options().width();
    var h = graph.options().height();
    
    // get the graph coordinates
    var topLeft = getWorldPosFromScreen(0, 0, graphTranslation, zoomFactor);
    var botRight = getWorldPosFromScreen(w, h, graphTranslation, zoomFactor);
    
    
    var t_topLeft = getWorldPosFromScreen(bbox.left, bbox.top, graphTranslation, zoomFactor);
    var t_botRight = getWorldPosFromScreen(bbox.right, bbox.bottom, graphTranslation, zoomFactor);
    
    // tighten up the bounding box;
    
    var tX = Math.max(t_topLeft.x, topLeft.x);
    var tY = Math.max(t_topLeft.y, topLeft.y);
    
    var bX = Math.min(t_botRight.x, botRight.x);
    var bY = Math.min(t_botRight.y, botRight.y);
    
    
    // tighten further;
    var allForceNodes = force.nodes();
    var numNodes = allForceNodes.length;
    var visibleNodes = [];
    var bbx;
    
    
    var contentBBox = { tx: 1000000000000, ty: 1000000000000, bx: -1000000000000, by: -1000000000000 };
    
    for ( var i = 0; i < numNodes; i++ ) {
      var node = allForceNodes[i];
      if ( node ) {
        if ( node.property ) {
          if ( nodeInViewport(node, true) ) {
            if ( node.property().labelElement() === undefined ) continue;
            bbx = node.property().labelElement().node().getBoundingClientRect();
            if ( bbx ) {
              contentBBox.tx = Math.min(contentBBox.tx, bbx.left);
              contentBBox.bx = Math.max(contentBBox.bx, bbx.right);
              contentBBox.ty = Math.min(contentBBox.ty, bbx.top);
              contentBBox.by = Math.max(contentBBox.by, bbx.bottom);
            }
          }
        } else {
          if ( nodeInViewport(node, false) ) {
            bbx = node.nodeElement().node().getBoundingClientRect();
            if ( bbx ) {
              contentBBox.tx = Math.min(contentBBox.tx, bbx.left);
              contentBBox.bx = Math.max(contentBBox.bx, bbx.right);
              contentBBox.ty = Math.min(contentBBox.ty, bbx.top);
              contentBBox.by = Math.max(contentBBox.by, bbx.bottom);
            }
          }
        }
      }
    }
    
    var tt_topLeft = getWorldPosFromScreen(contentBBox.tx, contentBBox.ty, graphTranslation, zoomFactor);
    var tt_botRight = getWorldPosFromScreen(contentBBox.bx, contentBBox.by, graphTranslation, zoomFactor);
    
    tX = Math.max(tX, tt_topLeft.x);
    tY = Math.max(tY, tt_topLeft.y);
    
    bX = Math.min(bX, tt_botRight.x);
    bY = Math.min(bY, tt_botRight.y);
    // y axis flip for tex
    return [tX, -tY, bX, -bY];
    
  };
  
  var updateTargetElement = function (){
    var bbox = graphContainer.node().getBoundingClientRect();
    
    
    // get the graph coordinates
    var bboxOffset = 50; // default radius of a node;
    var topLeft = getWorldPosFromScreen(bbox.left, bbox.top, graphTranslation, zoomFactor);
    var botRight = getWorldPosFromScreen(bbox.right, bbox.bottom, graphTranslation, zoomFactor);
    
    var w = graph.options().width();
    if ( graph.options().leftSidebar().isSidebarVisible() === true )
      w -= 200;
    var h = graph.options().height();
    topLeft.x += bboxOffset;
    topLeft.y -= bboxOffset;
    botRight.x -= bboxOffset;
    botRight.y += bboxOffset;
    
    var g_w = botRight.x - topLeft.x;
    var g_h = botRight.y - topLeft.y;
    
    // endpoint position calculations
    var posX = 0.5 * (topLeft.x + botRight.x);
    var posY = 0.5 * (topLeft.y + botRight.y);
    var cx = 0.5 * w,
      cy = 0.5 * h;
    
    if ( graph.options().leftSidebar().isSidebarVisible() === true )
      cx += 200;
    var cp = getWorldPosFromScreen(cx, cy, graphTranslation, zoomFactor);
    
    // zoom factor calculations and fail safes;
    var newZoomFactor = 1.0; // fail save if graph and window are squares
    //get the smaller one
    var a = w / g_w;
    var b = h / g_h;
    if ( a < b ) newZoomFactor = a;
    else      newZoomFactor = b;
    
    
    // fail saves
    if ( newZoomFactor > zoom.scaleExtent()[1] ) {
      newZoomFactor = zoom.scaleExtent()[1];
    }
    if ( newZoomFactor < zoom.scaleExtent()[0] ) {
      newZoomFactor = zoom.scaleExtent()[0];
    }
    
    // apply Zooming
    var sP = [cp.x, cp.y, h / zoomFactor];
    var eP = [posX, posY, h / newZoomFactor];
    
    
    var pos_intp = d3.interpolateZoom(sP, eP);
    return [pos_intp, cx, cy];
    
  };
  
  graph.forceRelocationEvent = function ( dynamic ){
    // we need to kill the halo to determine the bounding box;
    var halos = graph.hideHalos();
    var bbox = graphContainer.node().getBoundingClientRect();
    halos.classed("hidden", false);
    
    // get the graph coordinates
    var bboxOffset = 50; // default radius of a node;
    var topLeft = getWorldPosFromScreen(bbox.left, bbox.top, graphTranslation, zoomFactor);
    var botRight = getWorldPosFromScreen(bbox.right, bbox.bottom, graphTranslation, zoomFactor);
    
    var w = graph.options().width();
    if ( graph.options().leftSidebar().isSidebarVisible() === true )
      w -= 200;
    var h = graph.options().height();
    topLeft.x += bboxOffset;
    topLeft.y -= bboxOffset;
    botRight.x -= bboxOffset;
    botRight.y += bboxOffset;
    
    var g_w = botRight.x - topLeft.x;
    var g_h = botRight.y - topLeft.y;
    
    // endpoint position calculations
    var posX = 0.5 * (topLeft.x + botRight.x);
    var posY = 0.5 * (topLeft.y + botRight.y);
    var cx = 0.5 * w,
      cy = 0.5 * h;
    
    if ( graph.options().leftSidebar().isSidebarVisible() === true )
      cx += 200;
    var cp = getWorldPosFromScreen(cx, cy, graphTranslation, zoomFactor);
    
    // zoom factor calculations and fail safes;
    var newZoomFactor = 1.0; // fail save if graph and window are squares
    //get the smaller one
    var a = w / g_w;
    var b = h / g_h;
    if ( a < b ) newZoomFactor = a;
    else      newZoomFactor = b;
    
    
    // fail saves
    if ( newZoomFactor > zoom.scaleExtent()[1] ) {
      newZoomFactor = zoom.scaleExtent()[1];
    }
    if ( newZoomFactor < zoom.scaleExtent()[0] ) {
      newZoomFactor = zoom.scaleExtent()[0];
    }
    
    // apply Zooming
    var sP = [cp.x, cp.y, h / zoomFactor];
    var eP = [posX, posY, h / newZoomFactor];
    
    
    var pos_intp = d3.interpolateZoom(sP, eP);
    var lenAnimation = pos_intp.duration;
    if ( lenAnimation > 2500 ) {
      lenAnimation = 2500;
    }
    graphContainer.attr("transform", transform(sP, cx, cy))
      .transition()
      .duration(lenAnimation)
      .attrTween("transform", function (){
        return function ( t ){
          if ( dynamic ) {
            var param = updateTargetElement();
            var nV = param[0](t);
            return transform(nV, cx, cy);
          }
          return transform(pos_intp(t), cx, cy);
        };
      })
      .each("end", function (){
        if ( dynamic ) {
          return;
        }
        
        graphContainer.attr("transform", "translate(" + graphTranslation + ")scale(" + zoomFactor + ")");
        zoom.translate(graphTranslation);
        zoom.scale(zoomFactor);
        graph.options().zoomSlider().updateZoomSliderValue(zoomFactor);
        
        
      });
  };
  
  
  graph.isADraggerActive = function (){
    if ( classDragger.mouseButtonPressed === true ||
      domainDragger.mouseButtonPressed === true ||
      rangeDragger.mouseButtonPressed === true ) {
      return true;
    }
    return false;
  };
  
  /** --------------------------------------------------------- **/
  /** -- VOWL EDITOR  create/ edit /delete functions --         **/
  /** --------------------------------------------------------- **/
  
  graph.changeNodeType = function ( element ){
    
    var typeString = d3.select("#typeEditor").node().value;
    
    if ( graph.classesSanityCheck(element, typeString) === false ) {
      // call reselection to restore previous type selection
      graph.options().editSidebar().updateSelectionInformation(element);
      return;
    }
    
    var prototype = NodePrototypeMap.get(typeString.toLowerCase());
    var aNode = new prototype(graph);
    
    aNode.x = element.x;
    aNode.y = element.y;
    aNode.px = element.x;
    aNode.py = element.y;
    aNode.id(element.id());
    aNode.copyInformation(element);
    
    if ( typeString === "owl:Thing" ) {
      aNode.label("Thing");
    }
    else if ( elementTools.isDatatype(element) === false ) {
      if ( element.backupLabel() !== undefined ) {
        aNode.label(element.backupLabel());
      } else if ( aNode.backupLabel() !== undefined ) {
        aNode.label(aNode.backupLabel());
      } else {
        aNode.label("NewClass");
      }
    }
    
    if ( typeString === "rdfs:Datatype" ) {
      if ( aNode.dType() === "undefined" )
        aNode.label("undefined");
      else {
        var identifier = aNode.dType().split(":")[1];
        aNode.label(identifier);
      }
    }
    var i;
    // updates the property domain and range
    for ( i = 0; i < unfilteredData.properties.length; i++ ) {
      if ( unfilteredData.properties[i].domain() === element ) {
        //  unfilteredData.properties[i].toString();
        unfilteredData.properties[i].domain(aNode);
      }
      if ( unfilteredData.properties[i].range() === element ) {
        unfilteredData.properties[i].range(aNode);
        //  unfilteredData.properties[i].toString();
      }
    }
    
    // update for fastUpdate:
    for ( i = 0; i < properties.length; i++ ) {
      if ( properties[i].domain() === element ) {
        //  unfilteredData.properties[i].toString();
        properties[i].domain(aNode);
      }
      if ( properties[i].range() === element ) {
        properties[i].range(aNode);
        //  unfilteredData.properties[i].toString();
      }
    }
    
    var remId = unfilteredData.nodes.indexOf(element);
    if ( remId !== -1 )
      unfilteredData.nodes.splice(remId, 1);
    remId = classNodes.indexOf(element);
    if ( remId !== -1 )
      classNodes.splice(remId, 1);
    // very important thing for selection!;
    addNewNodeElement(aNode);
    // handle focuser!
    options.focuserModule().handle(aNode);
    generateDictionary(unfilteredData);
    graph.getUpdateDictionary();
    element = null;
  };
  
  
  graph.changePropertyType = function ( element ){
    var typeString = d3.select("#typeEditor").node().value;
    
    // create warning
    if ( graph.sanityCheckProperty(element.domain(), element.range(), typeString) === false ) return false;
    
    var propPrototype = PropertyPrototypeMap.get(typeString.toLowerCase());
    var aProp = new propPrototype(graph);
    aProp.copyInformation(element);
    aProp.id(element.id());
    
    element.domain().removePropertyElement(element);
    element.range().removePropertyElement(element);
    aProp.domain(element.domain());
    aProp.range(element.range());
    
    if ( element.backupLabel() !== undefined ) {
      aProp.label(element.backupLabel());
    } else {
      aProp.label("newObjectProperty");
    }
    
    if ( aProp.type() === "rdfs:subClassOf" ) {
      aProp.iri("http://www.w3.org/2000/01/rdf-schema#subClassOf");
    } else {
      if ( element.iri() === "http://www.w3.org/2000/01/rdf-schema#subClassOf" )
        aProp.iri(graph.options().getGeneralMetaObjectProperty('iri') + aProp.id());
      
    }
    
    
    if ( graph.propertyCheckExistenceChecker(aProp, element.domain(), element.range()) === false ) {
      graph.options().editSidebar().updateSelectionInformation(element);
      return;
    }
    // // TODO: change its base IRI to proper value
    // var ontoIRI="http://someTest.de";
    // aProp.baseIri(ontoIRI);
    // aProp.iri(aProp.baseIri()+aProp.id());
    
    
    // add this to the data;
    unfilteredData.properties.push(aProp);
    if ( properties.indexOf(aProp) === -1 )
      properties.push(aProp);
    var remId = unfilteredData.properties.indexOf(element);
    if ( remId !== -1 )
      unfilteredData.properties.splice(remId, 1);
    if ( properties.indexOf(aProp) === -1 )
      properties.push(aProp);
    remId = properties.indexOf(element);
    if ( remId !== -1 )
      properties.splice(remId, 1);
    graph.fastUpdate();
    aProp.domain().addProperty(aProp);
    aProp.range().addProperty(aProp);
    if ( element.labelObject() && aProp.labelObject() ) {
      aProp.labelObject().x = element.labelObject().x;
      aProp.labelObject().px = element.labelObject().px;
      aProp.labelObject().y = element.labelObject().y;
      aProp.labelObject().py = element.labelObject().py;
    }
    
    options.focuserModule().handle(aProp);
    element = null;
  };
  
  graph.removeEditElements = function (){
    // just added to be called form outside
    removeEditElements();
  };
  
  function removeEditElements(){
    rangeDragger.hideDragger(true);
    domainDragger.hideDragger(true);
    shadowClone.hideClone(true);
    
    classDragger.hideDragger(true);
    if ( addDataPropertyGroupElement )
      addDataPropertyGroupElement.classed("hidden", true);
    if ( deleteGroupElement )
      deleteGroupElement.classed("hidden", true);
    
    
    if ( hoveredNodeElement ) {
      if ( hoveredNodeElement.pinned() === false ) {
        hoveredNodeElement.locked(graph.paused());
        hoveredNodeElement.frozen(graph.paused());
      }
    }
    if ( hoveredPropertyElement ) {
      if ( hoveredPropertyElement.pinned() === false ) {
        hoveredPropertyElement.locked(graph.paused());
        hoveredPropertyElement.frozen(graph.paused());
      }
    }
    
    
  }
  
  graph.editorMode = function ( val ){
    var create_entry = d3.select("#empty");
    var create_container = d3.select("#emptyContainer");
    
    var modeOfOpString = d3.select("#modeOfOperationString").node();
    if ( !arguments.length ) {
      create_entry.node().checked = editMode;
      if ( editMode === false ) {
        create_container.node().title = "Enable editing in modes menu to create a new ontology";
        create_entry.node().title = "Enable editing in modes menu to create a new ontology";
        create_entry.style("pointer-events", "none");
      } else {
        create_container.node().title = "Creates a new empty ontology";
        create_entry.node().title = "Creates a new empty ontology";
        d3.select("#useAccuracyHelper").style("color", "#2980b9");
        d3.select("#useAccuracyHelper").style("pointer-events", "auto");
        create_entry.node().disabled = false;
        create_entry.style("pointer-events", "auto");
      }
      
      return editMode;
    }
    graph.options().setEditorModeForDefaultObject(val);
    
    // if (seenEditorHint===false  && val===true){
    //     seenEditorHint=true;
    //     graph.options().warningModule().showEditorHint();
    // }
    editMode = val;
    
    if ( create_entry ) {
      create_entry.classed("disabled", !editMode);
      if ( !editMode ) {
        create_container.node().title = "Enable editing in modes menu to create a new ontology";
        create_entry.node().title = "Enable editing in modes menu to create a new ontology";
        create_entry.node().disabled = true;
        d3.select("#useAccuracyHelper").style("color", "#979797");
        d3.select("#useAccuracyHelper").style("pointer-events", "none");
        create_entry.style("pointer-events", "none");
      } else {
        create_container.node().title = "Creates a new empty ontology";
        create_entry.node().title = "Creates a new empty ontology";
        d3.select("#useAccuracyHelper").style("color", "#2980b9");
        d3.select("#useAccuracyHelper").style("pointer-events", "auto");
        create_entry.style("pointer-events", "auto");
      }
    }
    
    // adjust compact notation
    // selector = compactNotationOption;
    // box =ModuleCheckbox
    var compactNotationContainer = d3.select("#compactnotationModuleCheckbox");
    if ( compactNotationContainer ) {
      compactNotationContainer.classed("disabled", !editMode);
      if ( !editMode ) {
        compactNotationContainer.node().title = "";
        compactNotationContainer.node().disabled = false;
        compactNotationContainer.style("pointer-events", "auto");
        d3.select("#compactNotationOption").style("color", "");
        d3.select("#compactNotationOption").node().title = "";
        options.literalFilter().enabled(true);
        graph.update();
      } else {
        // if editor Mode
        //1) uncheck the element
        d3.select("#compactNotationOption").node().title = "Compact notation can only be used in view mode";
        compactNotationContainer.node().disabled = true;
        compactNotationContainer.node().checked = false;
        options.compactNotationModule().enabled(false);
        options.literalFilter().enabled(false);
        graph.executeCompactNotationModule();
        graph.executeEmptyLiteralFilter();
        graph.lazyRefresh();
        compactNotationContainer.style("pointer-events", "none");
        d3.select("#compactNotationOption").style("color", "#979797");
      }
    }
    
    if ( modeOfOpString ) {
      if ( touchDevice === true ) {
        modeOfOpString.innerHTML = "touch able device detected";
      } else {
        modeOfOpString.innerHTML = "point & click device detected";
      }
    }
    var svgGraph = d3.selectAll(".vowlGraph");
    
    if ( editMode === true ) {
      options.leftSidebar().showSidebar(options.leftSidebar().getSidebarVisibility(), true);
      options.leftSidebar().hideCollapseButton(false);
      graph.options().editSidebar().updatePrefixUi();
      graph.options().editSidebar().updateElementWidth();
      svgGraph.on("dblclick.zoom", graph.modified_dblClickFunction);
      
    } else {
      svgGraph.on("dblclick.zoom", originalD3_dblClickFunction);
      options.leftSidebar().showSidebar(0);
      options.leftSidebar().hideCollapseButton(true);
      // hide hovered edit elements
      removeEditElements();
    }
    options.sidebar().updateShowedInformation();
    options.editSidebar().updateElementWidth();
    
  };
  
  function createLowerCasePrototypeMap( prototypeMap ){
    return d3.map(prototypeMap.values(), function ( Prototype ){
      return new Prototype().type().toLowerCase();
    });
  }
  
  function createNewNodeAtPosition( pos ){
    var aNode, prototype;
    var forceUpdate = true;
    // create a node of that id;
    
    var typeToCreate = d3.select("#defaultClass").node().title;
    prototype = NodePrototypeMap.get(typeToCreate.toLowerCase());
    aNode = new prototype(graph);
    var autoEditElement = false;
    if ( typeToCreate === "owl:Thing" ) {
      aNode.label("Thing");
    }
    else {
      aNode.label("NewClass");
      autoEditElement = true;
    }
    aNode.x = pos.x;
    aNode.y = pos.y;
    aNode.px = aNode.x;
    aNode.py = aNode.y;
    aNode.id("Class" + eN++);
    // aNode.paused(true);
    
    aNode.baseIri(d3.select("#iriEditor").node().value);
    aNode.iri(aNode.baseIri() + aNode.id());
    addNewNodeElement(aNode, forceUpdate);
    options.focuserModule().handle(aNode, true);
    aNode.frozen(graph.paused());
    aNode.locked(graph.paused());
    aNode.enableEditing(autoEditElement);
  }
  
  
  function addNewNodeElement( element ){
    unfilteredData.nodes.push(element);
    if ( classNodes.indexOf(element) === -1 )
      classNodes.push(element);
    
    generateDictionary(unfilteredData);
    graph.getUpdateDictionary();
    graph.fastUpdate();
  }
  
  graph.getTargetNode = function ( position ){
    var dx = position[0];
    var dy = position[1];
    var tN = null;
    var minDist = 1000000000000;
    // This is a bit OVERKILL for the computation of one node >> TODO: KD-TREE SEARCH
    unfilteredData.nodes.forEach(function ( el ){
      var cDist = Math.sqrt((el.x - dx) * (el.x - dx) + (el.y - dy) * (el.y - dy));
      if ( cDist < minDist ) {
        minDist = cDist;
        tN = el;
      }
    });
    if ( hoveredNodeElement ) {
      var offsetDist = hoveredNodeElement.actualRadius() + 30;
      if ( minDist > offsetDist ) return null;
      if ( tN.renderType() === "rect" ) return null;
      if ( tN === hoveredNodeElement && minDist <= hoveredNodeElement.actualRadius() ) {
        return tN;
      } else if ( tN === hoveredNodeElement && minDist > hoveredNodeElement.actualRadius() ) {
        return null;
      }
      return tN;
    }
    else {
      
      if ( minDist > (tN.actualRadius() + 30) )
        return null;
      else return tN;
      
    }
  };
  
  graph.genericPropertySanityCheck = function ( domain, range, typeString, header, action ){
    if ( domain === range && typeString === "rdfs:subClassOf" ) {
      graph.options().warningModule().showWarning(header,
        "rdfs:subClassOf can not be created as loops (domain == range)",
        action, 1, false);
      return false;
    }
    if ( domain === range && typeString === "owl:disjointWith" ) {
      graph.options().warningModule().showWarning(header,
        "owl:disjointWith  can not be created as loops (domain == range)",
        action, 1, false);
      return false;
    }
    // allProps[i].type()==="owl:allValuesFrom"  ||
    // allProps[i].type()==="owl:someValuesFrom"
    if ( domain.type() === "owl:Thing" && typeString === "owl:allValuesFrom" ) {
      graph.options().warningModule().showWarning(header,
        "owl:allValuesFrom can not originate from owl:Thing",
        action, 1, false);
      return false;
    }
    if ( domain.type() === "owl:Thing" && typeString === "owl:someValuesFrom" ) {
      graph.options().warningModule().showWarning(header,
        "owl:someValuesFrom can not originate from owl:Thing",
        action, 1, false);
      return false;
    }
    
    if ( range.type() === "owl:Thing" && typeString === "owl:allValuesFrom" ) {
      graph.options().warningModule().showWarning(header,
        "owl:allValuesFrom can not be connected to owl:Thing",
        action, 1, false);
      return false;
    }
    if ( range.type() === "owl:Thing" && typeString === "owl:someValuesFrom" ) {
      graph.options().warningModule().showWarning(header,
        "owl:someValuesFrom can not be connected to owl:Thing",
        action, 1, false);
      return false;
    }
    
    return true; // we can Change the domain or range
  };
  
  graph.checkIfIriClassAlreadyExist = function ( url ){
    // search for a class node with this url
    var allNodes = unfilteredData.nodes;
    for ( var i = 0; i < allNodes.length; i++ ) {
      if ( elementTools.isDatatype(allNodes[i]) === true || allNodes[i].type() === "owl:Thing" )
        continue;
      
      // now we are a real class;
      //get class IRI
      var classIRI = allNodes[i].iri();
      
      // this gives me the node for halo
      if ( url === classIRI ) {
        return allNodes[i];
      }
    }
    return false;
  };
  
  graph.classesSanityCheck = function ( classElement, targetType ){
    // this is added due to someValuesFrom properties
    // we should not be able to change a classElement to a owl:Thing
    // when it has a property attached to it that uses these restrictions
    //
    
    if ( targetType === "owl:Class" ) return true;
    
    else {
      // collect all properties which have that one as a domain or range
      var allProps = unfilteredData.properties;
      for ( var i = 0; i < allProps.length; i++ ) {
        if ( allProps[i].range() === classElement || allProps[i].domain() === classElement ) {
          // check for the type of that property
          if ( allProps[i].type() === "owl:someValuesFrom" ) {
            graph.options().warningModule().showWarning("Can not change class type",
              "The element has a property that is of type owl:someValuesFrom",
              "Element type not changed!", 1, true);
            return false;
          }
          if ( allProps[i].type() === "owl:allValuesFrom" ) {
            graph.options().warningModule().showWarning("Can not change class type",
              "The element has a property that is of type owl:allValuesFrom",
              "Element type not changed!", 1, true);
            return false;
          }
        }
      }
      
      
    }
    return true;
  };
  
  graph.propertyCheckExistenceChecker = function ( property, domain, range ){
    var allProps = unfilteredData.properties;
    var i;
    if ( property.type() === "rdfs:subClassOf" || property.type() === "owl:disjointWith" ) {
      
      for ( i = 0; i < allProps.length; i++ ) {
        if ( allProps[i] === property ) continue;
        if ( allProps[i].domain() === domain && allProps[i].range() === range && allProps[i].type() === property.type() ) {
          graph.options().warningModule().showWarning("Warning",
            "This triple already exist!",
            "Element not created!", 1, false);
          return false;
        }
        if ( allProps[i].domain() === range && allProps[i].range() === domain && allProps[i].type() === property.type() ) {
          graph.options().warningModule().showWarning("Warning",
            "Inverse assignment already exist! ",
            "Element not created!", 1, false);
          return false;
        }
      }
      return true;
    }
    return true;
  };
  
  // graph.checkForTripleDuplicate=function(property){
  //     var domain=property.domain();
  //     var range=property.range();
  //     console.log("checking for duplicates");
  //     var b1= domain.isPropertyAssignedToThisElement(property);
  //     var b2= range.isPropertyAssignedToThisElement(property);
  //
  //     console.log("test domain results in "+ b1);
  //     console.log("test range results in "+ b1);
  //
  //     if (b1  && b2 ){
  //         graph.options().warningModule().showWarning("Warning",
  //             "This triple already exist!",
  //             "Element not created!",1,false);
  //         return false;
  //     }
  //     return true;
  // };
  
  graph.sanityCheckProperty = function ( domain, range, typeString ){
    
    // check for duplicate triple in the element;
    
    
    if ( typeString === "owl:objectProperty" && graph.options().objectPropertyFilter().enabled() === true ) {
      graph.options().warningModule().showWarning("Warning",
        "Object properties are filtered out in the visualization!",
        "Element not created!", 1, false);
      return false;
    }
    
    if ( typeString === "owl:disjointWith" && graph.options().disjointPropertyFilter().enabled() === true ) {
      graph.options().warningModule().showWarning("Warning",
        "owl:disjointWith properties are filtered out in the visualization!",
        "Element not created!", 1, false);
      return false;
    }
    
    
    if ( domain === range && typeString === "rdfs:subClassOf" ) {
      graph.options().warningModule().showWarning("Warning",
        "rdfs:subClassOf can not be created as loops (domain == range)",
        "Element not created!", 1, false);
      return false;
    }
    if ( domain === range && typeString === "owl:disjointWith" ) {
      graph.options().warningModule().showWarning("Warning",
        "owl:disjointWith  can not be created as loops (domain == range)",
        "Element not created!", 1, false);
      return false;
    }
    
    if ( domain.type() === "owl:Thing" && typeString === "owl:someValuesFrom" ) {
      graph.options().warningModule().showWarning("Warning",
        "owl:someValuesFrom can not originate from owl:Thing",
        "Element not created!", 1, false);
      return false;
    }
    if ( domain.type() === "owl:Thing" && typeString === "owl:allValuesFrom" ) {
      graph.options().warningModule().showWarning("Warning",
        "owl:allValuesFrom can not originate from owl:Thing",
        "Element not created!", 1, false);
      return false;
    }
    
    if ( range.type() === "owl:Thing" && typeString === "owl:allValuesFrom" ) {
      graph.options().warningModule().showWarning("Warning",
        "owl:allValuesFrom can not be connected to owl:Thing",
        "Element not created!", 1, false);
      return false;
    }
    if ( range.type() === "owl:Thing" && typeString === "owl:someValuesFrom" ) {
      graph.options().warningModule().showWarning("Warning",
        "owl:someValuesFrom can not be connected to owl:Thing",
        "Element not created!", 1, false);
      return false;
    }
    return true; // we can create a property
  };
  
  function createNewObjectProperty( domain, range, draggerEndposition ){
    // check type of the property that we want to create;
    
    var defaultPropertyName = d3.select("#defaultProperty").node().title;
    
    // check if we are allow to create that property
    if ( graph.sanityCheckProperty(domain, range, defaultPropertyName) === false ) return false;
    
    
    var propPrototype = PropertyPrototypeMap.get(defaultPropertyName.toLowerCase());
    var aProp = new propPrototype(graph);
    aProp.id("objectProperty" + eP++);
    aProp.domain(domain);
    aProp.range(range);
    aProp.label("newObjectProperty");
    aProp.baseIri(d3.select("#iriEditor").node().value);
    aProp.iri(aProp.baseIri() + aProp.id());
    
    // check for duplicate;
    if ( graph.propertyCheckExistenceChecker(aProp, domain, range) === false ) {
      // delete aProp;
      // hope for garbage collection here -.-
      return false;
    }
    
    var autoEditElement = false;
    
    if ( defaultPropertyName === "owl:objectProperty" ) {
      autoEditElement = true;
    }
    var pX = 0.49 * (domain.x + range.x);
    var pY = 0.49 * (domain.y + range.y);
    
    if ( domain === range ) {
      // we use the dragger endposition to determine an angle to put the loop there;
      var dirD_x = draggerEndposition[0] - domain.x;
      var dirD_y = draggerEndposition[1] - domain.y;
      
      // normalize;
      var len = Math.sqrt(dirD_x * dirD_x + dirD_y * dirD_y);
      // it should be very hard to set the position on the same sport but why not handling this
      var nx = dirD_x / len;
      var ny = dirD_y / len;
      // is Nan in javascript like in c len==len returns false when it is not a number?
      if ( isNaN(len) ) {
        nx = 0;
        ny = -1;
      }
      
      // get domain actual raidus
      var offset = 2 * domain.actualRadius() + 50;
      pX = domain.x + offset * nx;
      pY = domain.y + offset * ny;
    }
    
    // add this property to domain and range;
    domain.addProperty(aProp);
    range.addProperty(aProp);
    
    
    // add this to the data;
    unfilteredData.properties.push(aProp);
    if ( properties.indexOf(aProp) === -1 )
      properties.push(aProp);
    graph.fastUpdate();
    aProp.labelObject().x = pX;
    aProp.labelObject().px = pX;
    aProp.labelObject().y = pY;
    aProp.labelObject().py = pY;
    
    aProp.frozen(graph.paused());
    aProp.locked(graph.paused());
    domain.frozen(graph.paused());
    domain.locked(graph.paused());
    range.frozen(graph.paused());
    range.locked(graph.paused());
    
    
    generateDictionary(unfilteredData);
    graph.getUpdateDictionary();
    
    options.focuserModule().handle(aProp);
    graph.activateHoverElementsForProperties(true, aProp, false, touchDevice);
    aProp.labelObject().increasedLoopAngle = true;
    aProp.enableEditing(autoEditElement);
  }
  
  graph.createDataTypeProperty = function ( node ){
    // random postion issues;
    clearTimeout(nodeFreezer);
    // tells user when element is filtered out
    if ( graph.options().datatypeFilter().enabled() === true ) {
      graph.options().warningModule().showWarning("Warning",
        "Datatype properties are filtered out in the visualization!",
        "Element not created!", 1, false);
      return;
    }
    
    
    var aNode, prototype;
    
    // create a default datatype Node >> HERE LITERAL;
    var defaultDatatypeName = d3.select("#defaultDatatype").node().title;
    if ( defaultDatatypeName === "rdfs:Literal" ) {
      prototype = NodePrototypeMap.get("rdfs:literal");
      aNode = new prototype(graph);
      aNode.label("Literal");
      aNode.iri("http://www.w3.org/2000/01/rdf-schema#Literal");
      aNode.baseIri("http://www.w3.org/2000/01/rdf-schema#");
    } else {
      prototype = NodePrototypeMap.get("rdfs:datatype");
      aNode = new prototype(graph);
      var identifier = "";
      if ( defaultDatatypeName === "undefined" ) {
        identifier = "undefined";
        
        aNode.label(identifier);
        // TODO : HANDLER FOR UNDEFINED DATATYPES!!<<<>>>>>>>>>>>..
        aNode.iri("http://www.undefinedDatatype.org/#" + identifier);
        aNode.baseIri("http://www.undefinedDatatype.org/#");
        aNode.dType(defaultDatatypeName);
      } else {
        identifier = defaultDatatypeName.split(":")[1];
        aNode.label(identifier);
        aNode.dType(defaultDatatypeName);
        aNode.iri("http://www.w3.org/2001/XMLSchema#" + identifier);
        aNode.baseIri("http://www.w3.org/2001/XMLSchema#");
      }
    }
    
    
    var nX = node.x - node.actualRadius() - 100;
    var nY = node.y + node.actualRadius() + 100;
    
    aNode.x = nX;
    aNode.y = nY;
    aNode.px = aNode.x;
    aNode.py = aNode.y;
    aNode.id("NodeId" + eN++);
    // add this property to the nodes;
    unfilteredData.nodes.push(aNode);
    if ( classNodes.indexOf(aNode) === -1 )
      classNodes.push(aNode);
    
    
    // add also the datatype Property to it
    var propPrototype = PropertyPrototypeMap.get("owl:datatypeproperty");
    var aProp = new propPrototype(graph);
    aProp.id("datatypeProperty" + eP++);
    
    // create the connection
    aProp.domain(node);
    aProp.range(aNode);
    aProp.label("newDatatypeProperty");
    
    
    // TODO: change its base IRI to proper value
    var ontoIri = d3.select("#iriEditor").node().value;
    aProp.baseIri(ontoIri);
    aProp.iri(ontoIri + aProp.id());
    // add this to the data;
    unfilteredData.properties.push(aProp);
    if ( properties.indexOf(aProp) === -1 )
      properties.push(aProp);
    graph.fastUpdate();
    generateDictionary(unfilteredData);
    graph.getUpdateDictionary();
    
    nodeFreezer = setTimeout(function (){
      if ( node && node.frozen() === true && node.pinned() === false && graph.paused() === false ) {
        node.frozen(graph.paused());
        node.locked(graph.paused());
      }
    }, 1000);
    options.focuserModule().handle(undefined);
    if ( node ) {
      node.frozen(true);
      node.locked(true);
    }
  };
  
  graph.removeNodesViaResponse = function ( nodesToRemove, propsToRemove ){
    var i, remId;
    // splice them;
    for ( i = 0; i < propsToRemove.length; i++ ) {
      remId = unfilteredData.properties.indexOf(propsToRemove[i]);
      if ( remId !== -1 )
        unfilteredData.properties.splice(remId, 1);
      remId = properties.indexOf(propsToRemove[i]);
      if ( remId !== -1 )
        properties.splice(remId, 1);
      propsToRemove[i] = null;
    }
    for ( i = 0; i < nodesToRemove.length; i++ ) {
      remId = unfilteredData.nodes.indexOf(nodesToRemove[i]);
      if ( remId !== -1 ) {
        unfilteredData.nodes.splice(remId, 1);
      }
      remId = classNodes.indexOf(nodesToRemove[i]);
      if ( remId !== -1 )
        classNodes.splice(remId, 1);
      nodesToRemove[i] = null;
    }
    graph.fastUpdate();
    generateDictionary(unfilteredData);
    graph.getUpdateDictionary();
    options.focuserModule().handle(undefined);
    nodesToRemove = null;
    propsToRemove = null;
    
  };
  
  graph.removeNodeViaEditor = function ( node ){
    var propsToRemove = [];
    var nodesToRemove = [];
    var datatypes = 0;

    nodesToRemove.push(node);
    for ( var i = 0; i < unfilteredData.properties.length; i++ ) {
      if ( unfilteredData.properties[i].domain() === node || unfilteredData.properties[i].range() === node ) {
        propsToRemove.push(unfilteredData.properties[i]);
        if ( unfilteredData.properties[i].type().toLocaleLowerCase() === "owl:datatypeproperty" &&
          unfilteredData.properties[i].range() !== node ) {
          nodesToRemove.push(unfilteredData.properties[i].range());
          datatypes++;
        }
      }
    }

    // Build confirmation message describing everything that will be removed
    var nodeLabel = node.labelForCurrentLanguage() || node.iri() || "this node";
    var text;
    if ( propsToRemove.length === 0 ) {
      text = "Delete class \"" + nodeLabel + "\"?";
    } else if ( datatypes !== 0 ) {
      text = "Delete class \"" + nodeLabel + "\", " + datatypes + " datatype(s) and " + propsToRemove.length + " propert" + (propsToRemove.length === 1 ? "y" : "ies") + "?";
    } else {
      text = "Delete class \"" + nodeLabel + "\" and " + propsToRemove.length + " connected propert" + (propsToRemove.length === 1 ? "y" : "ies") + "?";
    }

    graph.options().warningModule().responseWarning(
      "Delete node",
      text,
      "This action cannot be undone.",
      graph.removeNodesViaResponse, [nodesToRemove, propsToRemove], false);
  };
  
  graph._doRemoveProperty = function ( property ){
    property.domain().removePropertyElement(property);
    property.range().removePropertyElement(property);
    var remId;

    if ( property.type().toLocaleLowerCase() === "owl:datatypeproperty" ) {
      var datatype = property.range();
      remId = unfilteredData.nodes.indexOf(property.range());
      if ( remId !== -1 )
        unfilteredData.nodes.splice(remId, 1);
      remId = classNodes.indexOf(property.range());
      if ( remId !== -1 )
        classNodes.splice(remId, 1);
      datatype = null;
    }
    remId = unfilteredData.properties.indexOf(property);
    if ( remId !== -1 )
      unfilteredData.properties.splice(remId, 1);
    remId = properties.indexOf(property);
    if ( remId !== -1 )
      properties.splice(remId, 1);
    if ( property.inverse() ) {
      property.inverse().inverse(0);
    }

    hoveredPropertyElement = undefined;
    graph.fastUpdate();
    generateDictionary(unfilteredData);
    graph.getUpdateDictionary();
    options.focuserModule().handle(undefined);
    property = null;
  };

  graph.removePropertyViaEditor = function ( property ){
    var propLabel = property.labelForCurrentLanguage() || property.iri() || "this property";
    var text = "Delete property \"" + propLabel + "\"?";
    if ( property.type().toLocaleLowerCase() === "owl:datatypeproperty" ) {
      text = "Delete datatype property \"" + propLabel + "\" and its range datatype node?";
    }
    graph.options().warningModule().responseWarning(
      "Delete property",
      text,
      "This action cannot be undone.",
      graph._doRemoveProperty, [property], false);
  };
  
  graph.executeColorExternalsModule = function (){
    options.colorExternalsModule().filter(unfilteredData.nodes, unfilteredData.properties);
  };
  
  graph.executeCompactNotationModule = function (){
    if ( unfilteredData ) {
      options.compactNotationModule().filter(unfilteredData.nodes, unfilteredData.properties);
    }
    
  };
  graph.executeEmptyLiteralFilter = function (){
    
    if ( unfilteredData && unfilteredData.nodes.length > 1 ) {
      options.literalFilter().filter(unfilteredData.nodes, unfilteredData.properties);
      unfilteredData.nodes = options.literalFilter().filteredNodes();
      unfilteredData.properties = options.literalFilter().filteredProperties();
    }
    
  };
  
  
  /** --------------------------------------------------------- **/
  /** -- animation functions for the nodes --                   **/
  /** --------------------------------------------------------- **/
  
  graph.animateDynamicLabelWidth = function (){
    var wantedWidth = options.dynamicLabelWidth();
    var i;
    for ( i = 0; i < classNodes.length; i++ ) {
      var nodeElement = classNodes[i];
      if ( elementTools.isDatatype(nodeElement) ) {
        nodeElement.animateDynamicLabelWidth(wantedWidth);
      }
    }
    for ( i = 0; i < properties.length; i++ ) {
      properties[i].animateDynamicLabelWidth(wantedWidth);
    }
  };
  
  
  /** --------------------------------------------------------- **/
  /** -- Touch behaviour functions --                   **/
  /** --------------------------------------------------------- **/
  
  graph.setTouchDevice = function ( val ){
    touchDevice = val;
  };
  
  graph.isTouchDevice = function (){
    return touchDevice;
  };
  
  graph.modified_dblClickFunction = function (){
    
    d3.event.stopPropagation();
    d3.event.preventDefault();
    // get position where we want to add the node;
    var grPos = getClickedScreenCoords(d3.event.clientX, d3.event.clientY, graph.translation(), graph.scaleFactor());
    createNewNodeAtPosition(grPos);
  };
  
  function doubletap(){
    var touch_time = d3.event.timeStamp;
    var numTouchers = 1;
    if ( d3.event && d3.event.touches && d3.event.touches.length )
      numTouchers = d3.event.touches.length;
    
    if ( touch_time - last_touch_time < 300 && numTouchers === 1 ) {
      d3.event.stopPropagation();
      if ( editMode === true ) {
        //graph.modified_dblClickFunction();
        d3.event.preventDefault();
        d3.event.stopPropagation();
        last_touch_time = touch_time;
        return true;
      }
    }
    last_touch_time = touch_time;
    return false;
  }
  
  
  function touchzoomed(){
    forceNotZooming = true;
    
    
    var touch_time = d3.event.timeStamp;
    if ( touch_time - last_touch_time < 300 && d3.event.touches.length === 1 ) {
      d3.event.stopPropagation();
      
      if ( editMode === true ) {
        //graph.modified_dblClickFunction();
        d3.event.preventDefault();
        d3.event.stopPropagation();
        zoom.translate(graphTranslation);
        zoom.scale(zoomFactor);
        graph.modified_dblTouchFunction();
      }
      else {
        forceNotZooming = false;
        if ( originalD3_touchZoomFunction )
          originalD3_touchZoomFunction();
      }
      return;
    }
    forceNotZooming = false;
    last_touch_time = touch_time;
    // TODO: WORK AROUND TO CHECK FOR ORIGINAL FUNCTION
    if ( originalD3_touchZoomFunction )
      originalD3_touchZoomFunction();
  }
  
  graph.modified_dblTouchFunction = function ( d ){
    d3.event.stopPropagation();
    d3.event.preventDefault();
    var xy;
    if ( editMode === true ) {
      xy = d3.touches(d3.selectAll(".vowlGraph").node());
    }
    var grPos = getClickedScreenCoords(xy[0][0], xy[0][1], graph.translation(), graph.scaleFactor());
    createNewNodeAtPosition(grPos);
  };
  
  /** --------------------------------------------------------- **/
  /** -- Hover and Selection functions, adding edit elements --  **/
  /** --------------------------------------------------------- **/
  
  graph.ignoreOtherHoverEvents = function ( val ){
    if ( !arguments.length ) {
      return ignoreOtherHoverEvents;
    }
    else  ignoreOtherHoverEvents = val;
  };
  
  function delayedHiddingHoverElements( tbh ){
    if ( tbh === true ) return;
    if ( hoveredNodeElement ) {
      if ( hoveredNodeElement.editingTextElement === true ) return;
      delayedHider = setTimeout(function (){
        deleteGroupElement.classed("hidden", true);
        addDataPropertyGroupElement.classed("hidden", true);
        classDragger.hideDragger(true);
        if ( hoveredNodeElement && hoveredNodeElement.pinned() === false && graph.paused() === false && hoveredNodeElement.editingTextElement === false ) {
          hoveredNodeElement.frozen(false);
          hoveredNodeElement.locked(false);
        }
      }, 1000);
    }
    if ( hoveredPropertyElement ) {
      if ( hoveredPropertyElement.editingTextElement === true ) return;
      delayedHider = setTimeout(function (){
        deleteGroupElement.classed("hidden", true);
        addDataPropertyGroupElement.classed("hidden", true);
        classDragger.hideDragger(true);
        rangeDragger.hideDragger(true);
        domainDragger.hideDragger(true);
        shadowClone.hideClone(true);
        if ( hoveredPropertyElement && hoveredPropertyElement.focused() === true && graph.options().drawPropertyDraggerOnHover() === true ) {
          hoveredPropertyElement.labelObject().increasedLoopAngle = false;
          // lazy update
          recalculatePositions();
        }
        
        if ( hoveredPropertyElement && hoveredPropertyElement.pinned() === false && graph.paused() === false && hoveredPropertyElement.editingTextElement === false ) {
          hoveredPropertyElement.frozen(false);
          hoveredPropertyElement.locked(false);
        }
      }, 1000);
    }
    
  }
  
  
  // TODO : experimental code for updating dynamic label with and its hover element
  graph.hideHoverPropertyElementsForAnimation = function (){
    deleteGroupElement.classed("hidden", true);
  };
  graph.showHoverElementsAfterAnimation = function ( property, inversed ){
    setDeleteHoverElementPositionProperty(property, inversed);
    deleteGroupElement.classed("hidden", false);
    
  };
  
  function editElementHoverOnHidden(){
    classDragger.nodeElement.classed("classDraggerNodeHovered", true);
    classDragger.nodeElement.classed("classDraggerNode", false);
    editElementHoverOn();
  }
  
  function editElementHoverOutHidden(){
    classDragger.nodeElement.classed("classDraggerNodeHovered", false);
    classDragger.nodeElement.classed("classDraggerNode", true);
    editElementHoverOut();
  }
  
  function editElementHoverOn( touch ){
    if ( touch === true ) return;
    clearTimeout(delayedHider); // ignore touch behaviour
    
  }
  
  graph.killDelayedTimer = function (){
    clearTimeout(delayedHider);
    clearTimeout(nodeFreezer);
  };
  
  
  function editElementHoverOut( tbh ){
    if ( hoveredNodeElement ) {
      if ( graph.ignoreOtherHoverEvents() === true || tbh === true || hoveredNodeElement.editingTextElement === true ) return;
      delayedHider = setTimeout(function (){
        if ( graph.isADraggerActive() === true ) return;
        deleteGroupElement.classed("hidden", true);
        addDataPropertyGroupElement.classed("hidden", true);
        classDragger.hideDragger(true);
        if ( hoveredNodeElement && hoveredNodeElement.pinned() === false && graph.paused() === false ) {
          hoveredNodeElement.frozen(false);
          hoveredNodeElement.locked(false);
        }
        
      }, 1000);
    }
    if ( hoveredPropertyElement ) {
      if ( graph.ignoreOtherHoverEvents() === true || tbh === true || hoveredPropertyElement.editingTextElement === true ) return;
      delayedHider = setTimeout(function (){
        if ( graph.isADraggerActive() === true ) return;
        deleteGroupElement.classed("hidden", true);
        addDataPropertyGroupElement.classed("hidden", true);
        classDragger.hideDragger(true);
        if ( hoveredPropertyElement && hoveredPropertyElement.pinned() === false && graph.paused() === false ) {
          hoveredPropertyElement.frozen(false);
          hoveredPropertyElement.locked(false);
        }
        
      }, 1000);
    }
  }
  
  graph.activateHoverElementsForProperties = function ( val, property, inversed, touchBehaviour ){
    if ( editMode === false ) return; // nothing to do;
    
    if ( touchBehaviour === undefined )
      touchBehaviour = false;
    
    if ( val === true ) {
      clearTimeout(delayedHider);
      if ( hoveredPropertyElement ) {
        if ( hoveredPropertyElement.domain() === hoveredPropertyElement.range() ) {
          hoveredPropertyElement.labelObject().increasedLoopAngle = false;
          recalculatePositions();
        }
      }
      
      hoveredPropertyElement = property;
      if ( graph.options().drawPropertyDraggerOnHover() === true ) {
        
        
        if ( property.type() !== "owl:DatatypeProperty" ) {
          if ( property.domain() === property.range() ) {
            property.labelObject().increasedLoopAngle = true;
            recalculatePositions();
          }
          shadowClone.setParentProperty(property, inversed);
          rangeDragger.setParentProperty(property, inversed);
          rangeDragger.hideDragger(false);
          rangeDragger.addMouseEvents();
          domainDragger.setParentProperty(property, inversed);
          domainDragger.hideDragger(false);
          domainDragger.addMouseEvents();
          
          
        } else if ( property.type() === "owl:DatatypeProperty" ) {
          shadowClone.setParentProperty(property, inversed);
          rangeDragger.setParentProperty(property, inversed);
          rangeDragger.hideDragger(true);
          rangeDragger.addMouseEvents();
          domainDragger.setParentProperty(property, inversed);
          domainDragger.hideDragger(false);
          domainDragger.addMouseEvents();
        }
      }
      else { // hide when we dont want that option
        if ( graph.options().drawPropertyDraggerOnHover() === true ) {
          rangeDragger.hideDragger(true);
          domainDragger.hideDragger(true);
          shadowClone.hideClone(true);
          if ( property.domain() === property.range() ) {
            property.labelObject().increasedLoopAngle = false;
            recalculatePositions();
          }
        }
      }
      
      if ( hoveredNodeElement ) {
        if ( hoveredNodeElement && hoveredNodeElement.pinned() === false && graph.paused() === false ) {
          hoveredNodeElement.frozen(false);
          hoveredNodeElement.locked(false);
        }
      }
      hoveredNodeElement = undefined;
      deleteGroupElement.classed("hidden", false);
      setDeleteHoverElementPositionProperty(property, inversed);
      deleteGroupElement.selectAll("*").on("click", function (){
        if ( touchBehaviour && property.focused() === false ) {
          graph.options().focuserModule().handle(property);
          return;
        }
        graph.removePropertyViaEditor(property);
        d3.event.stopPropagation();
      });
      classDragger.hideDragger(true);
      addDataPropertyGroupElement.classed("hidden", true);
    } else {
      delayedHiddingHoverElements();
    }
  };
  
  graph.updateDraggerElements = function (){
    
    // set opacity style for all elements
    
    rangeDragger.draggerObject.classed("superOpacityElement", !graph.options().showDraggerObject());
    domainDragger.draggerObject.classed("superOpacityElement", !graph.options().showDraggerObject());
    classDragger.draggerObject.classed("superOpacityElement", !graph.options().showDraggerObject());
    
    nodeContainer.selectAll(".superHiddenElement").classed("superOpacityElement", !graph.options().showDraggerObject());
    labelContainer.selectAll(".superHiddenElement").classed("superOpacityElement", !graph.options().showDraggerObject());
    
    deleteGroupElement.selectAll(".superHiddenElement").classed("superOpacityElement", !graph.options().showDraggerObject());
    addDataPropertyGroupElement.selectAll(".superHiddenElement").classed("superOpacityElement", !graph.options().showDraggerObject());
    
    
  };
  
  function setAddDataPropertyHoverElementPosition( node ){
    var delX, delY = 0;
    if ( node.renderType() === "round" ) {
      var scale = 0.5 * Math.sqrt(2.0);
      var oX = scale * node.actualRadius();
      var oY = scale * node.actualRadius();
      delX = node.x - oX;
      delY = node.y + oY;
      addDataPropertyGroupElement.attr("transform", "translate(" + delX + "," + delY + ")");
    }
  }
  
  function setDeleteHoverElementPosition( node ){
    var delX, delY = 0;
    if ( node.renderType() === "round" ) {
      var scale = 0.5 * Math.sqrt(2.0);
      var oX = scale * node.actualRadius();
      var oY = scale * node.actualRadius();
      delX = node.x + oX;
      delY = node.y - oY;
    } else {
      delX = node.x + 0.5 * node.width() + 6;
      delY = node.y - 0.5 * node.height() - 6;
    }
    deleteGroupElement.attr("transform", "translate(" + delX + "," + delY + ")");
  }
  
  function setDeleteHoverElementPositionProperty( property, inversed ){
    if ( property && property.labelElement() ) {
      var pos = [property.labelObject().x, property.labelObject().y];
      var widthElement = parseFloat(property.getShapeElement().attr("width"));
      var heightElement = parseFloat(property.getShapeElement().attr("height"));
      var delX = pos[0] + 0.5 * widthElement + 6;
      var delY = pos[1] - 0.5 * heightElement - 6;
      // this is the lower element
      if ( property.labelElement().attr("transform") === "translate(0,15)" )
        delY += 15;
      // this is upper element
      if ( property.labelElement().attr("transform") === "translate(0,-15)" )
        delY -= 15;
      deleteGroupElement.attr("transform", "translate(" + delX + "," + delY + ")");
    } else {
      deleteGroupElement.classed("hidden", true);// hide when there is no property
    }
    
    
  }
  
  graph.activateHoverElements = function ( val, node, touchBehaviour ){
    if ( editMode === false ) {
      return; // nothing to do;
    }
    if ( touchBehaviour === undefined ) touchBehaviour = false;
    if ( val === true ) {
      if ( graph.options().drawPropertyDraggerOnHover() === true ) {
        rangeDragger.hideDragger(true);
        domainDragger.hideDragger(true);
        shadowClone.hideClone(true);
      }
      // make them visible
      clearTimeout(delayedHider);
      clearTimeout(nodeFreezer);
      if ( hoveredNodeElement && node.pinned() === false && graph.paused() === false ) {
        hoveredNodeElement.frozen(false);
        hoveredNodeElement.locked(false);
      }
      hoveredNodeElement = node;
      if ( node && node.frozen() === false && node.pinned() === false ) {
        node.frozen(true);
        node.locked(false);
      }
      if ( hoveredPropertyElement && hoveredPropertyElement.focused() === false ) {
        hoveredPropertyElement.labelObject().increasedLoopAngle = false;
        recalculatePositions();
        // update the loopAngles;
        
      }
      hoveredPropertyElement = undefined;
      deleteGroupElement.classed("hidden", false);
      setDeleteHoverElementPosition(node);
      
      
      deleteGroupElement.selectAll("*").on("click", function (){
        if ( touchBehaviour && node.focused() === false ) {
          graph.options().focuserModule().handle(node);
          return;
        }
        graph.removeNodeViaEditor(node);
        d3.event.stopPropagation();
      })
        .on("mouseover", function (){
          editElementHoverOn(node, touchBehaviour);
        })
        .on("mouseout", function (){
          editElementHoverOut(node, touchBehaviour);
        });
      
      addDataPropertyGroupElement.classed("hidden", true);
      classDragger.nodeElement.on("mouseover", editElementHoverOn)
        .on("mouseout", editElementHoverOut);
      classDragger.draggerObject.on("mouseover", editElementHoverOnHidden)
        .on("mouseout", editElementHoverOutHidden);
      
      // add the dragger element;
      if ( node.renderType() === "round" ) {
        classDragger.svgRoot(draggerLayer);
        classDragger.setParentNode(node);
        classDragger.hideDragger(false);
        addDataPropertyGroupElement.classed("hidden", false);
        setAddDataPropertyHoverElementPosition(node);
        addDataPropertyGroupElement.selectAll("*").on("click", function (){
          if ( touchBehaviour && node.focused() === false ) {
            graph.options().focuserModule().handle(node);
            return;
          }
          graph.createDataTypeProperty(node);
          d3.event.stopPropagation();
        })
          .on("mouseover", function (){
            editElementHoverOn(node, touchBehaviour);
          })
          .on("mouseout", function (){
            editElementHoverOut(node, touchBehaviour);
          });
      } else {
        classDragger.hideDragger(true);
        
      }
      
    } else {
      delayedHiddingHoverElements(node, touchBehaviour);
      
    }
  };
  
  
  return graph;
};