/**
 * ---------------------------------------------------------------------
 *
 * GLPI - Gestionnaire Libre de Parc Informatique
 *
 * http://glpi-project.org
 *
 * @copyright 2015-2024 Teclib' and contributors.
 * @copyright 2003-2014 by the INDEPNET Development Team.
 * @licence   https://www.gnu.org/licenses/gpl-3.0.html
 *
 * ---------------------------------------------------------------------
 *
 * LICENSE
 *
 * This file is part of GLPI.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * ---------------------------------------------------------------------
 */

// Load cytoscape
var cytoscape = window.cytoscape;

// Needed for JS lint validation
/* global _ */
/* global hexToRgb */
/* global contrast */

var GLPIImpact = {

    // Constants to represent nodes and edges
    NODE: 1,
    EDGE: 2,

    // Constants for graph direction (bitmask)
    DEFAULT : 0,   // 0b00
    FORWARD : 1,   // 0b01
    BACKWARD: 2,   // 0b10
    BOTH    : 3,   // 0b11

    // Constants for graph edition mode
    EDITION_DEFAULT     : 1,
    EDITION_ADD_NODE    : 2,
    EDITION_ADD_EDGE    : 3,
    EDITION_DELETE      : 4,
    EDITION_ADD_COMPOUND: 5,
    EDITION_SETTINGS    : 6,

    // Constants for ID separator
    NODE_ID_SEPERATOR: "::",
    EDGE_ID_SEPERATOR: "->",

    // Constants for delta action
    DELTA_ACTION_ADD   : 1,
    DELTA_ACTION_UPDATE: 2,
    DELTA_ACTION_DELETE: 3,

    // Constants for action stack
    ACTION_MOVE                         : 1,
    ACTION_ADD_NODE                     : 2,
    ACTION_ADD_EDGE                     : 3,
    ACTION_ADD_COMPOUND                 : 4,
    ACTION_ADD_GRAPH                    : 5,
    ACTION_EDIT_COMPOUND                : 6,
    ACTION_REMOVE_FROM_COMPOUND         : 7,
    ACTION_DELETE                       : 8,
    ACTION_EDIT_MAX_DEPTH               : 9,
    ACTION_EDIT_IMPACT_VISIBILITY       : 10,
    ACTION_EDIT_DEPENDS_VISIBILITY      : 11,
    ACTION_EDIT_DEPENDS_COLOR           : 12,
    ACTION_EDIT_IMPACT_COLOR            : 13,
    ACTION_EDIT_IMPACT_AND_DEPENDS_COLOR: 14,

    // Constans for depth
    DEFAULT_DEPTH: 5,
    MAX_DEPTH: 10,
    NO_DEPTH_LIMIT: 10000,

    // Store the initial state of the graph
    initialState: null,

    // Store the visibility settings of the different direction of the graph
    directionVisibility: {},

    // Store defaults colors for edge
    defaultColors: {},

    // Store color for egdes
    edgeColors: {},

    // Cytoscape instance
    cy: null,

    // The impact network container
    impactContainer: null,

    // The graph edition mode
    editionMode: null,

    // Start node of the graph (id)
    startNode: null,

    // Maximum depth of the graph (default 5)
    maxDepth: this.DEFAULT_DEPTH,

    // Is the graph readonly ?
    readonly: true,

    // Fullscreen
    fullscreen: false,

    // Used in add assets sidebar
    selectedItemtype: "",
    addAssetPage: 0,

    // Action stack for undo/redo
    undoStack: [],
    redoStack: [],

    // Buffer used when generating positions for unset nodes
    no_positions: [],

    // Register badges hitbox so they can be clicked
    badgesHitboxes: [],

    // Store selectors
    selectors: {
        // Dialogs
        ongoingDialog           : "#ongoing_dialog",
        ongoingDialogBody       : "#ongoing_dialog .modal-body",
        editCompoundDialog      : "#edit_compound_dialog",
        editCompoundDialogSave  : '#edit_compound_save',
        editCompoundDialogCancel: '#edit_compound_cancel',

        // Inputs
        compoundName         : "input[name=compound_name]",
        compoundColor        : "input[name=compound_color]",
        dependsColor         : "input[name=depends_color]",
        impactColor          : "input[name=impact_color]",
        impactAndDependsColor: "input[name=impact_and_depends_color]",
        toggleImpact         : "#toggle_impact",
        toggleDepends        : "#toggle_depends",
        maxDepth             : "#max_depth",
        maxDepthView         : "#max_depth_view",

        // Toolbar
        helpText        : "#help_text",
        save            : "#save_impact",
        addNode         : "#add_node",
        addEdge         : "#add_edge",
        addCompound     : "#add_compound",
        deleteElement   : "#delete_element",
        export          : "#export_graph",
        expandToolbar   : "#expand_toolbar",
        toggleFullscreen: "#toggle_fullscreen",
        impactSettings  : "#impact_settings",
        sideToggle      : ".impact-side-toggle",
        sideToggleIcon  : ".impact-side-toggle i",
        undo            : "#impact_undo",
        redo            : "#impact_redo",

        // Sidebar content
        side                    : ".impact-side",
        sidePanel               : ".impact-side-panel",
        sideAddNode             : ".impact-side-add-node",
        sideSettings            : ".impact-side-settings",
        sideSearch              : ".impact-side-search",
        sideSearchSpinner       : ".impact-side-search-spinner",
        sideSearchNoResults     : ".impact-side-search-no-results",
        sideSearchMore          : ".impact-side-search-more",
        sideSearchResults       : ".impact-side-search-results",
        sideSearchSelectItemtype: ".impact-side-select-itemtype",
        sideSearchFilterItemtype: "#impact-side-filter-itemtypes",
        sideFilterAssets        : "#impact-side-filter-assets",
        sideFilterItem          : ".impact-side-filter-itemtypes-item",

        // Others
        form       : "form[name=form_impact_network]",
        dropPreview: ".impact-drop-preview",
    },

    // Data that needs to be stored/shared between events
    eventData: {
        addEdgeStart       : null,        // Store starting node of a new edge
        tmpEles            : null,        // Temporary collection used when adding an edge
        lastClicktimestamp : null,        // Store last click timestamp
        lastClickTarget    : null,        // Store last click target
        boxSelected        : [],
        grabNodeStart      : null,
        boundingBox        : null,
        showPointerForBadge: false,
        previousCursor     : "default",
        ctrlDown           : false,
        editCompound       : null,        // Compound being edited
    },

    /**
    * Add given action to undo stack and reset redo stack
    * @param {Number} action_code const ACTION_XXXX
    * @param {Object} data        data specific to the action
    */
    addToUndo : function(action_code, data) {
        // Add new item to undo list
        this.undoStack.push({
            code: action_code,
            data: data
        });
        $(this.selectors.undo).removeClass("impact-disabled");

        // Clear redo list
        this.redoStack = [];
        $(this.selectors.redo).addClass("impact-disabled");
    },

    /**
    * Undo last action
    */
    undo: function() {
        // Empty stack, stop here
        if (this.undoStack.length === 0) {
            return;
        }

        var action = this.undoStack.pop();
        var data = action.data;

        // Add action to redo stack
        this.redoStack.push(action);
        $(this.selectors.redo).removeClass("impact-disabled");

        switch (action.code) {
            // Set node to old position
            // Available data: node, oldPosition, newPosition and newParent
            case this.ACTION_MOVE:
                this.cy.filter("node" + this.makeIDSelector(data.node))
                    .position({
                        x: data.oldPosition.x,
                        y: data.oldPosition.y,
                    });

                if (data.newParent !== null) {
                    this.cy.filter("node" + this.makeIDSelector(data.node))
                        .move({parent: null});
                }
                break;

                // Remove node
                // Available data: toAdd
            case this.ACTION_ADD_NODE:
                this.cy.getElementById(data.toAdd.data.id).remove();
                break;

                // Delete edge
                // Available data; id, data
            case this.ACTION_ADD_EDGE:
                this.cy.remove("edge" + this.makeIDSelector(data.id));
                this.updateFlags();
                break;

                // Delete compound
                // Available data: data, children
            case this.ACTION_ADD_COMPOUND:
                data.children.forEach(function(id) {
                    GLPIImpact.cy.filter("node" + GLPIImpact.makeIDSelector(id))
                        .move({parent: null});
                });
                this.cy.remove("node" + this.makeIDSelector(data.data.id));
                this.updateFlags();
                break;

                // Remove the newly added graph
                // Available data: edges, nodes, compounds
            case this.ACTION_ADD_GRAPH:
            // Delete edges
                data.edges.forEach(function(edge) {
                    GLPIImpact.cy.getElementById(edge.id).remove();
                });

                // Delete compounds
                data.compounds.forEach(function(compound) {
                    compound.compoundChildren.forEach(function(nodeId) {
                        GLPIImpact.cy.getElementById(nodeId).move({
                            parent: null
                        });
                    });

                    GLPIImpact.cy.getElementById(compound.compoundData.id).remove();
                });

                // Delete nodes
                data.nodes.forEach(function(node) {
                    GLPIImpact.cy.getElementById(node.nodeData.id).remove();
                });

                this.updateFlags();

                break;

                // Revert edit
                // Available data: id, label, color, oldLabel, oldColor
            case this.ACTION_EDIT_COMPOUND:
                this.cy.filter("node" + this.makeIDSelector(data.id)).data({
                    label: data.oldLabel,
                    color: data.oldColor,
                });
                GLPIImpact.cy.trigger("change");
                break;

                // Re-add node to the compound (and recreate it needed)
                // Available data: nodeData, compoundData, children
            case this.ACTION_REMOVE_FROM_COMPOUND:
                if (data.children.length <= 2) {
                    // Recreate the compound and re-add every nodes
                    this.cy.add({
                        group: "nodes",
                        data: data.compoundData,
                    });

                    data.children.forEach(function(childId) {
                        GLPIImpact.cy.getElementById(childId)
                            .move({parent: data.compoundData.id});
                    });
                } else {
                    // Add the node that was removed
                    this.cy.getElementById(data.nodeData.id)
                        .move({parent: data.compoundData.id});
                }

                break;

                // Re-add given nodes, edges and compounds
                // Available data: nodes, edges, compounds
            case this.ACTION_DELETE:
            // Add nodes
                data.nodes.forEach(function(node) {
                    var newNode = GLPIImpact.cy.add({
                        group: "nodes",
                        data: node.nodeData,
                    });
                    newNode.position(node.nodePosition);
                });

                // Add compound
                data.compounds.forEach(function(compound) {
                    GLPIImpact.cy.add({
                        group: "nodes",
                        data: compound.compoundData,
                    });

                    compound.compoundChildren.forEach(function(nodeId) {
                        GLPIImpact.cy.getElementById(nodeId).move({
                            parent: compound.compoundData.id
                        });
                    });
                });

                // Add edges
                data.edges.forEach(function(edge) {
                    GLPIImpact.cy.add({
                        group: "edges",
                        data: edge,
                    });
                });

                this.updateFlags();

                break;

                // Toggle impact visibility
            case this.ACTION_EDIT_IMPACT_VISIBILITY:
                this.toggleVisibility(this.FORWARD);
                $(GLPIImpact.selectors.toggleImpact).prop(
                    'checked',
                    !$(GLPIImpact.selectors.toggleImpact).prop('checked')
                );
                break;

                // Toggle depends visibility
            case this.ACTION_EDIT_DEPENDS_VISIBILITY:
                this.toggleVisibility(this.BACKWARD);
                $(GLPIImpact.selectors.toggleDepends).prop(
                    'checked',
                    !$(GLPIImpact.selectors.toggleDepends).prop('checked')
                );
                break;

                // Set previous value for "depends" color
                // Available data: oldColor, newColor
            case this.ACTION_EDIT_DEPENDS_COLOR:
                this.setEdgeColors({
                    backward: data.oldColor,
                });
                $(GLPIImpact.selectors.dependsColor).val(
                    GLPIImpact.edgeColors[GLPIImpact.BACKWARD]
                );
                this.updateStyle();
                this.cy.trigger("change");
                break;

                // Set previous value for "impact" color
                // Available data: oldColor, newColor
            case this.ACTION_EDIT_IMPACT_COLOR:
                this.setEdgeColors({
                    forward: data.oldColor,
                });
                $(GLPIImpact.selectors.impactColor).val(
                    GLPIImpact.edgeColors[GLPIImpact.FORWARD]
                );
                this.updateStyle();
                this.cy.trigger("change");
                break;

                // Set previous value for "impact and depends" color
                // Available data: oldColor, newColor
            case this.ACTION_EDIT_IMPACT_AND_DEPENDS_COLOR:
                this.setEdgeColors({
                    both: data.oldColor,
                });
                $(GLPIImpact.selectors.impactAndDependsColor).val(
                    GLPIImpact.edgeColors[GLPIImpact.BOTH]
                );
                this.updateStyle();
                this.cy.trigger("change");
                break;

                // Set previous value for max depth
                // Available data: oldDepth, newDepth
            case this.ACTION_EDIT_MAX_DEPTH:
                this.setDepth(data.oldDepth);
                $(GLPIImpact.selectors.maxDepth).val(data.oldDepth);
                break;
        }

        if (this.undoStack.length === 0) {
            $(this.selectors.undo).addClass("impact-disabled");
        }

    },

    /**
    * Redo last undoed action
    */
    redo: function() {
        // Empty stack, stop here
        if (this.redoStack.length === 0) {
            return;
        }

        var action = this.redoStack.pop();
        var data = action.data;

        // Add action to undo stack
        this.undoStack.push(action);
        $(this.selectors.undo).removeClass("impact-disabled");

        switch (action.code) {
            // Set node to new position
            // Available data: node, oldPosition, newPosition and newParent
            case this.ACTION_MOVE:
                this.cy.filter("node" + this.makeIDSelector(data.node))
                    .position({
                        x: data.newPosition.x,
                        y: data.newPosition.y,
                    });

                if (data.newParent !== null) {
                    this.cy.filter("node" + this.makeIDSelector(data.node))
                        .move({parent: data.newParent});
                }
                break;

                // Add the node again
                // Available data: toAdd
            case this.ACTION_ADD_NODE:
                this.cy.add(data.toAdd);
                break;

                // Add edge
                // Available data; id, data
            case this.ACTION_ADD_EDGE:
                this.cy.add({
                    group: "edges",
                    data: data,
                });
                this.updateFlags();

                break;

                // Add compound and update its children
                // Available data: data, children
            case this.ACTION_ADD_COMPOUND:
                this.cy.add({
                    group: "nodes",
                    data: data.data,
                });
                data.children.forEach(function(id) {
                    GLPIImpact.cy.filter("node" + GLPIImpact.makeIDSelector(id))
                        .move({parent: data.data.id});
                });
                this.updateFlags();

                break;

                // Insert again the graph
                // Available data: edges, nodes, compounds
            case this.ACTION_ADD_GRAPH:
            // Add nodes
                data.nodes.forEach(function(node) {
                    var newNode = GLPIImpact.cy.add({
                        group: "nodes",
                        data: node.nodeData,
                    });
                    newNode.position(node.nodePosition);
                });

                // Add compound
                data.compounds.forEach(function(compound) {
                    GLPIImpact.cy.add({
                        group: "nodes",
                        data: compound.compoundData,
                    });

                    compound.compoundChildren.forEach(function(nodeId) {
                        GLPIImpact.cy.getElementById(nodeId).move({
                            parent: compound.compoundData.id
                        });
                    });
                });

                // Add edges
                data.edges.forEach(function(edge) {
                    GLPIImpact.cy.add({
                        group: "edges",
                        data: edge,
                    });
                });

                this.updateFlags();

                break;

                // Reapply edit
                // Available data : id, label, color, previousLabel, previousColor
            case this.ACTION_EDIT_COMPOUND:
                this.cy.filter("node" + this.makeIDSelector(data.id)).data({
                    label: data.label,
                    color: data.color,
                });
                GLPIImpact.cy.trigger("change");
                break;

                // Remove node from the compound (and delete if needed)
                // Available data: nodeData, compoundData, children
            case this.ACTION_REMOVE_FROM_COMPOUND:
                if (data.children.length <= 2) {
                    // Remove every nodes and delete the compound
                    data.children.forEach(function(childId) {
                        GLPIImpact.cy.getElementById(childId)
                            .move({parent: null});
                    });

                    this.cy.getElementById(data.compoundData.id).remove();
                } else {
                    // Remove only he node that was re-added
                    this.cy.getElementById(data.nodeData.id)
                        .move({parent: null});
                }

                break;

                // Re-delete given nodes, edges and compounds
                // Available data: nodes, edges, compounds
            case this.ACTION_DELETE:
            // Delete edges
                data.edges.forEach(function(edge) {
                    GLPIImpact.cy.getElementById(edge.id).remove();
                });

                // Delete compounds
                data.compounds.forEach(function(compound) {
                    compound.compoundChildren.forEach(function(nodeId) {
                        GLPIImpact.cy.getElementById(nodeId).move({
                            parent: null
                        });
                    });

                    GLPIImpact.cy.getElementById(compound.compoundData.id).remove();
                });

                // Delete nodes
                data.nodes.forEach(function(node) {
                    GLPIImpact.cy.getElementById(node.id).remove();
                });

                this.updateFlags();

                break;

                // Toggle impact visibility
            case this.ACTION_EDIT_IMPACT_VISIBILITY:
                this.toggleVisibility(this.FORWARD);
                $(GLPIImpact.selectors.toggleImpact).prop(
                    'checked',
                    !$(GLPIImpact.selectors.toggleImpact).prop('checked')
                );
                break;

                // Toggle depends visibility
            case this.ACTION_EDIT_DEPENDS_VISIBILITY:
                this.toggleVisibility(this.BACKWARD);
                $(GLPIImpact.selectors.toggleDepends).prop(
                    'checked',
                    !$(GLPIImpact.selectors.toggleDepends).prop('checked')
                );
                break;

                // Set new value for "depends" color
                // Available data: oldColor, newColor
            case this.ACTION_EDIT_DEPENDS_COLOR:
                this.setEdgeColors({
                    backward: data.newColor,
                });
                $(GLPIImpact.selectors.dependsColor).val(
                    GLPIImpact.edgeColors[GLPIImpact.BACKWARD]
                );
                this.updateStyle();
                this.cy.trigger("change");
                break;

                // Set new value for "impact" color
                // Available data: oldColor, newColor
            case this.ACTION_EDIT_IMPACT_COLOR:
                this.setEdgeColors({
                    forward: data.newColor,
                });
                $(GLPIImpact.selectors.forwardColor).val(
                    "set",
                    GLPIImpact.edgeColors[GLPIImpact.FORWARD]
                );
                this.updateStyle();
                this.cy.trigger("change");
                break;

                // Set new value for "impact and depends" color
                // Available data: oldColor, newColor
            case this.ACTION_EDIT_IMPACT_AND_DEPENDS_COLOR:
                this.setEdgeColors({
                    both: data.newColor,
                });
                $(GLPIImpact.selectors.impactAndDependsColor).val(
                    GLPIImpact.edgeColors[GLPIImpact.BOTH]
                );
                this.updateStyle();
                this.cy.trigger("change");
                break;

                // Set new value for max depth
                // Available data: oldDepth, newDepth
            case this.ACTION_EDIT_MAX_DEPTH:
                this.setDepth(data.newDepth);
                $(GLPIImpact.selectors.maxDepth).val(data.newDepth);
                break;
        }

        if (this.redoStack.length === 0) {
            $(this.selectors.redo).addClass("impact-disabled");
        }
    },

    /**
    * Selector for nodes to hide according to depth and flag settings
    */
    getHiddenSelector: function() {
        var depthSelector = '[depth > ' + this.maxDepth + '][depth !> ' + Number.MAX_SAFE_INTEGER + ']';
        var flagSelector;

        // We have to compute the flags ourselves as bit comparison operators are
        // not supported by cytoscape selectors
        var forward = this.directionVisibility[this.FORWARD];
        var backward = this.directionVisibility[this.BACKWARD];

        if (forward && backward) {
            // Hide nothing
            flagSelector = "[flag = -1]";
        } else if (forward && !backward) {
            // Hide backward
            flagSelector = "[flag = " + this.BACKWARD + "]";
        } else if (!forward && backward) {
            // Hide forward
            flagSelector = "[flag = " + this.FORWARD + "]";
        } else {
            // Hide all but start node and not connected nodes
            flagSelector = '[flag != 0]';
        }

        return flagSelector + ', ' + depthSelector;
    },

    /**
    * Get network style
    *
    * @returns {Array}
    */
    getNetworkStyle: function() {
        let body_text_color = $(document.body).css("--tblr-body-color");
        // If body color is somehow invalid, default to black
        if (!body_text_color || body_text_color === "") {
            body_text_color = "#000000";
        }
        return [
            {
                selector: 'core',
                style: {
                    'selection-box-opacity'     : '0.2',
                    'selection-box-border-width': '0',
                    'selection-box-color'       : '#24acdf'
                }
            },
            {
                selector: 'node',
                style: {
                    color: body_text_color
                }
            },
            {
                selector: 'node:parent',
                style: {
                    'padding'           : '30px',
                    'shape'             : 'roundrectangle',
                    'border-width'      : '1px',
                    'background-opacity': '0.5',
                    'font-size'         : '1.1em',
                    'background-color'  : '#d2d2d2',
                    'text-margin-y'     : '20px',
                    'text-opacity'      : 0.7,
                }
            },
            {
                selector: 'node:parent[label]',
                style: {
                    'label': 'data(label)',
                }
            },
            {
                selector: 'node:parent[color]',
                style: {
                    'border-color'      : 'data(color)',
                    'background-color'  : 'data(color)',
                }
            },
            {
                selector: 'node[image]',
                style: {
                    'label'             : 'data(label)',
                    'shape'             : 'rectangle',
                    'background-color'  : '#666',
                    'background-image'  : 'data(image)',
                    'background-fit'    : 'contain',
                    'background-opacity': '0',
                    'font-size'         : '1em',
                    'text-opacity'      : 0.7,
                    'overlay-opacity'   : 0.01,
                    'overlay-color'     : "white",
                }
            },
            {
                selector: 'node[highlight=1]',
                style: {
                    'font-weight': 'bold',
                }
            },
            {
                selector: ':selected',
                style: {
                    'overlay-opacity': 0.2,
                    'overlay-color'  : "gray",
                }
            },
            {
                selector: '[todelete=1]:selected',
                style: {
                    'overlay-opacity': 0.2,
                    'overlay-color': 'red',
                }
            },
            {
                selector: GLPIImpact.getHiddenSelector(),
                style: {
                    'display': 'none',
                }
            },
            {
                selector: '[id="tmp_node"]',
                style: {
                    // Use opacity instead of display none here as this will make
                    // the edges connected to this node still visible
                    'opacity': 0,
                }
            },
            {
                selector: 'edge',
                style: {
                    'width'                    : 1,
                    'line-color'               : this.edgeColors[0],
                    'target-arrow-color'       : this.edgeColors[0],
                    'target-arrow-shape'       : 'triangle',
                    'arrow-scale'              : 0.7,
                    'curve-style'              : 'bezier',
                    'source-endpoint'          : 'outside-to-node-or-label',
                    'target-endpoint'          : 'outside-to-node-or-label',
                    'source-distance-from-node': '2px',
                    'target-distance-from-node': '2px',
                }
            },
            {
                selector: 'edge[target="tmp_node"]',
                style: {
                    // We want the arrow to go exactly where the cursor of the user
                    // is on the graph, no padding.
                    'source-endpoint'          : 'inside-to-node',
                    'target-endpoint'          : 'inside-to-node',
                    'source-distance-from-node': '0px',
                    'target-distance-from-node': '0px',
                }
            },
            {
                selector: '[flag=' + GLPIImpact.FORWARD + ']',
                style: {
                    'line-color'        : this.edgeColors[GLPIImpact.FORWARD],
                    'target-arrow-color': this.edgeColors[GLPIImpact.FORWARD],
                }
            },
            {
                selector: '[flag=' + GLPIImpact.BACKWARD + ']',
                style: {
                    'line-color'        : this.edgeColors[GLPIImpact.BACKWARD],
                    'target-arrow-color': this.edgeColors[GLPIImpact.BACKWARD],
                }
            },
            {
                selector: '[flag=' + GLPIImpact.BOTH + ']',
                style: {
                    'line-color'        : this.edgeColors[GLPIImpact.BOTH],
                    'target-arrow-color': this.edgeColors[GLPIImpact.BOTH],
                }
            }
        ];
    },

    /**
    * Get network layout
    *
    * @returns {Object}
    */
    getPresetLayout: function (positions) {
        this.no_positions = [];

        return {
            name: 'preset',
            positions: function(node) {
                var x = 0;
                var y = 0;

                if (!node.isParent() && positions[node.data('id')] !== undefined) {
                    x = parseFloat(positions[node.data('id')].x);
                    y = parseFloat(positions[node.data('id')].y);
                }

                return {
                    x: x,
                    y: y,
                };
            }
        };
    },

    /**
    * Generate postion for nodes that are not saved in the current context
    *
    * Firstly, order the positionless nodes in a way that the one that depends
    * on others positionless nodes are placed after their respective
    * dependencies
    *
    * Secondly, try to place each nodes on the graph:
    *    1) take a random non positionless neighbor of our node
    *    2) Find the closest node to this neighbor, save the distance (if this
    *    neighbor has no neighbor of its own use a set value for the distance)
    *    3) Try to place the node at the left or the right of the neighbor (
    *    depending on the edge direction, we want the graph to flow from left
    *    to right) at the saved position.
    *    4) If the position is not avaible, try at various angles bewteen -75°
    *    and 75°
    *    5) If the position is still not available, increase the distance and
    *    try again until a valid position is found
    */
    generateMissingPositions: function() {
        // Safety check, should not happen
        if (this.cy.filter("node:childless").length == this.no_positions.length) {
            // Set a random node as valid
            this.no_positions.pop();
        }

        // Keep tracks of the id of all the no yet placed nodes
        var not_placed = [];
        this.no_positions.forEach(function(node){
            not_placed.push(node.data('id'));
        });

        // First we need to order no_positions in a way that the ones that depend
        // on the positions of other nodes with no position are used last
        var clean_order = [];
        var np_valid = [];
        while (this.no_positions.length !== 0) {
            this.no_positions.forEach(function(node, index) {
            // Check that any neibhor is either valid (no in not placed) or has
            // just been validated (in np_valid)

                var valid = false;
                node.neighborhood().forEach(function(ele) {
                    if (valid) {
                        return;
                    }

                    // We don't need edges
                    if (!ele.isNode()) {
                        return;
                    }

                    if (not_placed.indexOf(ele.data('id')) === -1
                  || np_valid.indexOf(ele.data('id')) !== -1) {
                        valid = true;
                    }
                });

                if (valid) {
                    // Add to the list of validated nodes, set order and remove it
                    // from buffer
                    np_valid.push(node.data('id'));
                    clean_order.push(node);
                    // not_placed.splice(index, 1);
                    GLPIImpact.no_positions.splice(index, 1);
                }
            });
        }

        this.no_positions = clean_order;

        // Generate positions for nodes which lake them
        this.no_positions.forEach(function(node){
            // Find random neighbor with a valid position
            var neighbor = null;
            node.neighborhood().forEach(function(ele) {
            // We already found a valid neighor, skip until the end
                if (neighbor !== null) {
                    return;
                }

                if (!ele.isNode()) {
                    return;
                }

                // Ignore our starting node
                if (ele.data('id') == node.data('id')) {
                    return;
                }

                // Ignore node with no positions not yet placed
                if (not_placed.indexOf(ele.data('id')) !== -1) {
                    return;
                }

                // Valid neighor, let's pick it
                neighbor = ele;
            });

            // Should not happen if no_positions is correctly sorted
            if (neighbor === null) {
                return;
            }

            // We now need to find the closest node to the neighor
            var closest = null;
            var distance = Number.MAX_SAFE_INTEGER;
            neighbor.neighborhood().forEach(function(ele){
                if (!ele.isNode()) {
                    return;
                }

                var ele_distance = GLPIImpact.getDistance(neighbor.position(), ele.position());
                if (ele_distance < distance) {
                    distance = ele_distance;
                    closest = ele;
                }
            });

            // If our neighbor node has no neighors himself, use a set distance
            if (closest === null) {
                distance = 100;
            }

            // Find the edge between our node and the chosen neighbor
            var edge = node.edgesTo(neighbor)[0];
            if (edge == undefined) {
                edge = neighbor.edgesTo(node)[0];
            }

            // Set direction factor according to the edge direction (are we the
            // source or the target of this edge ?). This factor will be used to
            // know if the node must be placed before or after the neighbor
            var direction_factor;
            if (edge.data('target') == node.data('id')) {
                direction_factor = 1;
            } else {
                direction_factor = -1;
            }

            // Keep trying to place the node until we succeed$
            var success = false;
            while(!success) {
                var angle = 0;
                var angle_mirror = false;

                // Try all possible angles bewteen -75° and 75°
                while (angle !== -75) {
                    // Calculate the position
                    var position = {
                        x: direction_factor * (distance * Math.cos(angle * (Math.PI / 180))) + (neighbor.position().x),
                        y: distance * Math.sin(angle * (Math.PI / 180)) + neighbor.position().y,
                    };

                    // Check if position is available
                    var available = true;
                    GLPIImpact.cy.filter().forEach(function(ele){
                        var bdb = ele.boundingBox();
                        // var bdb = ele.renderedBoundingBox();

                        if ((bdb.x1 - 20) < position.x && (bdb.x2 + 20) > position.x
                     && (bdb.y1 - 20) < position.y && (bdb.y2 + 20) > position.y) {
                            available = false;
                        }
                    });

                    // Success, set the node position and go to the next one
                    if (available) {
                        node.position(position);
                        var np_index = not_placed.indexOf(node.data('id'));
                        not_placed.splice(np_index, 1);
                        success = true;
                        break;
                    }

                    if (!angle_mirror && angle !== 0) {
                        // We tried X°, lets try the "mirror angle" -X°]
                        angle = angle * -1;
                        angle_mirror = true;
                    } else {
                        // Add 15° and return to positive number
                        if (angle < 0) {
                            angle = 0 - angle;
                            angle_mirror = false;
                        }

                        angle += 15;
                    }
                }

                // Increase distance and try again
                distance += 30;
            }
        });

        // Reset buffer
        this.no_positions = [];
    },

    /**
    * Get network layout
    *
    * @returns {Object}
    */
    getDagreLayout: function () {
        return {
            name: 'dagre',
            rankDir: 'LR',
            fit: false
        };
    },

    /**
    * Get the current state of the graph
    *
    * @returns {Object}
    */
    getCurrentState: function() {
        var data = {edges: {}, compounds: {}, items: {}};

        // Load edges
        GLPIImpact.cy.edges().forEach(function(edge) {
            data.edges[edge.data('id')] = {
                source: edge.data('source'),
                target: edge.data('target'),
            };
        });

        // Load compounds
        GLPIImpact.cy.filter("node:parent").forEach(function(compound) {
            data.compounds[compound.data('id')] = {
                name: compound.data('label'),
                color: compound.data('color'),
            };
        });

        // Load items
        GLPIImpact.cy.filter("node:childless").forEach(function(node) {
            data.items[node.data('id')] = {
                impactitem_id: node.data('impactitem_id'),
                parent       : node.data('parent'),
                position     : node.position()
            };
        });

        return data;
    },

    /**
    * Delta computation for edges
    *
    * @returns {Object}
    */
    computeEdgeDelta: function(currentEdges) {
        var edgesDelta = {};

        // First iterate on the edges we had in the initial state
        Object.keys(GLPIImpact.initialState.edges).forEach(function(edgeID) {
            var edge = GLPIImpact.initialState.edges[edgeID];
            if (Object.prototype.hasOwnProperty.call(currentEdges, edgeID)) {
            // If the edge is still here in the current state, nothing happened
            // Remove it from the currentEdges data so we can skip it later
                delete currentEdges[edgeID];
            } else {
            // If the edge is missing in the current state, it has been deleted
                var source = edge.source.split(GLPIImpact.NODE_ID_SEPERATOR);
                var target = edge.target.split(GLPIImpact.NODE_ID_SEPERATOR);
                edgesDelta[edgeID] = {
                    action           : GLPIImpact.DELTA_ACTION_DELETE,
                    itemtype_source  : source[0],
                    items_id_source  : source[1],
                    itemtype_impacted: target[0],
                    items_id_impacted: target[1]
                };
            }
        });

        // Now iterate on the edges we have in the current state
        // Since we removed the edges that were not modified in the previous step,
        // the remaining edges can only be new ones
        Object.keys(currentEdges).forEach(function (edgeID) {
            var edge = currentEdges[edgeID];
            var source = edge.source.split(GLPIImpact.NODE_ID_SEPERATOR);
            var target = edge.target.split(GLPIImpact.NODE_ID_SEPERATOR);
            edgesDelta[edgeID] = {
                action           : GLPIImpact.DELTA_ACTION_ADD,
                itemtype_source  : source[0],
                items_id_source  : source[1],
                itemtype_impacted: target[0],
                items_id_impacted: target[1]
            };
        });

        return edgesDelta;
    },

    /**
    * Delta computation for compounds
    *
    * @returns {Object}
    */
    computeCompoundsDelta: function(currentCompounds) {
        var compoundsDelta = {};

        // First iterate on the compounds we had in the initial state
        Object.keys(GLPIImpact.initialState.compounds).forEach(function(compoundID) {
            var compound = GLPIImpact.initialState.compounds[compoundID];
            if (Object.prototype.hasOwnProperty.call(currentCompounds, compoundID)) {
            // If the compound is still here in the current state
                var currentCompound = currentCompounds[compoundID];

                // Check for updates ...
                if (compound.name != currentCompound.name
               || compound.color != currentCompound.color) {
                    compoundsDelta[compoundID] = {
                        action: GLPIImpact.DELTA_ACTION_UPDATE,
                        name  : currentCompound.name,
                        color : currentCompound.color
                    };
                }

                // Remove it from the currentCompounds data
                delete currentCompounds[compoundID];
            } else {
            // If the compound is missing in the current state, it's been deleted
                compoundsDelta[compoundID] = {
                    action           : GLPIImpact.DELTA_ACTION_DELETE,
                };
            }
        });

        // Now iterate on the compounds we have in the current state
        Object.keys(currentCompounds).forEach(function (compoundID) {
            compoundsDelta[compoundID] = {
                action: GLPIImpact.DELTA_ACTION_ADD,
                name  : currentCompounds[compoundID].name,
                color : currentCompounds[compoundID].color
            };
        });

        return compoundsDelta;
    },

    /**
    * Delta computation for parents
    *
    * @returns {Object}
    */
    computeContext: function(currentNodes) {
        var positions = {};

        Object.keys(currentNodes).forEach(function (nodeID) {
            var node = currentNodes[nodeID];
            positions[nodeID] = {
                x: node.position.x,
                y: node.position.y
            };
        });

        return {
            node_id                 : this.startNode,
            positions               : JSON.stringify(positions),
            zoom                    : GLPIImpact.cy.zoom(),
            pan_x                   : GLPIImpact.cy.pan().x,
            pan_y                   : GLPIImpact.cy.pan().y,
            impact_color            : GLPIImpact.edgeColors[GLPIImpact.FORWARD],
            depends_color           : GLPIImpact.edgeColors[GLPIImpact.BACKWARD],
            impact_and_depends_color: GLPIImpact.edgeColors[GLPIImpact.BOTH],
            show_depends            : GLPIImpact.directionVisibility[GLPIImpact.BACKWARD],
            show_impact             : GLPIImpact.directionVisibility[GLPIImpact.FORWARD],
            max_depth               : GLPIImpact.maxDepth,
        };
    },

    /**
    * Delta computation for parents
    *
    * @returns {Object}
    */
    computeItemsDelta: function(currentNodes) {
        var itemsDelta = {};

        // Now iterate on the parents we have in the current state
        Object.keys(currentNodes).forEach(function (nodeID) {
            var node = currentNodes[nodeID];
            itemsDelta[node.impactitem_id] = {
                action   : GLPIImpact.DELTA_ACTION_UPDATE,
                parent_id: node.parent,
            };

            // Set parent to 0 if null
            if (node.parent == undefined) {
                node.parent = 0;
            }

            // Store parent
            itemsDelta[node.impactitem_id] = {
                action    : GLPIImpact.DELTA_ACTION_UPDATE,
                parent_id : node.parent,
            };
        });

        return itemsDelta;
    },

    /**
    * Compute the delta betwteen the initial state and the current state
    *
    * @returns {Object}
    */
    computeDelta: function () {
        // Store the delta for edges, compounds and parent
        var result = {};

        // Get the current state of the graph
        var currentState = this.getCurrentState();

        // Compute each deltas
        result.edges = this.computeEdgeDelta(currentState.edges);
        result.compounds = this.computeCompoundsDelta(currentState.compounds);
        result.items = this.computeItemsDelta(currentState.items);
        result.context = this.computeContext(currentState.items);

        return result;
    },

    /**
    * Get the context menu items
    *
    * @returns {Array}
    */
    getContextMenuItems: function(){
        return [
            {
                id             : 'goTo',
                content        : '<i class="fas fa-link me-2"></i>' + __("Go to"),
                tooltipText    : _.unescape(__("Open this element in a new tab")),
                selector       : 'node[link]',
                onClickFunction: this.menuOnGoTo
            },
            {
                id             : 'showOngoing',
                content        : '<i class="fas fa-list me-2"></i>' + __("Show ongoing tickets"),
                tooltipText    : _.unescape(__("Show ongoing tickets for this item")),
                selector       : 'node[hasITILObjects=1]',
                onClickFunction: this.menuOnShowOngoing
            },
            {
                id             : 'editCompound',
                content        : '<i class="fas fa-edit me-2"></i>' + __("Group properties..."),
                tooltipText    : _.unescape(__("Set name and/or color for this group")),
                selector       : 'node:parent',
                onClickFunction: this.menuOnEditCompound,
                show           : !this.readonly,
            },
            {
                id             : 'removeFromCompound',
                content        : '<i class="fas fa-external-link-alt me-2"></i>' + __("Remove from group"),
                tooltipText    : _.unescape(__("Remove this asset from the group")),
                selector       : 'node:child',
                onClickFunction: this.menuOnRemoveFromCompound,
                show           : !this.readonly,
            },
            {
                id             : 'delete',
                content        : '<i class="fas fa-trash me-2"></i>' + __("Delete"),
                tooltipText    : _.unescape(__("Delete element")),
                selector       : 'node, edge',
                onClickFunction: this.menuOnDelete,
                show           : !this.readonly,
            },
        ];
    },

    addNode: function(itemID, itemType, position) {
        // Build a new graph from the selected node and insert it
        var node = {
            itemtype: itemType,
            items_id: itemID
        };
        var nodeID = GLPIImpact.makeID(GLPIImpact.NODE, node.itemtype, node.items_id);

        // Check if the node is already on the graph
        if (GLPIImpact.cy.filter('node[id="' + nodeID + '"]').length > 0) {
            alert(__('This asset already exists.'));
            return;
        }

        // Build the new subgraph
        $.when(GLPIImpact.buildGraphFromNode(node))
            .done(
                function (graph, params) {
                    // Insert the new graph data into the current graph
                    GLPIImpact.insertGraph(graph, params, {
                        id: nodeID,
                        x: position.x,
                        y: position.y
                    });
                    GLPIImpact.updateFlags();
                }
            ).fail(
                function () {
                    // Ajax failed
                    alert(__("Unexpected error."));
                }
            );
    },

    /**
    * Show the add node dialog
    */
    showOngoingDialog: function(ITILObjects) {
        $(GLPIImpact.selectors.ongoingDialogBody).html(
            GLPIImpact.buildOngoingDialogContent(ITILObjects)
        );
        $(GLPIImpact.selectors.ongoingDialog).modal('show');
    },

    /**
    * Set up event handlers for the edit compound dialog
    */
    prepareEditCompoundDialog: function() {
        $(this.selectors.editCompoundDialogSave).on('click', function() {
            var compound = GLPIImpact.eventData.editCompound.target;

            // Save compound name
            compound.data(
                'label',
                $(GLPIImpact.selectors.compoundName).val()
            );

            // Save compound color
            compound.data(
                'color',
                $(GLPIImpact.selectors.compoundColor).val()
            );

            // Close dialog
            $(GLPIImpact.selectors.editCompoundDialog).modal('hide');
            GLPIImpact.cy.trigger("change");

            // Log for undo
            if (GLPIImpact.eventData.newCompound == null) {
                var previousLabel = GLPIImpact.eventData.editCompound.previousLabel;
                var previousColor = GLPIImpact.eventData.editCompound.previousColor;

                GLPIImpact.addToUndo(GLPIImpact.ACTION_EDIT_COMPOUND, {
                    id      : compound.data('id'),
                    label   : compound.data('label'),
                    color   : compound.data('color'),
                    oldLabel: previousLabel,
                    oldColor: previousColor,
                });
            } else {
                var label = $(GLPIImpact.selectors.compoundName).val();
                var color = $(GLPIImpact.selectors.compoundColor).val();

                GLPIImpact.eventData.newCompound.data.label = label;
                GLPIImpact.eventData.newCompound.data.color = color;

                GLPIImpact.addToUndo(
                    GLPIImpact.ACTION_ADD_COMPOUND,
                    _.cloneDeep(GLPIImpact.eventData.newCompound)
                );

                GLPIImpact.eventData.newCompound = null;
            }
        });
    },

    /**
    * Show the edit compound dialog
    *
    * @param {Object} compound label, color
    */
    showEditCompoundDialog: function(compound) {
        var previousLabel = compound.data('label');
        var previousColor = compound.data('color');

        // Reset inputs
        $(GLPIImpact.selectors.compoundName).val(previousLabel);
        $(GLPIImpact.selectors.compoundColor).val(previousColor);

        // Set global event data
        this.eventData.editCompound = {
            target: compound,
            previousLabel: previousLabel,
            previousColor: previousColor,
        };

        // Show modal
        $(GLPIImpact.selectors.editCompoundDialog).modal('show');
    },

    /**
    * Initialise variables
    *
    * @param {JQuery} impactContainer
    * @param {Object} colors properties: default, forward, backward, both
    * @param {string} startNode
    */
    prepareNetwork: function(
        impactContainer,
        colors,
        startNode
    ) {
        // Set container
        this.impactContainer = impactContainer;

        // Init directionVisibility
        this.directionVisibility[GLPIImpact.FORWARD] = true;
        this.directionVisibility[GLPIImpact.BACKWARD] = true;

        // Set colors for edges
        this.defaultColors = colors;
        this.setEdgeColors(colors);

        // Set start node
        this.startNode = startNode;

        // Init dialogs actions handlers
        this.prepareEditCompoundDialog();

        this.initToolbar();
    },

    /**
    * Build the network graph
    *
    * @param {string} data (json)
    */
    buildNetwork: function(data, params, readonly) {
        var layout;

        // Init workspace status
        GLPIImpact.showDefaultWorkspaceStatus();

        // Load params - phase1 (before cytoscape creation)
        if (params.impactcontexts_id !== undefined && params.impactcontexts_id !== 0) {
            // Apply custom colors if defined
            this.setEdgeColors({
                forward : params.impact_color,
                backward: params.depends_color,
                both    : params.impact_and_depends_color,
            });

            // Apply max depth
            this.maxDepth = params.max_depth;

            // Preset layout based on node positions
            layout = this.getPresetLayout(JSON.parse(params.positions));
        } else {
            // Default params if no context was found
            this.setEdgeColors(this.defaultColors);
            this.maxDepth = this.DEFAULT_DEPTH;

            // Procedural layout
            layout = this.getDagreLayout();
        }

        // Init cytoscape
        this.cy = cytoscape({
            container: this.impactContainer,
            elements : data,
            style    : this.getNetworkStyle(),
            layout   : layout,
            wheelSensitivity: 0.25,
        });

        // If we used the preset layout, some nodes might lack positions
        this.generateMissingPositions();

        this.cy.minZoom(0.5);

        // Store initial data
        this.initialState = this.getCurrentState();

        // Enable editing if not readonly
        if (!readonly) {
            this.enableGraphEdition();
        }

        // Highlight starting node
        this.cy.filter("node[start]").data({
            highlight: 1,
            start_node: 1,
        });

        // Enable context menu
        this.cy.contextMenus({
            menuItems: this.getContextMenuItems(),
            menuItemClasses: [],
            contextMenuClasses: []
        });

        // Enable grid
        this.cy.gridGuide({
            gridStackOrder: 0,
            snapToGridOnRelease: false,
            snapToGridDuringDrag: true,
            gridSpacing: 12,
            drawGrid: true,
            panGrid: true,
            gridColor: getComputedStyle(document.documentElement).getPropertyValue('--card-border-color'),
        });

        // Disable box selection as we don't need it
        this.cy.boxSelectionEnabled(false);

        // Load params - phase 2 (after cytoscape creation)
        if (params.impactcontexts_id !== undefined && params.impactcontexts_id !== 0) {
            // Apply saved visibility
            if (!parseInt(params.show_depends)) {
                $(GLPIImpact.selectors.toggleImpact).prop("checked", false);
            }
            if (!parseInt(params.show_impact)) {
                $(GLPIImpact.selectors.toggleDepends).prop("checked", false);
            }
            this.updateFlags();

            // Set viewport
            if (params.zoom != '0') {
            // If viewport params are set, apply them
                this.cy.viewport({
                    zoom: parseFloat(params.zoom),
                    pan: {
                        x: parseFloat(params.pan_x),
                        y: parseFloat(params.pan_y),
                    }
                });

                // Check viewport is not empty or contains only one item
                var viewport = GLPIImpact.cy.extent();
                var empty = true;
                GLPIImpact.cy.nodes().forEach(function(node) {
                    if (node.position().x > viewport.x1
                  && node.position().x < viewport.x2
                  && node.position().y > viewport.x1
                  && node.position().y < viewport.x2
                    ){
                        empty = false;
                    }
                });

                if (empty || GLPIImpact.cy.filter("node:childless").length == 1) {
                    this.cy.fit();

                    if (this.cy.zoom() > 2.3) {
                        this.cy.zoom(2.3);
                        this.cy.center();
                    }
                }
            } else {
            // Else fit the graph and reduce zoom if needed
                this.cy.fit();

                if (this.cy.zoom() > 2.3) {
                    this.cy.zoom(2.3);
                    this.cy.center();
                }
            }
        } else {
            // Default params if no context was found
            this.cy.fit();

            if (this.cy.zoom() > 2.3) {
                this.cy.zoom(2.3);
                this.cy.center();
            }
        }

        // Register events handlers for cytoscape object
        this.cy.on('mousedown', 'node', this.nodeOnMousedown);
        this.cy.on('mouseup', this.onMouseUp);
        this.cy.on('mousemove', this.onMousemove);
        this.cy.on('mouseover', this.onMouseover);
        this.cy.on('mouseout', this.onMouseout);
        this.cy.on('click', this.onClick);
        this.cy.on('click', 'edge', this.edgeOnClick);
        this.cy.on('click', 'node', this.nodeOnClick);
        this.cy.on('box', this.onBox);
        this.cy.on('drag add remove change', this.onChange);
        this.cy.on('doubleClick', this.onDoubleClick);
        this.cy.on('remove', this.onRemove);
        this.cy.on('grabon', this.onGrabOn);
        this.cy.on('freeon', this.onFreeOn);
        this.initCanvasOverlay();

        // Global events
        $(document).keydown(this.onKeyDown);
        $(document).keyup(this.onKeyUp);

        // Enter EDITION_DEFAULT mode
        this.setEditionMode(GLPIImpact.EDITION_DEFAULT);

        // Init depth value
        var text = GLPIImpact.maxDepth;
        if (GLPIImpact.maxDepth >= GLPIImpact.MAX_DEPTH) {
            text = "infinity";
        }
        $(GLPIImpact.selectors.maxDepthView).html(text);
        $(GLPIImpact.selectors.maxDepth).val(GLPIImpact.maxDepth);

        // Set color widgets default values
        $(GLPIImpact.selectors.dependsColor).val(
            GLPIImpact.edgeColors[GLPIImpact.BACKWARD]
        );
        $(GLPIImpact.selectors.impactColor).val(
            GLPIImpact.edgeColors[GLPIImpact.FORWARD]
        );
        $(GLPIImpact.selectors.impactAndDependsColor).val(
            GLPIImpact.edgeColors[GLPIImpact.BOTH]
        );
    },

    /**
    * Set readonly and show toolbar
    */
    enableGraphEdition: function() {
        // Show toolbar
        $(this.selectors.save).show();
        $(this.selectors.addNode).show();
        $(this.selectors.addEdge).show();
        $(this.selectors.addCompound).show();
        $(this.selectors.deleteElement).show();
        $(this.selectors.impactSettings).show();
        $(this.selectors.sideToggle).show();

        // Keep track of readonly so that events handler can update their behavior
        this.readonly = false;
    },

    /**
    * Create ID for nodes and egdes
    *
    * @param {number} type (NODE or EDGE)
    * @param {string} a
    * @param {string} b
    *
    * @returns {string|null}
    */
    makeID: function(type, a, b) {
        switch (type) {
            case GLPIImpact.NODE:
                return a + "::" + b;
            case GLPIImpact.EDGE:
                return a + "->" + b;
        }

        return null;
    },

    /**
    * Helper to make an ID selector
    * We can't use the short syntax "#id" because our ids contains
    * non-alpha-numeric characters
    *
    * @param {string} id
    *
    * @returns {string}
    */
    makeIDSelector: function(id) {
        return "[id='" + id + "']";
    },

    /**
    * Reload the graph style
    */
    updateStyle: function() {
        this.cy.style(this.getNetworkStyle());
        // If either the source of the target node of an edge is hidden, hide the
        // edge too by setting it's dept to the maximum value
        this.cy.edges().forEach(function(edge) {
            var source = GLPIImpact.cy.filter(GLPIImpact.makeIDSelector(edge.data('source')));
            var target = GLPIImpact.cy.filter(GLPIImpact.makeIDSelector(edge.data('target')));
            if (source.visible() && target.visible()) {
                edge.data('depth', 0);
            } else {
                edge.data('depth', Number.MAX_VALUE);
            }
        });
    },

    /**
    * Compute flags and depth for each nodes
    */
    updateFlags: function() {
        /**
       * Assuming A is our starting node and B is a random node on the graph,
       * the depth of B is the shortest distance between AB and BA.
       */

        // Init flag to GLPIImpact.DEFAULT for all elements of the graph
        this.cy.elements().forEach(function(ele) {
            ele.data('flag', GLPIImpact.DEFAULT);
        });

        // First, calculate AB: Apply dijkstra on A and get distances for each
        // nodes
        var startNodeDijkstra = this.cy.elements().dijkstra(
            this.makeIDSelector(this.startNode),
            function() { return 1; }, // Same weight for each path
            true                      // Do not ignore edge directions
        );

        this.cy.$("node:childless").forEach(function(node) {
            var distanceAB = startNodeDijkstra.distanceTo(node);
            node.data('depth', distanceAB);

            // Set node as part of the "Forward" graph
            if (distanceAB !== Infinity) {
                node.data('flag', node.data('flag') | GLPIImpact.FORWARD);
            }
        });

        // Now, calculate BA: apply dijkstra on each nodes of the graph and
        // get the distance to A
        this.cy.$("node:childless").forEach(function(node) {
            // Skip A
            if (node.data('id') == GLPIImpact.startNode) {
                return;
            }

            var otherNodeDijkstra = GLPIImpact.cy.elements().dijkstra(
                node,
                function() { return 1; }, // Same weight for each path
                true                      // Do not ignore edge directions
            );

            var distanceBA = otherNodeDijkstra.distanceTo(
                GLPIImpact.makeIDSelector(GLPIImpact.startNode)
            );

            // If distance BA is shorter than distance AB, use it instead
            if (node.data('depth') > distanceBA) {
                node.data('depth', distanceBA);
            }

            // Set node as part of the "Backward" graph
            if (distanceBA !== Infinity) {
                node.data('flag', node.data('flag') | GLPIImpact.BACKWARD);
            }
        });

        // Set start node to this.BOTH so it doen't impact the computation of it's neighbors
        GLPIImpact.cy.$(GLPIImpact.makeIDSelector(GLPIImpact.startNode)).data(
            'flag',
            this.BOTH
        );

        // Handle compounds nodes, their depth should be the lowest depth amongst
        // their children
        this.cy.filter("node:parent").forEach(function(compound) {
            var lowestDepth = Infinity;
            var flag = GLPIImpact.DEFAULT;

            compound.children().forEach(function(childNode) {
                var childNodeDepth = childNode.data('depth');
                if (childNodeDepth < lowestDepth) {
                    lowestDepth = childNodeDepth;
                }

                flag = flag | childNode.data('flag');
            });

            compound.data('depth', lowestDepth);
            compound.data('flag', flag);
        });

        // Apply flag to edges so they can get the right colors
        this.cy.edges().forEach(function(edge) {
            var source = GLPIImpact.cy.$(GLPIImpact.makeIDSelector(edge.data('source')));
            var target = GLPIImpact.cy.$(GLPIImpact.makeIDSelector(edge.data('target')));

            edge.data('flag', source.data('flag') & target.data('flag'));
        });

        // Set start node to this.DEFAULT when all calculation are down so he is
        // always shown
        GLPIImpact.cy.$(GLPIImpact.makeIDSelector(GLPIImpact.startNode)).data(
            'flag',
            this.DEFAULT
        );

        GLPIImpact.updateStyle();
    },

    /**
    * Toggle impact/depends visibility
    *
    * @param {*} toToggle
    */
    toggleVisibility: function(toToggle) {
        // Update visibility setting
        GLPIImpact.directionVisibility[toToggle] = !GLPIImpact.directionVisibility[toToggle];
        GLPIImpact.updateFlags();
        GLPIImpact.cy.trigger("change");
    },

    /**
    * Set max depth of the graph
    * @param {Number} max max depth
    */
    setDepth: function(max) {
        GLPIImpact.maxDepth = max;

        if (max >= GLPIImpact.MAX_DEPTH) {
            max = "infinity";
            GLPIImpact.maxDepth = GLPIImpact.NO_DEPTH_LIMIT;
        }

        $(GLPIImpact.selectors.maxDepthView).html(max);
        GLPIImpact.updateStyle();
        GLPIImpact.cy.trigger("change");
    },

    /**
    * Ask the backend to build a graph from a specific node
    *
    * @param {Object} node
    * @returns {Array|null}
    */
    buildGraphFromNode: function(node) {
        node.action = "load";
        var dfd = jQuery.Deferred();

        // Request to backend
        $.ajax({
            type: "GET",
            url: CFG_GLPI.root_doc + "/ajax/impact.php",
            dataType: "json",
            data: node,
            success: function(data) {
                dfd.resolve(JSON.parse(data.graph), JSON.parse(data.params));
            },
            error: function () {
                dfd.reject();
            }
        });

        return dfd.promise();
    },

    /**
    * Get distance between two point A and B
    * @param {Object} a x, y
    * @param {Object} b x, y
    * @returns {Number}
    */
    getDistance: function(a, b) {
        return Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
    },

    /**
    * Insert another new graph into the current one
    *
    * @param {Array}  graph
    * @param {Object} params
    * @param {Object} startNode data, x, y
    */
    insertGraph: function(graph, params, startNode) {
        var toAdd = [];
        var mainBoundingBox = this.cy.filter().boundingBox();

        // Try to add the new graph nodes
        var i;
        for (i=0; i<graph.length; i++) {
            var id = graph[i].data.id;
            // Check that the element is not already on the graph,
            if (this.cy.filter('[id="' + id + '"]').length > 0) {
                continue;
            }
            // Store node to add them at once with a layout
            toAdd.push(graph[i]);

            // Remove node from side list if needed
            if (graph[i].group == "nodes" && graph[i].data.color === undefined ) {
                var node_info = graph[i].data.id.split(GLPIImpact.NODE_ID_SEPERATOR);
                var itemtype = node_info[0];
                var items_id = node_info[1];
                $("p[data-id=" + items_id + "][data-type='" + itemtype + "']").remove();
            }
        }

        // Just place the node if only one result is found
        if (toAdd.length == 1) {
            toAdd[0].position = {
                x: startNode.x,
                y: startNode.y,
            };

            this.cy.add(toAdd);
            this.addToUndo(this.ACTION_ADD_NODE, {
                toAdd: toAdd[0]
            });
            return;
        }

        // Add nodes and apply layout
        var eles = this.cy.add(toAdd);

        var options;
        if (params.positions === undefined) {
            options = this.getDagreLayout();
        } else {
            options = this.getPresetLayout(JSON.parse(params.positions));
        }

        // Place the layout anywhere to compute it's bounding box
        var layout = eles.layout(options);
        layout.run();
        this.generateMissingPositions();

        // First, position the graph on the clicked areaa
        var newGraphBoundingBox = eles.boundingBox();
        var center = {
            x: (newGraphBoundingBox.x1 + newGraphBoundingBox.x2) / 2,
            y: (newGraphBoundingBox.y1 + newGraphBoundingBox.y2) / 2,
        };

        var centerToClickVector = [
            startNode.x - center.x,
            startNode.y - center.y,
        ];

        // Apply vector to each node
        eles.nodes().forEach(function(node) {
            if (!node.isParent()) {
                node.position({
                    x: node.position().x + centerToClickVector[0],
                    y: node.position().y + centerToClickVector[1],
                });
            }
        });

        newGraphBoundingBox = eles.boundingBox();

        // If the two bouding box overlap
        if (!(mainBoundingBox.x1 > newGraphBoundingBox.x2
         || newGraphBoundingBox.x1 > mainBoundingBox.x2
         || mainBoundingBox.y1 > newGraphBoundingBox.y2
         || newGraphBoundingBox.y1 > mainBoundingBox.y2)) {

            // We want to find the point "intersect", which is the closest
            // intersection between the point at the center of the new bounding box
            // and the main bouding bouding box.
            // We then want to find the point "closest" which is the vertice of
            // the new bounding box which is the closest to the center of the
            // main bouding box

            // Then the vector betwteen "intersect" and "closest" can be applied
            // to the new graph to make it "slide" out of the main graph

            // Center of the new graph
            center = {
                x: Math.round((newGraphBoundingBox.x1 + newGraphBoundingBox.x2) / 2),
                y: Math.round((newGraphBoundingBox.y1 + newGraphBoundingBox.y2) / 2),
            };

            var directions = [
                [1, 0], [0, 1], [-1, 0], [0, -1], [1, 1], [-1, 1], [-1, -1], [1, -1]
            ];

            var edges = [
                {
                    a: {x: Math.round(mainBoundingBox.x1), y: Math.round(mainBoundingBox.y1)},
                    b: {x: Math.round(mainBoundingBox.x2), y: Math.round(mainBoundingBox.y1)},
                },
                {
                    a: {x: Math.round(mainBoundingBox.x2), y: Math.round(mainBoundingBox.y1)},
                    b: {x: Math.round(mainBoundingBox.x1), y: Math.round(mainBoundingBox.y2)},
                },
                {
                    a: {x: Math.round(mainBoundingBox.x1), y: Math.round(mainBoundingBox.y2)},
                    b: {x: Math.round(mainBoundingBox.x2), y: Math.round(mainBoundingBox.y2)},
                },
                {
                    a: {x: Math.round(mainBoundingBox.x2), y: Math.round(mainBoundingBox.y2)},
                    b: {x: Math.round(mainBoundingBox.x1), y: Math.round(mainBoundingBox.y1)},
                }
            ];

            i = 0; // Safegard, no more than X tries
            var intersect;
            while (i < 50000) {
                directions.forEach(function(vector) {
                    if (intersect !== undefined) {
                        return;
                    }

                    var point = {
                        x: center.x + (vector[0] * i),
                        y: center.y + (vector[1] * i),
                    };

                    // Check if the point intersect with one of the edges
                    edges.forEach(function(edge) {
                        if (intersect !== undefined) {
                            return;
                        }

                        if ((GLPIImpact.getDistance(point, edge.a)
                     + GLPIImpact.getDistance(point, edge.b))
                     == GLPIImpact.getDistance(edge.a, edge.b)) {
                            // Found intersection
                            intersect = {
                                x: point.x,
                                y: point.y,
                            };
                        }
                    });
                });

                i++;

                if (intersect !== undefined) {
                    break;
                }
            }

            if (intersect !== undefined) {
            // Center of the main graph
                center = {
                    x: (mainBoundingBox.x1 + mainBoundingBox.x2) / 2,
                    y: (mainBoundingBox.y1 + mainBoundingBox.y2) / 2,
                };

                var vertices = [
                    {x: newGraphBoundingBox.x1, y: newGraphBoundingBox.y1},
                    {x: newGraphBoundingBox.x1, y: newGraphBoundingBox.y2},
                    {x: newGraphBoundingBox.x2, y: newGraphBoundingBox.y1},
                    {x: newGraphBoundingBox.x2, y: newGraphBoundingBox.y2},
                ];

                var closest;
                var min_dist;

                vertices.forEach(function(vertice) {
                    var dist = GLPIImpact.getDistance(vertice, center);
                    if (min_dist == undefined || dist < min_dist) {
                        min_dist = dist;
                        closest = vertice;
                    }
                });

                // Compute vector between closest and intersect
                var vector = [
                    intersect.x - closest.x,
                    intersect.y - closest.y,
                ];

                // Apply vector to each node
                eles.nodes().forEach(function(node) {
                    if (!node.isParent()) {
                        node.position({
                            x: node.position().x + vector[0],
                            y: node.position().y + vector[1],
                        });
                    }
                });
            }
        }

        this.generateMissingPositions();
        this.cy.animate({
            center: {
                eles : GLPIImpact.cy.filter(""),
            },
        });

        this.cy.getElementById(startNode.id).data("highlight", 1);

        // Set undo/redo data
        var data = {
            edges: eles.edges().map(function(edge){ return edge.data(); }),
            compounds: [],
            nodes: [],
        };
        eles.nodes().forEach(function(node) {
            if (node.isParent()) {
                data.compounds.push({
                    compoundData    : _.clone(node.data()),
                    compoundChildren: node.children().map(function(n) {
                        return n.data('id');
                    }),
                });
            } else {
                data.nodes.push({
                    nodeData    : _.clone(node.data()),
                    nodePosition: _.clone(node.position()),
                });
            }
        });
        this.addToUndo(this.ACTION_ADD_GRAPH, data);
    },

    /**
    * Set the colors
    *
    * @param {object} colors default, backward, forward, both
    */
    setEdgeColors: function (colors) {
        this.setColorIfExist(GLPIImpact.DEFAULT, colors.default);
        this.setColorIfExist(GLPIImpact.BACKWARD, colors.backward);
        this.setColorIfExist(GLPIImpact.FORWARD, colors.forward);
        this.setColorIfExist(GLPIImpact.BOTH, colors.both);
    },

    /**
    * Set color if exist
    *
    * @param {object} colors default, backward, forward, both
    */
    setColorIfExist: function (index, color) {
        if (color !== undefined) {
            this.edgeColors[index] = color;
        }
    },

    /**
    * Exit current edition mode and enter a new one
    *
    * @param {number} mode
    */
    setEditionMode: function (mode) {
        // Switching to a mode we are already in -> go to default
        if (this.editionMode == mode) {
            mode = GLPIImpact.EDITION_DEFAULT;
        }

        this.exitEditionMode();
        this.enterEditionMode(mode);
        this.editionMode = mode;
    },

    /**
    * Exit current edition mode
    */
    exitEditionMode: function() {
        switch (this.editionMode) {
            case GLPIImpact.EDITION_DEFAULT:
                GLPIImpact.cy.nodes().ungrabify();
                break;

            case GLPIImpact.EDITION_ADD_NODE:
                GLPIImpact.cy.nodes().ungrabify();
                $(GLPIImpact.selectors.sideToggleIcon).addClass('fa-chevron-left');
                $(GLPIImpact.selectors.sideToggleIcon).removeClass('fa-chevron-right');
                $(GLPIImpact.selectors.side).removeClass('impact-side-expanded');
                $(GLPIImpact.selectors.sidePanel).removeClass('impact-side-expanded');
                $(GLPIImpact.selectors.addNode).removeClass("active");
                break;

            case GLPIImpact.EDITION_ADD_EDGE:
                $(GLPIImpact.selectors.addEdge).removeClass("active");
                // Empty event data and remove tmp node
                GLPIImpact.eventData.addEdgeStart = null;
                GLPIImpact.cy.filter("#tmp_node").remove();
                break;

            case GLPIImpact.EDITION_DELETE:
                GLPIImpact.cy.filter().unselect();
                GLPIImpact.cy.data('todelete', 0);
                $(GLPIImpact.selectors.deleteElement).removeClass("active");
                break;

            case GLPIImpact.EDITION_ADD_COMPOUND:
                GLPIImpact.cy.panningEnabled(true);
                GLPIImpact.cy.boxSelectionEnabled(false);
                $(GLPIImpact.selectors.addCompound).removeClass("active");
                break;

            case GLPIImpact.EDITION_SETTINGS:
                GLPIImpact.cy.nodes().ungrabify();
                $(GLPIImpact.selectors.sideToggleIcon).addClass('fa-chevron-left');
                $(GLPIImpact.selectors.sideToggleIcon).removeClass('fa-chevron-right');
                $(GLPIImpact.selectors.side).removeClass('impact-side-expanded');
                $(GLPIImpact.selectors.sidePanel).removeClass('impact-side-expanded');
                $(GLPIImpact.selectors.impactSettings).removeClass("active");
                break;
        }
    },

    /**
    * Enter a new edition mode
    *
    * @param {number} mode
    */
    enterEditionMode: function(mode) {
        switch (mode) {
            case GLPIImpact.EDITION_DEFAULT:
                GLPIImpact.clearHelpText();
                GLPIImpact.cy.nodes().grabify();
                $(GLPIImpact.impactContainer).css('cursor', "move");
                break;

            case GLPIImpact.EDITION_ADD_NODE:
                GLPIImpact.cy.nodes().grabify();
                GLPIImpact.clearHelpText();
                $(GLPIImpact.selectors.sideToggleIcon).removeClass('fa-chevron-left');
                $(GLPIImpact.selectors.sideToggleIcon).addClass('fa-chevron-right');
                $(GLPIImpact.selectors.side).addClass('impact-side-expanded');
                $(GLPIImpact.selectors.sidePanel).addClass('impact-side-expanded');
                $(GLPIImpact.selectors.addNode).addClass("active");
                $(GLPIImpact.impactContainer).css('cursor', "move");
                $(GLPIImpact.selectors.sideSettings).hide();
                $(GLPIImpact.selectors.sideAddNode).show();
                break;

            case GLPIImpact.EDITION_ADD_EDGE:
                GLPIImpact.showHelpText(__("Draw a line between two assets to add an impact relation"));
                $(GLPIImpact.selectors.addEdge).addClass("active");
                $(GLPIImpact.impactContainer).css('cursor', "crosshair");
                break;

            case GLPIImpact.EDITION_DELETE:
                GLPIImpact.cy.filter().unselect();
                GLPIImpact.showHelpText(__("Click on an element to remove it from the network"));
                $(GLPIImpact.selectors.deleteElement).addClass("active");
                $(GLPIImpact.impactContainer).css('cursor', "move");
                break;

            case GLPIImpact.EDITION_ADD_COMPOUND:
                GLPIImpact.cy.panningEnabled(false);
                GLPIImpact.cy.boxSelectionEnabled(true);
                GLPIImpact.showHelpText(__("Draw a square containing the assets you wish to group"));
                $(GLPIImpact.selectors.addCompound).addClass("active");
                $(GLPIImpact.impactContainer).css('cursor', "crosshair");
                break;

            case GLPIImpact.EDITION_SETTINGS:
                GLPIImpact.cy.nodes().grabify();
                $(GLPIImpact.selectors.sideToggleIcon).removeClass('fa-chevron-left');
                $(GLPIImpact.selectors.sideToggleIcon).addClass('fa-chevron-right');
                $(GLPIImpact.selectors.side).addClass('impact-side-expanded');
                $(GLPIImpact.selectors.sidePanel).addClass('impact-side-expanded');
                $(GLPIImpact.selectors.impactSettings).addClass("active");
                $(GLPIImpact.selectors.sideAddNode).hide();
                $(GLPIImpact.selectors.sideSettings).show();
                break;
        }
    },

    /**
    * Hide the toolbar and show an help text
    *
    * @param {string} text
    */
    showHelpText: function(text) {
        $(GLPIImpact.selectors.helpText).html(text).show();
    },

    /**
    * Hide the help text and show the toolbar
    */
    clearHelpText: function() {
        $(GLPIImpact.selectors.helpText).hide();
    },

    /**
    * Export the graph in the given format
    *
    * @param {string} format
    * @param {boolean} transparentBackground (png only)
    *
    * @returns {Object} filename, filecontent
    */
    download: function(format, transparentBackground) {
        var filename;
        var filecontent;

        // Create fake link
        GLPIImpact.impactContainer.append("<a id='impact_download'></a>");
        var link = $('#impact_download');

        switch (format) {
            case 'png':
                filename = "impact.png";
                filecontent = this.cy.png({
                    bg: transparentBackground ? "transparent" : "white"
                });
                break;

            case 'jpeg':
                filename = "impact.jpeg";
                filecontent = this.cy.jpg();
                break;
        }

        // Trigger download and remore the link
        link.prop('download', filename);
        link.prop("href", filecontent);
        link[0].click();
        link.remove();
    },

    /**
    * Get node at target position
    *
    * @param {Object} position x, y
    * @param {function} filter if false return null
    */
    getNodeAt: function(position, filter) {
        var nodes = this.cy.nodes();

        for (var i=0; i<nodes.length; i++) {
            if (nodes[i].boundingBox().x1 < position.x
          && nodes[i].boundingBox().x2 > position.x
          && nodes[i].boundingBox().y1 < position.y
          && nodes[i].boundingBox().y2 > position.y) {
            // Check if the node is excluded
                if (filter(nodes[i])) {
                    return nodes[i];
                }
            }
        }

        return null;
    },

    /**
    * Enable the save button
    */
    showCleanWorkspaceStatus: function() {
        $(GLPIImpact.selectors.save).removeClass('dirty');
        $(GLPIImpact.selectors.save).removeClass('clean'); // Needed for animations if the workspace is not dirty
        $(GLPIImpact.selectors.save).addClass('clean');
    },

    /**
    * Enable the save button
    */
    showDirtyWorkspaceStatus: function() {
        $(GLPIImpact.selectors.save).removeClass('clean');
        $(GLPIImpact.selectors.save).addClass('dirty');
    },

    /**
    * Enable the save button
    */
    showDefaultWorkspaceStatus: function() {
        $(GLPIImpact.selectors.save).removeClass('clean');
        $(GLPIImpact.selectors.save).removeClass('dirty');
    },

    /**
    * Build the ongoing dialog content according to the list of ITILObjects
    *
    * @param {Object} ITILObjects requests, incidents, changes, problems
    *
    * @returns {string}
    */
    buildOngoingDialogContent: function(ITILObjects) {
        return this.listElements(__("Requests"), ITILObjects.requests, "ticket")
         + this.listElements(__("Incidents"), ITILObjects.incidents, "ticket")
         + this.listElements(__("Changes"), ITILObjects.changes , "change")
         + this.listElements(__("Problems"), ITILObjects.problems, "problem");
    },

    /**
    * Build an html list
    *
    * @param {string} title requests, incidents, changes, problems
    * @param {string} elements requests, incidents, changes, problems
    * @param {string} url key used to generate the URL
    *
    * @returns {string}
    */
    listElements: function(title, elements, url) {
        var html = "";

        if (elements.length > 0) {
            html += "<h3>" + title + "</h3>";
            html += "<ul>";

            elements.forEach(function(element) {
                var link = CFG_GLPI.root_doc + "/front/" + url + ".form.php?id=" + element.id;
                html += '<li><a target="_blank" href="' + link + '">' + element.name
               + '</a></li>';
            });
            html += "</ul>";
        }
        return html;
    },

    /**
    * Add a new compound from the selected nodes
    */
    addCompoundFromSelection: _.debounce(function(){
        // Check that there is enough selected nodes
        if (GLPIImpact.eventData.boxSelected.length < 2) {
            alert(__("You need to select at least 2 assets to make a group"));
        } else {
            // Create the compound
            var newCompound = GLPIImpact.cy.add({
                group: 'nodes',
                data: {color: '#dadada'},
            });

            // Log event data (for undo)
            GLPIImpact.eventData.newCompound = {
                data: {id: newCompound.data('id')},
                children: [],
            };

            // Set parent for coumpound member
            GLPIImpact.eventData.boxSelected.forEach(function(ele) {
                ele.move({'parent': newCompound.data('id')});
                GLPIImpact.eventData.newCompound.children.push(ele.data('id'));
            });

            // Show edit dialog
            GLPIImpact.showEditCompoundDialog(newCompound);

            // Back to default mode
            GLPIImpact.setEditionMode(GLPIImpact.EDITION_DEFAULT);
        }

        // Clear the selection
        GLPIImpact.eventData.boxSelected = [];
        GLPIImpact.cy.filter(":selected").unselect();
    }, 100, false),

    /**
    * Remove an element from the graph
    *
    * @param {object} ele
    */
    deleteFromGraph: function(ele) {
        if (ele.data('id') == GLPIImpact.startNode) {
            alert("Can't remove starting node");
            return;
        }

        // Log for undo/redo
        var deleted = {
            edges: [],
            nodes: [],
            compounds: []
        };

        if (ele.isEdge()) {
            // Case 1: removing an edge
            deleted.edges.push(_.clone(ele.data()));
            ele.remove();
        } else if (ele.isParent()) {
            // Case 2: removing a compound

            // Set undo/redo data
            deleted.compounds.push({
                compoundData    : _.clone(ele.data()),
                compoundChildren: ele.children().map(function(node) {
                    return node.data('id');
                }),
            });

            // Remove only the parent
            ele.children().move({parent: null});
            ele.remove();
        } else {
            // Case 3: removing a node
            // Remove parent if last child of a compound
            if (!ele.isOrphan() && ele.parent().children().length <= 2) {
                var parent = ele.parent();

                // Set undo/redo data
                deleted.compounds.push({
                    compoundData    : _.clone(parent.data()),
                    compoundChildren: parent.children().map(function(node) {
                        return node.data('id');
                    }),
                });

                parent.children().move({parent: null});
                parent.remove();
            }

            // Set undo/redo data
            deleted.nodes.push({
                nodeData: _.clone(ele.data()),
                nodePosition: _.clone(ele.position()),
            });
            deleted.edges = deleted.edges.concat(ele.connectedEdges(function(edge) {
            // Check for duplicates
                var exist = false;
                deleted.edges.forEach(function(deletedEdge) {
                    if (deletedEdge.id == edge.data('id')) {
                        exist = true;
                    }
                });

                // In case of multiple deletion, check in the buffer too
                if (GLPIImpact.eventData.multipleDeletion != null) {
                    GLPIImpact.eventData.multipleDeletion.edges.forEach(
                        function(deletedEdge) {
                            if (deletedEdge.id == edge.data('id')) {
                                exist = true;
                            }
                        }
                    );
                }

                return !exist;
            }).map(function(ele){
                return ele.data();
            }));

            // Remove all edges connected to this node from graph and delta
            ele.remove();
        }

        // Update flags
        GLPIImpact.updateFlags();

        // Multiple deletion, set the data in eventData buffer so it can be added
        // as a simple undo/redo entry later
        if (this.eventData.multipleDeletion != null) {
            this.eventData.multipleDeletion.edges = this.eventData.multipleDeletion.edges.concat(deleted.edges);
            this.eventData.multipleDeletion.nodes = this.eventData.multipleDeletion.nodes.concat(deleted.nodes);
            this.eventData.multipleDeletion.compounds = this.eventData.multipleDeletion.compounds.concat(deleted.compounds);
        } else {
            this.addToUndo(this.ACTION_DELETE, deleted);
        }
    },

    /**
    * Toggle fullscreen mode
    */
    toggleFullscreen: function() {
        this.fullscreen = !this.fullscreen;
        $(this.selectors.toggleFullscreen).toggleClass('active');
        $(this.impactContainer).toggleClass('fullscreen');
        $(this.selectors.side).toggleClass('fullscreen');

        if (this.fullscreen) {
            $(this.impactContainer).children("canvas:eq(0)").css({
                height: "100vh"
            });
            $('html, body').css('overflow', 'hidden');
        } else {
            $(this.impactContainer).children("canvas:eq(0)").css({
                height: "unset"
            });
            $('html, body').css('overflow', 'unset');
        }

        GLPIImpact.cy.resize();
    },

    /**
    * Check if a given position match the hitbox of a badge
    *
    * @param {Object}   renderedPosition  {x, y}
    * @param {Boolean}  trigger           should we trigger the link if there
    *                                     is a match ?
    * @param {Boolean}  blank
    * @returns {Boolean}
    */
    checkBadgeHitboxes: function (renderedPosition, trigger, blank) {
        var hit = false;
        var margin = 5 * GLPIImpact.cy.zoom();

        GLPIImpact.badgesHitboxes.forEach(function(badgeHitboxDetails) {
            if (hit) {
                return;
            }

            var position = badgeHitboxDetails.position;
            var bb = {
                x1: position.x - margin,
                x2: position.x + margin,
                y1: position.y - margin,
                y2: position.y + margin,
            };

            if (bb.x1 < renderedPosition.x && bb.x2 > renderedPosition.x
            && bb.y1 < renderedPosition.y && bb.y2 > renderedPosition.y) {
                hit = true;

                if (trigger) {
                    var target = badgeHitboxDetails.target;

                    // Add items_id criteria
                    target += "&criteria[0][link]=AND&criteria[0][field]=13&criteria[0][searchtype]=contains&criteria[0][value]=" + badgeHitboxDetails.id;
                    // Add itemtype criteria
                    target += "&criteria[1][link]=AND&criteria[1][field]=131&criteria[1][searchtype]=equals&criteria[1][value]=" + badgeHitboxDetails.itemtype;
                    // Add type criteria (incident)
                    target += "&criteria[2][link]=AND&criteria[2][field]=14&criteria[2][searchtype]=equals&criteria[2][value]=1";
                    // Add status criteria (not solved)
                    target += "&criteria[3][link]=AND&criteria[3][field]=12&criteria[3][searchtype]=equals&criteria[3][value]=notold";

                    if (blank) {
                        window.open(target);
                    } else {
                        window.location.href = target;
                    }
                }
            }
        });

        return hit;
    },

    /**
    * Handle global click events
    *
    * @param {JQuery.Event} event
    */
    onClick: function (event) {
        switch (GLPIImpact.editionMode) {
            case GLPIImpact.EDITION_DEFAULT:
                break;

            case GLPIImpact.EDITION_ADD_NODE:
                break;

            case GLPIImpact.EDITION_ADD_EDGE:
                break;

            case GLPIImpact.EDITION_DELETE:
                break;
        }

        GLPIImpact.checkBadgeHitboxes(event.renderedPosition, true, GLPIImpact.eventData.ctrlDown);
    },

    /**
    * Handle click on edge
    *
    * @param {JQuery.Event} event
    */
    edgeOnClick: function (event) {
        switch (GLPIImpact.editionMode) {
            case GLPIImpact.EDITION_DEFAULT:
                break;

            case GLPIImpact.EDITION_ADD_NODE:
                break;

            case GLPIImpact.EDITION_ADD_EDGE:
                break;

            case GLPIImpact.EDITION_DELETE:
            // Remove the edge from the graph
                GLPIImpact.deleteFromGraph(event.target);
                break;
        }
    },

    /**
    * Handle click on node
    *
    * @param {JQuery.Event} event
    */
    nodeOnClick: function (event) {
        switch (GLPIImpact.editionMode) {
            case GLPIImpact.EDITION_DEFAULT:
                if (GLPIImpact.eventData.lastClicktimestamp != null) {
                    // Trigger homemade double click event
                    if (event.timeStamp - GLPIImpact.eventData.lastClicktimestamp < 500
                  && event.target == GLPIImpact.eventData.lastClickTarget) {
                        event.target.trigger('doubleClick', event);
                    }
                }

                GLPIImpact.eventData.lastClicktimestamp = event.timeStamp;
                GLPIImpact.eventData.lastClickTarget = event.target;
                break;

            case GLPIImpact.EDITION_ADD_NODE:
                break;

            case GLPIImpact.EDITION_ADD_EDGE:
                break;

            case GLPIImpact.EDITION_DELETE:
                GLPIImpact.deleteFromGraph(event.target);
                break;
        }
    },

    /**
    * Handle end of box selection event
    *
    * @param {JQuery.Event} event
    */
    onBox: function (event) {
        switch (GLPIImpact.editionMode) {
            case GLPIImpact.EDITION_DEFAULT:
                break;

            case GLPIImpact.EDITION_ADD_NODE:
                break;

            case GLPIImpact.EDITION_ADD_EDGE:
                break;

            case GLPIImpact.EDITION_DELETE:
                break;

            case GLPIImpact.EDITION_ADD_COMPOUND:
                var ele = event.target;
                // Add node to selected list if he is not part of a compound already
                if (ele.isNode() && ele.isOrphan() && !ele.isParent()) {
                    GLPIImpact.eventData.boxSelected.push(ele);
                }
                GLPIImpact.addCompoundFromSelection();
                break;
        }
    },

    /**
    * Handle any graph modification
    *
    * @param {*} event
    */
    onChange: function() {
        GLPIImpact.showDirtyWorkspaceStatus();

        // Remove hightligh for recently inserted graph
        GLPIImpact.cy.$("[highlight][!start_node]").data("highlight", 0);
    },

    /**
    * Double click handler
    * @param {JQuery.Event} event
    */
    onDoubleClick: function(event) {
        if (event.target.isParent()) {
            // Open edit dialog on compound nodes
            GLPIImpact.showEditCompoundDialog(event.target);
        } else if (event.target.isNode()) {
            // Go to on nodes
            window.open(event.target.data('link'));
        }
    },

    /**
    * Handle "grab" event
    *
    * @param {Jquery.event} event
    */
    onGrabOn: function(event) {
        // Store original position (shallow copy)
        GLPIImpact.eventData.grabNodePosition = {
            x: event.target.position().x,
            y: event.target.position().y,
        };

        // Store original parent (shallow copy)
        var parent = null;
        if (event.target.parent() !== undefined) {
            parent = event.target.parent().data('id');
        }
        GLPIImpact.eventData.grabNodeParent = parent;
    },

    /**
    * Handle "free" event
    * @param {Jquery.Event} event
    */
    onFreeOn: function(event) {
        var parent = null;
        if (event.target.parent() !== undefined) {
            parent = event.target.parent().data('id');
        }

        var newParent = null;
        if (parent !== GLPIImpact.eventData.grabNodeParent) {
            newParent = parent;
        }

        // If there was a real position change
        if (GLPIImpact.eventData.grabNodePosition.x !== event.target.position().x
         || GLPIImpact.eventData.grabNodePosition.y !== event.target.position().y) {

            GLPIImpact.addToUndo(GLPIImpact.ACTION_MOVE, {
                node: event.target.data('id'),
                oldPosition: GLPIImpact.eventData.grabNodePosition,
                newPosition: {
                    x: event.target.position().x,
                    y: event.target.position().y,
                },
                newParent: newParent,
            });
        }
    },

    /**
    * Remove handler
    * @param {JQuery.Event} event
    */
    onRemove: function(event) {
        if (event.target.isNode() && !event.target.isParent()) {
            var itemtype = event.target.data('id')
                .split(GLPIImpact.NODE_ID_SEPERATOR)[0];

            // If a node was deleted and its itemtype is the same as the one
            // selected in the add node panel, refresh the search
            if (itemtype == GLPIImpact.selectedItemtype) {
                $(GLPIImpact.selectors.sideSearchResults).html("");
                GLPIImpact.searchAssets(
                    GLPIImpact.selectedItemtype,
                    JSON.stringify(GLPIImpact.getUsedAssets()),
                    $(GLPIImpact.selectors.sideFilterAssets).val(),
                    0
                );
            }
        }
    },

    /**
    * Handler for key down events
    *
    * @param {JQuery.Event} event
    */
    onKeyDown: function(event) {
        // Ignore key events if typing inside input
        if (event.target.nodeName == "INPUT") {
            return;
        }

        switch (event.which) {
            // Shift
            case 16:
                if (event.ctrlKey) {
                    // Enter add compound edge mode
                    if (GLPIImpact.editionMode != GLPIImpact.EDITION_ADD_COMPOUND) {
                        if (GLPIImpact.eventData.previousEditionMode === undefined) {
                            GLPIImpact.eventData.previousEditionMode = GLPIImpact.editionMode;
                        }
                        GLPIImpact.setEditionMode(GLPIImpact.EDITION_ADD_COMPOUND);
                    }
                } else {
                    // Enter edit edge mode
                    if (GLPIImpact.editionMode != GLPIImpact.EDITION_ADD_EDGE) {
                        if (GLPIImpact.eventData.previousEditionMode === undefined) {
                            GLPIImpact.eventData.previousEditionMode = GLPIImpact.editionMode;
                        }
                        GLPIImpact.setEditionMode(GLPIImpact.EDITION_ADD_EDGE);
                    }
                }
                break;

                // Ctrl
            case 17:
                GLPIImpact.eventData.ctrlDown = true;
                break;

                // ESC
            case 27:
            // Exit specific edition mode
                if (GLPIImpact.editionMode != GLPIImpact.EDITION_DEFAULT) {
                    GLPIImpact.setEditionMode(GLPIImpact.EDITION_DEFAULT);
                }
                break;

                // Delete
            case 46:
                if (GLPIImpact.readonly) {
                    break;
                }

                // Prepare multiple deletion buffer (for undo/redo)
                GLPIImpact.eventData.multipleDeletion = {
                    edges    : [],
                    nodes    : [],
                    compounds: [],
                };

                // Delete selected element(s)
                GLPIImpact.cy.filter(":selected").forEach(function(ele) {
                    GLPIImpact.deleteFromGraph(ele);
                });

                // Set undo/redo data
                GLPIImpact.addToUndo(
                    GLPIImpact.ACTION_DELETE,
                    GLPIImpact.eventData.multipleDeletion
                );

                // Reset multiple deletion buffer (for undo/redo)
                GLPIImpact.eventData.multipleDeletion = null;
                break;

                // CTRL + Y
            case 89:
                if (!event.ctrlKey) {
                    break;
                }

                GLPIImpact.redo();
                break;

                // CTRL + Z / CTRL + SHIFT + Z
            case 90:
                if (!event.ctrlKey) {
                    break;
                }

                if (event.shiftKey) {
                    GLPIImpact.redo();
                } else {
                    GLPIImpact.undo();
                }

                break;
        }
    },

    /**
    * Handler for key down events
    *
    * @param {JQuery.Event} event
    */
    onKeyUp: function(event) {
        switch (event.which) {
            // Shift
            case 16:
            // Return to previous edition mode if needed
                if (GLPIImpact.eventData.previousEditionMode !== undefined
               && (GLPIImpact.editionMode == GLPIImpact.EDITION_ADD_EDGE
                  || GLPIImpact.editionMode == GLPIImpact.EDITION_ADD_COMPOUND)
                ) {
                    GLPIImpact.setEditionMode(GLPIImpact.eventData.previousEditionMode);
                    GLPIImpact.eventData.previousEditionMode = undefined;
                }
                break;

                // Ctrl
            case 17:
            // Return to previous edition mode if needed
                if (GLPIImpact.editionMode == GLPIImpact.EDITION_ADD_COMPOUND
               && GLPIImpact.eventData.previousEditionMode !== undefined) {
                    GLPIImpact.setEditionMode(GLPIImpact.eventData.previousEditionMode);
                    GLPIImpact.eventData.previousEditionMode = undefined;
                }
                GLPIImpact.eventData.ctrlDown = false;
                break;
        }
    },

    /**
    * Handle mousedown events on nodes
    *
    * @param {JQuery.Event} event
    */
    nodeOnMousedown: function (event) {
        switch (GLPIImpact.editionMode) {
            case GLPIImpact.EDITION_DEFAULT:
                $(GLPIImpact.impactContainer).css('cursor', "grabbing");

                // If we are not on a compound node or a node already inside one
                if (event.target.isOrphan() && !event.target.isParent()) {
                    GLPIImpact.eventData.grabNodeStart = event.target;
                }
                break;

            case GLPIImpact.EDITION_ADD_NODE:
                break;

            case GLPIImpact.EDITION_ADD_EDGE:
                if (!event.target.isParent()) {
                    GLPIImpact.eventData.addEdgeStart = this.data('id');
                }
                break;

            case GLPIImpact.EDITION_DELETE:
                break;

            case GLPIImpact.EDITION_ADD_COMPOUND:
                break;
        }
    },

    /**
    * Handle mouseup events
    *
    * @param {JQuery.Event} event
    */
    onMouseUp: function(event) {
        if (event.target.data('id') != undefined && event.target.isNode()) {
            // Handler for nodes
            GLPIImpact.nodeOnMouseup();
        }
        switch (GLPIImpact.editionMode) {
            case GLPIImpact.EDITION_DEFAULT:
                break;

            case GLPIImpact.EDITION_ADD_NODE:
                break;

            case GLPIImpact.EDITION_ADD_EDGE:
            // Exit if no start node
                if (GLPIImpact.eventData.addEdgeStart == null) {
                    return;
                }

                // Reset addEdgeStart
                var startEdge = GLPIImpact.eventData.addEdgeStart; // Keep a copy to use later
                GLPIImpact.eventData.addEdgeStart = null;

                // Remove current tmp collection
                event.cy.remove(GLPIImpact.eventData.tmpEles);
                var edgeID = GLPIImpact.eventData.tmpEles.data('id');
                GLPIImpact.eventData.tmpEles = null;

                // Option 1: Edge between a node and the fake tmp_node -> ignore
                if (edgeID == 'tmp_node') {
                    return;
                }

                var edgeDetails = edgeID.split(GLPIImpact.EDGE_ID_SEPERATOR);

                // Option 2: Edge between two nodes that already exist -> ignore
                if (event.cy.filter('edge[id="' + edgeID + '"]').length > 0) {
                    return;
                }

                // Option 3: Both end of the edge are actually the same node -> ignore
                if (startEdge == edgeDetails[1]) {
                    return;
                }

                // Option 4: Edge between two nodes that does not exist yet -> create it!
                var data = {
                    id: edgeID,
                    source: startEdge,
                    target: edgeDetails[1]
                };
                event.cy.add({
                    group: 'edges',
                    data: data,
                });
                GLPIImpact.addToUndo(GLPIImpact.ACTION_ADD_EDGE, _.clone(data));

                // Update dependencies flags according to the new link
                GLPIImpact.updateFlags();

                break;

            case GLPIImpact.EDITION_DELETE:
                break;
        }
    },

    /**
    * Handle mouseup events on nodes
    *
    * @param {JQuery.Event} event
    */
    nodeOnMouseup: function () {
        switch (GLPIImpact.editionMode) {
            case GLPIImpact.EDITION_DEFAULT:
                $(GLPIImpact.impactContainer).css('cursor', "grab");

                // Reset eventData for node grabbing
                GLPIImpact.eventData.grabNodeStart = null;
                GLPIImpact.eventData.boundingBox = null;

                break;

            case GLPIImpact.EDITION_ADD_NODE:
                break;

            case GLPIImpact.EDITION_ADD_EDGE:
                break;

            case GLPIImpact.EDITION_DELETE:
                break;
        }
    },

    /**
    * Handle mousemove events on nodes
    *
    * @param {JQuery.Event} event
    */
    onMousemove: _.throttle(function(event) {
        var node;

        // Check for badges hitboxes
        if (GLPIImpact.checkBadgeHitboxes(event.renderedPosition, false, false)
         && !GLPIImpact.eventData.showPointerForBadge) {
            // Entering a badge hitbox
            GLPIImpact.eventData.showPointerForBadge = true;

            // Store previous cursor and show pointer
            GLPIImpact.eventData.previousCursor = $(GLPIImpact.impactContainer).css('cursor');
            $(GLPIImpact.impactContainer).css('cursor', "pointer");
        } else if (GLPIImpact.eventData.showPointerForBadge
         && !GLPIImpact.checkBadgeHitboxes(event.renderedPosition, false, false)) {
            // Exiiting a badge hitbox
            GLPIImpact.eventData.showPointerForBadge = false;

            // Reset to previous cursor
            $(GLPIImpact.impactContainer).css(
                'cursor',
                GLPIImpact.eventData.previousCursor
            );
        }

        switch (GLPIImpact.editionMode) {
            case GLPIImpact.EDITION_DEFAULT:
            case GLPIImpact.EDITION_ADD_NODE:

                // No action if we are not grabbing a node
                if (GLPIImpact.eventData.grabNodeStart == null) {
                    return;
                }

                // Look for a compound at the cursor position
                node = GLPIImpact.getNodeAt(event.position, function(node) {
                    return node.isParent();
                });

                if (node) {
                    // If we have a bounding box defined, the grabbed node is already
                    // being placed into a compound, we need to check if it was moved
                    // outside this original bouding box to know if the user is
                    // trying to move it away from the compound
                    if (GLPIImpact.eventData.boundingBox != null) {
                        // If the user tried to move out of the compound
                        if (GLPIImpact.eventData.boundingBox.x1 > event.position.x
                     || GLPIImpact.eventData.boundingBox.x2 < event.position.x
                     || GLPIImpact.eventData.boundingBox.y1 > event.position.y
                     || GLPIImpact.eventData.boundingBox.y2 < event.position.y) {
                            // Remove it from the compound
                            GLPIImpact.eventData.grabNodeStart.move({parent: null});
                            GLPIImpact.eventData.boundingBox = null;
                        }
                    } else {
                        // If we found a compound, add the grabbed node inside
                        GLPIImpact.eventData.grabNodeStart.move({parent: node.data('id')});

                        // Store the original bouding box of the compound
                        GLPIImpact.eventData.boundingBox = node.boundingBox();
                    }
                } else {
                    // Else; reset it's parent so it can be removed from any temporary
                    // compound while the user is stil grabbing
                    GLPIImpact.eventData.grabNodeStart.move({parent: null});
                }

                break;

            case GLPIImpact.EDITION_ADD_EDGE:
            // No action if we are not placing an edge
                if (GLPIImpact.eventData.addEdgeStart == null) {
                    return;
                }

                // Remove current tmp collection
                if (GLPIImpact.eventData.tmpEles != null) {
                    event.cy.remove(GLPIImpact.eventData.tmpEles);
                }

                node = GLPIImpact.getNodeAt(event.position, function(node) {
                    var nodeID = node.data('id');

                    // Can't link to itself
                    if (nodeID == GLPIImpact.eventData.addEdgeStart) {
                        return false;
                    }

                    // Can't link to parent
                    if (node.isParent()) {
                        return false;
                    }

                    // The created edge shouldn't already exist
                    var edgeID = GLPIImpact.makeID(GLPIImpact.EDGE, GLPIImpact.eventData.addEdgeStart, nodeID);
                    if (GLPIImpact.cy.filter('edge[id="' + edgeID + '"]').length > 0) {
                        return false;
                    }

                    // The node must be visible
                    if (!GLPIImpact.cy.getElementById(nodeID).visible()) {
                        return false;
                    }

                    return true;
                });

                if (node != null) {
                    node = node.data('id');

                    // Add temporary edge to node hovered by the user
                    GLPIImpact.eventData.tmpEles = event.cy.add([
                        {
                            group: 'edges',
                            data: {
                                id: GLPIImpact.makeID(GLPIImpact.EDGE, GLPIImpact.eventData.addEdgeStart, node),
                                source: GLPIImpact.eventData.addEdgeStart,
                                target: node,
                            }
                        }
                    ]);
                } else {
                    // Add temporary edge to a new invisible node at mouse position
                    GLPIImpact.eventData.tmpEles = event.cy.add([
                        {
                            group: 'nodes',
                            data: {
                                id: 'tmp_node',
                            },
                            position: {
                                x: event.position.x,
                                y: event.position.y
                            }
                        },
                        {
                            group: 'edges',
                            data: {
                                id: GLPIImpact.makeID(
                                    GLPIImpact.EDGE,
                                    GLPIImpact.eventData.addEdgeStart,
                                    "tmp_node"
                                ),
                                source: GLPIImpact.eventData.addEdgeStart,
                                target: 'tmp_node',
                            }
                        }
                    ]);
                }
                break;

            case GLPIImpact.EDITION_DELETE:
                break;
        }
    }, 25),

    /**
    * Handle global mouseover events
    *
    * @param {JQuery.Event} event
    */
    onMouseover: function(event) {
        switch (GLPIImpact.editionMode) {
            case GLPIImpact.EDITION_DEFAULT:
            // No valid target, no action needed
                if (event.target.data('id') == undefined) {
                    break;
                }

                if (event.target.isNode()) {
                    if (!GLPIImpact.eventData.showPointerForBadge) {
                        // Don't alter the cursor if hovering a badge
                        $(GLPIImpact.impactContainer).css('cursor', "grab");
                    }
                } else if (event.target.isEdge()) {
                    // If mouseover on edge, show default cursor and disable panning
                    GLPIImpact.cy.panningEnabled(false);
                    if (!GLPIImpact.eventData.showPointerForBadge) {
                        // Don't alter the cursor if hovering a badge
                        $(GLPIImpact.impactContainer).css('cursor', "default");
                    }
                }
                break;

            case GLPIImpact.EDITION_ADD_NODE:
                if (event.target.data('id') == undefined) {
                    break;
                }

                if (event.target.isNode()) {
                    // If mouseover on node, show grab cursor
                    $(GLPIImpact.impactContainer).css('cursor', "grab");
                } else if (event.target.isEdge()) {
                    // If mouseover on edge, show default cursor and disable panning
                    $(GLPIImpact.impactContainer).css('cursor', "default");
                    GLPIImpact.cy.panningEnabled(false);
                }
                break;

            case GLPIImpact.EDITION_ADD_EDGE:
                break;

            case GLPIImpact.EDITION_DELETE:
                if (event.target.data('id') == undefined) {
                    break;
                }

                $(GLPIImpact.impactContainer).css('cursor', "default");
                var id = event.target.data('id');

                // Remove red overlay
                event.cy.filter().data('todelete', 0);
                event.cy.filter().unselect();

                // Store here if one default node
                if (event.target.data('id') == GLPIImpact.startNode) {
                    $(GLPIImpact.impactContainer).css('cursor', "not-allowed");
                    break;
                }

                // Add red overlay
                event.target.data('todelete', 1);
                event.target.select();

                if (event.target.isNode()){
                    var sourceFilter = "edge[source='" + id + "']";
                    var targetFilter = "edge[target='" + id + "']";
                    event.cy.filter(sourceFilter + ", " + targetFilter)
                        .data('todelete', 1)
                        .select();
                }
                break;
        }
    },

    /**
    * Handle global mouseout events
    *
    * @param {JQuery.Event} event
    */
    onMouseout: function(event) {
        switch (GLPIImpact.editionMode) {
            case GLPIImpact.EDITION_DEFAULT:
                if (!GLPIImpact.eventData.showPointerForBadge) {
                    // Don't alter the cursor if hovering a badge
                    $(GLPIImpact.impactContainer).css('cursor', "move");
                }

                // Re-enable panning in case the mouse was over an edge
                GLPIImpact.cy.panningEnabled(true);
                break;

            case GLPIImpact.EDITION_ADD_NODE:
                if (!GLPIImpact.eventData.showPointerForBadge) {
                    // Don't alter the cursor if hovering a badge
                    $(GLPIImpact.impactContainer).css('cursor', "move");
                }
                // Re-enable panning in case the mouse was over an edge
                GLPIImpact.cy.panningEnabled(true);
                break;

            case GLPIImpact.EDITION_ADD_EDGE:
                break;

            case GLPIImpact.EDITION_DELETE:
            // Remove red overlay
                event.cy.filter().data('todelete', 0);
                event.cy.filter().unselect();
                if (!GLPIImpact.eventData.showPointerForBadge) {
                    // Don't alter the cursor if hovering a badge
                    $(GLPIImpact.impactContainer).css('cursor', "move");
                }
                break;
        }
    },

    /**
    * Handle "goTo" menu event
    *
    * @param {JQuery.Event} event
    */
    menuOnGoTo: function(event) {
        window.open(event.target.data('link'));
    },

    /**
    * Handle "showOngoing" menu event
    *
    * @param {JQuery.Event} event
    */
    menuOnShowOngoing: function(event) {
        GLPIImpact.showOngoingDialog(event.target.data('ITILObjects'));
    },

    /**
    * Handle "EditCompound" menu event
    *
    * @param {JQuery.Event} event
    */
    menuOnEditCompound: function (event) {
        GLPIImpact.showEditCompoundDialog(event.target);
    },

    /**
    * Handler for "removeFromCompound" action
    *
    * @param {JQuery.Event} event
    */
    menuOnRemoveFromCompound: function(event) {
        var parent = GLPIImpact.cy.getElementById(
            event.target.data('parent')
        );

        // Undo log
        GLPIImpact.addToUndo(GLPIImpact.ACTION_REMOVE_FROM_COMPOUND, {
            nodeData    : _.clone(event.target.data()),
            compoundData: _.clone(parent.data()),
            children    : parent.children().map(function(node) {
                return node.data('id');
            }),
        });

        // Remove node from compound
        event.target.move({parent: null});

        // Destroy compound if only one or zero member left
        if (parent.children().length < 2) {
            parent.children().move({parent: null});
            GLPIImpact.cy.remove(parent);
        }
    },

    /**
    * Handler for "delete" menu action
    *
    * @param {JQuery.Event} event
    */
    menuOnDelete: function(event){
        GLPIImpact.deleteFromGraph(event.target);
    },

    /**
    * Ask the backend for available assets to insert into the graph
    *
    * @param {String} itemtype
    * @param {Array}  used
    * @param {String} filter
    * @param {Number} page
    */
    searchAssets: function(itemtype, used, filter, page) {
        var hidden = GLPIImpact.cy
            .nodes(GLPIImpact.getHiddenSelector())
            .filter(function(node) {
                return !node.isParent();
            })
            .map(function(node) {
                return node.data('id');
            });

        $(GLPIImpact.selectors.sideSearchSpinner).show();
        $(GLPIImpact.selectors.sideSearchNoResults).hide();
        $.ajax({
            type: "GET",
            url: $(GLPIImpact.selectors.form).prop('action'),
            data: {
                'action'  : 'search',
                'itemtype': itemtype,
                'used'    : used,
                'filter'  : filter,
                'page'    : page,
            },
            success: function(data){
                $.each(data.items, function(index, value) {
                    var graph_id = itemtype + GLPIImpact.NODE_ID_SEPERATOR + value['id'];
                    var isHidden = hidden.indexOf(graph_id) !== -1;
                    var cssClass = "";

                    if (isHidden) {
                        cssClass = "impact-res-disabled";
                    }

                    var str = '<p class="' + cssClass + '" data-id="' + value['id'] + '" data-type="' + itemtype + '">';
                    str += '<img src="' + $(GLPIImpact.selectors.sideSearch + " img").attr('src') + '"></img>';
                    str += value["name"];

                    if (isHidden) {
                        str += '<i class="fas fa-eye-slash impact-res-hidden"></i>';
                    }

                    str += "</p>";

                    $(GLPIImpact.selectors.sideSearchResults).append(str);
                });

                // All data was loaded, hide "More..."
                if (data.total <= ((page + 1) * 20)) {
                    $(GLPIImpact.selectors.sideSearchMore).hide();
                } else {
                    $(GLPIImpact.selectors.sideSearchMore).show();
                }

                // No results
                if (data.total == 0 && page == 0) {
                    $(GLPIImpact.selectors.sideSearchNoResults).show();
                }

                $(GLPIImpact.selectors.sideSearchSpinner).hide();
            },
            error: function(){
                alert("error");
            },
        });
    },

    /**
    * Get the list of assets already on the graph
    */
    getUsedAssets: function() {
        // Get used ids for this itemtype
        var used = [];
        GLPIImpact.cy.nodes().not(GLPIImpact.getHiddenSelector()).forEach(function(node) {
            if (node.isParent()) {
                return;
            }

            var nodeId = node.data('id')
                .split(GLPIImpact.NODE_ID_SEPERATOR);
            if (nodeId[0] == GLPIImpact.selectedItemtype) {
                used.push(parseInt(nodeId[1]));
            }
        });

        return used;
    },

    /**
    * Taken from cytoscape source, get the real position of the click event on
    * the cytoscape canvas
    *
    * @param   {Number}  clientX
    * @param   {Number}  clientY
    * @param   {Boolean} rendered
    * @returns {Object}
    */
    projectIntoViewport: function (clientX, clientY, rendered) {
        var cy = this.cy;
        var offsets = this.findContainerClientCoords();
        var offsetLeft = offsets[0];
        var offsetTop = offsets[1];
        var scale = offsets[4];
        var pan = cy.pan();
        var zoom = cy.zoom();

        if (rendered) {
            return {
                x: clientX - offsetLeft,
                y: clientY - offsetTop
            };
        } else {
            return {
                x: ((clientX - offsetLeft) / scale - pan.x) / zoom,
                y: ((clientY - offsetTop) / scale - pan.y) / zoom
            };
        }
    },

    /**
    * Used for projectIntoViewport
    *
    * @returns {Array}
    */
    findContainerClientCoords: function () {
        var container = this.impactContainer[0];
        var rect = container.getBoundingClientRect();
        var style = window.getComputedStyle(container);

        var styleValue = function styleValue(name) {
            return parseFloat(style.getPropertyValue(name));
        };

        var padding = {
            left  : styleValue('padding-left'),
            right : styleValue('padding-right'),
            top   : styleValue('padding-top'),
            bottom: styleValue('padding-bottom')
        };
        var border = {
            left  : styleValue('border-left-width'),
            right : styleValue('border-right-width'),
            top   : styleValue('border-top-width'),
            bottom: styleValue('border-bottom-width')
        };
        var clientWidth      = container.clientWidth;
        var clientHeight     = container.clientHeight;
        var paddingHor       = padding.left + padding.right;
        var paddingVer       = padding.top + padding.bottom;
        var borderHor        = border.left + border.right;
        var scale            = rect.width / (clientWidth + borderHor);
        var unscaledW        = clientWidth - paddingHor;
        var unscaledH        = clientHeight - paddingVer;
        var left             = rect.left + padding.left + border.left;
        var top              = rect.top + padding.top + border.top;
        return [left, top, unscaledW, unscaledH, scale];
    },

    /**
    * Set event handler for toolbar events
    */
    initToolbar: function() {
        // Save the graph
        $(GLPIImpact.selectors.save).click(function() {
            GLPIImpact.showCleanWorkspaceStatus();
            // Send data as JSON on submit
            $.ajax({
                type: "POST",
                url: $(GLPIImpact.selectors.form).prop('action'),
                data: {
                    'impacts': JSON.stringify(GLPIImpact.computeDelta())
                },
                success: function(){
                    GLPIImpact.initialState = GLPIImpact.getCurrentState();
                    $(document).trigger('impactUpdated');
                },
                error: function(){
                    GLPIImpact.showDirtyWorkspaceStatus();
                },
            });
        });

        // Add a new node on the graph
        $(GLPIImpact.selectors.addNode).click(function() {
            GLPIImpact.setEditionMode(GLPIImpact.EDITION_ADD_NODE);
        });

        // Add a new edge on the graph
        $(GLPIImpact.selectors.addEdge).click(function() {
            GLPIImpact.setEditionMode(GLPIImpact.EDITION_ADD_EDGE);
        });

        // Add a new compound on the graph
        $(GLPIImpact.selectors.addCompound).click(function() {
            GLPIImpact.setEditionMode(GLPIImpact.EDITION_ADD_COMPOUND);
        });

        // Enter delete mode
        $(GLPIImpact.selectors.deleteElement).click(function() {
            GLPIImpact.setEditionMode(GLPIImpact.EDITION_DELETE);
        });

        // Export graph
        $(GLPIImpact.selectors.export).click(function() {
            GLPIImpact.download(
                'png',
                false
            );
        });

        // Show settings
        $(this.selectors.impactSettings).click(function() {
            if ($(this).find('i.fa-chevron-right').length) {
                GLPIImpact.setEditionMode(GLPIImpact.EDITION_DEFAULT);
            } else {
                GLPIImpact.setEditionMode(GLPIImpact.EDITION_SETTINGS);
            }
        });

        $(GLPIImpact.selectors.undo).click(function() {
            GLPIImpact.undo();
        });

        // Redo button
        $(GLPIImpact.selectors.redo).click(function() {
            GLPIImpact.redo();
        });

        // Toggle expanded toolbar
        $(this.selectors.sideToggle).click(function() {
            if ($(this).find('i.fa-chevron-right').length) {
                GLPIImpact.setEditionMode(GLPIImpact.EDITION_DEFAULT);
            } else {
                GLPIImpact.setEditionMode(GLPIImpact.EDITION_ADD_NODE);
            }
        });

        // Toggle impact visibility
        $(GLPIImpact.selectors.toggleImpact).click(function() {
            GLPIImpact.toggleVisibility(GLPIImpact.FORWARD);
            GLPIImpact.addToUndo(GLPIImpact.ACTION_EDIT_IMPACT_VISIBILITY, {});
        });

        // Toggle depends visibility
        $(GLPIImpact.selectors.toggleDepends).click(function() {
            GLPIImpact.toggleVisibility(GLPIImpact.BACKWARD);
            GLPIImpact.addToUndo(GLPIImpact.ACTION_EDIT_DEPENDS_VISIBILITY, {});
        });

        // Depth selector
        $(GLPIImpact.selectors.maxDepth).on('input', function() {
            var previous = GLPIImpact.maxDepth;
            GLPIImpact.setDepth($(GLPIImpact.selectors.maxDepth).val());
            GLPIImpact.addToUndo(GLPIImpact.ACTION_EDIT_MAX_DEPTH, {
                oldDepth: previous,
                newDepth: GLPIImpact.maxDepth,
            });
        });

        $(GLPIImpact.selectors.toggleFullscreen).click(function() {
            GLPIImpact.toggleFullscreen();
        });

        // Filter available itemtypes
        $(GLPIImpact.selectors.sideSearchFilterItemtype).on('input', function() {
            var value = $(GLPIImpact.selectors.sideSearchFilterItemtype).val().toLowerCase();

            $(GLPIImpact.selectors.sideFilterItem + ' img').each(function() {
                var itemtype = $(this).attr('title').toLowerCase();
                if (value == "" || itemtype.indexOf(value) != -1) {
                    $(this).parent().show();
                } else {
                    $(this).parent().hide();
                }
            });
        });

        // Exit type selection and enter asset search
        $(GLPIImpact.selectors.sideFilterItem).click(function() {
            var img = $(this).find('img').eq(0);

            GLPIImpact.selectedItemtype = $(img).attr('data-itemtype');
            $(GLPIImpact.selectors.sideSearch).show();
            $(GLPIImpact.selectors.sideSearch + " img").attr('title', $(img).attr('title'));
            $(GLPIImpact.selectors.sideSearch + " img").attr('src', $(img).attr('src'));
            $(GLPIImpact.selectors.sideSearch + " > h4 > span").html($(img).attr('title'));
            $(GLPIImpact.selectors.sideSearchSelectItemtype).hide();

            // Empty search
            GLPIImpact.searchAssets(
                GLPIImpact.selectedItemtype,
                JSON.stringify(GLPIImpact.getUsedAssets()),
                $(GLPIImpact.selectors.sideFilterAssets).val(),
                0
            );
        });

        // Exit asset search and return to type selection
        $(GLPIImpact.selectors.sideSearch + ' > h4 > i').click(function() {
            $(GLPIImpact.selectors.sideSearch).hide();
            $(GLPIImpact.selectors.sideSearchSelectItemtype).show();
            $(GLPIImpact.selectors.sideSearchResults).html("");
        });

        $(GLPIImpact.selectors.sideFilterAssets).on('input', function() {
            // Reset results
            $(GLPIImpact.selectors.sideSearchResults).html("");
            $(GLPIImpact.selectors.sideSearchMore).hide();
            $(GLPIImpact.selectors.sideSearchSpinner).show();
            $(GLPIImpact.selectors.sideSearchNoResults).hide();

            searchAssetsDebounced(
                GLPIImpact.selectedItemtype,
                JSON.stringify(GLPIImpact.getUsedAssets()),
                $(GLPIImpact.selectors.sideFilterAssets).val(),
                0
            );
        });

        // Load more results on "More..." click
        $(GLPIImpact.selectors.sideSearchMore).on('click', function() {
            GLPIImpact.searchAssets(
                GLPIImpact.selectedItemtype,
                JSON.stringify(GLPIImpact.getUsedAssets()),
                $(GLPIImpact.selectors.sideFilterAssets).val(),
                ++GLPIImpact.addAssetPage
            );
        });

        // Watch for color changes (depends)
        $(GLPIImpact.selectors.dependsColor).change(function(){
            var previous = GLPIImpact.edgeColors[GLPIImpact.BACKWARD];
            GLPIImpact.setEdgeColors({
                backward: $(GLPIImpact.selectors.dependsColor).val(),
            });
            GLPIImpact.updateStyle();
            GLPIImpact.cy.trigger("change");
            GLPIImpact.addToUndo(GLPIImpact.ACTION_EDIT_DEPENDS_COLOR, {
                oldColor: previous,
                newColor: GLPIImpact.edgeColors[GLPIImpact.BACKWARD]
            });
        });

        // Watch for color changes (impact)
        $(GLPIImpact.selectors.impactColor).change(function(){
            var previous = GLPIImpact.edgeColors[GLPIImpact.FORWARD];
            GLPIImpact.setEdgeColors({
                forward: $(GLPIImpact.selectors.impactColor).val(),
            });
            GLPIImpact.updateStyle();
            GLPIImpact.cy.trigger("change");
            GLPIImpact.addToUndo(GLPIImpact.ACTION_EDIT_IMPACT_COLOR, {
                oldColor: previous,
                newColor: GLPIImpact.edgeColors[GLPIImpact.FORWARD]
            });
        });

        // Watch for color changes (impact and depends)
        $(GLPIImpact.selectors.impactAndDependsColor).change(function(){
            var previous = GLPIImpact.edgeColors[GLPIImpact.BOTH];
            GLPIImpact.setEdgeColors({
                both: $(GLPIImpact.selectors.impactAndDependsColor).val(),
            });
            GLPIImpact.updateStyle();
            GLPIImpact.cy.trigger("change");
            GLPIImpact.addToUndo(GLPIImpact.ACTION_EDIT_IMPACT_AND_DEPENDS_COLOR, {
                oldColor: previous,
                newColor: GLPIImpact.edgeColors[GLPIImpact.BOTH]
            });
        });

        // Handle drag & drop on add node search result
        $(document).on('mousedown', GLPIImpact.selectors.sideSearchResults + ' p', function(e) {
            // Only on left click and not for disabled item
            if (e.which !== 1
            || $(e.target).hasClass('impact-res-disabled')
            || $(e.target).parent().hasClass('impact-res-disabled')) {
                return;
            }

            // Tmp data to be shared with mousedown event
            GLPIImpact.eventData.addNodeStart = {
                id  : $(this).attr("data-id"),
                type: $(this).attr("data-type"),
            };

            // Show preview icon at cursor location
            $(GLPIImpact.selectors.dropPreview).css({
                left: e.clientX - 24,
                top: e.clientY - 24,
            });
            $(GLPIImpact.selectors.dropPreview).attr('src', $(this).find('img').attr('src'));
            $(GLPIImpact.selectors.dropPreview).show();

            $("*").css({cursor: "grabbing"});
        });

        // Handle drag & drop on add node search result
        $(document).on('mouseup', function(e) {
            // Middle click on badge, open link in new tab
            if (event.which == 2) {
                GLPIImpact.checkBadgeHitboxes(
                    GLPIImpact.projectIntoViewport(e.clientX, e.clientY, true),
                    true,
                    true
                );
            }

            if (GLPIImpact.eventData.addNodeStart === undefined) {
                return;
            }

            if (e.target.nodeName == "CANVAS") {
            // Add node at event position
                GLPIImpact.addNode(
                    GLPIImpact.eventData.addNodeStart.id,
                    GLPIImpact.eventData.addNodeStart.type,
                    GLPIImpact.projectIntoViewport(e.clientX, e.clientY, false)
                );
            }

            $(GLPIImpact.selectors.dropPreview).hide();

            // Clear tmp event data
            GLPIImpact.eventData.addNodeStart = undefined;
            $("*").css('cursor', "");
        });

        $(document).on('mousemove', function(e) {
            if (GLPIImpact.eventData.addNodeStart === undefined) {
                return;
            }

            // Show preview icon at cursor location
            $(GLPIImpact.selectors.dropPreview).css({
                left: e.clientX - 24,
                top: e.clientY - 24,
            });
        });
    },

    /**
    * Init and render the canvas overlay used to show the badges
    */
    initCanvasOverlay: function() {
        var layer = GLPIImpact.cy.cyCanvas();
        var canvas = layer.getCanvas();
        var ctx = canvas.getContext('2d');

        GLPIImpact.cy.on("render cyCanvas.resize", function() {
            layer.resetTransform(ctx);
            layer.clear(ctx);
            GLPIImpact.badgesHitboxes = [];

            GLPIImpact.cy.filter("node:childless:visible").forEach(function(node) {
            // Stop here if the node has no badge defined
                if (!node.data('badge')) {
                    return;
                }

                // Set badge color, adjust contract as needed (target ratio is > 1.8)
                var rgb = hexToRgb(node.data('badge').color);
                while (contrast([255, 255, 255], [rgb.r, rgb.g, rgb.b]) < 1.8) {
                    rgb.r *= 0.95;
                    rgb.g *= 0.95;
                    rgb.b *= 0.95;
                }

                // Set badge position (bottom right corner of the node)
                var bbox = node.renderedBoundingBox({
                    includeLabels  : false,
                    includeOverlays: false,
                    includeNodes   : true,
                });
                var pos = {
                    x: bbox.x2 + GLPIImpact.cy.zoom(),
                    y: bbox.y2 + GLPIImpact.cy.zoom(),
                };

                // Register badge position so it can be clicked
                GLPIImpact.badgesHitboxes.push({
                    position: pos,
                    target  : node.data('badge').target,
                    itemtype: node.data('id').split(GLPIImpact.NODE_ID_SEPERATOR)[0],
                    id      : node.data('id').split(GLPIImpact.NODE_ID_SEPERATOR)[1],
                });

                // Draw the badge
                ctx.beginPath();
                ctx.arc(pos.x, pos.y, 4 * GLPIImpact.cy.zoom(), 0, 2 * Math.PI, false);
                ctx.fillStyle = "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")";
                ctx.fill();

                // Check if text should be light or dark by calculating the
                // grayscale of the background color
                var greyscale = (
                    Math.round(rgb.r * 299)
               + Math.round(rgb.g * 587)
               + Math.round(rgb.b * 114)
                ) / 1000;
                ctx.fillStyle = (greyscale >= 138) ? '#4e4e4e' : 'white';

                // Print number
                ctx.font = 6 * GLPIImpact.cy.zoom() + "px sans-serif";
                ctx.fillText(
                    node.data('badge').count,
                    pos.x - (1.95 * GLPIImpact.cy.zoom()),
                    pos.y + (2.23 * GLPIImpact.cy.zoom())
                );
            });
        });
    }
};

var searchAssetsDebounced = _.debounce(GLPIImpact.searchAssets, 400, false);
