window.onload = function () {

    // GET THE IMAGE.
    var rock = new Image();
    rock.src = 'rock.png';
    var background = new Image();
    var grass = new Image();
    grass.src = 'grass.png'
    var sea = new Image();
    sea.src = 'sea.png'
    var hills = new Image();
    hills.src = 'hills.png'
    tiles = [grass,hills,sea,rock];
    background.src = 'background.png';
    // WAIT TILL IMAGE IS LOADED.
    background.onload = function () {
        fill_canvas();       // FILL THE CANVAS WITH THE IMAGE.
    }

    function fill_canvas() {
        // CREATE CANVAS CONTEXT.
        var canvas = document.getElementById('canvas');
        canvas.width = 576;
        canvas.height = 576;
        var ctx = canvas.getContext('2d');




        ctx.drawImage(background, 0, 0);       // DRAW THE IMAGE TO THE CANVAS.
        let x, y = 0
        noise.seed(Math.random())
        for(x = 0; x < getBlockDimensions()[0]; x++){
          for(y = 0; y < getBlockDimensions()[1]; y++){

            var value = (noise.perlin2(x/3.0, y/3.0))*10;
            if (value >= -3) {
              ctx.drawImage(tiles[0], x*24,y*24)
            } else if (value < -3) {
              ctx.drawImage(tiles[2], x*24,y*24)
            }
            if (value > 1.4) {
              ctx.drawImage(tiles[1], x*24,y*24)
            }

          }
        }
        for (i = 0; i < 90; i++){
          ctx.drawImage(tiles[3], randomNumber(0,24)*24,randomNumber(0,24)*24)
        }
    }
}

function getBlockDimensions(){

return [canvas.width/24, canvas.height/24]
}

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