var canvas, ctx;
var t; // Frame counter
var gameInterval;
var components;

var messages, username, currentMessageText, currentMessageParts, currentMessagePixels, mouseIsDown;

window.onload = function () {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    document.addEventListener("keydown", keyDown);

    document.addEventListener("mousedown", mouseDown)
    document.addEventListener("mousemove", mouseMove)
    document.addEventListener("mouseup", mouseUp)
    window.addEventListener('resize', resizeCanvas, false);
    window.addEventListener('orientationchange', resizeCanvas, false);    

    init();
    resizeCanvas();
}
function init() {
    components = {
        keyboard: typingMessageComponent,
        mouse: drawMessageComponent,
        draw: normalDraw,
        update: normalUpdate
    }
    t = 0 
    
    username = "Mark"
    messages = []
    messages.unshift({
        type: 0,
    })
    messages.unshift({
        type: 1,
        text: username
    })
    currentMessageText = ""
    currentMessagePixels = []
    gameInterval = setInterval(game, 1000 / FPS);
}
function resizeCanvas() {
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
}
function keyDown(e) {
    components.keyboard.keyDown(e);
}
function mouseDown(e){
    components.mouse.mouseDown(e);
}
function mouseUp(e){
    components.mouse.mouseUp(e);
}
function mouseMove(e){
    components.mouse.mouseMove(e);
}
function update() {
    components.update.update()
}
function draw(){
    components.draw.draw()
}

function game() {
    update();
    draw();
}