import * as Dom from UnitJS.Dom;

var size = 8;
var currentColor = null;
var tBody = Dom.make('tbody');

return {
	init: init
}

function init(elementId) {
	var gridElement = document.getElementById(elementId || 'grid');
	gridElement.appendChild(Dom.make('thead', {}, [
		makeRow({tag: 'th', attributes: headerAttributes})
	]));
	for(var row = 0; row < size; row++) {
		tBody.appendChild(makeRow({tag: 'td', attributes: bodyAttributes}));
	}
	gridElement.appendChild(tBody);
}

function makeRow(config) {
	var cells = [];
	for(var column = 0; column < size; column++) {
		cells.push(Dom.make(config.tag, config.attributes(column)));
	}
	return Dom.make('tr', {}, cells);
}

function headerAttributes(i) {
	return {
		class: 'color' + i,
		onClick: function(e) {
			if(currentColor != undefined) {
				currentColor.classList.remove('current');
			}
			currentColor = e.target;
			currentColor.classList.add('current');
			tBody.classList.add('ready');
		}
	};
}

function bodyAttributes(i) {
	return {
		onClick: function(e) {
			if(currentColor != null) {
				e.target.classList.toggle(
					currentColor.className.replace(/.*(color\d).*/, '$1')
				);
			}
		}
	};
}