// JavaScript Document
            var frame;
            var scale;
            var currentColour;

            function init() {
                theCanvas = document.getElementById("frameCanvas");
                context = theCanvas.getContext("2d");
                context.canvas.width = 0.95 * window.innerWidth;
                context.canvas.height = 0.75 * window.innerHeight;
                theCanvas.addEventListener("mousedown", clickFrame, false);
                theCanvas.addEventListener('mousemove', highlightFrame, false);
                currentColour = "#ff3333";
                frame = [];
                createFrame();
                drawScreen();
            }
            function clickFrame(e) {
                var x = e.offsetX;
                var y = e.offsetY;
                for (i = 0; i < frame.length; i++) {
                    if (hitTest(frame[i], x, y)) {
                        frame[i].filled = !frame[i].filled;
                        frame[i].colour = currentColour;
                    }
                }
                drawScreen();
            }
            function highlightFrame(e) {
                var x = e.offsetX;
                var y = e.offsetY;
                for (var i = 0; i < frame.length; i++) {
                    if (hitTest(frame[i], x, y)) {
                        frame[i].highlighted = true;
                    } else {
                        frame[i].highlighted = false;
                    }
                }
                drawScreen();
            }
            function fill() {
                for (var i = 0; i < frame.length; i++) {
                    frame[i].filled = true;
                    frame[i].colour = currentColour;
                }
                drawScreen();
            }
            function clearFrame() {
                for (var i = 0; i < frame.length; i++) {
                    frame[i].filled = false;
                    frame[i].colour = currentColour;
                }
                drawScreen();
            }
            function random() {
                for (var i = 0; i < frame.length; i++) {
                    if (toss()) {
                        frame[i].filled = true;
                    } else {
                        frame[i].filled = false;
                    }
                    frame[i].colour = currentColour;
                }
                drawScreen();
            }
            function invert() {
                for (var i = 0; i < frame.length; i++) {
                    if (frame[i].filled) {
                        frame[i].filled = false;
                    } else {
                        frame[i].filled = true;
                    }
                    frame[i].colour = currentColour;
                }
                drawScreen();
            }
            function createFrame() {
                var rows = rowSelect.value;
                var columns = columnSelect.value;
                scale = 0.8 * context.canvas.height / rows;
                scale = Math.min(scale, 0.8 * context.canvas.width / columns);
                var yShift = rows * scale / 2;
                var xShift = columns * scale / 2 + columns * 2;
                var currentTile = 0;
                for (var i = 0; i < rows; i++) {
                    for (var j = 0; j < columns; j++) {
                        frame[currentTile] = new Square(context.canvas.width / 2 - xShift + j * scale + j * 4, context.canvas.height / 2 - yShift + scale * i + i * 4);
                        currentTile++;
                    }
                }
            }
            function Square(x, y) {
                this.x = x;
                this.y = y;
                this.filled = false;
                this.colour = currentColour;
                this.highlighted = false;
                this.size = scale;
            }
            Square.prototype.draw = function () {
                context.beginPath();
                context.fillStyle = "white";
                context.rect(this.x, this.y, this.size, this.size);
                context.fill();
                context.closePath();
                context.beginPath();
                if (this.highlighted) {
                    context.lineWidth = 1;
                    context.strokeStyle = "#ff0000";
                } else {
                    context.lineWidth = 1;
                    context.strokeStyle = "black";
                }
                context.rect(this.x, this.y, this.size, this.size);
                context.stroke();
                context.closePath();
                context.beginPath();
                if (this.filled) {
                    context.fillStyle = this.colour;
                } else {
                    context.fillStyle = "white";
                }
                context.arc(this.x + scale / 2, this.y + scale / 2, scale / 3, 0, 2 * Math.PI);
                context.fill();
                context.closePath();
            };
            function drawScreen() {
                for (var i = 0; i < frame.length; i++) {
                    frame[i].draw();
                }
            }
            function hitTest(shape, mx, my) {
                var hit = false;
                if (mx > shape.x && mx < shape.x + shape.size && my > shape.y && my < shape.y + shape.size) {
                    hit = true;
                }
                return hit;
            }
