//default engine declaration stuff for the renderer
var renderer = PIXI.autoDetectRenderer(800, 800, {
    backgroundColor : 0x1099bb
});
// attach to HTML element -> body
document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();

// create leading head
var snakeHead = new PIXI.Graphics();
snakeHead.beginFill(0xFFFF00);
snakeHead.lineStyle(5, 0xFF0000);
snakeHead.drawRect(0, 0, 20, 20);
snakeHead.x = 0;
snakeHead.y = 0;

// just get some random x,y coords within our board
function getRandomLoc() {
    // 0 to 40 multiplied by a step of 20 (0-800)
    var x = Math.floor((Math.random() * 40) + 0) * 20;
    var y = Math.floor((Math.random() * 40) + 0) * 20;
    var value = {
    x : x,
    y : y
    }
    return value;
}

// generating food primitive for the first and last time
var food = new PIXI.Graphics();
food.beginFill(0xFFFF00);
food.lineStyle(5, 0xFF0000);
var loc = getRandomLoc();
food.drawRect(0, 0, 20, 20);
food.x = loc.x;
food.y = loc.y;
var loc = undefined;

// using this to create body parts
function createPrimitive(x, y) {
    var primitive = new PIXI.Graphics();
    primitive.beginFill(0xFFFF00);
    primitive.lineStyle(5, 0xFF0000);
    primitive.drawRect(0, 0, 20, 20);
    primitive.x = x;
    primitive.y = y;
    return primitive;
}

// stage.addChild(ship);
stage.addChild(snakeHead);
stage.addChild(food);

// snake velocity X and velocity Y
var snakeVx = 0;
var snakeVy = 0;

// declare key presses
var wKey = keyboard(87);
var sKey = keyboard(83);
var aKey = keyboard(65);
var dKey = keyboard(68);

// declare velocities depending on keypress
wKey.press = function() {
    snakeVy = -1;
    snakeVx = 0;
};
sKey.press = function() {
    snakeVy = 1;
    snakeVx = 0;
};
aKey.press = function() {
    snakeVy = 0;
    snakeVx = -1;
};
dKey.press = function() {
    snakeVy = 0;
    snakeVx = 1;
};

// some generic Deque (using to push front/pop back)
function Deque() {
    this.stac = new Array();
    this.popback = function() {
    return this.stac.pop();
    }
    this.pushback = function(item) {
    this.stac.push(item);
    }
    this.popfront = function() {
    return this.stac.shift();
    }
    this.pushfront = function(item) {
    this.stac.unshift(item);
    }
}

// create a Deque with previous locations
var prevLocs = new Deque();
// array of snakePart primitives
var snakeParts = [];
// size of the snake
var snakeSize = 0;
// frame counter
var counter = 0;

var curVx = 0;
var curVy = 0;
// start animating
animate();
function animate() {
    requestAnimationFrame(animate);
    // counting frames on each execution of our animate loop
    counter++;
    // we take actions every 5 frames which is around 1s/(60/5) so around every
    // 83ms

    // move the snake on every frame with temp velocity
    snakeHead.x += curVx * 4;
    snakeHead.y += curVy * 4;

    // I suppose need to determine this value from average framerate to keep it
    // consistent
    if (counter == 5) {
    // first check if snake head is colliding with food
    if (snakeHead.x == food.x && snakeHead.y == food.y) {
        snakeSize++;
        // create a new primitive snake body part
        var newPart = createPrimitive(snakeHead.x, snakeHead.y)
        // add it to stage & snakeParts array
        stage.addChild(newPart);
        snakeParts.push(newPart);
        // move the food to a new location
        var randomLoc = getRandomLoc();
        food.x = randomLoc.x;
        food.y = randomLoc.y;
    }
    // change temporary velocity every 20 pixels
    curVx = snakeVx;
    curVy = snakeVy;
    // check if snakeHead went out of bounds and return it on the other side
    if (snakeHead.x > 800) {
        snakeHead.x = 0;
    } else if (snakeHead.x < 0) {
        snakeHead.x = 800;
    }
    if (snakeHead.y > 800) {
        snakeHead.y = 0;
    } else if (snakeHead.y < 0) {
        snakeHead.y = 800;
    }
    // reset counter
    counter = 0;
    }

    // Move each snake part to every 5th of the previous snakeHead locations
    for (var i = 0; i < snakeSize; i++) {
    snakeParts[i].x = prevLocs.stac[(i + 1) * 5].x;
    snakeParts[i].y = prevLocs.stac[(i + 1) * 5].y;
    }
    // push current location to previous locations
    prevLocs.pushfront({
    x : snakeHead.x,
    y : snakeHead.y
    });
    // remove last location if we have more locations than snakeparts*5(so we
    // don't overflow)
    if (5 * prevLocs.size > snakeSize) {
    prevLocs.popback;
    }

    // render the stage
    renderer.render(stage);
}

// initializes a keyListener for a keycode (took it from API docs)
function keyboard(keyCode) {
    var key = {};
    key.code = keyCode;
    key.isDown = false;
    key.isUp = true;
    key.press = undefined;
    key.release = undefined;
    // The `downHandler`
    key.downHandler = function(event) {
    if (event.keyCode === key.code) {
        if (key.isUp && key.press)
        key.press();
        key.isDown = true;
        key.isUp = false;
    }
    event.preventDefault();
    };

    // The `upHandler`
    key.upHandler = function(event) {
    if (event.keyCode === key.code) {
        if (key.isDown && key.release)
        key.release();
        key.isDown = false;
        key.isUp = true;
    }
    event.preventDefault();
    };

    // Attach event listeners
    window.addEventListener("keydown", key.downHandler.bind(key), false);
    window.addEventListener("keyup", key.upHandler.bind(key), false);
    return key;
}