var isiPad = navigator.userAgent.match(/iPad/i) != null;
var isiPhone = navigator.userAgent.match(/iPhone/i) != null;

var mainId = null;
var objFrame = null;

// 通常Web用とiPad/iPhone用にイベントを定義
var evt = {
	down: "",
	up: "",
	move: "",
	set: function() {
		if (isiPad || isiPhone) {
			this.down = "touchstart";
			this.up = "touchend";
			this.move = "touchmove";
		} else {
			this.down = "mousedown";
			this.up = "mouseup";
			this.move = "mousemove";
		}
	}
};
evt.set();

// ドラッグに関する設定
var baseDragTime = 450;		// 最大判定時間（ミリ秒）
var baseDragRange = 40;		// 最低移動距離（ピクセル）
var baseMoveTime = 0.6;		// ページ移動時間（秒）

var setMainVisual = function(id) {
	mainId = id;

	var setHTML = "<div id='histroyWrap'><div id='canvasFrame'><canvas width='3869' height='450' id='cvs_background'></canvas>";
			setHTML += "<canvas width='20' height='20' id='cvs_ball01'></canvas><canvas width='20' height='20' id='cvs_ball02'></canvas>";
			setHTML += "<canvas width='20' height='20' id='cvs_ball03'></canvas><canvas width='20' height='20' id='cvs_ball04'></canvas>";
			setHTML += "<canvas width='20' height='20' id='cvs_ball05'></canvas>";
			setHTML += "<canvas width='119' height='48' id='cvs_nowSol01'></canvas><canvas width='119' height='48' id='cvs_nowSol02'></canvas>";
			setHTML += "<canvas width='119' height='48' id='cvs_nowSol03'></canvas><canvas width='119' height='48' id='cvs_nowSol04'></canvas>";
			setHTML += "<canvas width='20' height='20' id='cvs_point01'></canvas><canvas width='20' height='20' id='cvs_point02'></canvas>";
			setHTML += "<canvas width='20' height='20' id='cvs_point03'></canvas><canvas width='20' height='20' id='cvs_point04'></canvas>";
			setHTML += "</div></div><a id='btnPrev' href='javascript: zyyxHistory.move(-1);'></a><a id='btnNext' href='javascript: zyyxHistory.move(1);' class='hiddenBtn'></a>";

	$("#" + mainId).append(setHTML);
};

