var
    /**
     * Constants
     */
    WIDTH = 700,
    HEIGHT = 600,
    pi = Math.PI,
    UpArrow = 38,
    DownArrow = 40,
    Space = 32,
    games,
    userBallSpeedsArray = [],
    //Array containing speed var values

    gameVars = [],

    speedValues = [6, 8],//, 10, 12, 15, 17, 6, 8, 10, 12, 15, 17],
    //Array containing player height values
    heightValues = [60, 100, 250],

    //Array time elapsed
    c = [],
    //Array for input user
    iu = [],
    //var used for storing at db
    dba,
    dbb,
    // var used to count amount of games
    nmbrGame = 1,
//var used to calculate elapsed time
    startTime,
    endTime,
    timeDiff,
    //var used for older browser versions
    requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame,

    //var used to pause game when ball leaves field
    nonMotionBall = true,
    //var used to mark end of a game
    gameOver = false,
    /**
     * Game elements
     */
    canvas,
    ctx,
    keystate,

    // The player paddle
    player = {
        x: null,
        y: null,
        width: 20,
        height: 100,
        // Update the position depending on pressed keys
        update: function () {
            if (keystate[UpArrow]) this.y -= 7;
            if (keystate[DownArrow]) this.y += 7;
            // keep the paddle inside of the canvas
            this.y = Math.max(Math.min(this.y, HEIGHT - this.height), 0);
        },
        // Draw the player paddle to the canvas
        draw: function () {
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    },

    // The ai paddle
    ai = {
        x: null,
        y: null,
        width: 20,
        height: 100,
        /**
         * Update the position depending on the ball position
         */
        update: function () {
            // calculate ideal position
            var desty = ball.y - (this.height - ball.side) * 0.5;
            // ease the movement towards the ideal position
            this.y += (desty - this.y);
            // keep the paddle inside of the canvas
            this.y = Math.max(Math.min(this.y, HEIGHT - this.height), 0);
        },
        /**
         * Draw the ai paddle to the canvas
         */
        draw: function () {
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    },

    // The ball object
    ball = {
        x: null,
        y: null,
        vel: null,
        side: 20,
        speed: 17,

        // Serves the ball towards the specified side
        serve: function (side) {
            // set the x and y position
            this.x = (WIDTH / 2);
            this.y = (HEIGHT / 2);
            // calculate out-angle, higher/lower on the y-axis =>
            // steeper angle
            var phi = 0.1 * pi;
            // set velocity direction and magnitude
            this.vel = {
                x: side * this.speed * Math.cos(phi),
                y: this.speed * Math.sin(phi),
            }

        },

        // Update the ball position and keep it within the canvas
        updateMotion: function () {
            // update position with current velocity
            this.x += this.vel.x;
            this.y += this.vel.y;
            // check if out of the canvas in the y direction
            if (0 > this.y || this.y + this.side > HEIGHT) {
                // calculate and add the right offset, i.e. how far
                // inside of the canvas the ball is
                var offset = this.vel.y < 0 ? 0 - this.y : HEIGHT - (this.y + this.side);
                this.y += 2 * offset;
                // mirror the y velocity
                this.vel.y *= -1;
            }
            // helper function to check intesectiont between two
            // axis aligned bounding boxex (AABB)
            var AABBIntersect = function (ax, ay, aw, ah, bx, by, bw, bh) {
                return ax < bx + bw && ay < by + bh && bx < ax + aw && by < ay + ah;
            };
            // check against target paddle to check collision in x
            // direction
            var pdle = this.vel.x < 0 ? player : ai;
            if (AABBIntersect(pdle.x, pdle.y, pdle.width, pdle.height,
                    this.x, this.y, this.side, this.side)
            ) {
                // set the x position and calculate reflection angle
                this.x = pdle === player ? player.x + player.width : ai.x - this.side;
                var n = (this.y + this.side - pdle.y) / (pdle.height + this.side);
                var phi = 0.25 * pi * (2 * n - 1); // pi/4 = 45
                // calculate smash value and update velocity
                var smash = Math.abs(phi) > 0.2 * pi ? 1.5 : 1;
                this.vel.x = smash * (pdle === player ? 1 : -1) * this.speed * Math.cos(phi);
                this.vel.y = smash * this.speed * Math.sin(phi);
            }
            // Actions taken when ball leaves canvas
            if (0 > this.x + this.side || this.x > WIDTH) {
                keystate[UpArrow] = false;
                keystate[DownArrow] = false;

                logNumber();

                nonMotionBall = true;
                endTime = new Date().getTime();
                timeDiff = endTime - startTime;
                c.push(timeDiff);
                if (gameVars.length == 0 && nmbrGame == 6) {
                    writeGameData();
                    window.location = "bedanking.html";

                } else if (gameVars.length == 0 && nmbrGame != 6) {
                    makeGameVars();
                    nmbrGame++;
                    gameOver = true;
                }
            }
        },

        //pauses the balls movement en resets it
        updateNonMotion: function () {

            this.x = (WIDTH / 2);
            this.y = (HEIGHT / 2);
            if (keystate[Space] && gameVars.length != 0) {
                gameOver = false;
                start();
            }
            if (keystate[Space] && gameOver) {
                alert(gameVars.length);
            }
        },

        // Draw the ball to the canvas
        draw: function () {
            ctx.fillRect(this.x, this.y, this.side, this.side);
        }
    };

//Shuffle arrays with speed and height values;
shuffle(gameVars);

function logNumber() {
    goedCijfer = false;
    cijfer = -1;
    while (!goedCijfer) {
        cijfer = window.prompt("Gelieve de geschatte snelheid van de bal in te voeren. \nWaarden tussen 1 en 6 (grenzen inbegrepen) worden aanvaard.");
        if (cijfer >= 1 && cijfer <= 6) {
            goedCijfer = true;
        }
    }
    cijfer.trim();
    userBallSpeedsArray.push(cijfer);
    cijfer = -1;
}

/**
 * Starts the game
 */
function main() {
    // create, initiate and append game canvas
    canvas = document.createElement("canvas");
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);
    keystate = {};
    // keep track of keyboard presses
    document.addEventListener("keydown", function (evt) {
        keystate[evt.keyCode] = true;
    });
    document.addEventListener("keyup", function (evt) {
        delete keystate[evt.keyCode];
    });

    makeGameVars();

    // game loop function
    loop();

    requestAnimationFrame(loop);

}
/**
 * Loop animations */
function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
};

