let output = document.getElementById( 'output' );
let canvas = document.getElementById( 'bitmap' );
let ctx = canvas.getContext("2d");

ctx.lineWidth = 2;
ctx.fillStyle = 'black';

let heightInput = document.getElementById( 'height' );
let widthInput = document.getElementById( 'width' );


/*
 * Width and height of the Bitmap
 * Scale is essentially the side length of a grid pixel as displayed in the browser. 
 * It's unrealted to the end result and gets smaller as the bitmap gets larger. 
 * When width or height reach 64 the scale gets unbearably small.
 */
var width, height;
var scale = 50;

/*
 * Values is a bool array, containing the entire bitmap 
 * including overflow
 */
var values = new Array( 256 );
for (var i = 0; i < 256; i++) {
  values[i] = new Array( 256 ).fill( false );
}

/*
 * pressedLocations is used during drag-coloring
 * to make sure that tiles can't flicker.
 */
var pressedLocations = new Array( 256 );
for (var i = 0; i < 256; i++) {
  pressedLocations[i] = new Array( 256 ).fill( false );
}

/*
 * Drawing mode determines which color is used when drag-painting
 * The brush should always draw the same color, 
 * rather than flip any tile it crosses, it's more intuitive.
 * True means paint black; False means paint white.
 */
var brushColor = undefined;
// Draw grid for the first time
updateGrid();
printImageCode();

function updateGrid() {
	width = parseInt( widthInput.value, 10 );
	height = parseInt( heightInput.value, 10 );
	
	fixScale();
	
	ctx.clearRect(0, 0, 500, 500);
	
	for ( var i = 0; i < width; i++ ) {
		for ( var j = 0; j < height; j++ ) {
			if ( values[i][j] ) {
				// Activated Positions are filled
				ctx.fillRect( i*scale, j*scale, scale, scale );	
			} else {
				// Deactivated is drawn empty.
				ctx.strokeRect( i*scale, j*scale, scale, scale );	
			}
		}	
	}
}

function printImageCode() {
	// Reset text to a flood of keywords
	output.value = "#define bitmap_name_height " + height + "\n";
	output.value += "#define bitmap_name_width " + width + "\n\n";
	output.value += "static const unsigned char PROGMEM bitmap_name[] = {\n";
	for ( var i = 0; i < height; i++ ) {
		// Do not use the width, rather round up to the next multiple of 8, because a char has to be initialized.
		for ( var j = 0; j < 8*Math.ceil(width/8); j++ ) {
			// Begin every char with a binary prefix
			if ( j % 8 == 0 ) { output.value += ' B' }
			
			/*
			 * Only check actual values if they are 'in sight'
			 * Otherwise, print 0 -  so extra rows/cols can just be ignored
			 * and need not be cleared
			 */
			if ( j < width ) {
				output.value += (values[j][i]) ? "1" : "0";	
			} else {
				output.value += 0;
			}
			
			// Seperating by comma is neccesarry in array literals. You know that.
			if ( j % 8 == 7 ) { output.value += "," }
		}
		output.value += "\n";
	}
	output.value += "};\n\n"
	output.value += "display.drawBitmap(0, 0, bitmap_name, bitmap_name_width, bitmap_name_height, WHITE);"
}

function fixScale() {
	// Only the bigger direction is relevant for the scale
	var limitingSize = ( width > height ) ? width : height;
	// Fit it nicely into thze viewbox
	scale = ( 500 / ( limitingSize ) );
	// But give it a maximum size
	scale = Math.min( scale, 50 );
}


function activateMouseMoveHandler( event ) {
	// The drag-handler can be the exact same as the click handler.
	canvas.onmousemove = canvasClickHandler;
	// Also, pass trough the first click.
	canvasClickHandler( event );
}

function deactivateMouseMoveHandler() {
	canvas.onmousemove = null;
	brushColor = undefined;
	// Allow all tiles to be changed again.
	for (var i = 0; i < 256; i++) {
		pressedLocations[i] = new Array( 256 ).fill( false );
	}
	
	printImageCode();
}

function canvasClickHandler( event ) {
	/*
	 * First, get relative position in canvas element.
	 * Then, remove the modulo of scale - giving the upper left point of clicked tile
	 * Divide by scale to get a clean index.
	 */
	var x = ( ( event.pageX - canvas.offsetLeft ) -
					( ( event.pageX - canvas.offsetLeft ) % scale ) ) / scale;
	var y = ( ( event.pageY - canvas.offsetTop ) -
					( ( event.pageY - canvas.offsetTop)  % scale ) ) / scale;
	
	/*
	 * Set brush color at the beginning of each drag.
	 * It will be reset to undefined in deactivateMouseMoveHandler
	 * Note that we have to compare to undefined in the long way,
	 * not just check for a falsey value, 
	 * because 'false' is a valid value.
	 */
	if ( brushColor === undefined ) {
		brushColor = !values[x][y];
	}
	
	/*
	 * Color the current tile only if it has not been changed
	 * during the current drag mode.
	 * pressedLocations is reset in deactivateMouseHandler.
	 */
	if ( !pressedLocations[x][y] ) {
		if ( brushColor !== undefined ) {
			values[x][y] = brushColor;
		} else {
			values[x][y] = !values[x][y];
		}
		
		pressedLocations[x][y] = true;
	}

	updateGrid();
}

function dimensionChanged() {
	updateGrid();
	printImageCode();
}

canvas.onmousedown = activateMouseMoveHandler;
canvas.onmouseup = deactivateMouseMoveHandler;
canvas.onmouseout = deactivateMouseMoveHandler;

heightInput.onchange = dimensionChanged;
widthInput.onchange = dimensionChanged;