var zyyxHistory = {
	int_ball01: null,
	drow: function() {
		var canvas  = document.getElementById("cvs_background");
		if (canvas.getContext) {
			var ctx = canvas.getContext("2d");

			// デフォルトの移動値
			var defX = 2965;

			// 背景の円を描く
			var circleX = defX + 315;		// 円のX軸上の中心点
			var circley = 230;		// 円のY軸上の中心点
			var firstRadius = 35;	// 最小の円の半径
			var sabunRadius = 23;	// 各円の半径の差分
			var circleSize = 9;		// 描画する円の数

			ctx.beginPath();
			for (var i=0; i<circleSize; i++) {
				var thisRadius = firstRadius + sabunRadius * i;
				var nextRadius = firstRadius + sabunRadius * (i + 1);
				ctx.arc(circleX, circley, thisRadius, 0, Math.PI*2, false);
				ctx.moveTo(circleX + nextRadius, 230);
			}
			ctx.lineWidth = 1;
			ctx.strokeStyle = "rgba(255, 255, 255, 0.2)";
			ctx.stroke();

			// 背景の装飾円を描く
			ctx.beginPath();
			ctx.arc(defX + 596, 39, 2.5, 0, Math.PI*2, false);
			ctx.moveTo(defX + 596, 419);
			ctx.arc(defX + 596, 419, 2.5, 0, Math.PI*2, false);
			ctx.moveTo(defX + 791, 419);
			ctx.arc(defX + 791, 419, 2.5, 0, Math.PI*2, false);
			ctx.moveTo(defX + 791, 39);
			ctx.arc(defX + 791, 39, 2.5, 0, Math.PI*2, false);
			ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
			ctx.fill();

			// 年表を描く
			ctx.beginPath();
			ctx.arc(defX + 0, circley - 190, 2.5, 0, Math.PI*2, false);
			ctx.arc(defX + 0, circley, 5, 0, Math.PI*2, false);
			ctx.fillStyle = "rgba(255, 255, 255, 1)";
			ctx.fill();
			ctx.beginPath();
			ctx.moveTo(defX + 0, circley - 190);
			ctx.lineTo(defX + 0, circley);
			ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
			ctx.lineWidth = 2;
			ctx.stroke();
			var lblZyyxFlow = new Image();
			lblZyyxFlow.src = "images/lbl_zyyxSolFlow.png?" + new Date().getTime();
			lblZyyxFlow.onload  = function() {
				ctx.drawImage(lblZyyxFlow, 3000, circley - 188);
			}



			// 年表を描く（その２）
			this.setChronologicalTbl(ctx, defX - 135, circley, true, "images/lbl_year2008.png", "images/text_works2008.png", null);
			this.setChronologicalTbl(ctx, defX - 270, circley, true, "images/lbl_year2007.png", "images/text_works2007.png", null);
			this.setChronologicalTbl(ctx, defX - 405, circley, true, "images/lbl_year2006.png", "images/text_works2006.png", null);
			this.setChronologicalTbl(ctx, defX - 540, circley, true, "images/lbl_year2005.png", "images/text_works2005.png", "images/img_event2005.png");
			this.setChronologicalTbl(ctx, defX - 675, circley, true, "images/lbl_year2004.png", null, null);
			this.setChronologicalTbl(ctx, defX - 810, circley, true, "images/lbl_year2003.png", "images/text_works2003.png", null);
			this.setChronologicalTbl(ctx, defX - 945, circley, true, "images/lbl_year2002.png", "images/text_works2002.png", null);
			this.setChronologicalTbl(ctx, defX - 1080, circley, true, "images/lbl_year2001.png", "images/text_works2001.png", null);
			this.setChronologicalTbl(ctx, defX - 1215, circley, true, "images/lbl_year2000.png", "images/text_works2000.png", null);
			this.setChronologicalTbl(ctx, defX - 1350, circley, true, "images/lbl_year1999.png", "images/text_works1999.png", "images/img_event1999.png");
			this.setChronologicalTbl(ctx, defX - 1485, circley, true, "images/lbl_year1998.png", "images/text_works1998.png", null);
			this.setChronologicalTbl(ctx, defX - 1620, circley, true, "images/lbl_year1997.png", "images/text_works1997.png", "images/img_event1997.png");
			this.setChronologicalTbl(ctx, defX - 1755, circley, true, "images/lbl_year1996.png", "images/text_works1996.png", null);
			this.setChronologicalTbl(ctx, defX - 1890, circley, true, "images/lbl_year1995.png", "images/text_works1995.png", "images/img_event1995.png");
			this.setChronologicalTbl(ctx, defX - 2025, circley, true, "images/lbl_year1994.png", "images/text_works1994.png", "images/img_event1994.png");
			this.setChronologicalTbl(ctx, defX - 2160, circley, true, "images/lbl_year1993.png", "images/text_works1993.png", null);
			this.setChronologicalTbl(ctx, defX - 2295, circley, true, "images/lbl_year1992.png", "images/text_works1992.png", null);
			this.setChronologicalTbl(ctx, defX - 2430, circley, true, "images/lbl_year1991.png", "images/text_works1991.png", "images/img_event1991.png");
			this.setChronologicalTbl(ctx, defX - 2565, circley, false, "images/lbl_year1990.png", null, null);
			this.setChronologicalTbl(ctx, defX - 2965, circley, false, "images/lbl_year1980.png", null, "images/img_event1980.png")

			// 年表を描く（その3）
			ctx.beginPath();
			ctx.arc(defX - 2605, circley, 3, 0, Math.PI*2, false);
			ctx.moveTo(defX - 2645, circley);
			ctx.arc(defX - 2645, circley, 3, 0, Math.PI*2, false);
			ctx.moveTo(defX - 2685, circley);
			ctx.arc(defX - 2685, circley, 3, 0, Math.PI*2, false);
			ctx.moveTo(defX - 2725, circley);
			ctx.arc(defX - 2725, circley, 3, 0, Math.PI*2, false);
			ctx.moveTo(defX - 2765, circley);
			ctx.arc(defX - 2765, circley, 3, 0, Math.PI*2, false);
			ctx.moveTo(defX - 2805, circley);
			ctx.arc(defX - 2805, circley, 3, 0, Math.PI*2, false);
			ctx.moveTo(defX - 2845, circley);
			ctx.arc(defX - 2845, circley, 3, 0, Math.PI*2, false);
			ctx.moveTo(defX - 2885, circley);
			ctx.arc(defX - 2885, circley, 3, 0, Math.PI*2, false);
			ctx.moveTo(defX - 2925, circley);
			ctx.arc(defX - 2925, circley, 3, 0, Math.PI*2, false);
			ctx.fillStyle = "rgba(255, 255, 255, 1)";
			ctx.fill();

			// ソリューション間のコネクト線を描く
			ctx.beginPath();
			ctx.strokeStyle = "rgba(255, 255, 255, 0.6)";
			ctx.lineWidth = 2;
			ctx.moveTo(defX + 198, 229);
			ctx.lineTo(defX + 298, 330);
			ctx.moveTo(defX + 313, 352);
			ctx.lineTo(defX + 634, 352);
			ctx.moveTo(defX + 240, 271);
			ctx.lineTo(defX + 634, 271);
			ctx.moveTo(defX + 488, 352);
			ctx.lineTo(defX + 568, 271);
			ctx.moveTo(defX + 388, 229);
			ctx.lineTo(defX + 495, 107);
			ctx.moveTo(defX + 495, 107);
			ctx.lineTo(defX + 634, 107);
			ctx.moveTo(defX + 424, 188);
			ctx.lineTo(defX + 479, 188);
			ctx.moveTo(defX + 598, 188);
			ctx.lineTo(defX + 634, 188);
			ctx.stroke();

			// 過去のソリューションを描く
			this.setSolution(ctx, defX + 53, 209, "images/img_pastYear01.png", "images/img_pastSol01.png");
			this.setSolution(ctx, defX + 200, 332, "images/img_pastYear02.png", "images/img_pastSol02.png");
			this.setSolution(ctx, defX + 255, 209, "images/img_pastYear03.png", "images/img_pastSol03.png");
			this.setSolution(ctx, defX + 483, 168, "images/img_pastYear04.png", "images/img_pastSol04.png");

			// 現在のソリューションを描く（枠のみ）
			this.setSolution(ctx, defX + 638, 86);
			this.setSolution(ctx, defX + 638, 168);
			this.setSolution(ctx, defX + 638, 250);
			this.setSolution(ctx, defX + 638, 332);
		}

		// コネクト線に沿って動く各ボールを描く
		for(var i=1; i<=5; i++) {
			var cvs_ball  = document.getElementById("cvs_ball0" + i);
			if (cvs_ball.getContext) {
				var ctx = cvs_ball.getContext("2d");
				ctx.beginPath();
				ctx.arc(10, 10, 8, 0, Math.PI*2, false);
				var g = ctx.createRadialGradient(10, 10, 0, 10, 10, 8);
				g.addColorStop(0, "rgba(255, 255, 255, 0.8)");
				g.addColorStop(0.3, "rgba(255, 255, 255, 0.8)");
				g.addColorStop(1, "rgba(255, 255, 255, 0)");
				ctx.fillStyle = g;
				ctx.fill();

				cvs_ball.className = "setBallAnime0" + i;
			}
		}

		// ソリューション付近のボールを描く
		for(var i=1; i<=4; i++) {
			var cvs_ball  = document.getElementById("cvs_point0" + i);
			if (cvs_ball.getContext) {
				var ctx = cvs_ball.getContext("2d");
				ctx.beginPath();
				ctx.arc(10, 10, 8, 0, Math.PI*2, false);
				var g = ctx.createRadialGradient(10, 10, 0, 10, 10, 8);
				g.addColorStop(0, "rgba(255, 255, 255, 0.8)");
				g.addColorStop(0.3, "rgba(255, 255, 255, 0.8)");
				g.addColorStop(1, "rgba(255, 255, 255, 0)");
				ctx.fillStyle = g;
				ctx.fill();

				cvs_ball.className = "setPointAnime0" + i;
			}
		}

	}, 
	setSolution: function(ctx, left, top, yearSrc, solSrc) {
		var solWidth = 111;		// ソリューションの幅
		var solHeight = 40;		// ソリューションの高さ
		var solBorder = 4;			// ソリューション枠の太さ

		// ソリューション背景を描く
		ctx.fillStyle  = "rgba(255, 255, 255, 0.4)";
		ctx.fillRect(left, top, solWidth, solHeight);

		if (yearSrc) {
			var imgYear = new Image();
			imgYear.src = yearSrc + "?" + new Date().getTime();
			imgYear.onload  = function() {
				ctx.drawImage(imgYear, left - solBorder, top - solBorder - 12);
			}
		}

		if (solSrc) {
			var imgSol = new Image();
			imgSol.src = solSrc + "?" + new Date().getTime();
			imgSol.onload  = function() {
				ctx.drawImage(imgSol, left, top);
			}
		}

		// ソリューション枠を描く
		ctx.strokeStyle  = "rgba(255, 255, 255, 1)";
		ctx.lineWidth = solBorder;
		ctx.strokeRect(left - solBorder/2, top - solBorder/2, solWidth + solBorder, solHeight + solBorder);
	},
	setChronologicalTbl: function(ctx, left, top, isSol, yearSrc, worksSrc, eventSrc) {
		ctx.beginPath();
		ctx.arc(left, top - 190, 2.5, 0, Math.PI*2, false);
		ctx.arc(left, top, 5, 0, Math.PI*2, false);
		ctx.fillStyle = "rgba(255, 255, 255, 1)";
		ctx.fill();
		ctx.beginPath();
		ctx.moveTo(left, top - 190);
		ctx.lineTo(left, top);
		ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
		ctx.lineWidth = 2;
		ctx.stroke();

		if (isSol) {
			var lblZyyxSol = new Image();
			lblZyyxSol.src = "images/lbl_zyyxSol.png?" + new Date().getTime();
			lblZyyxSol.onload  = function() {
				ctx.drawImage(lblZyyxSol, left + 5, top - 188);
			}
		}

		if (yearSrc) {
			var lblYear = new Image();
			lblYear.src = yearSrc + "?" + new Date().getTime();
			lblYear.onload  = function() {
				ctx.drawImage(lblYear, left + 7, top - 13);
			}
		}

		if (worksSrc) {
			var txtWorks = new Image();
			txtWorks.src = worksSrc + "?" + new Date().getTime();
			txtWorks.onload  = function() {
				ctx.drawImage(txtWorks, left + 7, top - 168);
			}
		}

		if (eventSrc) {
			var imgEvent = new Image();
			imgEvent.src = eventSrc + "?" + new Date().getTime();
			imgEvent.onload  = function() {
				ctx.drawImage(imgEvent, left + 7, top + 20);
			}
		}

	},
	setNowSolution: function(id, src, href) {
		var canvas  = document.getElementById(id);
		if (canvas.getContext) {
			var ctx = canvas.getContext("2d");
			this.setSolution(ctx, 4, 4, null, src);
			canvas.onclick = function() {
				document.location.href = href;
			}
			canvas.className = "setSolAnime";
		}
	},
	posX: 0,
	move: function(method) {

		document.getElementById("btnPrev").className = "";
		document.getElementById("btnNext").className = "";

//		var objFrame = document.getElementById("canvasFrame");
//		var nowLeft = objFrame.offsetLeft;
		var nowLeft = zyyxHistory.posX;
		var maxWidth = -2965;
		var setLeft;
		if (method == -1) {
			setLeft = nowLeft + 135 * 5;
			if (0 < setLeft) {
				setLeft = 0;
			}

			if (setLeft == 0) {
				document.getElementById("btnPrev").className = "hiddenBtn";
			}

		} else {
			if (nowLeft == 0) {
				setLeft = nowLeft - 400;
			} else {
				setLeft = nowLeft - 135 * 5;
			}
			if (setLeft < maxWidth) {
				setLeft = maxWidth;
			}

			if (setLeft == maxWidth) {
				document.getElementById("btnNext").className = "hiddenBtn";
			}

		}
//		objFrame.style.left = setLeft + "px";
		zyyxHistory.posX = setLeft;
		objFrame.style.webkitTransform = "translate3d(" + setLeft + "px, 0, 0)";
	}
};

