function vec2(x, y)
{
    this.x = x;
    this.y = y;
}

function getCursorPosition(e) {
    var x;
    var y;
    if (e.pageX != undefined && e.pageY != undefined) {
        //alert("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
        x = e.pageX;
        y = e.pageY;
    }
    else {
        //alert("e.clientX: " + e.clientX + ", e.clientY: " + e.clientY);
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    //alert("x: " + x + ", y: " + y);

    return new vec2(x, y);
}

function getRelativeCursorPosition(e, elem) {
    var pos = getCursorPosition(e);
    var offset = elem.offset();
    pos.x -= offset.left;
    pos.y -= offset.top;
    return pos;
}

var drawing = false;

function v2d_game_down(e)
{
    if (!drawing && e.button == 0)
    {
        var ctx = $("#gameboard")[0].getContext("2d");
        var pos = getRelativeCursorPosition(e, $("#gameboard"));
        //ctx.fillStyle(38,156,45,0.5);
        ctx.fillRect(pos.x-7,pos.y-7,15,15);
        //ctx.rect(pos.x-7,pos.y-7,15,15)
        ctx.beginPath();
        drawing = true;
    }
}

function v2d_game_move(e)
{
    if (drawing)
    {
        var ctx = $("#gameboard")[0].getContext("2d");
        var pos = getRelativeCursorPosition(e, $("#gameboard"));

        ctx.lineTo(pos.x, pos.y);
        ctx.stroke();
        //ctx.rect(pos.x-7,pos.y-7,15,15);
    }
}

function v2d_game_up(e)
{
    if (drawing && e.button == 0)
    {
        var ctx = $("#gameboard")[0].getContext("2d");
        var pos = getRelativeCursorPosition(e, $("#gameboard"));

        ctx.closePath();

        ctx.beginPath();
        ctx.arc(pos.x, pos.y, 10, 0, Math.PI*2, false);
        ctx.closePath();
        ctx.strokeStyle = "rgb(0,0,0)";
        ctx.stroke();
        ctx.fillStyle = "rgba(" + Math.round((pos.x /800)*255) + ", " + Math.round(Math.random() * 255) + ", " + Math.round((pos.y/600)*255) + ", 0.5)";
        ctx.fill();
        ctx.closePath();

        drawing = false;
    }
}

/*
var lastTime = 0;
var Frames = 0;

function v2d_game_draw(e)
{
    ++Frames;

    var thisTime = new Date().getTime();
    var diffTime = thisTime - lastTime;

    if (diffTime > 1000)
    {
        var diffSec = diffTime / 1000;
        var msg = "FPS: " + (Frames / diffSec);
        $("#fps").text(msg);
        //alert(msg);
        LastTime = thisTime;
        Frames = 0;
    }
}
*/

var lastTime = 0;
var Frames = 0;

function v2d_game_draw(e)
{
    Frames += 1;

    var clock = new Date();
    var thisTime = clock.getTime();
    var diffTime = thisTime - lastTime;

    if (diffTime > 1000)
    {
        var diffSec = diffTime / 1000;
        var msg = "Frames: " + Frames + "; Time: " + diffSec + ", FPS: " + (Frames / diffSec);
        $("#fps").text(msg);
        //alert(msg);
        lastTime = thisTime;
        Frames = 0;
    }
}


function v2d_event_mousemove(e) {
    var pos = getRelativeCursorPosition(e, $("#gameboard"));

    $("#mouse").text("X: " + pos.x + ", Y: " + pos.y);
}

function v2d_game_rain(e) {

    if (!drawing){

    var ctx = $("#gameboard")[0].getContext("2d");
    ctx.BeginPath();
    ctx.rect(25,25,5,25);
    ctx.closePath();
    drawing = false;
    }
}

/* Game loop */

function gameInit()
{
    setInterval(v2d_game_draw, 20);
    $("#gameboard")[0].addEventListener("mousedown", v2d_game_down, false);
    $("#gameboard")[0].addEventListener("mousemove", v2d_game_move, false);
    $("#gameboard")[0].addEventListener("mouseup", v2d_game_up, false);
    $("#gameboard")[0].addEventListener("draw", v2d_game_draw, false);
    //$("#gameboard")[0].addEventListener("rain", v2d_game_rain, false);
    //$("#progressbar").progressbar({ value: 37 });
}

function gameLoop()
{

    // pop canvas to background
    // draw each object
}