function init_listeners() {
    document.querySelector('#c').addEventListener('dragover', cancel);
    document.querySelector('#c').addEventListener('drop', drop);
    document.querySelector('#c').addEventListener('click', debug);

    document.querySelector('#c').addEventListener('mousedown', mousedown);
    document.querySelector('#c').addEventListener('mousemove', mousemove);
    document.querySelector('#c').addEventListener('mouseup', mouseup);
    document.querySelector('#c').addEventListener('mouseleave', mouseup);
    document.querySelector('#c').addEventListener('wheel', wheel);

    window.addEventListener('keydown', keydown);
    window.addEventListener('keyup', keyup);
}

function debug() {
    schedule_draw();
}

function cancel(e) {
    e.preventDefault();
    e.stopPropagation();
}

function mousedown(e) {
    if (e.button === 1) {
        moving = true;
        return;
    }
}

function mousemove(e) {
    let do_draw = false;

    if (moving) {
        offset.x += e.movementX;
        offset.y += e.movementY;
        do_draw = true;
    }

    if (do_draw) {
        schedule_draw();
    }
}

function mouseup(e) {
    if (e.button === 1 && moving) {
        moving = false;
    }
}

function wheel(e) {
    const screenp = {'x': window.devicePixelRatio * e.clientX, 'y': window.devicePixelRatio * e.clientY};
    const zooming_in = e.deltaY < 0;
    const level = zooming_in ? zoom_level + 2 : zoom_level - 2;
    const dz = (zoom_level > 0 ? config.zoom_delta : -config.zoom_delta);

    zoom_level = level;
    zoom_target = Math.pow(1.0 + dz, Math.abs(zoom_level))
    zoom_screenp = screenp;

    schedule_draw();
}

function jump_to_first_instruction()  {
    if (Object.keys(traces).length > 0) {
        const trace = traces[Object.keys(traces)[0]].raw;
        if (Object.keys(trace).length > 0) {
            const first_instruction = trace[Object.keys(trace)[0]];
            offset.x = -first_instruction.cycle * config.w;
            offset.y = 0 * config.h;
            zoom_target = 1;
            zoom = 1;
            schedule_draw();
        }
    }
}

function keydown(e) {
    if (e.code === 'Digit0') {
        jump_to_first_instruction();
    }
}

function keyup(e) {
}

function drop(e) {
    e.preventDefault();

    if (e.dataTransfer.files.length !== 1) {
        console.error('Only one file at once, please!');
        return false;
    }

    const file = e.dataTransfer.files[0];
    const fr = new FileReader();
    
    const upload_failed = () => {
        console.error('Upload failed');
    };

    const upload_started = () => {
        console.log('Upload started');
    };

    const upload_finished = () => {
        const text = fr.result;
        console.log('Finished. String length:', text.length);
        if (parse(text)) {
            jump_to_first_instruction();
            schedule_draw();
        }
    };

    const upload_progress = (e) => {
        if (e.lengthComputable) {
            const percent = Math.floor(e.loaded / e.total * 100);
            console.log(`Progress: ${percent}%`);
        } else {
            console.log('Progress: unknown');
        }
    };

    fr.addEventListener('abort', upload_failed);
    fr.addEventListener('error', upload_failed);
    fr.addEventListener('load', upload_finished);
    fr.addEventListener('loadstart', upload_started);
    fr.addEventListener('progress', upload_progress);

    fr.readAsText(file);
}