"use strict";

const vertexShaderSource =`
    attribute vec2 a_position;

    uniform vec2 u_translation;

    void main(){
        gl_Position = vec4(a_position + u_translation, 0.0, 1.0);
    }
`;

const fragmentShaderSource = `
    precision mediump float;
	uniform vec4 u_FragColor;
    void main(){
        gl_FragColor = u_FragColor;
    }
`;

const MOVE_SPEED = 0.5;

function main() {

    const canvas = document.getElementById("c");
    const gl = canvas.getContext("webgl");
    if(gl === null){
        window.alert("WebGl not suppoted!");
        return;
    }

    // INITIALISATION CODE GOES HERE

    // === Per Frame operations ===

    let update = function(deltaTime) {
        // YOUR UPDATE FUNCTION
    };

    /*let render = function() {
        // YOUR RENDER FUNCTION
        resizeCanvas(c);
        gl.viewport(0, 0, c.width, c.height);

        gl.clear(gl.COLOR_BUFFER_BIT);

        // Draw the triangle
        {
            const primitiveType = gl.TRIANGLES;
            const offset = 0;
            const count = 3;
            gl.drawArrays(primitiveType, offset, count);
        }
    };*/

        // Setup shaders
    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
    const program = createProgram(gl, vertexShader, fragmentShader);
    const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
	const color = gl.getUniformLocation(program, "u_FragColor");
    //
     const translationUniformLocation = gl.getUniformLocation(program, "u_translation");
    gl.useProgram(program);

    let translationX = 0.0;
    let translationY = 0.0;

    let leftPresed = false;
    let rightPressed = false;
    let downPressed = false;
    let upPressed = false;

    // User input
    {
        document.addEventListener("keydown", function (event) {
            switch (event.key) {
                case "ArrowLeft": {
                        leftPresed = true;
                    }
                    break;

                case "ArrowRight": {
                        rightPressed = true;
                    }
                    break;

                case "ArrowDown": {
                        downPressed = true;
                    }
                    break;

                case "ArrowUp": {
                        upPressed = true;
                    }
                    break;
            }
        });

        document.addEventListener("keyup", function (event) {
            switch (event.key) {
                case "ArrowLeft": {
                        leftPresed = false;
                    }
                    break;

                case "ArrowRight": {
                        rightPressed = false;
                    }
                    break;

                case "ArrowDown": {
                        downPressed = false;
                    }
                    break;

                case "ArrowUp": {
                        upPressed = false;
                    }
                    break;
            }
        });

    }

    // Setup vertex position buffer
    const positions = [
	/*//helicoptor
        1.0, 0.0,
        0.0, 0.0,
        1.0, 1.0,*/
	//river
        -0.4, 1.0,
		0.0, 1.0,
		-0.4, -1.0,
		-0.4, 1.0,
		-0.4,-1.0,
		-0.8, -1.0,
	//house1
		0.2, 0.9,
		0.4, 0.9,
		0.4, 0.7,
		0.2, 0.9,
		0.2, 0.7,
		0.4, 0.7,
	//house2
		0.7, -0.1,
		0.9, -0.1,
		0.9, -0.3,
		0.7, -0.3,
		0.9, -0.3,
		0.7, -0.1,

	//house3
		0.8, 0.7,
		0.9, 0.3,
		1.0, 0.4,
		0.9, 0.8,
		0.8, 0.7,
		1.0, 0.4,

	//hellipad
		0.1, -0.1,
		0.5, -0.1,
		0.5, -0.5,
		0.1, -0.1,
		0.1, -0.5,
		0.5, -0.5,

	//helipad "H"
		0.2, -0.2,
		0.4, -0.2,
		0.4, -0.4,
		0.2, -0.2,
		0.2, -0.4,
		0.4, -0.4,

	//h top
		0.25, -0.2,
		0.35, -0.2,
		0.35, -0.25,
		0.25, -0.2,
		0.25, -0.25,
		0.35, -0.25,

    ];
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    // Prepare the screen for drawing
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0.0, 0.9, 0.4, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // Specify which shader to use
    gl.useProgram(program);

    // Prepare position buffer
    {
        const size = 2;          // 2 components per iteration
        const type = gl.FLOAT;   // the data is 32bit floats
        const normalize = false; // don't normalize the data
        const stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
        const offset = 0;        // start at the beginning of the buffer
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);
        gl.enableVertexAttribArray(positionAttributeLocation);
    }

    const render = function () {
        resizeCanvas(c);
        gl.viewport(0, 0, c.width, c.height);

        gl.clear(gl.COLOR_BUFFER_BIT);



        // Draw the triangle
        {

			gl.uniform2fv(translationUniformLocation, [0, 0]);
			//river
			gl.uniform4fv(color, [0,0,1,1]);
			gl.drawArrays(gl.TRIANGLES, 0, 6);

			gl.uniform4fv(color, [210/255,105/255,30/255,1]);
			//house1
			gl.drawArrays(gl.TRIANGLES, 6, 6);
			//house2
			gl.drawArrays(gl.TRIANGLES, 12, 6);
			//house3
			gl.drawArrays(gl.TRIANGLES, 18, 6);
			//hellipad
			gl.uniform4fv(color, [0,0,0,1]);
			gl.drawArrays(gl.TRIANGLES, 24, 6);

			//hellipad
			gl.uniform4fv(color, [1,1,1,1]);
			gl.drawArrays(gl.TRIANGLES, 30, 6);

			//H top
			gl.uniform4fv(color, [0,0,0,1]);
			gl.drawArrays(gl.TRIANGLES, 36, 6);


			//helicoptor
			//gl.uniform2fv(translationUniformLocation, [translationX, translationY]);
            //gl.drawArrays(gl.TRIANGLES, 0, 3);

        }
    };

    let lastSeconds =0;

    const animate = function (milliseconds) {
        window.requestAnimationFrame(animate);

        const seconds = milliseconds / 1000;
        const delta = seconds - lastSeconds;

        if (leftPresed) {
            translationX -= MOVE_SPEED * delta;
        }
        if (rightPressed) {
            translationX += MOVE_SPEED * delta;
        }
        if (downPressed) {
            translationY -= MOVE_SPEED * delta;
        }
        if (upPressed) {
            translationY += MOVE_SPEED * delta;
        }

        render();

        lastSeconds = seconds;
    };

    animate();
}

function resizeCanvas (c) {
    check(isCanvas(c));

    const cssToRealPixels = window.devicePixelRatio || 1.0;

    const displayWidth = Math.floor(c.clientWidth  * cssToRealPixels);
    const displayHeight = Math.floor(c.clientHeight * cssToRealPixels);

    if (c.width !== displayWidth || canvas.height !== displayHeight) {
        c.width = c.clientWidth;
        c.height = c.clientHeight;
        return true;
    }
    else {
        return false;
    }
}



// Helper functions to compile shaders

function createShader(gl, type, source) {
    check(isContext(gl), isString(source));

    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);

    const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (!success) {
        console.error(gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

function createProgram(gl, vertexShader, fragmentShader) {
    check(isContext(gl), isShader(vertexShader, fragmentShader));

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

    const success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (!success) {
        console.error(gl.getProgramInfoLog(program));
        gl.deleteProgram(program);
        return null;
    }
    return program;
}