<script>
    
    var data = $.getJSON("{{ site.baseurl }}/public/data/channelslist.json");

    var cy = window.cy = cytoscape({
        container: document.getElementById('cy'),
        elements: data,
        style: [
            {
                selector: 'node',
                style: {
                    'label': 'data(label)',
                    'text-valign': 'center',
                    'background-color': 'data(color)',
                    'width': 'data(size)',
                    'height': 'data(size)',
                    'color': 'white',
                    'text-outline-width': 2,
                    'text-outline-color': '#888'
                }
            },
            {
                selector: 'edge',
                style: {
                    'line-color': 'data(color)'
                }
            }],
        layout: {
            name: 'cose',
            nodeDimensionsIncludeLabels: true,
            nodeOverlap: 50
        }
    });

    cy.on('ready', function (e) {
        cy.$('#mare').lock();
    });
    
    cy.on('tap', 'node', function () {
        try { // your browser may block popups
            window.open(this.data('href'));
        } catch (e) { // fall back on url change
            window.location.href = this.data('href');
        }
    });
    
    cy.automove({
        nodesMatching: function( node ) {
            return cy.$('#technologie').allAreNeighbors(node);
        },
        reposition: 'drag',
        dragWith: function( node ) {
            return node.id() == cy.$('#technologie').id();
        }
    });

    cy.automove({
        nodesMatching: function( node ) {
            return cy.$('#global').allAreNeighbors(node);
        },
        reposition: 'drag',
        dragWith: function( node ) {
            return node.id() == cy.$('#global').id();
        }
    });

    cy.automove({
        nodesMatching: function( node ) {
            return cy.$('#ecologie').allAreNeighbors(node);
        },
        reposition: 'drag',
        dragWith: function( node ) {
            return node.id() == cy.$('#ecologie').id();
        }
    });

    cy.automove({
        nodesMatching: function( node ) {
            return cy.$('#project').allAreNeighbors(node);
        },
        reposition: 'drag',
        dragWith: function( node ) {
            return node.id() == cy.$('#project').id();
        }
    });

    cy.automove({
        nodesMatching: function( node ) {
            return cy.$('#democratie').allAreNeighbors(node);
        },
        reposition: 'drag',
        dragWith: function( node ) {
            return node.id() == cy.$('#democratie').id();
        }
    });
</script>
    
