function Gco(value, desc) {
  this.value = value;
  this.desc = desc;
}
var gcotbl = [
  new Gco("source-atop", "新たな図形は、その図形と描画先 Canvas の内容と重なり合う部分のみが描かれます。"),
  new Gco("source-in", "新たな図形は、その図形と描画先 Canvas の内容が重なり合う部分のみが描かれます。重なり合わない領域は透明になります。"),
  new Gco("source-out", "新たな図形は、その図形と描画先 Canvas の内容と重なり合わない部分のみが描画されます。他の領域は透明になります。"),
  new Gco("source-over",  "デフォルトの設定です。新たな図形をすでにあるCanvasの内容の上に描きます。"),			// default
  new Gco("destination-atop", "描画先 Canvas の内容は、新たな図形と重なり合う部分だけが残ります。新たな図形は、その背後に描かれます。"),
  new Gco("destination-in", "描画先 Canvas の内容は、新たな図形と重なり合う部分だけが残ります。新たな図形も含めて、他の領域は透明になります。"),
  new Gco("destination-out", "描画先 Canvas の内容は、新たな図形と重なり合わない部分だけが残ります。新たな図形も含めて、他の領域は透明になります。"),
  new Gco("destination-over", "新たな図形は、描画先 Canvas の内容の背後に描かれます。"),
  new Gco("lighter", "新たな図形と描画先 Canvas の内容が重なる部分は、カラー値が加算されます。"),
  new Gco("copy", "新たな図形だけが描かれて、描画先 Canvas の内容は透明になります。"),
  new Gco("xor", "新たな図形と描画先 Canvas の内容が重なり合う部分は透明になります。他の領域はともに描画されます。"),

  new Gco("multiply", "新たな図形のピクセルは、対応する描画先 Canvas のピクセルとカラー値が乗算されます。その結果、各ピクセルのカラーは暗くなります。"),
  new Gco("screen", "新たな図形のピクセルと対応する描画先 Canvas のピクセルとカラー値をそれぞれ一旦反転して、乗算したうえで、改めて反転します。その結果、各ピクセルのカラーは明るくなります (multiply の逆)。"),
  new Gco("overlay", "multiply と screen を組み合わせます。新たな図形のピクセルより対応する描画先 Canvas のピクセルが、それぞれ暗いときは暗くし、明るければ明るくします。"),
  new Gco("darken", "新たな図形のピクセルは、対応する描画先 Canvas のピクセルとカラー値を比べて、それぞれ暗い方のピクセルを残します。"),
  new Gco("lighten", "新たな図形のピクセルは、対応する描画先 Canvas のピクセルとカラー値を比べて、それぞれ明るい方のピクセルを残します。"),
  new Gco("color-dodge", "描画先 Canvas の内容のピクセルのカラー値を、対応する新たな図形の反転したピクセルのカラー値でそれぞれ除算します。"),
  new Gco("color-burn", "描画先 Canvas の内容のピクセルの反転したカラー値を、対応する新たな図形のピクセルのカラー値でそれぞれ除算し、改めて各ピクセルのカラー値を反転させます。"),
  new Gco("hard-light", "multiply と screen を組み合わせます。描画先 Canvas のピクセルより対応する新たな図形のピクセルが、それぞれ暗いときは暗くし、明るければ明るくします (overlay と比較対象が逆)。"),
  new Gco("soft-light", "hard-light の効果を柔らかくしたカラー合成になります。純粋な黒と白は、真っ黒や真っ白にはなりません。"),
  new Gco("difference", "新たな図形のピクセルと対応する描画先 Canvas のピクセルとカラー値の差の絶対値をそれぞれのピクセルに定めます。"),
  new Gco("exclusion", "difference よりもコントラストを弱めたカラー合成になります(いわゆる「除外」)。"),
  new Gco("hue", "描画先 Canvas の内容のピクセルの輝度と彩度は保ち、対応する新たな図形のピクセルの色相をそれぞれ与えます。"),
  new Gco("saturation", "描画先 Canvas の内容のピクセルの輝度と色相は保ち、対応する新たな図形のピクセルの彩度をそれぞれ与えます。"),
  new Gco("color", "描画先 Canvas の内容のピクセルの輝度は保ち、対応する新たな図形のピクセルの色相と彩度をそれぞれ与えます。"),
  new Gco("luminosity", "描画先 Canvas の内容のピクセルの色相と彩度は保ち、対応する新たな図形のピクセルの輝度をそれぞれ与えます。")
];

var startFlg = false;
var srcPtnFlg = false;
var dstPtnFlg = false;
var selectIdx = -1;

