// canvas.js
// author:  motormean <motormean@s58.xrea.com>
// license: Creative Commons 2.1 by-nc (http://creativecommons.org/licenses/by-nc/2.1/jp/)

function Canvas(elem, width, height, option)
{
	var this_ = this;

	this.cellAt  = new Object;
	this.colorAt = new Object;

	this.option = option;
	var preview = (option ? option.preview : null);
	var initialColor = (option && option.binaryMode ? false : '#FFF');

	var canvas = document.createElement('div');
	canvas.setAttribute('class', 'canvas');
	for (var y = 0; y < height; y++)
	{
		var row = document.createElement('div');
		row.setAttribute('class', 'row');
		for (var x = 0; x < width; x++)
		{
			var cell = document.createElement('div');
			cell.__x = x;
			cell.__y = y;
			cell.setAttribute('class', 'cell');
			cell.addEventListener('mousemove', function(event) { this_.mousemoveHandler(event) }, true);
			cell.addEventListener('mouseup',   function(event) { this_.mouseupHandler(event) }, true);
			cell.addEventListener('mousedown', function(event) { this_.mousedownHandler(event) }, true);

			(y == 0 ? this.cellAt[x] = new Object : this.cellAt[x])[y] = cell;
			(y == 0 ? this.colorAt[x] = new Object : this.colorAt[x])[y] = initialColor;
			row.appendChild(cell);
		}
		canvas.appendChild(row);
	}
	elem.appendChild(canvas);

	if (preview)
	{
		this.previewCellAt = new Object;

		var canvas = document.createElement('div');
		canvas.setAttribute('class', 'canvas');
		for (var y = 0; y < height; y++)
		{
			var row = document.createElement('div');
			row.setAttribute('class', 'row');
			for (var x = 0; x < width; x++)
			{
				var cell = document.createElement('div');
				cell.__x = x;
				cell.__y = y;
				cell.setAttribute('class', 'cell');

				(y == 0 ? this.previewCellAt[x] = new Object : this.previewCellAt[x])[y] = cell;
				row.appendChild(cell);
			}
			canvas.appendChild(row);
		}
		preview.appendChild(canvas);
	}
}

Canvas.prototype = {
	color: '#000',
	colorOn: '#000',
	colorOff: '#FFF',
	lastCell: null,
	state: null,

	mousedown: false,

	mousedownHandler:
	function(event)
	{
		this.mousedown = true;
		if (this.option && this.option.binaryMode)
		{
			var cell = event.target;
			this.state = !this.colorAt[cell.__x][cell.__y];
		}
	},

	mousemoveHandler:
	function(event)
	{
		if (this.mousedown)
		{
			if (!this.option || !this.option.binaryMode)
			{
				var cell = event.target;
				cell.style.backgroundColor = this.color;
				this.colorAt[cell.__x][cell.__y] = this.color;
				if (this.previewCellAt)
					this.previewCellAt[cell.__x][cell.__y].style.backgroundColor = this.color;
			}
			else
			{
				// On/Off‚Ì‚Ý
				var cell = event.target;
				if (cell == this.lastCell)
					return;

				this.colorAt[cell.__x][cell.__y] = this.state
				cell.style.backgroundColor = (this.state == true ? this.colorOn : this.colorOff);
				if (this.previewCellAt)
					this.previewCellAt[cell.__x][cell.__y].style.backgroundColor = cell.style.backgroundColor;

				this.lastCell = cell;
			}
		}
	},

	mouseupHandler:
	function(event)
	{
		this.mousemoveHandler(event);
		this.mousedown = false;
		this.lastCell = null;
	}
};