// 通常ページにおけるドラッグ系イベントを定義
var drag = {

	// 各種変数の定義
	isPaging: false,		// ページ切り替え処理中フラグ
	startX: 0,				// ドラッグ開始地点（X座標）
	endX: 0,					// ドラッグ終了地点（X座標）
	startTime: null,		// ドラッグ開始時間
	endTime: null,		// ドラッグ終了時間

	// 各種ファンクションの定義
	start: function(event) {

		// ドラッグ開始時の座標を取得
		if (isiPad || isiPhone) {
			drag.startX = event.touches[0].clientX;
		} else {
			drag.startX = event.pageX;
		}
		drag.endX = drag.startX;

		// ドラッグ開始時の時間を取得
		drag.startTime = drag.endTime = new Date();
	},
	end: function(event) {

		// ページング途中ならイベントをキャンセル
		if (drag.isPaging) return;

		drag.endTime = new Date();

		// ドラッグ前後の差分を算出
		var sabunTime = drag.endTime.getTime() - drag.startTime.getTime();
		var sabunRange = drag.endX - drag.startX;

		// 差分が特定条件下ならページングを開始
		if (sabunTime <= baseDragTime && baseDragRange <= Math.abs(sabunRange)) {

			// ページング後のページ番号を設定
			if (sabunRange < 0) {
				zyyxHistory.move(1);
			} else {
				zyyxHistory.move(-1);
			}
			drag.paging();
		}
	},
	move: function(event) {
		event.preventDefault();

		// ドラッグ中の座標を取得
		if (isiPad || isiPhone) {
			drag.endX = event.touches[0].clientX;
		} else {
			drag.endX = event.pageX;
		}
	},
	paging: function() {
		drag.isPaging = true;
		drag.cancel();
	},
	cancel: function() {
		// ページングが始まった後、特定ミリ秒後に、フラグとアニメーションの指定を解除
		setTimeout(function() {
			objFrame.style.webkitTransition = "";
			drag.isPaging = false;
		}, baseMoveTime * 1000);
	}
};


if (isiPad || isiPhone) {
	$(function() {
		setMainVisual("visualWrap");
		zyyxHistory.drow();
		zyyxHistory.setNowSolution("cvs_nowSol01", "images/img_nowSol01.png", "contents/solution.html");
		zyyxHistory.setNowSolution("cvs_nowSol02", "images/img_nowSol02.png", "contents/mobile.html");
		zyyxHistory.setNowSolution("cvs_nowSol03", "images/img_nowSol03.png", "contents/chumby..html");
		zyyxHistory.setNowSolution("cvs_nowSol04", "images/img_nowSol04.png", "contents/dsc.html");
//		$("#canvasFrame").css({"left": "-2965px"});

		objFrame = document.getElementById("canvasFrame");
		objFrame.addEventListener(evt.down, drag.start, false);
		objFrame.addEventListener(evt.up, drag.end, false);
		objFrame.addEventListener(evt.move, drag.move, false);

		setTimeout(function() {
			$("#canvasFrame").css({"-webkit-transform": "translate3d(-2965px, 0, 0)"});
			zyyxHistory.posX = -2965;
		}, 1000);
	});
}