var socket;
var dataStored = false;
if (!window.WebSocket) {
    window.WebSocket = window.MozWebSocket;
}
if (window.WebSocket) {
    socket = new WebSocket("ws://" + window.location.host + "/ws");
    socket.binaryType = "arraybuffer";
    socket.onmessage = function(event) {
        var buffer = event.data;
        var bytes = new Uint8Array(buffer);
        switch (bytes[0]) {
            case 0x01:
                window.navigator.vibrate(250);
                break;
            case 0x02:
                dataStored = true;
                paintCanvas(document.getElementById("controller_canvas"));
                break;
            case 0x03:
                dataStored = false;
                paintCanvas(document.getElementById("controller_canvas"));
                break;
        }
    }
    socket.onopen = function(event) {

    }
    socket.onclose = function(event) {

    }
    var canvas = document.getElementById("controller_canvas");
    if (canvas.getContext) {
        paintCanvas(canvas);

        var hammer = new Hammer(canvas);
        hammer.on('press', function(event) {
            // Get the position clicked
            var mouseX = event.center.x;
            var mouseY = event.center.y;

            // Setup buffer
            var buffer = new ArrayBuffer(2);
            var bytes = new Uint8Array(buffer);
            bytes[1] = 0x01;
            var pressed = false;

            // Check distance to left button
            var leftButtonX = 64;
            var leftButtonY = 96;
            var leftButtonXDist = leftButtonX - mouseX;
            var leftButtonYDist = leftButtonY - mouseY;
            var leftButtonDistSq = (leftButtonXDist * leftButtonXDist) + (leftButtonYDist * leftButtonYDist);
            if (leftButtonDistSq < 1024) {
                bytes[0] = 0x01;
                pressed = true;
            }

            // Check distance to right button
            var rightButtonX = 256;
            var rightButtonY = 96;
            var rightButtonXDist = rightButtonX - mouseX;
            var rightButtonYDist = rightButtonY - mouseY;
            var rightButtonDistSq = (rightButtonXDist * rightButtonXDist) + (rightButtonYDist * rightButtonYDist);
            if (rightButtonDistSq < 1024) {
                bytes[0] = 0x02;
                pressed = true;
            }

            // Check distance to up button
            var upButtonX = 160;
            var upButtonY = 48;
            var upButtonXDist = upButtonX - mouseX;
            var upButtonYDist = upButtonY - mouseY;
            var upButtonDistSq = (upButtonXDist * upButtonXDist) + (upButtonYDist * upButtonYDist);
            if (upButtonDistSq < 1024) {
                bytes[0] = 0x03;
                pressed = true;
            }

            // Check contained in transmission button
            if (dataStored) {
                if (mouseX > 112 && mouseY > 96 && mouseX < 208 && mouseY < 128) {
                    bytes[0] = 0x04;
                    pressed = true;
                }
            }

            if (pressed) {
                // Send buffer
                socket.send(buffer);
            }
        });
        hammer.on('pressup', function(event) {
            // Get the position clicked
            var mouseX = event.center.x;
            var mouseY = event.center.y;

            // Setup buffer
            var buffer = new ArrayBuffer(2);
            var bytes = new Uint8Array(buffer);
            bytes[1] = 0x02;
            var pressed = false;

            // Check distance to left button
            var leftButtonX = 64;
            var leftButtonY = 96;
            var leftButtonXDist = leftButtonX - mouseX;
            var leftButtonYDist = leftButtonY - mouseY;
            var leftButtonDistSq = (leftButtonXDist * leftButtonXDist) + (leftButtonYDist * leftButtonYDist);
            if (leftButtonDistSq < 1024) {
                bytes[0] = 0x01;
                pressed = true;
            }

            // Check distance to right button
            var rightButtonX = 256;
            var rightButtonY = 96;
            var rightButtonXDist = rightButtonX - mouseX;
            var rightButtonYDist = rightButtonY - mouseY;
            var rightButtonDistSq = (rightButtonXDist * rightButtonXDist) + (rightButtonYDist * rightButtonYDist);
            if (rightButtonDistSq < 1024) {
                bytes[0] = 0x02;
                pressed = true;
            }

            // Check distance to up button
            var upButtonX = 160;
            var upButtonY = 48;
            var upButtonXDist = upButtonX - mouseX;
            var upButtonYDist = upButtonY - mouseY;
            var upButtonDistSq = (upButtonXDist * upButtonXDist) + (upButtonYDist * upButtonYDist);
            if (upButtonDistSq < 1024) {
                bytes[0] = 0x03;
                pressed = true;
            }

            // Check contained in transmission button
            if (mouseX > 112 && mouseY > 96 && mouseX < 208 && mouseY < 128) {
                bytes[0] = 0x04;
                pressed = true;
            }

            if (pressed) {
                // Send buffer
                socket.send(buffer);
            }
        });
    } else {
        alert("Your browser does not support Canvas");
    }
} else {
    alert("Your browser does not support WebSocket.");
}

function paintCanvas(canvas) {
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "rgb(0, 0, 0)";
    context.beginPath();
    context.ellipse(64, 96, 32, 32, 0, 0, Math.PI * 2, false);
    context.stroke();
    context.beginPath();
    context.ellipse(256, 96, 32, 32, 0, 0, Math.PI * 2, false);
    context.stroke();
    context.beginPath();
    context.ellipse(160, 48, 32, 32, 0, 0, Math.PI * 2, false);
    context.stroke();
    if (dataStored) {
        context.fillStyle = "rgb(255, 0, 0)"
        context.fillRect(112, 96, 96, 32);
        context.fillStyle = "rgb(0, 0, 0)"
    }
    context.beginPath();
    context.rect(112, 96, 96, 32)
    context.stroke();
}