let Application = PIXI.Application,
    Container = PIXI.Container,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    Sprite = PIXI.Sprite,
    TextureCache = PIXI.utils.TextureCache,
    Rectangle = PIXI.Rectangle,
    Graphics = PIXI.Graphics,
    Text = PIXI.Text,
    TextStyle = PIXI.TextStyle;

//Create a Pixi Application
let app = new Application({
    width: 512,
    height: 512,
    antialias: true,
    transparent: false,
    resolution: 1
    });


//Add the canvas that Pixi automaticall created for you to the HTML Document
document.body.appendChild(app.view);
app.renderer.backgroundColor = 0x45b5f6;
//app.renderer.view.style.position = "absolute";
//app.renderer.view.style.display = "block";
//app.renderer.autoResize = true;
//app.renderer.resize(window.innerWidth, window.innerHeight);

//load the sprite as a texture
loader
    .add([
    "images/treasureHunter.json"
    ])
    .load(setup);

//define keyboard listener
function keyboard(keyCode) {
    let key = {};
    key.code = keyCode;
    key.isDown = false;
    key.isUp = true;
    key.press = undefined;
    key.release = undefined;

    //downhandler
    key.downHandler = event => {
        if (event.keyCode === key.code) {
            if (key.isUp && key.press) key.press();
            key.isDown = true;
            key.isUp = false;
        }
        event.preventDefault();
    };

    //uphandler
    key.upHandler = 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;
}

let dungeon, explorer, treasure, door, id, state;

function setup() {
    //Treasurehunter
    id = resources["images/treasureHunter.json"].textures;

    //create the gamescene container
    gameScene = new Container();
    app.stage.addChild(gameScene);

    //create the gameOverScene for win screen
    gameOverScene = new Container();
    app.stage.addChild(gameOverScene);

    gameOverScene.visible = false;

    gameWinBg = new Graphics();
    gameWinBg.beginFill(0x000000);
    gameWinBg.drawRect(0, 0, 512, 512);
    gameWinBg.endFill();
    gameOverScene.addChild(gameWinBg);

    //winning screnne style
    let winStyle = new TextStyle({
        fontFamily: "Montserrat",
        fontSize: 64,
        fill: "white",
    });

    message = new Text("The End!", winStyle);
    message.anchor.set(0.5, 0.5);
    message.position.set(512/2, 512/2);
    gameOverScene.addChild(message);

    explorer = new Sprite(id["explorer.png"]);
    dungeon = new Sprite(id["dungeon.png"]);
    treasure = new Sprite(id["treasure.png"]);
    door = new Sprite(id["door.png"]);
    gameScene.addChild(dungeon, explorer, treasure, door);

    //Create the health bar
    healthBar = new PIXI.DisplayObjectContainer();
    healthBar.position.set(app.stage.width - 170, 4);
    gameScene.addChild(healthBar);

    //black part of healthbar
    let innerBar = new Graphics();
    innerBar.beginFill(0x000000);
    innerBar.drawRect(0, 0, 128, 8);
    innerBar.endFill();
    healthBar.addChild(innerBar);

    //create the red healthbar
    let outerBar = new Graphics();
    outerBar.beginFill(0xFF3300);
    outerBar.drawRect(0, 0, 128, 8);
    outerBar.endFill();
    healthBar.addChild(outerBar);

    healthBar.outer = outerBar;

    explorer.position.set(68, app.stage.height / 2 - explorer.height / 2);
    treasure.position.set(app.stage.width - treasure.width - 48, app.stage.height / 2 - treasure.height / 2);
    door.position.set(32,0);

    //add movement
    explorer.vx = 0;
    explorer.vy = 0;

    let numberOfBlobs = 6,
        spacing = 48,
        xOffset = 150,
        speed = 2,
        direction = 1;

    //array to store the blobs
    blobs = [];

    //make as many blobs as the number of 'numberOfBlobs'
    for (let i = 0; i < numberOfBlobs; i++) {

        //make a blob
        let blob = new Sprite(id["blob.png"]);

        //space the blobs
        let x = spacing * i + xOffset;

        //random y position
        let y = randomInt(0, app.stage.height - blob.height);

        blob.x = x;
        blob.y = y;

        blob.vy = speed * direction;

        direction *= -1;

        blobs.push(blob);

        gameScene.addChild(blob);
    }



    state = play;
    app.ticker.add(delta => gameLoop(delta));

//    //draw rounded rectangle
//    let roundBox = new Graphics();
//    roundBox.lineStyle(4, 0x1133ff, 1);
//    roundBox.beginFill(0x66ccff);
//    roundBox.drawRoundedRect(0,0,350,120, 5);
//    roundBox.endFill();
//    roundBox.position.set(app.stage.width / 2, app.stage.height / 2);
//    roundBox.pivot.set(175, 60);
//    app.stage.addChild(roundBox);
//    console.log(roundBox.drawRoundedRect.width);
//
//    //text style
//    let style = new TextStyle({
//        fontFamily: "VT323",
//        fontSize: 32,
//        fill: "white",
//        stroke: "#ff3300",
//        strokeThickness: 4,
//        dropShadow: true,
//        dropShadowColor: "#000000",
//        dropShadowBlur: 4,
//        dropShadowAngle: Math.PI / 6,
//        dropShadowDistance: 6,
//        align: "center",
//    });
//
//    //message
//    let message = new Text("You're dead!", style);
//    message.position.set(app.stage.width/2, app.stage.height/2);
//    message.anchor.set(0.5, 0.5);
//    app.stage.addChild(message);
//    message.text = "Hocus Pocus!";


//end setup
}

