var context;
var base_image;
var lastY;
var canvasWidth;

function initThis() {
    var canvas = document.getElementById('image');
    context = canvas.getContext("2d");
    
    base_image = new Image();
    base_image.src = "https://dl.dropboxusercontent.com/u/841883/Screen%20Shot%202013-06-14%20at%2012.55.09%20PM.png";
    base_image.onload = function() {
        var width = base_image.naturalWidth;
        var height = base_image.naturalHeight;
        
        canvas.width = width;
        canvas.height = height;
        
        canvasWidth = width;
        displayImage();
    }
    
    $('#image').mousedown(function (e) {
        var y = e.pageY - $(this).offset().top;
        var width = $(this).width();
        var height = $(this).height();
        
        lastY = y;
        drawSetRuler(0, y);                
        resetCanvas();
        
        var topCanvas = document.getElementById('topImage');
        var topContext = topCanvas.getContext("2d");
        topCanvas.width = width;
        topCanvas.height = y;
        topCanvas.style.display = "block";
        clearArea(topContext);
        topContext.drawImage(base_image, 0, 0, width, y,  0, 0, width, y);
        
        var bottomCanvas = document.getElementById('bottomImage');
        var bottomContext = bottomCanvas.getContext("2d");
        bottomCanvas.width = width;
        bottomCanvas.height = height - y;
        bottomCanvas.style.display = "block";
        clearArea(bottomContext);
        bottomContext.drawImage(base_image, 0, y, width, height - y,  0, 0, width, height - y);
    });

    $('#image').mousemove(function (e) {
        resetCanvas();
        
        var x = 0;
        var y = e.pageY - $(this).offset().top;
        var width = $(this).width();
        drawRuler(x, y, width);
        
    });

	$('#image').mouseleave(function (e) {
        resetCanvas();
    });
}

function resetCanvas() {
    clearArea(context);
    displayImage();
    drawSetRuler();
}

function displayImage() {       
    context.drawImage(base_image, 0, 0);
}

function drawRuler(x, y, width) {
    draw(x, y, width, "red");
}

function drawSetRuler(x, y) {
    if (x === undefined) {
        x = 0;
    }
    
    if (y === undefined) {
        y = lastY;
    }
    
    draw(x, y, canvasWidth, "green");
}

function draw(x, y, width, color) {
    context.beginPath();
    context.strokeStyle = color;
    context.lineWidth = 1;
    context.lineJoin = "round";
    context.moveTo(width, y);
    context.lineTo(x, y);
    context.closePath();
    context.stroke();
}

function clearArea(context) {
    // Use the identity matrix while clearing the canvas
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
}

initThis();