define(function () {

    'use strict';

    var grid = {};

    // Add a grid overlay with lines spaced by subcellSize, for visual
    // debugging.  This is useful while doing the activity layout or
    // while developing widgets.
    grid.addGrid = function (subcellSize) {
        var canvas = document.createElement('canvas');
        canvas.className = "grid";
        document.body.appendChild(canvas);

        var updateGrid = function () {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            var ctx = canvas.getContext("2d");
            ctx.strokeStyle = "#00FFFF";

            var subcellsVertical = window.innerHeight / subcellSize;
            for (i = 0; i < subcellsVertical; i++) {
                if ((i + 1) % 5 === 0) {
                    ctx.lineWidth = 1;
                } else {
                    ctx.lineWidth = 0.5;
                }
                ctx.beginPath();
                ctx.moveTo(0, subcellSize * (i + 1));
                ctx.lineTo(canvas.width, subcellSize * (i + 1));
                ctx.stroke();
            }

            var subcellsHorizontal = window.innerWidth / subcellSize;
            for (i = 0; i < subcellsHorizontal; i++) {
                if ((i + 1) % 5 === 0) {
                    ctx.lineWidth = 1;
                } else {
                    ctx.lineWidth = 0.5;
                }
                ctx.beginPath();
                ctx.moveTo(subcellSize * (i + 1), 0);
                ctx.lineTo(subcellSize * (i + 1), canvas.height);
                ctx.stroke();
            }
        };

        updateGrid();

        window.onresize = function (event) {
            updateGrid();
        };
    };

    return grid;
});