// Fill gameVars with speed & height values & shuffle
function makeGameVars() {
    //speeds = [6]; // debug vars
    //heights = [60, 100];
    speeds = [6, 8, 10, 12, 15, 17];
    heights = [60, 100, 250];
    for (i = 0; i < speeds.length; i++) {
        for (j = 0; j < heights.length; j++) {
            gameVars.push({"speed": speeds[i], "height": heights[j]});
            gameVars.push({"speed": speeds[i], "height": heights[j]});
        }
    }
    shuffle(gameVars);
}

/**
 * Initatite game objects and set start positions
 */
function init() {
    //Change ballspeed to random value
    ball.speed = gameVars[gameVars.length - 1].speed;

    if (gameVars.length == 0) {
        gameOver = true;
    } else {
        player.height = gameVars[gameVars.length - 1].height;
        gameVars.pop();
    }

    player.x = player.width;
    player.y = (HEIGHT - player.height) / 2;
    ai.x = WIDTH - (player.width + ai.width);
    ai.y = (HEIGHT - ai.height) / 2;
    ball.serve(1);
    startTime = new Date().getTime();

}
/**
 * Update all game objects
 */
function update() {
    if (nonMotionBall) {
        ball.updateNonMotion();
    } else {
        ball.updateMotion();
    }
    player.update();
    ai.update();
}
/**
 * shuffles the arrays
 */
function shuffle(a) {
    var j, x, i;
    for (i = a.length; i > 0; i--) {
        j = Math.floor(Math.random() * i);
        x = a[i - 1];
        a[i - 1] = a[j];
        a[j] = x;

    }

}
/**
 * Clear canvas and draw all game objects and net
 */
function draw() {
    ctx.fillRect(0, 0, WIDTH, HEIGHT);
    ctx.save();
    ctx.fillStyle = "#fff";
    if (!nonMotionBall) {
        ball.draw();
        player.draw();
        ai.draw();
        // draw the net
        var w = 4;
        var x = (WIDTH - w) * 0.5;
        var y = 0;
        var step = HEIGHT / 20;
        while (y < HEIGHT) {
            ctx.fillRect(x, y + step * 0.25, w, step * 0.5);
            y += step;
        }
    }
    if (nonMotionBall && gameVars.length != 0 && !gameOver) {
        ctx.font = "30px Verdana";
        ctx.fillText("Druk op spatie om te starten !", 120, 280);
        ctx.fillText("Gebruik pijltjes toetsen om balk te besturen!", 20, 320);

    }
    if (nonMotionBall && gameOver) {
        ctx.font = "30px Verdana";
        ctx.fillText("Game Over!", 250, 280);
        ctx.fillText("Druk spatie om te herbeginnen", 120, 320);
    }
    ctx.restore();
}

//starts game
function start() {
    nonMotionBall = false;
    init();
}

// start and run the game
main();