window.onload = function() {
	window.elems = {
		canvas: document.getElementById("mainCanvas"),
		selbox: [],
    desc: document.getElementById("desc")
	}
	var len = gcotbl.length;
	var frag = document.createDocumentFragment();
	var src = {cx: 40, cy: 40, r: 30};
	var dst = {cx: 60, cy: 60, r: 30};

	for (var i=0; i<len; i++) {
		var canvas = document.createElement("canvas");
		canvas.width = 100;
		canvas.height = 100 + 20;
		canvas.dataset.gcoidx = i;
		canvas.classList.add("over");
		elems.selbox[i] = canvas;

		var ctx = canvas.getContext("2d");

		// draw canvas
		draw2circle(ctx, gcotbl[i].value, src, dst);

		// composite title
		ctx.beginPath();
		ctx.fillStyle = "black";
		ctx.fillRect(0, 100, 100, 20);
    ctx.strokeStyle="#ccc";
    ctx.strokeRect(0, 0, 100, 120);

		ctx.fillStyle = "white";
		ctx.textAlign = "center";
		ctx.textBaseline = "middle";
		ctx.font = "12px sans-serif";
		ctx.fillText(gcotbl[i].value, 50, 110);

		// Event Listener
		canvas.addEventListener('click', function(e) {
			if (startFlg === false) {
				startFlg = true;
				elems.selbox.forEach(function(elem) {
					elem.classList.remove("over");
				});
        selectIdx = parseInt(this.dataset.gcoidx, 10);
        elems.desc.textContent = gcotbl[selectIdx].desc;
				startAnim(selectIdx);
			}
		});

    canvas.addEventListener('mouseenter', function(e) {
//      console.log("enter: " + this.dataset.gcoidx);
      selectIdx = parseInt(this.dataset.gcoidx, 10);
      if (startFlg === false) {
        elems.desc.textContent = gcotbl[selectIdx].desc;
      }
		});
    canvas.addEventListener('mouseleave', function(e) {
//      console.log("leave: " + this.dataset.gcoidx);
      selectIdx = -1;
      if (startFlg === false) {
        elems.desc.textContent = "";
      }
		});

		frag.appendChild(canvas);
	}
	document.getElementById("selectBox").appendChild(frag);

  // Event Listener
  var chks = document.getElementsByName("chk");
  var a = [1,2,3];
  [].forEach.call(chks, function(chk) {
    chk.addEventListener('change', function(e) {
      switch (this.id) {
        case "c1":
          srcPtnFlg = this.checked;
          break;
        case "c2":
          dstPtnFlg = this.checked;
          break;
      }
    });
  });

};	// onload

function startAnim(idx) {
	var width = elems.canvas.width;
	var height = elems.canvas.height;
	var src = {cx: -100, cy: 100, r: 100};
	var dst = {cx: width + 100, cy: 200, r: 100};
	var collisionWidth = Math.sqrt(3) * src.r;

	(function drawAnim() {
		var ctx = elems.canvas.getContext("2d");
		ctx.clearRect(0, 0, width, height);

		// draw canvas
		draw2circle(ctx, gcotbl[idx].value, src, dst);

		// judge
		if (src.cx - src.r < width) {
			src.cx++;
			dst.cx--;
			if (Math.abs(src.cx - dst.cx) < collisionWidth) {
				var tm = 10;
			} else {
				var tm = 1;
			}
			setTimeout(drawAnim, tm);
		} else {
			startFlg = false;
			ctx.clearRect(0, 0, width, height);
			elems.selbox.forEach(function(elem) {
				elem.classList.add("over");
			});
      if (selectIdx < 0) {
        elems.desc.textContent = "";
      } else {
        elems.desc.textContent = gcotbl[selectIdx].desc;
      }
		}
	})();
}

function draw2circle(ctx, gco, src, dst) {
  var color, grad;
  ctx.save();

	// destination
  ctx.beginPath();
  ctx.globalCompositeOperation = "source-over";
  if (dstPtnFlg) {
    var grad = ctx.createRadialGradient(dst.cx, dst.cy, 0, dst.cx, dst.cy, dst.r);
    grad.addColorStop(0.000, "rgb(0, 0, 0)");
    grad.addColorStop(0.333, "rgb(0, 0, 0)");
    grad.addColorStop(0.333, "rgb(0, 0, 255)");
    grad.addColorStop(0.666, "rgb(0, 0, 255)");
    grad.addColorStop(0.666, "rgb(255, 255, 255)");
    grad.addColorStop(1.000, "rgb(255, 255, 255)");
    ctx.fillStyle = grad;
  } else {
    ctx.fillStyle = "rgb(0, 0, 255)";
  }
  ctx.arc(dst.cx, dst.cy, dst.r, 0, Math.PI*2, false);
  ctx.fill();

  // source
  ctx.beginPath();
  ctx.globalCompositeOperation = gco;
  if (srcPtnFlg) {
    var grad = ctx.createRadialGradient(src.cx, src.cy, 0, src.cx, src.cy, src.r);
    grad.addColorStop(0.000, "rgb(0, 0, 0)");
    grad.addColorStop(0.333, "rgb(0, 0, 0)");
    grad.addColorStop(0.333, "rgb(255, 0, 0)");
    grad.addColorStop(0.666, "rgb(255, 0, 0)");
    grad.addColorStop(0.666, "rgb(255, 255, 255)");
    grad.addColorStop(1.000, "rgb(255, 255, 255)");
    ctx.fillStyle = grad;
  } else {
    ctx.fillStyle = "rgb(255, 0, 0)";
  }
  ctx.arc(src.cx, src.cy, src.r, 0, Math.PI*2, false);
  ctx.fill();

	// destination outline
	ctx.beginPath();
  ctx.globalCompositeOperation = "source-over";
  ctx.strokeStyle = "#ddd";
	ctx.arc(dst.cx, dst.cy, dst.r, 0, Math.PI*2, false);
	ctx.stroke();

	// source outline
	ctx.beginPath();
	ctx.arc(src.cx, src.cy, src.r, 0, Math.PI*2, false);
	ctx.stroke();

  ctx.restore();
}