/*
 * 算命時計
 */

/*
 * 外部から渡すパラメータ
 */
//var sixty_y1 = 10;		// 六十干支 年柱１
//var sixty_m1 = 30;		//			月柱１
//var sixty_d1 = 32;		//			日柱１
//var sixty_y2 = 59;		//			年柱２（マイナスの場合はなし）
//var sixty_m2 = 17;		//			月柱２
//var sixty_d2 = 31;		//			日柱２

//
// グローバル変数
//
var wrapper = null;				// キャンバスの親要素
var canvas = null;				// キャンバス
var context = null;				// コンテキスト
var $id = function(id){ return document.getElementById(id); };	// DOM取得用
var img = new Image();			// 画像用
var offset_x = 0;				// 表示位置オフセット
var offset_y = 0;
var pic_size = 0;

// 十干
var s_kan =
	['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'];

// 十二支
var s_eto =
	['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];


//
// キャンバスのサイズをウインドウに合わせて変更
//
function getSize(){
	// キャンバスのサイズを再設定
	canvas.width = wrapper.offsetWidth;
//	canvas.height =  wrapper.offsetHeight;
	var newh = wrapper.offsetWidth * 0.8;	// 高さは幅に合わせる
	if (newh > wrapper.offsetHeight)		// フッターが消えないように調整
		newh = wrapper.offsetHeight;
	canvas.height = newh;

	// 画像を表示
	context.drawImage(img, 0, 0, canvas.width, canvas.height);
	offset_x = canvas.width / 2;
	offset_y = canvas.height / 2;
	pic_size = offset_x;
	if (pic_size > offset_y / 0.8)
		pic_size = offset_y / 0.8;
}

//
// リサイズ時
//
window.addEventListener("resize", function(){
	getSize();

	// 画像生成
	draw_clock();
});

//
// 起動処理
//
window.addEventListener("load", function(){
	// キャンバスの親要素情報取得
	// （親要素が無いとキャンバスのサイズが画面いっぱいに表示できないため）
	wrapper = $id("wrapper");
	// キャンバス情報取得
	canvas = $id("canvas");
	context = canvas.getContext("2d");

	// キャンバスをウインドウサイズにする
	getSize();

	// 画像生成
	draw_clock();
});

//
// 算命時計描画
//
function draw_clock() {
	var r = pic_size * 0.6;		// 円の半径
	var a = pic_size * 0.68;	// 文字表示中心の半径

	var x11, y11, x12, y12, x13, y13;
	var x21, y21, x22, y22, x23, y23;

	x11 = get_x(sixty_y1, r, 0);
	y11 = get_y(sixty_y1, r, 0);
	x12 = get_x(sixty_m1, r, 0);
	y12 = get_y(sixty_m1, r, 0);
	x13 = get_x(sixty_d1, r, 0);
	y13 = get_y(sixty_d1, r, 0);
	if (sixty_y2 >= 0) {
		x21 = get_x(sixty_y2, r, 0.5);
		y21 = get_y(sixty_y2, r, 0.5);
		x22 = get_x(sixty_m2, r, 0.5);
		y22 = get_y(sixty_m2, r, 0.5);
		x23 = get_x(sixty_d2, r, 0.5);
		y23 = get_y(sixty_d2, r, 0.5);
	} else {
		x21 = y21 = x22 = y22 = x23 = y23 = 0;
	}

	if (sixty_y2 >= 0) {
	// [HTML5] Canvasで描画する際に、要素同士が重なる部分のブレンドモードを指定する
	// https://www.yoheim.net/blog.php?q=20121206
		context.fillStyle = "#ffffff";			// 塗りつぶしの色 白(何色でもよい)
		draw_fill_triangle(x11, y11, x12, y12, x13, y13);	// 三角形の塗りつぶし描画

		context.save();

		context.globalCompositeOperation = "source-in";	// 図形の合成方法
		context.fillStyle = "#79d266";				// 塗りつぶしの色
		draw_fill_triangle(x21, y21, x22, y22, x23, y23);	// 三角形の塗りつぶし描画

		context.globalCompositeOperation = "destination-over";	// 図形の合成方法
		context.fillStyle = "#eeffee";				// 塗りつぶしの色
		draw_circle(r, true);						// 円の塗りつぶし描画

		context.restore();
	} else {
		context.fillStyle = "#eeffee";				// 塗りつぶしの色
		draw_circle(r, true);						// 円の塗りつぶし描画
	}

	draw_circle(r, false);					// 円の描画

	context.fillStyle = "#000000";			// 塗りつぶしの色
	context.font = "30px 'ＭＳ ゴシック'";
	context.textAlign = "center";
	context.textBaseline = "middle";
	context.fillText("知恵", offset_x - r * 0.35, offset_y - r * 0.35);
	context.fillText("安定", offset_x + r * 0.35, offset_y - r * 0.35);
	context.fillText("挑戦", offset_x - r * 0.35, offset_y + r * 0.35);
	context.fillText("自由", offset_x + r * 0.35, offset_y + r * 0.35);

	if (sixty_y2 >= 0) {
		draw_bold_triangle(x21, y21, x22, y22, x23, y23, 2);	// 赤三角形の描画
	}
	draw_bold_triangle(x11, y11, x12, y12, x13, y13, 1);		// 青三角形の描画

	// 十干十二支描画
	context.font = "20px 'ＭＳ ゴシック'";	// 斜めの文字は太くなる
	for (var i = 0; i < 60; i++) {
		var kan = s_kan[i % 10];
		var eto = s_eto[i % 12];
		context.textBaseline = "bottom";
		context.fillText(kan, offset_x, offset_y - a);
		context.textBaseline = "top";
		context.fillText(eto, offset_x, offset_y - a);

		context.lineWidth = 1;
		// 新しいパスを開始する
		context.beginPath();
		context.moveTo(offset_x, offset_y - r);
		context.lineTo(offset_x, offset_y - r - (a - r) * 0.3);
		context.stroke();

		center_rotate(6);
	}
	context.font = "bold 20px 'ＭＳ ゴシック'";	// 斜めでないものだけ太く表示し直す
	for (var i = 0; i < 60; i += 15) {
		var kan = s_kan[i % 10];
		var eto = s_eto[i % 12];
		context.textBaseline = "bottom";
		context.fillText(kan, offset_x, offset_y - a);
		context.textBaseline = "top";
		context.fillText(eto, offset_x, offset_y - a);
		center_rotate(90);
	}
}

//
// 中心回転
//
function center_rotate(ang) {
	// Canvasで回転する方法
	// https://lab.syncer.jp/Web/JavaScript/Canvas/9/
	// 1: 水平位置、垂直位置をcanvasの半分だけずらして
	context.translate(offset_x, offset_y);
	// 2: 回転を実行し、
	context.rotate(ang * Math.PI / 180);
	// 3: その後、ずらした分だけ位置を戻す
	context.translate(-offset_x, -offset_y);
}

//
// 三角形の塗りつぶし描画
//
function draw_fill_triangle(x1, y1, x2, y2, x3, y3) {
	// 新しいパスを開始する
	context.beginPath();
	// パスの開始座標を指定する
	context.moveTo(x1, y1);
	// 座標を指定してラインを引いていく
	context.lineTo(x2, y2);
	context.lineTo(x3, y3);
	// パスを閉じる（最後の座標から開始座標に向けてラインを引く）
	context.closePath();
	// 現在のパスを塗りつぶし表示する
	context.fill();
}

//
// 三角形の太線描画
//
function draw_bold_triangle(x1, y1, x2, y2, x3, y3, type) {
	context.save();
	context.lineCap = "round";	// 線の先を丸める
	context.lineWidth = 3;

	// 新しいパスを開始する
	context.beginPath();
	// パスの開始・終了座標を指定する
	// 連続した多角形にすると角が鋭く尖るので線をバラバラにして描画
	context.moveTo(x1, y1);
	context.lineTo(x2, y2);
	context.moveTo(x2, y2);
	context.lineTo(x3, y3);
	context.moveTo(x3, y3);
	context.lineTo(x1, y1);

	if (type == 3)
		context.strokeStyle = "#00bf00";	// 緑
	else if (type == 2)
		context.strokeStyle = "#ff0000";	// 赤
	else
		context.strokeStyle = "#0000ff";	// 青
	context.stroke();
	context.restore();
}

//
// 円の描画
//
function draw_circle(r, fill) {
	context.save();
	// 新しいパスを開始する
	context.beginPath();
	context.arc(offset_x, offset_y, r, 0, 360 * Math.PI / 180, false);
	// 現在のパスを輪郭表示する
	if (fill)
		context.fill();
	else {
		context.lineWidth = 2;
		context.stroke();
		// 十字線を引く
		context.lineWidth = 1;
		context.beginPath();
		context.moveTo(offset_x - r, offset_y);
		context.lineTo(offset_x + r, offset_y);
		context.stroke();
		context.moveTo(offset_x, offset_y - r);
		context.lineTo(offset_x, offset_y + r);
		context.stroke();
	}
	context.restore();
}

//
// X 座標
//
function get_x(direction, distance, shift) {
	var ret;
	ret = Math.sin((direction * 6 + shift) * Math.PI / 180) * distance;
	return offset_x + ret;
}

//
// Y 座標
//
function get_y(direction, distance, shift) {
	var ret;
	ret = Math.cos((direction * 6 + shift) * Math.PI / 180) * distance;
	return offset_y - ret;
}