if (typeof susan == 'undefined') susan = {};

susan.isPressed = false;
susan.prevPoints = [];

susan.getPoint = function(evt) {return [Event.pointerX(evt) - 5, Event.pointerY(evt) - 5]};
susan.initializeParette = function(pid) {
	var parette = $(pid);
	parette.appendChild(susan.createColor('000000'));
	parette.appendChild(susan.createColor('ffffff'));
	parette.appendChild(susan.createColor('404040'));
	parette.appendChild(susan.createColor('808080'));
	parette.appendChild(susan.createColor('ff0000'));
	parette.appendChild(susan.createColor('7f0000'));
	parette.appendChild(susan.createColor('ff6a00'));
	parette.appendChild(susan.createColor('7f3300'));
	parette.appendChild(susan.createColor('ffd800'));
	parette.appendChild(susan.createColor('7f6a00'));
	parette.appendChild(susan.createColor('b6ff00'));
	parette.appendChild(susan.createColor('5b7f00'));
	parette.appendChild(susan.createColor('4cff00'));
	parette.appendChild(susan.createColor('267f00'));
	parette.appendChild(susan.createColor('00ff21'));
	parette.appendChild(susan.createColor('007f0e'));
	parette.appendChild(susan.createColor('00ff90'));
	parette.appendChild(susan.createColor('007f46'));
	parette.appendChild(susan.createColor('00ffff'));
	parette.appendChild(susan.createColor('007f7f'));
	parette.appendChild(susan.createColor('0094ff'));
	parette.appendChild(susan.createColor('004a7f'));
	parette.appendChild(susan.createColor('0026ff'));
	parette.appendChild(susan.createColor('00137f'));
	parette.appendChild(susan.createColor('4800ff'));
	parette.appendChild(susan.createColor('21007f'));
	parette.appendChild(susan.createColor('b200ff'));
	parette.appendChild(susan.createColor('57007f'));
	parette.appendChild(susan.createColor('ff00dc'));
	parette.appendChild(susan.createColor('7f006e'));
	parette.appendChild(susan.createColor('ff006e'));
	parette.appendChild(susan.createColor('7f0037'));
	var br = document.createElement('br');
	br.style.clear = 'both';
	parette.appendChild(br);
	parette.appendChild(susan.createWidth(2));
	parette.appendChild(susan.createWidth(8));
	parette.appendChild(susan.createWidth(16));
}
susan.createColor = function(code) {
	var elm = document.createElement('div');
	elm.className = 'color';
	elm.style.backgroundColor = '#' + code;
	Event.observe(elm, 'click', function(e) {
		susan.isPressed = false;
		susan.prevPoints = [];
		$('brush').style.backgroundColor = '#' + code;
	});
	return elm;
}
susan.createWidth = function(w) {
	var elm = document.createElement('div');
	elm.className = 'width-button';
	elm.innerHTML = '<div class="width-line" style="height:' + w + 'px; margin-top:' + ((16-w)/2) + 'px"></div>';

	Event.observe(elm, 'click', function(e) {
		susan.isPressed = false;
		susan.prevPoints = [];
		$('brush').style.height = w + 'px';
	});
	return elm;
}

Event.observe(window, 'load', function() {
	susan.initializeParette('parette');

	var ctx = $('canvas').getContext('2d');
	Event.observe($('canvas'), 'mousedown', function(e) {
		var lineWidth = $('brush').style.height.replace(/px/, '');
		var strokeStyle = $('brush').style.backgroundColor;
		if (strokeStyle.match(/rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\)/)) {
			// for Safari
			var r = parseInt(RegExp.$1).toString(16); if (r.length == 1) r = '0' + r;
			var g = parseInt(RegExp.$2).toString(16); if (g.length == 1) g = '0' + g;
			var b = parseInt(RegExp.$3).toString(16); if (b.length == 1) b = '0' + b;
			strokeStyle = '#' + r + g + b;
		}
		ctx.strokeStyle = strokeStyle;
		ctx.lineWidth = lineWidth;
		if (!$('strokes').value.match(/\|$/)) $('strokes').value += '|';
		$('strokes').value += ('[color:' + strokeStyle + ',width:' + lineWidth + ']');
		susan.isPressed = true;
		susan.prevPoints.push(susan.getPoint(e));
		while (2 < susan.prevPoints.length) susan.prevPoints.shift();
	});
	Event.observe($('canvas'), 'mouseup', function() {
		susan.isPressed = false;
		susan.prevPoints = [];
		$('strokes').value += '|'
	});
	Event.observe($('canvas'), 'mousemove', function(e) {
		if (!susan.isPressed) return;

		var p = susan.getPoint(e);

		ctx.beginPath();
		if (susan.prevPoints.length == 1) {
			ctx.moveTo(susan.prevPoints[0][0], susan.prevPoints[0][1]);
		}
		else if (susan.prevPoints.length == 2) {
			ctx.moveTo(susan.prevPoints[0][0], susan.prevPoints[0][1]);
			ctx.lineTo(susan.prevPoints[1][0], susan.prevPoints[1][1]);
		}
		ctx.lineTo(p[0], p[1]);
		ctx.stroke();

		$('strokes').value += (p[0] + ':' + p[1] + ',');
		susan.prevPoint = p;
		susan.prevPoints.push(p);
		while (2 < susan.prevPoints.length) susan.prevPoints.shift();
	});
});