var config = {
    type: Phaser.AUTO,
    parent  : 'phaser-app',
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: {
                y: 300
            },
            debug: true
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var ladder = false;

var game = new Phaser.Game(config);

function preload() {
    this.load.tilemapTiledJSON('map', 'assets/Tiled-9.json');
    this.load.spritesheet('tiles', 'assets/tiles64x64.png', {frameWidth: 64, frameHeight: 64});
    this.load.atlas('player', 'assets/player.png', 'assets/player.json');
}

function create() {
    this.map = this.make.tilemap({key: 'map'});

    // Must match tileSets name above ( tiles64x64 )
    this.Tiles = this.map.addTilesetImage('tiles64x64','tiles');

    // create the ground layer
    this.groundLayer = this.map.createStaticLayer('groundLayer', this.Tiles, 0, 0);
    this.platformLayer = this.map.createStaticLayer('platformLayer', this.Tiles, 0, 0);
    this.ladderLayer = this.map.createDynamicLayer('ladderLayer', this.Tiles, 0, 0);

    // Climb ladder
    this.ladderLayer.setTileIndexCallback(7, allowClimb, this);

    window.ladder = this.ladderLayer;

    // create the this.player sprite
    this.player = this.physics.add.sprite(0, 0, 'player');
    this.player.setBounce(0.1); // our this.player will bounce from items
    this.player.setOrigin(0.5, 0);
    this.player.setCollideWorldBounds(true); // don't go out of the map
    this.player.setPosition(0, 0);

    window.player = this.player;

    // set the boundaries of our game world
    this.physics.world.bounds.width = this.groundLayer.width;
    this.physics.world.bounds.height = this.groundLayer.height;

    // the this.player will collide with this layer
    this.groundLayer.setCollisionByProperty({ collides: true });
    this.platformLayer.setCollisionByProperty({ collides: true });

    // Collides with platform and ground
    this.physics.add.collider(this.groundLayer, this.player);
    this.physics.add.collider(this.platformLayer, this.player);

    this.physics.add.overlap(this.ladderLayer,this.player );

    // this.player walk animation
    this.anims.create({
        key: 'walk',
        frames: this.anims.generateFrameNames('player', {prefix: 'p1_walk', start: 1, end: 11, zeroPad: 2}),
        frameRate: 10,
        repeat: -1
    });
    // idle with only one frame, so repeat is not neaded
    this.anims.create({
        key: 'idle',
        frames: [{key: 'player', frame: 'p1_stand'}],
        frameRate: 10,
    });

    cursors = this.input.keyboard.createCursorKeys();

  // set bounds so the camera won't go outside the game world
  this.cameras.main.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels);
  // make the camera follow the this.player
  this.cameras.main.startFollow(this.player);

  // set background color, so the sky is not black
  this.cameras.main.setBackgroundColor('#ccccff');

}

function allowClimb(sprite, tile) {
    console.log('Allow Climb');
    let distance = Math.abs(this.player.x - (tile.pixelX + tile.width / 2)); // I haven't found how to reassign tile's anchor so I just added half of it's width to it's x coordinate
    console.log(this.player.x, tile.pixelX, distance);
    if (this.cursorKeys.up.isDown && distance <= 3) {
        this.player.x = tile.pixelX + tile.width / 2;
        //this.player.anims.play('playerClimb', true);
        //this.player.setVelocityY(-gameSettings.playerSpeed);
    } else if (this.cursorKeys.down.isDown) {
        //this.player.anims.play('playerClimb', true);
        //this.player.setVelocityY(gameSettings.playerSpeed);
    } else {
        this.player.setVelocityY(0);
    }
}

function update() {


    if (cursors.left.isDown)
    {
            this.player.body.setVelocityX(-200);
            this.player.anims.play('walk', true); // walk left
            this.player.flipX = true;
    }
    else if (cursors.right.isDown)
    {
        this.player.body.setVelocityX(200);
        this.player.anims.play('walk', true);
        this.player.flipX = false;
    } else {
            this.player.body.setVelocityX(0);
            this.player.anims.play('idle', true);
    }

    if (cursors.up.isDown )
    {
            this.player.body.setVelocityY(-300);
    }

}

function resizeApp ()
{
    // Width-height-ratio of game resolution
    // Replace 360 with your game width, and replace 640 with your game height
    let game_ratio = 360 / 640;

    // Make div full height of browser and keep the ratio of game resolution
    let div = document.getElementById('phaser-app');
    div.style.width = (window.innerHeight * game_ratio) + 'px';
    div.style.height = window.innerHeight + 'px';

    // Check if device DPI messes up the width-height-ratio
    let canvas  = document.getElementsByTagName('canvas')[0];

    let dpi_w   = parseInt(div.style.width) / canvas.width;
    let dpi_h   = parseInt(div.style.height) / canvas.height;

    let height  = window.innerHeight * (dpi_w / dpi_h);
    let width   = height * game_ratio;

    // Scale canvas
    canvas.style.width  = width + 'px';
    canvas.style.height = height + 'px';
}

window.addEventListener('resize', resizeApp);