var canvas;
var ctx;

var baselineoffset;
var columnamount;
var columncolor;
var baselinecolor;
var columnwidth;
var columngutter;
var baselineheight;

function draw() {
	getOptions();
	canvas.width = columnamount * columnwidth + (columnamount - 1) * columngutter;//clear canvas and sets new width
	canvas.height = columnheight;
	draw_columns();
	if (showbaseline.checked) {
		draw_grid();
	}
}

function draw_columns() {
	ctx.fillStyle = columncolor;

	var drawOffset = 0;
	do {
		ctx.fillRect(drawOffset, 0, columnwidth, canvas.height);
		drawOffset += columnwidth + columngutter;
	} while (drawOffset < canvas.width)
}

function draw_grid() {
	ctx.fillStyle = baselinecolor;
	var drawOffset = baselineoffset;
	do {
		ctx.fillRect(0, drawOffset, canvas.width, 1);
		drawOffset += baselineheight;
	} while (drawOffset <= canvas.height)
}

function setup() {
	showbaseline = document.getElementById("showbaseline");

	canvas = document.getElementById('gridmaker');
	if (canvas.getContext){
		ctx = canvas.getContext("2d");
		draw();
	}
}

function getOptions() {
	columnamount = parseInt(document.getElementById("columnamount").value);
	columnwidth = parseInt(document.getElementById("columnwidth").value);
	columncolor = '#' + document.getElementById("columncolor").value;
	columngutter = parseInt(document.getElementById("columngutter").value);
	columnheight = parseInt(document.getElementById("columnheight").value);
	
	baselineheight = parseInt(document.getElementById("baselineheight").value);
	baselineoffset = parseInt(document.getElementById("baselineoffset").value);
	baselinecolor = '#' + document.getElementById("baselinecolor").value;
}