var log = function(msg) {
	if (console) console.log(msg);
	else alert(msg);
};

window.xcanvas = function() {

	var bg = document.getElementById('bg');
	var canvas = document.getElementById('canvas');
	var ctxBg = bg.getContext('2d');
	var ctx = canvas.getContext('2d');

	var url = 	document.getElementById('url');
	url.focus();
	var opacity = document.getElementById('opacity');
	var color = document.getElementById('color');
	var size = document.getElementById('size');
	var incr1 = 	document.getElementById('incr1');
	var incr2 = 	document.getElementById('incr2');
	var click = document.getElementById('click');
	
	var img;
	var ss = [];
	var c = -1;
	var inCanvas = false;;
	var edit = true;

	var draw = function() {
		var w = img.width;
		var h = img.height;
		bg.width = canvas.width = w;
		bg.height = canvas.height = h;
		canvas.style.opacity = opacity.value;
		
		for (var i = 0; i < ss.length; i++) {				
			var s = ss[i];
			ctx.beginPath();
			ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2, true);
			ctx.fill();
		}

		ctxBg.drawImage(img, 0, 0);

		// 円があるとこだけに画像を描画
		ctx.globalCompositeOperation = 'source-atop';
		ctx.drawImage(img, 0, 0);

		// 円がないところを塗り潰す
		ctx.globalCompositeOperation = 'destination-over';
		ctx.fillStyle = color.value;
		ctx.fillRect(0, 0, w, h);	

		// 選択中の円に枠を付ける
		if (c >= 0) {
			var s = ss[c];
			ctx.globalCompositeOperation = 'source-over';
			ctx.strokeStyle = 'white';
			ctx.lineWidth = 3;
			ctx.beginPath();
			ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2, true);
			ctx.stroke();
		}
	};

	var add = function(e) {
		ss.push({
			x: e.ox,
			y: e.oy,
			r: parseInt(size.value)
		});
		check(e);	
		draw();
	};
	
	var move = function(xy, dir) {
		if (c >= 0) {
			ss[c][xy] += incr2.value * dir;
			draw();
		}
	};
	
	var del = function(e) {
		if (c >= 0) {
			ss.splice(c, 1);
			c = -1;
			check(e);
			draw();
		}
	};
	
	var big = function() {
		if (c >= 0) {
			ss[c].r += parseInt(incr1.value);		
			draw();
		}
	};
	
	var small = function() {
		if (c >= 0) {
			ss[c].r -= parseInt(incr1.value);		
			draw();
		}
	};
	
	var check = function(e) {
		var tmp = c;
		for (var i = 0; i < ss.length; i++) {
			var s = ss[i];
			var r = s.r * 0.7;
			if (e.ox >= s.x - r && e.ox <= s.x + r
				&& e.oy >= s.y - r && e.oy <= s.y + r) {
				c = i;
				if (c != tmp) {
					draw();
				}
				return true;
			}
		}
		c = -1;
		if (c != tmp) {
			draw();
		}
		return false;
	};

	var onContextmenu = function(e) {
		small(e);
		uu.ev.stop(e);
	};

	uu(canvas).click(function(e) {
		if (click.checked) {
			if (!check(e)) add(e);
			else big(e);
		} else {
			big(e);
		}
		uu.ev.stop(e);
	})
	.contextmenu(onContextmenu)
	.dblclick(function(e) {
		if (!click.checked) add(e);
		uu.ev.stop(e);
	})
	.mousemove(function(e) {
		check(e);
	})
	.hover(function() {
		inCanvas = true;
	}, function() {
		inCanvas = false;
	});
	
	// http://www.programming-magic.com/file/20080205232140/keycode_table.html
	uu(document).keydown(function(e) {
		if (inCanvas) {
		switch(e.keyCode) {
			case 8: // for mac (delete key == backspace key)
			case 46:
				del(e);
				uu.ev.stop(e);
				break;
			case 37:
				move('x', -1);
				uu.ev.stop(e);
				break;
			case 38:
				move('y', -1);
				uu.ev.stop(e);
				break;
			case 39:
				move('x', 1);
				uu.ev.stop(e);
				break;
			case 40:
				move('y', 1);
				uu.ev.stop(e);
				break;
			case 13:
				big(e);
				uu.ev.stop(e);
				break;
			case 32:
				small(e);
				uu.ev.stop(e);
				break;
		}
		}
	});
	
	var init = function() {
		ss = [];
		c = -1;
		img = new Image();
		img.onload = draw;
	};
	
	uu('form').submit(function(e) {
		init();
		img.src = url.value + '?' + new Date().getTime();
		uu.ev.stop(e);
	});
	
	uu(color).keyup(function(e) {
		draw()
	});

	uu(opacity).keyup(function(e) {
		draw()
	});
	
	uu('#preview').click(function(e) {
		canvas.style.opacity = 1;
	});

	uu('#edit').click(function(e) {
		if (edit) {
			edit = false;
			e.target.value = '編集';
			uu(canvas).uncontextmenu();
		} else {
			edit = true;
			e.target.value = '完成';
			uu(canvas).contextmenu(onContextmenu);		
		}
	});
	
	uu('div#help > h2 > a').click(function(e) {
		uu.klass.toggle(uu('div#help > dl').nth(), 'select');
		uu.ev.stop(e);
	});
	
	uu('#file').change(function(e) {
		init();
		var datauri = e.target.files[0].getAsDataURL();
		img.src = datauri;
	});
	
	uu.id('file').addEventListener('dragover', function(e) {
    	e.preventDefault(); 
		e.target.className = 'over';
	}, true);

	uu.id('file').addEventListener('dragleave', function(e) {
		e.target.className = '';
	}, true);
	
	uu.id('file').addEventListener('drop', function(e) {
	    e.stopPropagation();
		e.target.className = '';

		var dt = e.dataTransfer;

		var reader = new FileReader();
		reader.onloadend = function() {
			init();
			img.src = reader.result;
		};
		reader.readAsDataURL(dt.files[0]);
	}, true);
	
};