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

susan.clearCanvas = function(canvasId, strokesId) {
	var strokesField = $(strokesId);
	if (strokesField)
		strokesField.value = '';
	
	var canvas = $(canvasId);
	if (!canvas || !canvas.getContext)
	{
		console.warn('canvas or ctx not found: ' + canvasId);
		return;
	}
	
	var ctx = canvas.getContext('2d');
	ctx.clearRect(0, 0, canvas.width, canvas.height);
};

/**
 * clear then draw
 */
susan.setCanvas = function(eid, points) {
	susan.clearCanvas(eid);
	susan.drawCanvas(eid, points);
};

/**
 * add draw
 */
susan.drawCanvas = function(eid, points) {
	var canvas = document.getElementById(eid);
	if (!canvas || !canvas.getContext)
	{
		console.warn('canvas or ctx not found: ' + eid);
		return;
	}
	var ctx = canvas.getContext('2d');
	
	var strokes = points.split('|');
	for (var i = 0; i < strokes.length; i++) {
		if (strokes[i] == '') continue;

		// get color, width
		var strokeStyle;
		var lineWidth = 2;
		var ps;
		if (strokes[i].match(/^\[(color:)?([^,]+)(,width:(.*))?\]/)) {
			strokeStyle = RegExp.$2;
			if (RegExp.$4 != '') lineWidth = RegExp.$4;
			ps = strokes[i].replace(/^\[(.*)\]/, '').split(',');
		}
		else {
			strokeStyle = '#000000';
			ps = strokes[i].split(',');
		}

		if (1 < ps.length) {
			var p = ps[0].split(':');
			var x = parseInt(p[0]);
			var y = parseInt(p[1]);
			ctx.strokeStyle = strokeStyle;
			ctx.lineWidth = lineWidth;
			ctx.beginPath();
			ctx.moveTo(x, y);
			for (var j = 1; j < ps.length; j++) {
				if (ps[j] == '') continue;

				p = ps[j].split(':');
				x = parseInt(p[0]);
				y = parseInt(p[1]);
				ctx.lineTo(x, y);
			}
			ctx.stroke();
		}
	}
};

susan.isPressed = false;
susan.prevPoints = [];
susan.getPoint = function(evt) {
//	console.dir(evt);
	if (evt.offsetX && evt.offsetY)
		return [evt.offsetX, evt.offsetY];
	else
	{
		var coords = dojo.coords(evt.target);
		return [evt.clientX - coords.x, evt.clientY - coords.y];
	}
};
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;
}