font-size: 2.5em;

    background-color: #2196f3;

    background-color: #2196F3;

    box-shadow: 0px 5px 10px rgba(0,0,0,0.25);

    font-size: 1.25em;

    background-color: #8BC34A;

    background-color: #727272;
    color: #ffffff;

}
.screen.local {
    background-color: #2196F3;
    color: #ffffff;

    function Canvas(elem) {

    function Canvas(elem, socket) {

        this.names = ['Main Laptop', 'Desktop', 'Secondary Laptop', 'Gallifrey', 'Kronos', 'Atlantis'];
        this.nameIndex = 0;

            // Add new screens when ctrl is pressed

            // Add dummy screens when ctrl is pressed

                this.addScreen(this.localizePos(e.pos));

                this.addDummyScreen(this.localizePos(e.pos));

            // Update the cluster
            socket.send(JSON.stringify({
                Screens: this.cluster.screens.map((screen, id) => {
                    if (this.screens[id]) {
                        // Update the edges
                        var edges = this.screens[id].edges;
                        screen.edges = {
                            left: edges[0][0] ? edges[0][0].id : null,
                            right: edges[0][1] ? edges[0][1].id : null,
                            top: edges[1][0] ? edges[1][0].id : null,
                            bottom: edges[1][1] ? edges[1][1].id : null,
                        };
                    }
                    return screen;
                }),
            }));

            if (e.button !== 0) return;

                button: e.button,

                    button: null,

        // Network events
        socket.onmessage = (e) => {
            var obj = JSON.parse(e.data);
            var type = Object.keys(obj)[0];
            var event = obj[type];
            switch(type) {
            case "Cluster":
                this.replaceCluster(event);
                break;
            }
        };

    Canvas.prototype.getCenter = function() {
        var rect = this.elem.getBoundingClientRect();
        return [
            rect.width / 2,
            rect.height / 2,
        ];
    };

    Canvas.prototype.getScreens = function() {
        return this.screens.filter((screen) => {
            // Ignore screens that have focuses on them
            for (var key in this.focuses) {
                if (screen == this.focuses[key].target) {
                    return false;
                }
            }
            return true;

    Canvas.prototype.replaceCluster = function(cluster) {
        this.cluster = cluster;
        this.screens.forEach((screen) => {
            screen.elem.parentElement.removeChild(screen.elem)

        this.screens = [];
        this.addScreens(cluster, cluster.local_screen, this.getCenter());

    Canvas.prototype.addScreen = function(pos) {
        var id = this.screens.length;

    Canvas.prototype.addScreens = function(cluster, id, pos) {
        var obj = this.screens[id];
        if (obj) return obj;
        var obj = cluster.screens[id];
        if (!obj) return null;

            name: this.names[this.nameIndex],

            name: obj.name,
            pos: pos,
            size: [200, 125],
            local: cluster.local_screen === id,
        });
        this.screens[id] = screen;
        this.view.appendChild(screen.elem);
        // Resolve edges
        screen.edges = [[
            this.addScreens(cluster, obj.edges.left, vectorSub(pos, [screen.size[0] + gridPad, 0])),
            this.addScreens(cluster, obj.edges.right, vectorAdd(pos, [screen.size[0] + gridPad, 0])),
        ], [
            this.addScreens(cluster, obj.edges.top, vectorSub(pos, [0, screen.size[1] + gridPad])),
            this.addScreens(cluster, obj.edges.bottom, vectorAdd(pos, [0, screen.size[1] + gridPad])),
        ]];
        return screen;
    };
    Canvas.prototype.addDummyScreen = function(pos) {
        var screen = new Screen({
            id: this.screens.length,
            name: "Dummy Screen",

            size: [160, 100],

            size: [200, 125],

        this.nameIndex = (this.nameIndex + 1) % this.names.length;

    Canvas.prototype.getScreens = function() {
        return this.screens.filter((screen) => {
            // Ignore screens that have focuses on them
            for (var key in this.focuses) {
                if (screen == this.focuses[key].target) {
                    return false;
                }
            }
            return true;
        });
    };

        this.id = params.id;

            className: 'screen draggable',

            className: ['screen', params.local ? 'local' : '', 'draggable'],

                className: 'screen-name',

                className: ['screen-name'],

        // Walk around the graph to find direct neighbours (only works in 2D)
        other.edges[1 - dim].forEach((screen, pathSide) => {
            if (!screen) return;
            screen = screen.edges[dim][side];
            if (!screen) return;

        // Walk around graph through adjacent dimensions to find neighbours
        other.edges.filter((edgeDim, pathDim) => {
            return pathDim != dim;
        }).forEach((edgeDim, pathDim) => {
            edgeDim.forEach((screen, pathSide) => {
                if (!screen) return;
                screen = screen.edges[dim][side];
                if (!screen) return;

            // Found a neighbour
            this.edges[1 - dim][pathSide] = screen;
            screen.edges[1 - dim][1 - pathSide] = this;

                // Found a neighbour
                this.edges[pathDim][pathSide] = screen;
                screen.edges[pathDim][1 - pathSide] = this;

            screen = screen.edges[dim][side];
            if (!screen) return;
            screen = screen.edges[1 - dim][1 - pathSide];
            if (!screen) return;

                screen = screen.edges[dim][side];
                if (!screen) return;
                screen = screen.edges[pathDim][1 - pathSide];
                if (!screen) return;

            // Found a neighbour (if found by one path, should be found by all paths)
            this.edges[dim][side] = screen;
            screen.edges[dim][1 - side] = this;

                // Found a neighbour (if found by one path, should be found by all paths)
                this.edges[dim][side] = screen;
                screen.edges[dim][1 - side] = this;
            });

        // Disconnect from cluster
        this.edges.forEach((edgeDim, dim) => {
            edgeDim.forEach((screen, side) => {
                if (screen) {
                    screen.edges[dim][1 - side] = null;
                }
            });
        });

        console.log(this);

    var ws = new WebSocket("ws://127.0.0.1:3012");
    ws.onopen = function(e) {
        new Canvas(document.querySelector('.canvas'));

    var socket = new WebSocket("ws://127.0.0.1:3012");
    socket.onopen = function(e) {
        new Canvas(document.querySelector('.canvas'), socket);

    ws.onmessage = function(e) {
        var obj = JSON.parse(e.data);
        var type = Object.keys(obj)[0];
        var event = obj[type];
        switch(type) {
        case "Screens":
            console.log(event);
            break;
        }

    socket.onerror = function(e) {
        alert("Failed to connect to server");

          } else {

          } else if (className) {