function gameLoop(delta) {
    state(delta);
}

function play(delta) {

    //boundaries of movement
    function contain(sprite, container) {
        let collision = undefined;

        //left
        if (sprite.x < container.x) {
            sprite.x = container.x;
            collision = "left";
        }

        //top
        if (sprite.y < container.y) {
            sprite.y = container.y;
            collision = "top";
        }

        //right
        if (sprite.x + sprite.width > container.width) {
            sprite.x = container.width - sprite.width;
            collision = "right";
        }

        //bottom
        if (sprite.y + sprite.height > container.height) {
            sprite.y = container.height - sprite.height;
            collision = "bottom";
        }

        //return collision value
        return collision;
    }

    contain(explorer, {x: 28, y: 10, width:488, height: 480});

    explorer.x += explorer.vx;
    explorer.y += explorer.vy;

    blobs.forEach(function(blob){
        //move the blob
        blob.y += blob.vy;

        let blobHitWall = contain(blob, {x: 28, y:10, width: 488, height:480});

        if (blobHitWall === "top" || blobHitWall === "bottom") {
            blob.vy *= -1;
        }

        let explorerHit = false;

        if(hitTestRectangle(explorer, blob)){
            explorerHit = true;
        }

        if(explorerHit) {
            explorer.alpha = 0.5;
            healthBar.outer.width -= 1;

        } else {
            explorer.alpha = 1;
        }

        if (hitTestRectangle(explorer, treasure)) {
            treasure.x = explorer.x + 8;
            treasure.y = explorer.y + 8;
        }

        if (hitTestRectangle(treasure, door)) {
            state = end;
            message.text = "You won!";
        }

        if (healthBar.outer.width < 0) {
            state = end;
            message.text = "You lost!";
        }

    });
}
//play end

function end() {
    gameScene.visible = false;
    gameOverScene.visible = true;
}

//keyboard
let left = keyboard(37),
        up = keyboard(38),
        right = keyboard(39),
        down = keyboard(40);

    //left
    left.press = () => {
        explorer.vx = -5;
        explorer.vy = 0;
    };

    left.release = () => {
        if (!right.isDown && explorer.vy === 0) {
            explorer.vx = 0;
        }
    };

    //up
    up.press = () => {
        explorer.vy = -5;
        explorer.vx = 0;
    };

    up.release = () => {
        if (!down.isDown && explorer.vx === 0) {
            explorer.vy = 0;
        }
    };

    //right
    right.press = () => {
        explorer.vy = 0;
        explorer.vx = 5;
    };

    right.release = () => {
        if (!left.isDown && explorer.vy === 0) {
            explorer.vx = 0;
        }
    };

    //down
    down.press = () => {
        explorer.vy = 5;
        explorer.vx = 0;
    };

    down.release = () => {
        if (!up.isDown && explorer.vx === 0) {
            explorer.vy = 0;
        }
    };
//keyboard end

//hit rectangle
    function hitTestRectangle(r1, r2) {

        let hit, combinedHalfWidths, combinedHalfHeights, vx, vy;

        hit = false;

        r1.centerX = r1.x + r1.width / 2;
        r1.centerY = r1.y + r1.height / 2;
        r2.centerX = r2.x + r2.width / 2;
        r2.centerY = r2.y + r2.height / 2;

        r1.halfWidth = r1.width / 2;
        r1.halfHeight = r1.height / 2;
        r2.halfWidth = r2.width / 2;
        r2.halfHeight = r2.height / 2;

        vx = r1.centerX - r2.centerX;
        vy = r1.centerY - r2.centerY;

        combinedHalfWidths = r1.halfWidth + r2.halfWidth;
        combinedHalfHeights = r1.halfHeight + r2.halfHeight;

        if (Math.abs(vx) < combinedHalfWidths) {
            if (Math.abs(vy) < combinedHalfHeights) {
                hit = true;
            } else {
                hit = false;
            }

        } else {
            hit = false;

        }

        return hit;

    }
    //hit rectangle end

function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}