function getBrowserSize() {
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;
    var actualHeight = window.innerHeight ||
                      document.documentElement.clientHeight ||
                      document.body.clientHeight ||
                      document.body.offsetHeight;
    return { "width": actualWidth, "height": actualHeight };
}

function getContext(canvas) {
    var settings = { preserveDrawingBuffer: true };
    gl = canvas.getContext("webgl", settings) ||
         canvas.getContext("experimental-webgl", settings);
    return gl;
}

function physicalSizeRatio() {
    var div = document.createElement("div");
    div.style.width = "1mm";
    div.style.height = "1mm";
    var body = document.getElementsByTagName("body")[0];
    body.appendChild(div);
    var physicalWidth = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
    var physicalHeight = document.defaultView.getComputedStyle(div, null).getPropertyValue('height');
    body.removeChild(div);
    return {
        "width": parseFloat(physicalWidth),
        "height": parseFloat(physicalHeight)
    };
}

window.onload = function () {
    var DEBUG = 0;
    var MOUSETRACKING = 0;
    var LOADINGSCREEN = 1;
    var canvas;
    var socket = new WebSocket("ws://" + host + ":" + port);
    socket.binaryType = "arraybuffer";
    var CONNECT_SERIAL = 666;
    var gl;
    var startTime = new Date();
    // There is no way to get proper vsync since we have no idea when the real
    // swap happens under the hood. What we can do is to delay the response for
    // the eglSwapBuffer call, i.e. block the client for the given number of
    // milliseconds on each swap.
    var SWAP_DELAY = 16; //${swap_delay};
    var contextData = { }; // context -> { shaderMap, programMap, ... }
    var currentContext = 0;
    var currentWindowId = "";
    var windowData = {};
    var currentZIndex = 1;
    var textDecoder;
    var initialLoadingCanvas;
    var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

    if (typeof TextDecoder !== 'undefined') {
        textDecoder = new TextDecoder("utf8");
    } else {
    textDecoder = {
            "decode": function (buffer)
            {
                var string = String.fromCharCode.apply(String, buffer);
                return string;
            }
        };
    }
    var supportedFunctions;

    var sendObject = function (obj) { socket.send(JSON.stringify(obj)); };

    var connect = function () {
        var size = getBrowserSize();
        var width = size.width;
        var height = size.height;
        var physicalSize = physicalSizeRatio();

        var object = { "type": "connect",
            "width": width, "height": height,
            "physicalWidth": width / physicalSize.width,
            "physicalHeight": height / physicalSize.height
        };
        sendObject(object);
        initialLoadingCanvas = createLoadingCanvas('loadingCanvas', 0, 0, width, height);
    };

    var sendResponse = function (id, value) {
        if (DEBUG)
            console.log("Response to " + id + " = " + value);
        sendObject({ "type": "gl_response", "id": id, "value": value });
    };

    var createLoadingCanvas = function(name, x, y, width, height) {
        var canvas = document.createElement("canvas");
        canvas.id = "loading_" + name;
        canvas.style.position = "absolute";
        canvas.style.left = x + "px";
        canvas.style.top = y + "px";
        canvas.style.width = width + "px";
        canvas.style.height = height + "px";
        canvas.style.zIndex = currentZIndex++;
        canvas.style.background = "black";
        canvas.width = width;
        canvas.height = height;
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(canvas);

        if (!LOADINGSCREEN)
            return canvas;
        var gl = canvas.getContext("webgl");

        var loadingVertexShaderSource =
            "attribute vec2 a_position; void main(){ gl_Position = vec4(a_position, 0, 1); }";
        var loadingFragmentShaderSource =
            "precision mediump float;\n"+
            "#define PI 3.14159265\n"+
            "#define QT_COLOR vec4(0.255,0.804,0.321,1.0)\n"+
            "#define GRAY vec4(0.953,0.953,0.957,1.0)\n"+
            "uniform float u_time;\n"+
            "uniform vec2 u_size;\n"+
            "vec4 loadingIndicator(vec2 uv, float time)\n"+
            "{\n"+
            "    float l = length(uv);\n"+
            "    float theta = atan(uv.y,uv.x)/PI/2.0 + 0.5;\n"+
            "    float radius = 0.2;\n"+
            "    float thickness = 0.02;\n"+
            "    float edge = 3.0 / length(u_size.xy);\n"+
            "    float t = fract(-time*2.0);\n"+
            "    float circleVal = smoothstep(radius - edge - thickness, radius - thickness, l) * \n"+
            "                     (1.0 - smoothstep(radius + thickness, radius + edge + thickness, l));\n"+
            "    float indicatorVal = smoothstep(0.245,0.25,fract(theta - t)) * (1.0 - smoothstep(0.995,1.0,fract(theta - t)));\n"+
            "    return (1.0 - indicatorVal) * QT_COLOR + indicatorVal * circleVal * GRAY + vec4(1.0,1.0,1.0,1.0) * (1.0 - circleVal);\n"+
            "}\n"+
            "void main()\n" +
            "{\n"+
            "    vec2 aspect = vec2(u_size.x/u_size.y, 1.0);\n"+
            "    vec2 origin = aspect*vec2(0.5, 0.5);\n"+
            "    vec2 uv = aspect*gl_FragCoord.xy;\n"+
            "    gl_FragColor = loadingIndicator(uv/u_size - origin,u_time); \n"+
            "}\n";

        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, loadingVertexShaderSource);
        gl.compileShader(vertexShader);

        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, loadingFragmentShaderSource);
        gl.compileShader(fragmentShader);

        var program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        // look up where the vertex data needs to go.
        var positionLocation = gl.getAttribLocation(program, "a_position");
        var timeLocation = gl.getUniformLocation(program, "u_time");
        var sizeLocation = gl.getUniformLocation(program, "u_size");

        // Create a buffer and put a single clipspace rectangle in
        // it (2 triangles)
        var buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(
            gl.ARRAY_BUFFER,
            new Float32Array([
                -1.0, -1.0,
                 1.0, -1.0,
                -1.0,  1.0,
                -1.0,  1.0,
                 1.0, -1.0,
                 1.0,  1.0]),
            gl.STATIC_DRAW);
        gl.enableVertexAttribArray(positionLocation);
        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
        gl.uniform2fv(sizeLocation, new Float32Array([canvas.width, canvas.height]));
        var time = 0.0;

        function draw() {
            gl.uniform1f(timeLocation, time);
            time += 0.01;
            gl.drawArrays(gl.TRIANGLES, 0, 6);
        }
        canvas.timerId = setInterval(draw, 16);
        return canvas;
    };

    var createCanvas = function (name, x, y, width, height, title) {
        var body = document.getElementsByTagName("body")[0];
        if (initialLoadingCanvas) {
            clearInterval(initialLoadingCanvas.timerId);
            body.removeChild(initialLoadingCanvas);
            initialLoadingCanvas = undefined;
        }
        var canvas = document.createElement("canvas");
        canvas.id = name;
        canvas.style.position = "absolute";
        canvas.style.left = x + "px";
        canvas.style.top = y + "px";
        canvas.style.width = width + "px";
        canvas.style.height = height + "px";
        canvas.style.zIndex = currentZIndex++;
        canvas.width = width;
        canvas.height = height;
        body.appendChild(canvas);

        var qtButtons = 0;
        var sendMouseEvent = function (buttons, layerX, layerY, clientX, clientY, name) {
            var object = { "type": "mouse",
                "buttons": buttons,
                "layerX": layerX, "layerY": layerY, "clientX": clientX, "clientY": clientY,
                "time": new Date().getTime().toString(),
                "name": name
            };
            sendObject(object);
        };

        var mapButton = function (b) {
            var qtb = 1;
            if (b === 1)
                qtb = 4;
            else if (b === 2)
                qtb = 2;
            return qtb;
        };

        canvas.onmousedown = function (event) {
            /* jslint bitwise: true */
            if (supportsTouch && event.mozInputSource == MOZ_SOURCE_TOUCH)
                return;
            qtButtons |= mapButton(event.button);
            sendMouseEvent(qtButtons, event.layerX, event.layerY, event.clientX, event.clientY,
                           name);
        };

        canvas.onmousemove = function (event) {
            if (supportsTouch && event.mozInputSource == MOZ_SOURCE_TOUCH)
                return;
            if (MOUSETRACKING || event.buttons > 0)
                sendMouseEvent(qtButtons, event.layerX, event.layerY, event.clientX, event.clientY,
                               name);
        };

        canvas.onmouseup = function (event) {
            /* jslint bitwise: true */
            if (supportsTouch && event.mozInputSource == MOZ_SOURCE_TOUCH)
                return;
            qtButtons &= ~mapButton(event.button);
            sendMouseEvent(qtButtons, event.layerX, event.layerY, event.clientX, event.clientY,
                           name);
        };

        function handleMouseWheel(event) {
            var deltaY = 0;
            if (!event)
                deltaY = window.event;
            if (event.deltaY)
                deltaY = event.deltaY;
            else if (event.detail)
                deltaY = event.detail * 40;
            if (deltaY) {
                var object = { "type": "wheel",
                    "layerX": event.layerX, "layerY": event.layerY,
                    "clientX": event.clientX, "clientY": event.clientY,
                    "deltaX": event.deltaX, "deltaY": deltaY, "deltaZ": event.deltaZ,
                    "time": new Date().getTime(),
                    "name": name
                };
                sendObject(object);
            }
            if (event.preventDefault)
                event.preventDefault();
            event.returnValue = false;
        }

        // Internet Explorer, Opera, Chrome and Safari
        canvas.addEventListener('mousewheel', handleMouseWheel, { passive: true });
        // Firefox
        canvas.addEventListener('DOMMouseScroll', handleMouseWheel, { passive: true });

        function handleTouch(event) {
            var object = {
                "type": "touch",
                "name": name,
                "time": new Date().getTime().toString(),
                "event": event.type,
                "changedTouches": [],
                "stationaryTouches": [],
            };
            var addTouch = function(changedTouch, isChanged) {
                var touch = {
                    "clientX": changedTouch.clientX,
                    "clientY": changedTouch.clientY,
                    "force": changedTouch.force,
                    "identifier": changedTouch.identifier,
                    "pageX": changedTouch.pageX,
                    "pageY": changedTouch.pageY,
                    "radiusX": changedTouch.radiusX,
                    "radiusY": changedTouch.radiusY,
                    "screenX": changedTouch.screenX,
                    "screenY": changedTouch.screenY,
                    "normalPositionX": changedTouch.screenX / screen.width,
                    "normalPositionY": changedTouch.screenY / screen.height,
                };
                if (isChanged)
                    object.changedTouches.push(touch);
                else
                    object.stationaryTouches.push(touch);
            };

            for (var i = 0; i < event.changedTouches.length; ++i) {
                var changedTouch = event.changedTouches[i];
                addTouch(changedTouch, true);
            }

            for (var i = 0; i < event.targetTouches.length; ++i) {
                var targetTouch = event.targetTouches[i];
                if (object.changedTouches.findIndex(function(touch){
                    return touch.identifier === targetTouch.identifier;
                }) === -1) {
                    addTouch(targetTouch, false);
                }
            }

            sendObject(object);

            if (event.preventDefault && event.cancelable)
                event.preventDefault();
            event.returnValue = false;
        }

        canvas.addEventListener("touchstart", handleTouch, { passive: true });
        canvas.addEventListener("touchend", handleTouch, { passive: true });
        canvas.addEventListener("touchcancel", handleTouch, { passive: true });
        canvas.addEventListener("touchmove", handleTouch, { passive: true });

        canvas.oncontextmenu = function (event) {
            event.preventDefault();
        };


        var gl = getContext(canvas);
        /* jslint bitwise: true */
        gl.clear([ gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT]);
        windowData[name] = {
            "canvas": canvas,
            "gl": gl,
            "loadingCanvas": createLoadingCanvas(name, x, y, width, height)
        };

        var defaultValuesObject = { "type": "default_context_parameters", "name": name,
            "7939": "GL_OES_element_index_uint GL_OES_standard_derivatives " + // GL_EXTENSIONS
                    "GL_OES_depth_texture GL_OES_packed_depth_stencil" };
        [
            gl.BLEND,
            gl.DEPTH_TEST,
            gl.MAX_TEXTURE_SIZE,
            gl.MAX_VERTEX_ATTRIBS,
            gl.RENDERER,
            gl.SCISSOR_TEST,
            gl.STENCIL_TEST,
            gl.UNPACK_ALIGNMENT,
            gl.VENDOR,
            gl.VERSION,
            gl.VIEWPORT
        ].forEach(function (value) {
            defaultValuesObject[value] = gl.getParameter(value);
        });
        sendObject(defaultValuesObject);

        gl._attachShader = gl.attachShader;
        gl.attachShader = function(program, shader) {
            var d = contextData[currentContext];
            gl._attachShader(d.programMap[program], d.shaderMap[shader].shader);
        };

        gl._bindAttribLocation = gl.bindAttribLocation;
        gl.bindAttribLocation = function(program, index, name) {
            var d = contextData[currentContext];
            gl._bindAttribLocation(d.programMap[program], index, name);
        };

        gl._bindBuffer = gl.bindBuffer;
        gl.bindBuffer = function(target, buffer) {
            var d = contextData[currentContext];
            gl._bindBuffer(target, buffer ? d.bufferMap[buffer] : null);
        };

        gl._bindFramebuffer = gl.bindFramebuffer;
        gl.bindFramebuffer = function(target, framebuffer) {
            var d = contextData[currentContext];
            gl._bindFramebuffer(target, framebuffer ? d.framebufferMap[framebuffer] : null);
        };

        gl._bindRenderbuffer = gl.bindRenderbuffer;
        gl.bindRenderbuffer = function(target, renderbuffer) {
            var d = contextData[currentContext];
            gl._bindRenderbuffer(target, renderbuffer ? d.renderbufferMap[renderbuffer] : null);
            d.boundRenderbuffer = renderbuffer;
        };

        gl._bindTexture = gl.bindTexture;
        gl.bindTexture = function(target, texture) {
            gl._bindTexture(target, texture ? mapTexture(currentContext, texture) : null);
        };

        gl._bufferData = gl.bufferData;
        gl.bufferData = function(target, usage, size, data) {
            gl._bufferData(target, data === null || data.length === 0 ? size : data, usage);
        };

        gl._clearColor = gl.clearColor;
        gl.clearColor = function (red, green, blue, alpha) {
            gl._clearColor(red, green, blue, alpha);
        };

        gl.clearDepthf = function(depth) {
            gl.clearDepth(depth);
        };

        gl._compileShader = gl.compileShader;
        gl.compileShader = function(remoteShader) {
            var d = contextData[currentContext];
            gl._compileShader(d.shaderMap[remoteShader].shader);
        };

        gl._createProgram = gl.createProgram;
        gl.createProgram = function() {
            var d = contextData[currentContext];
            var remoteProgram = d.nextProgramId++;
            var localProgram = gl._createProgram();
            d.programMap[remoteProgram] = localProgram;
            return remoteProgram;
        };

        gl._createShader = gl.createShader;
        gl.createShader = function(type) {
            var d = contextData[currentContext];
            var remoteShader = d.nextShaderId++;
            var localShader = gl._createShader(type);
            d.shaderMap[remoteShader] = { };
            d.shaderMap[remoteShader].shader = localShader;
            d.shaderMap[remoteShader].source = "";
            return remoteShader;
        };

        gl.deleteBuffers = function(n) {
            var d = contextData[currentContext];
            for (var i = 0; i < n; ++i)
                gl.deleteBuffer(d.bufferMap[arguments[1 +i]]);
        };

        gl.deleteFramebuffers = function(framebuffers) {
            var d = contextData[currentContext];
            for (var i in framebuffers)
                gl.deleteFramebuffer(d.framebufferMap[framebuffers[i]]);
        };

        gl._deleteProgram = gl.deleteProgram;
        gl.deleteProgram = function(program) {
            var d = contextData[currentContext];
            gl._deleteProgram(d.programMap[program]);
        };

        gl.deleteRenderbuffers = function(renderbuffers) {
            var d = contextData[currentContext];
            for (var i in renderbuffers)
                gl.deleteRenderbuffer(d.renderbufferMap[renderbuffers[i]]);
        };

        gl._deleteShader = gl.deleteShader;
        gl.deleteShader = function(remoteShader) {
            var d = contextData[currentContext];
            gl._deleteShader(d.shaderMap[remoteShader].shader);
        };

        gl.deleteTextures = function(textures) {
            for (var i in textures)
                gl.deleteTexture(mapTexture(currentContext, textures[i]));
        };

        gl._drawElements = gl.drawElements;
        gl.drawElements = function(mode, count, type, n, indices, offset) {
            if (!arguments[3].length)
                gl._drawElements(mode, count, type, offset);
            else
                console.error("fixme: Client-side drawElements not supported");
        };

        gl._framebufferRenderbuffer = gl.framebufferRenderbuffer;
        gl.framebufferRenderbuffer = function(target, attachment, renderbuffertarget, renderbuffer)
        {
            var d = contextData[currentContext];
            // With packed depth-stencil Quick tries to attach the same renderbuffer to both
            // the depth and stencil attachment points. WebGL does not allow this. Instead,
            // we need to attach to the DEPTH_STENCIL attachment point.
            if (d.renderbufferFormat[d.boundRenderbuffer] === gl.DEPTH_STENCIL) {
                if (attachment === gl.STENCIL_ATTACHMENT) {
                    attachment = gl.DEPTH_STENCIL_ATTACHMENT;
                } else {
                    // Ignore this call. Qt Quick will send a new call with STENCIL_ATTACHMENT
                    // parameter, it will be replaced by DEPTH_STENCIL_ATTACHMENT to work-around the
                    // browser limitation.
                    return;
                }
            }
            gl._framebufferRenderbuffer(target, attachment, renderbuffertarget,
                                        d.renderbufferMap[renderbuffer]);
        };

        gl.genBuffers = function(n) {
            var d = contextData[currentContext];
            var data = [];
            for (var i = 0; i < n; ++i) {
                var remoteBuf = d.nextBufferId++;
                var localBuf = gl.createBuffer();
                data.push(remoteBuf);
                d.bufferMap[remoteBuf] = localBuf;
            }
            return data;
        };

        gl.genFramebuffers = function(n) {
            var d = contextData[currentContext];
            var data = [];
            for (var i = 0; i < n; ++i) {
                var remoteFramebuffer = d.nextFramebufferId++;
                var localFramebuffer = gl.createFramebuffer();
                d.framebufferMap[remoteFramebuffer] = localFramebuffer;
                data.push(remoteFramebuffer);
            }
            return data;
        };

        gl.genRenderbuffers = function(n) {
            var d = contextData[currentContext];
            var data = [];
            for (var i = 0; i < n; ++i) {
                var remoteRenderBuffer = d.nextRenderBufferId++;
                var localRenderBuffer = gl.createRenderbuffer();
                d.renderbufferMap[remoteRenderBuffer] = localRenderBuffer;
                data.push(remoteRenderBuffer);
            }
            return data;
        };

        gl.getAttachedShaders = function(program, maxCount) {
            var d = contextData[currentContext];
            var shaders = d.attachedShaderMap[program];
            var data = [];
            for (var shader in shaders) {
                for (var remoteShaderId in shaderMap) {
                    if (shaderMap[remoteShaderId].shader === shader)
                        data.push(remoteShaderId);
                }
            }
            return data;
        };

        gl._getAttribLocation = gl.getAttribLocation;
        gl.getAttribLocation = function(program, name) {
            if (typeof program === "object")
                return gl._getAttribLocation(program, name);
            var d = contextData[currentContext];
            return gl._getAttribLocation(d.programMap[program], name);
        };

        gl.getBooleanv = gl.getParameter;
        gl.getIntegerv = gl.getParameter;

        gl.getProgramiv = function(program, pname) {
            var d = contextData[currentContext];
            if (pname === 0x8B84) // INFO_LOG_LENGTH
                return gl._getProgramInfoLog(d.programMap[program]).length;
            else
                return gl.getProgramParameter(d.programMap[program], pname);
        };

        gl._getShaderInfoLog = gl.getShaderInfoLog;
        gl.getShaderInfoLog = function(shader) {
            if (typeof shader === "object")
                return gl._getShaderInfoLog(shader);
            var d = contextData[currentContext];
            return gl._getShaderInfoLog(d.shaderMap[shader].shader);
        };

        gl.getShaderiv = function(shader, pname) {
            var d = contextData[currentContext];
            if (pname === 0x8B88)
                return d.shaderMap[shader].source.length;
            else
                return gl.getShaderParameter(d.shaderMap[shader].shader, pname);
        };

        gl._getShaderSource = gl.getShaderSource;
        gl.getShaderSource = function(remoteShader) {
            var d = contextData[currentContext];
            return gl._getShaderSource(d.shaderMap[remoteShader].shader);
        };

        gl.getString = function(pname) {
            return gl.getParameter(pname);
        };

        gl._getProgramInfoLog = gl.getProgramInfoLog;
        gl.getProgramInfoLog = function(remoteProgram) {
            var d = contextData[currentContext];
            var localProgram = d.programMap[remoteProgram];
            return gl._getProgramInfoLog(localProgram);
        };

        gl._getUniformLocation = gl.getUniformLocation;
        gl.getUniformLocation = function(program, name) {
            if (typeof program === "object") {
                return gl._getUniformLocation(program, name);
            } else {
                var d = contextData[currentContext];
                var p = gl._getUniformLocation(d.programMap[program], name);
                var location = -1;
                if (p) {
                    location = d.nextLocation++;
                    d.uniformLocationMap[location] = p;
                }
                return location;
            }
        };

        gl.genTextures = function(n) {
            var d = contextData[currentContext];
            var data = [];
            for (var i = 0; i < n; ++i) {
                var remoteTexture = d.nextTextureId++;
                var localTexture = gl.createTexture();
                d.textureMap[remoteTexture] = localTexture;
                data.push(remoteTexture);
            }
            return data;
        };

        gl._framebufferTexture2D = gl.framebufferTexture2D;
        gl.framebufferTexture2D = function(target, attachment, texTarget, texture, level) {
            var d = contextData[currentContext];
            gl._framebufferTexture2D(target, attachment, texTarget, d.textureMap[texture], level);
        };

        gl._isRenderbuffer = gl.isRenderbuffer;
        gl.isRenderbuffer = function(renderbuffer) {
            if (typeof renderbuffer === "object")
                return gl._isRenderBuffer(renderbuffer);
            var d = contextData[currentContext];
            return gl._isRenderbuffer(d.renderbufferMap[renderbuffer]);
        };

        gl._linkProgram = gl.linkProgram;
        gl.linkProgram = function(program) {
            var d = contextData[currentContext];
            gl._linkProgram(d.programMap[program]);
        };

        gl._renderbufferStorage = gl.renderbufferStorage;
        gl.renderbufferStorage = function(target, internalFormat, width, height) {
            var d = contextData[currentContext];
            if (internalFormat === 0x88F0) // GL_DEPTH24_STENCIL8_OES
                internalFormat = 0x84F9; // GL_DEPTH_STENCIL_OES
            d.renderbufferFormat[d.boundRenderbuffer] = internalFormat;
            gl._renderbufferStorage(target, internalFormat, width, height);
        };

        gl._texImage2D = gl.texImage2D;
        gl.texImage2D = function(target, level, internalFormat, width, height, border, format, type,
                                 data) {
            var dataSize = data ? data.byteLength : 0;
            var pixels;
            if (data === null || dataSize === 0)
                pixels = null;
            else if (type === gl.UNSIGNED_BYTE)
                pixels = data;
            else if (type === g.UNSIGNED_SHORT_5_6_5 || type === UNSIGNED_SHORT_4_4_4_4 ||
                       type === UNSIGNED_SHORT_5_5_5_1)
                pixels = new DataView(new Uint16Array(data));
            else
                console.error("gl.texImage2D: Unsupported type");
            gl._texImage2D(target, level, internalFormat, width, height, border, format, type,
                           pixels);
        };

        gl._texSubImage2D = gl.texSubImage2D;
        gl.texSubImage2D = function(target, level, xoffset, yoffset, width, height, format, type, data) {
            var dataSize = data ? data.byteLength : 0;
            var pixels;
            if (data === null || dataSize === 0)
                pixels = null;
            if (type === gl.UNSIGNED_BYTE)
                pixels = data;
            else if (type === gl.UNSIGNED_SHORT_5_6_5 || type === gl.UNSIGNED_SHORT_4_4_4_4 ||
                     type === gl.UNSIGNED_SHORT_5_5_5_1 || type === ext.HALF_FLOAT_OES)
                pixels = new Uint16Array(pixels);
            else if (type === gl.FLOAT)
                pixels = new Float32Array(pixels);
            else
                console.error("gl.texSubImage2D: Unsupported type");
            gl._texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, pixels);
        };

        gl._shaderSource = gl.shaderSource;
        gl.shaderSource = function(shader, source) {
            var d = contextData[currentContext];
            d.shaderMap[shader].source = source;
            gl._shaderSource(d.shaderMap[shader].shader, d.shaderMap[shader].source);
        };

        gl._uniform1f = gl.uniform1f;
        gl.uniform1f = function(location, x) {
            var d = contextData[currentContext];
            gl._uniform1f(d.uniformLocationMap[location], x);
        };

        gl._uniform1fv = gl.uniform1fv;
        gl.uniform1fv = function(location, value) {
            var d = contextData[currentContext];
            gl._uniform1fv(d.uniformLocationMap[location], value);
        };

        gl._uniform2fv = gl.uniform2fv;
        gl.uniform2fv = function(location, value) {
            var d = contextData[currentContext];
            gl._uniform2fv(d.uniformLocationMap[location], value);
        };

        gl._uniform3fv = gl.uniform3fv;
        gl.uniform3fv = function(location, value) {
            var d = contextData[currentContext];
            gl._uniform3fv(d.uniformLocationMap[location], value);
        };

        gl._uniform1i = gl.uniform1i;
        gl.uniform1i = function(location, value) {
            var d = contextData[currentContext];
            gl._uniform1i(d.uniformLocationMap[location], value);
        };

        gl._uniform4fv = gl.uniform4fv;
        gl.uniform4fv = function(location, value) {
            var d = contextData[currentContext];
            gl._uniform4fv(d.uniformLocationMap[location], value);
        };

        gl._uniformMatrix3fv = gl.uniformMatrix3fv;
        gl.uniformMatrix3fv = function(location, transpose, data) {
            var d = contextData[currentContext];
            gl._uniformMatrix3fv(d.uniformLocationMap[location], transpose, data);
        };

        gl._uniformMatrix4fv = gl.uniformMatrix4fv;
        gl.uniformMatrix4fv = function(location, transpose, data) {
            var d = contextData[currentContext];
            gl._uniformMatrix4fv(d.uniformLocationMap[location], transpose, data);
        };

        gl._useProgram = gl.useProgram;
        gl.useProgram = function(program) {
            var d = contextData[currentContext];
            gl._useProgram(program !== 0 ? d.programMap[program] : null);
        };

        gl._vertexAttrib1fv = gl.vertexAttrib1fv;
        gl.vertexAttrib1fv = function (index, v0) {
            var values = new Float32Array([v0]);
            gl._vertexAttrib1fv(index, values);
        };

        gl._vertexAttrib2fv = gl.vertexAttrib2fv;
        gl.vertexAttrib2fv = function (index, v0, v1) {
            var values = new Float32Array([v0, v1]);
            gl._vertexAttrib2fv(index, values);
        };

        gl._vertexAttrib3fv = gl.vertexAttrib3fv;
        gl.vertexAttrib3fv = function (index, v0, v1, v2) {
            var values = new Float32Array([v0, v1, v2]);
            gl._vertexAttrib3fv(index, values);
        };

        gl._drawArrays = gl.drawArrays;
        gl.drawArrays = function (mode, first, count/*, size*/) {
            var d = contextData[currentContext];
            var subDataParts = [];
            var bufferSize = 0;
            var offset = 0;
            if (!d.drawArrayBuf)
                d.drawArrayBuf = gl.createBuffer();
            gl._bindBuffer(gl.ARRAY_BUFFER, d.drawArrayBuf);
            for (var i = 4; i < arguments.length; i += 6) {
                var subData = {
                    "index": arguments[i + 0],
                    "size": arguments[i + 1],
                    "type": arguments[i + 2],
                    "normalized": arguments[i + 3],
                    "stride": arguments[i + 4],
                    "offset": 0,
                    "data": arguments[i + 5],
                };
                subDataParts.push(subData);
                bufferSize += subData.data.length;
            }
            gl._bufferData(gl.ARRAY_BUFFER, bufferSize, gl.STATIC_DRAW);
            for (var part in subDataParts) {
                gl.bufferSubData(gl.ARRAY_BUFFER, offset, subDataParts[part].data);
                gl._vertexAttribPointer(subDataParts[part].index,
                                        subDataParts[part].size,
                                        subDataParts[part].type,
                                        subDataParts[part].normalized,
                                        subDataParts[part].stride,
                                        offset);
                offset += subDataParts[part].data.length;
            }
            gl._drawArrays(mode, first, count);
        };

        gl._vertexAttribPointer = gl.vertexAttribPointer;
        gl.vertexAttribPointer = function (index, size, type, normalized, stride, pointer) {
            gl._vertexAttribPointer(index, size, type, normalized, stride, pointer);
        };
    };

    var commandsNeedingResponse = {
        "swapBuffers": undefined,
        "checkFramebufferStatus": undefined,
        "createProgram": undefined,
        "createShader": undefined,
        "genBuffers": undefined,
        "genFramebuffers": undefined,
        "genRenderbuffers": undefined,
        "genTextures": undefined,
        "getAttachedShaders": undefined,
        "getAttribLocation": undefined,
        "getBooleanv": undefined,
        "getError": undefined,
        "getFramebufferAttachmentParameteriv": undefined,
        "getIntegerv": undefined,
        "getParameter": undefined,
        "getProgramInfoLog": undefined,
        "getProgramiv": undefined,
        "getRenderbufferParameteriv": undefined,
        "getShaderiv": undefined,
        "getShaderPrecisionFormat": undefined,
        "getString": undefined,
        "getTexParameterfv": undefined,
        "getTexParameteriv": undefined,
        "getUniformfv": undefined,
        "getUniformLocation": undefined,
        "getUniformiv": undefined,
        "getVertexAttribfv": undefined,
        "getVertexAttribiv": undefined,
        "getShaderSource": undefined,
        "getShaderInfoLog": undefined,
        "isRenderbuffer": undefined
    };

    var ensureContextData = function (context) {
        if (!(context in contextData)) {
            contextData[context] = {
                shaderMap: { },
                programMap: { },
                textureMap: { },
                framebufferMap: { },
                renderbufferMap: { },
                renderbufferFormat: { },
                boundRenderbuffer: 0,
                bufferMap: { },
                uniformLocationMap: { },
                nextLocation: 1,
                nextBufferId: 1,
                nextProgramId: 1,
                nextShaderId: 1,
                nextFramebufferId: 1,
                nextRenderBufferId: 1,
                nextTextureId: 1,
                pendingBinary: [],
                drawArrayBuf: null,
                drawArrayBufSize: 0,
                glCommands: [],
                attribData: []
            };
        }
    };

    var mapTexture = function (context, localId) {
        var d = contextData[context];
        if (localId in d.textureMap)
            return d.textureMap[localId];
        // ### do we need sharing?
        console.error("Texture " + localId + " is not found in context " + context);
        return 0;
    };

    var execGL = function (context) {
        var d = contextData[context];
        if (DEBUG)
            console.log("executing " + d.glCommands.length + " commands");
        while (d.glCommands.length) {
            var obj = d.glCommands.shift();
            if (DEBUG) {
                var parameters = [];
                for (var key in obj.parameters) {
                    if (typeof obj.parameters[key] === 'number' &&
                        d.glConstants[obj.parameters[key]] !== undefined) {
                        parameters[key] = d.glConstants[obj.parameters[key]] + ' (' +
                                          obj.parameters[key] + ')';
                    } else {
                        parameters[key] = obj.parameters[key];
                    }
                }
                console.log("Calling: gl." + obj.function, parameters);
            }
            var response = gl[obj.function].apply(gl, obj.parameters);
            if (response !== undefined)
                sendResponse(obj.id, response);
        }
    };

    var injectGL = function (context, funcName, parameters) {
        contextData[context].glCommands.push({ "function": funcName, "parameters": parameters });
    };

    var handleBinaryMessage = function (event) {
        var view = new DataView(event.data);
        var offset = 0;
        var obj = { "parameters": [] };
        obj.function = supportedFunctions[view.getUint8(offset)];
        offset += 1;
        if (obj.function in commandsNeedingResponse) {
            obj.id = view.getUint32(offset);
            offset += 4;
        }
        if (obj.function === "makeCurrent")
            obj.parameterCount = 4;
        else if (obj.function === "swapBuffers")
            obj.parameterCount = 0;
        else if (obj.function == "drawArrays")
            obj.parameterCount = null; // glDrawArrays has a variable number of arguments
        else
            obj.parameterCount = gl[obj.function].length;
        function deserialize(container, count) {
            for (var i = 0; count != null ? i < count : offset + 4 < event.data.byteLength; ++i) {
                var character = view.getUint8(offset);
                offset += 1;
                var parameterType = String.fromCharCode(character);
                if (parameterType === 'i') {
                    container.push(view.getInt32(offset));
                    offset += 4;
                } else if (parameterType === 'u') {
                    container.push(view.getUint32(offset));
                    offset += 4;
                } else if (parameterType === 'd') {
                    container.push(view.getFloat64(offset));
                    offset += 8;
                } else if (parameterType === 'b') {
                    container.push(view.getUint8(offset) === 1);
                    offset += 1;
                    break;
                } else if (parameterType === 's') {
                    var stringSize = view.getUint32(offset);
                    offset += 4;
                    var string = textDecoder.decode(new Uint8Array(event.data, offset, stringSize));
                    container.push(string);
                    offset += stringSize;
                } else if (parameterType === 'x') {
                    var dataSize = view.getUint32(offset);
                    offset += 4;
                    var data = new Uint8Array(event.data, offset, dataSize);
                    var bytesRead = data.byteLength;
                    if (bytesRead !== dataSize)
                        console.error("invalid data");
                    container.push(data);
                    offset += dataSize;
                } else if (parameterType === 'n') {
                    container.push(null);
                } else if (parameterType === 'a') {
                    var dataSize = view.getUint8(offset);
                    offset += 1;
                    deserialize(container[container.push([]) - 1], dataSize);
                } else {
                    console.error("Unsupported type :" + character);
                }
            }
        }
        deserialize(obj.parameters, obj.parameterCount);
        var magic = view.getUint32(offset);
        if (magic !== 0xbaadf00d) // sentinel expected at end of buffer
            console.error('Invalid magic');
        offset += 4;
        if (offset !== event.data.byteLength)
            console.error("Invalid buffer");

        if (!("function" in obj)) {
            console.error("Function not found");
        } else if (obj.function === "makeCurrent") {
            var winId = obj.parameters[3];
            if (winId in windowData) {
                canvas = windowData[winId].canvas;
                canvas.width = canvas.style.width = obj.parameters[1];
                canvas.height = canvas.style.height = obj.parameters[2];
                gl = windowData[winId].gl;
                currentWindowId = winId;
                currentContext = obj.parameters[0];
                if (currentContext)
                    ensureContextData(currentContext);
                if (DEBUG) {
                    console.log("Current context is now " + currentContext);
                    var d = contextData[currentContext];
                    if (d.glConstants === undefined) {
                        d.glConstants = {};
                        for (var key in gl) {
                            if (typeof gl[key] === 'number') {
                                d.glConstants[gl[key]] = 'gl.' + key;
                            }
                        }
                    }
                }
            }
        } else if (obj.function === "swapBuffers") {
            var data =  windowData[currentWindowId];
            if (data.loadingCanvas) {
                var body = document.getElementsByTagName("body")[0];
                clearInterval(data.loadingCanvas.timerId);
                body.removeChild(data.loadingCanvas);
                data.loadingCanvas = undefined;
            }

            if (DEBUG)
                var t0 = performance.now();
            execGL(currentContext);
            if (startTime) {
                console.log((new Date() - startTime) + "ms to first frame.");
                startTime = undefined;
            }
            var frameTime = performance.now() - t0;
            if (DEBUG)
                console.log("Swap time: " + frameTime + " ms.");
            setTimeout((function () { sendResponse(obj.id, 1); }),
                       Math.max(SWAP_DELAY - frameTime, 0));
            // have preserved swap and now we need to clear for real
        } else {
            handleGlesMessage(obj);
        }
    };

    var handleGlesMessage = function (obj) {
        // A GLES call. Unfortunately WebGL swaps when the control gets back to
        // the event loop. This is totally retarded. So we queue the commands up
        // and issue them when receiving a function that needs a response. This
        // does not solve the problem and still needs preserved swap to be safe
        // since eglSwapBuffers is not the only command that expects a response,
        // but is more efficient than issuing everything from here.
        var d = contextData[currentContext];
        if (d)
            d.glCommands.push(obj);
        if (obj.function in commandsNeedingResponse)
            execGL(currentContext);
    };

    socket.onopen = function (event) {
        console.log("Socket Open");
        (function(){
            var doCheck = true;
            var check = function(){
                var size = getBrowserSize();
                var width = size.width;
                var height = size.height;
                var physicalSize = physicalSizeRatio();
                if (DEBUG)
                    console.log("Resizing canvas to " + width + " x " + height);
                sendObject({ "type": "canvas_resize",
                    "width": width, "height": height,
                    "physicalWidth": width / physicalSize.width,
                    "physicalHeight": height / physicalSize.height
                });
            };
            window.addEventListener("resize",(function(){
                if(doCheck){
                    check();
                    doCheck = false;
                    setTimeout((function(){
                        doCheck = true;
                        check();
                    }), 1000);
                }
            }));
        })();
        connect();
    };
    socket.onclose = function (event) {
        console.log("Socket Closed (" + event.code + "): " + event.reason);
        window.location.reload();
    };
    socket.onerror = function (error) {
        console.log("Socket error: " + error.toString());
    };
    socket.onmessage = function (event) {
        if (event.data instanceof ArrayBuffer) {
            handleBinaryMessage(event);
            return;
        }
        var obj;
        try {
            obj = JSON.parse(event.data);
        } catch (e) {
            console.error("Failed to parse " + event.data + ": " + e.toString());
            return;
        }
        if (!("type" in obj)) {
            console.error("Message type not found");
        } else if (obj.type === "create_canvas") {
            createCanvas(obj.winId, obj.x, obj.y, obj.width, obj.height, obj.title);
            if (obj.title && obj.title.length)
                document.title = obj.title;
        } else if (obj.type === "destroy_canvas") {
            var canvas = document.getElementById(obj.winId);
            var body = document.getElementsByTagName("body")[0];
            body.removeChild(canvas);
        } else if (obj.type === "clipboard_updated") {
            // Opens a new window/tab and shows the current remote clipboard. There is no way to
            // copy some text to the local clipboard without user interaction.
            window.open("/clipboard", "clipboard");
        } else if (obj.type === "open_url") {
            window.open(obj.url);
        } else if (obj.type === "change_title") {
            document.title = obj.text;
        } else if (obj.type === "connect") {
            supportedFunctions = obj.supportedFunctions;
            var sysinfo = obj.sysinfo;
            if (obj.debug)
                DEBUG = 1;
            if (obj.mouseTracking)
                MOUSETRACKING = 1;
            if (obj.loadingScreen === "0")
                LOADINGSCREEN = 0;
            console.log(sysinfo);
        } else {
            console.error("Unknown message type");
        }
    };

    var setupInput = function () {
        var keyHandler = function (event) {
            var object = { "type": event.type,
                "char": event.char,
                "key": event.key,
                "which": event.which,
                "location": event.location,
                "repeat": event.repeat,
                "locale": event.locale,
                "ctrlKey": event.ctrlKey, "shiftKey": event.shiftKey, "altKey": event.altKey,
                "metaKey": event.metaKey,
                "string": String.fromCharCode(event.which ||
                                               event.keyCode),
                "keyCode": event.keyCode, "charCode": event.charCode, "code": event.code,
                "time": new Date().getTime(),
            };
            sendObject(object);
        }

        document.addEventListener('keypress', keyHandler, true);
        document.addEventListener('keydown', keyHandler, true);
        document.addEventListener('keyup', keyHandler, true);
    };
    setupInput();
};