var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

// Initialization
var inf_ctx = infinity(ctx);

// Draw something
ctx.fillRect(canvas.width/2, canvas.height/2, 50, 50);

inf_ctx.updateChunks();

// Move the "view" or "camera"
inf_ctx.moveTo(100, 100); // absolute panning, move to (100, 100)
inf_ctx.moveBy(5, 5); // relative panning, move to (105, 105)

// create the canvas element and append it to the document
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

document.body.appendChild(canvas);

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

/*
* * * * * * * * * * * * * *
*  Infinite canvas code!  *
* * * * * * * * * * * * * *
*/
// Initialize the infinite canvas buffer underneath the context
var inf_ctx = infiniteCanvas.initialize(ctx);

// Prepare some variables for the dragging gestures logic
var mouseIsDown = false;
var middleOrRightIsDown = false;
var previousMousePosition;

canvas.addEventListener("mousedown", function (event) {
    // 1 is leftmousebutton, 2 is middle, 3 is left
    if (event.which === 1) {
        mouseIsDown = true;
    } else {
        middleOrRightIsDown = true;
    }
});

window.addEventListener("mouseup", function (event) {
    // When leftmousebutton is released, synchronise the newly
    // drawn scribbles to the underlying buffer chunks
    if (event.which === 1) {
        mouseIsDown = false;
        /*
        * * * * * * * * * * * * * *
        *  Infinite canvas code!  *
        * * * * * * * * * * * * * *
        */
        inf_ctx.updateChunks();
    } else {
        middleOrRightIsDown = false;
    }
});

window.addEventListener("mousemove", function (event) {
    var newMousePosition = {x: event.offsetX, y: event.offsetY};

    if (mouseIsDown) {
        // draw lines when dragging with the left mosue button
        if (previousMousePosition) {
            ctx.beginPath();
            ctx.moveTo(previousMousePosition.x, previousMousePosition.y);
            ctx.lineTo(newMousePosition.x     , newMousePosition.y);
            ctx.stroke();
        }
    } else if (middleOrRightIsDown) {
        // pan the canvas whenever dragging with the middle or right mouse button
        var dx = previousMousePosition.x - newMousePosition.x;
        var dy = previousMousePosition.y - newMousePosition.y;
        // Canvas gets really messy if you do not clear it up :)
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        /*
        * * * * * * * * * * * * * *
        *  Infinite canvas code!  *
        * * * * * * * * * * * * * *
        */
        inf_ctx.moveBy(dx, dy);
    }

    previousMousePosition = newMousePosition;
});