window.onload = function(){
	draw();
};

function draw(){
	var title = "html5で脱出ゲームは作れるのか？";
	var startbt = "Play";
	var mouseX;
	var mouseY;
	var view = 0;

	var canvas = document.getElementById("escape");
	if ( ! canvas || ! canvas.getContext ) { return false; }
	var cx = canvas.getContext("2d");
	
	cx.font = "20px 'Century Gothic'";
	cx.fillText(title,110,100);
	cx.fillText(startbt,250,250);
	
	canvas.addEventListener("mousedown", mouseDownHandler, false);

	function mouseDownHandler(e) {
 		var rect = e.target.getBoundingClientRect();
 		mouseX =  Math.floor(e.clientX - rect.left);
		mouseY =  Math.floor(e.clientY - rect.top);
		
		if(view == 0){
			if(mouseX > 250 && mouseX < 300){
				if(mouseY > 230 && mouseY < 253){
					view = 1;
					printView();
				}
			}
		}else if(view == 1){
			if(mouseX > 4 && mouseX < 25){
				if(mouseY > 185 && mouseY < 215){
					view = 4;
					printView();
				}
			}
			if(mouseX > 521 && mouseX < 546){
				if(mouseY > 185 && mouseY < 215){
					view = 2;
					printView();
				}
			}
		}else if(view == 2){
			if(mouseX > 4 && mouseX < 25){
				if(mouseY > 185 && mouseY < 215){
					view = 1;
					printView();
				}
			}
			if(mouseX > 521 && mouseX < 546){
				if(mouseY > 185 && mouseY < 215){
					view = 3;
					printView();
				}
			}
		}else if(view == 3){
			if(mouseX > 4 && mouseX < 25){
				if(mouseY > 185 && mouseY < 215){
					view = 2;
					printView();
				}
			}
			if(mouseX > 521 && mouseX < 546){
				if(mouseY > 185 && mouseY < 215){
					view = 4;
					printView();
				}
			}
		}else if(view == 4){
			if(mouseX > 4 && mouseX < 25){
				if(mouseY > 185 && mouseY < 215){
					view = 3;
					printView();
				}
			}
			if(mouseX > 521 && mouseX < 546){
				if(mouseY > 185 && mouseY < 215){
					view = 1;
					printView();
				}
			}
		}
	}
	
	canvas.onmousemove = mouseMoveListner;
	function mouseMoveListner(e) {
		//表示クリア
		cx.clearRect(0, 0, 65, 32);
		//座標調整
		adjustXY(e);
		//テキストの描画
		cx.globalAlpha = 1;
		cx.fillStyle = "#666666";
		cx.font = "12px Arial";
		cx.fillText("X座標：" + mouseX, 5, 12);
		cx.fillText("Y座標：" + mouseY, 5, 24);
		
		if(mouseX > 4 && mouseX < 25 && mouseY > 185 && mouseY < 215){
			document.body.style.cursor = "pointer";
		}else if(mouseX > 521 && mouseX < 546 && mouseY > 185 && mouseY < 215){
			document.body.style.cursor = "pointer";
		}else{
			document.body.style.cursor = "default";
		}
	}
	
	function adjustXY(e) {
		var rect = e.target.getBoundingClientRect();
		mouseX = e.clientX - rect.left;
		mouseY = e.clientY - rect.top;
	}
	
	function printView(){
		
		var img = new Image();
		if(view == 1){
			img.src = "image/view1.jpg";
			img.onload = function(){
				cx.drawImage(img, 0, 0);
				moveBt();
				itemBar();
			}
		}else if(view == 2){
			img.src = "image/view2.jpg";
			img.onload = function(){
				cx.drawImage(img, 0, 0);
				moveBt();
				itemBar();
			}
		}else if(view == 3){
			img.src = "image/view3.jpg";
			img.onload = function(){
				cx.drawImage(img, 0, 0);
				moveBt();
				itemBar();
			}
		}else if(view == 4){
			img.src = "image/view4.jpg";
			img.onload = function(){
				cx.drawImage(img, 0, 0);
				moveBt();
				itemBar();
			}
		}
	}
	
	function moveBt(){
		cx.beginPath();
		cx.moveTo(4, 200);
		cx.lineTo(25, 185);
		cx.lineTo(25, 215);
		cx.closePath();
		/* 三角形を塗りつぶす */
		cx.fillStyle = "#ffffff";
		cx.fill();
		
		cx.beginPath();
		cx.moveTo(546, 200);
		cx.lineTo(521, 185);
		cx.lineTo(521, 215);
		cx.closePath();
		/* 三角形を塗りつぶす */
		cx.fillStyle = "#ffffff";
		cx.fill();
	}
	
	function itemBar(){
		var about = "？";
		cx.fillStyle = 'rgba(0, 0, 0, 0.5)';
		cx.fillRect(0,0,550,35);
		cx.beginPath();
		cx.strokeStyle = "#ffffff";
		cx.arc(530,17,17,0,2*Math.PI,true);
		cx.stroke();
		cx.fillStyle = "#ffffff";
		cx.font = "30px 'ＭＳ ゴシック'";
		cx.fillText(about,515,28);
	}
};