/*
1.ブラウザ全体にカンバスを描写
2.マウスオーバーすると中心点からマウスまで1本の線
マウスオーバーするとマウスからブラウザ端までの線のアニメーション。
3.ブラウザサイズ変更の度にカンバスのサイズを変更

*/
var width;//ブラウザ幅
var height;//ブラウザ高

var element;
var canvas;
var ctx;

var mouseX;
var mouseY;

//線の本数
var lines = 20;

//ブラウザの中心から頂点までを半径とした円周上の点の座標
var endPX = new Array;
var endPY = new Array;
var radius;
var angle = new Array;
var angleSpeed = 0.2;
var angleSize = new Array;

var frame = 0;

function windowSize(){
	width = $('.canvas-wrapper').width();
	height = $('.canvas-wrapper').height();
}
window.onload = function(){
	//canvasを全画面で描写
	windowSize();
	$( '#mycanvas' ).get( 0 ).width = width;
	$( '#mycanvas' ).get( 0 ).height = height;

	mouseX = width/2;
	mouseY = height/2;

	for(var i = 0;i < lines;i++){
		endPX[i] = 0;	
		endPY[i] = 0;
		angle[i] = i / 6;
		if(i == 0 || i == lines - 1){
			angleSize[i] = angleSpeed;
		}else{
			angleSize[i] = angleSpeed + 0.1;
		}
	}

	//ブラウザの対角線の長さを半径とする
	radius = Math.ceil(Math.sqrt(Math.pow(width,2) + Math.pow(height,2)));

	// 各エレメントを取得
	element = document.getElementById("mycanvas");
	mouseEvent();

	canvas = document.getElementById('mycanvas');
	if(!canvas || !canvas.getContext) return false;
	ctx = canvas.getContext('2d');

}
window.onresize=function(){
	//canvasを全画面で描写
	windowSize();
	//ブラウザの対角線の長さを半径とする
	radius = Math.ceil(Math.sqrt(Math.pow(width,2) + Math.pow(height,2)));
	$( '#mycanvas' ).get( 0 ).width = $( window ).width();
	$( '#mycanvas' ).get( 0 ).height = $( window ).height();
}
window.requestAnimFrame = (function(){
   	return  window.requestAnimationFrame   ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
})();

function loop(){
	requestAnimFrame(loop);
	frame++;
	if(frame > 60) frame = 0;

	//カンバスのリセット
	ctx.clearRect(0,0,width,height);
	
	drawLineCenter();
	drawLineWindow();
}

function drawLineCenter(){
	ctx.clearRect(0,0,width,height);
	//直線の描写の開始宣言
	ctx.beginPath();
	//直線の最初の点
	ctx.moveTo(width/2,height/2);
	ctx.strokeStyle = 'rgb(0,0,0)';
	//線を引く
	ctx.lineTo(mouseX,mouseY);
	ctx.lineWidth = 0.1;
	ctx.stroke(); 
}
function drawLineWindow(){
	//直線の描写の開始宣言
	for(var i = 0;i < lines;i++){
		ctx.beginPath();
		ctx.lineWidth = 0.1;
		//直線の最初の点
		ctx.moveTo(mouseX,mouseY);
		if(i == 0 || i == lines - 1){
			ctx.strokeStyle = 'rgba(192, 80, 77, 0)';
		}else{
			ctx.strokeStyle = 'rgb(0,0,0)';
		}
		//線を引く
		ctx.lineTo(endPX[i],endPY[i]);
		ctx.stroke();

		endPX[i] = Math.cos(Math.PI / 180 * angle[i]) * radius + mouseX;
		endPY[i] = Math.sin(Math.PI / 180 * angle[i]) * radius + mouseY;

		if(true) {
			//先頭と一番後ろは判定用
			if(i == 0 || i == lines - 1){
				angle[i] += angleSize[i];
			}else{
				//一番後ろ以下の角度になったとき加速
				if(angle[0] > angle[i]){
					angleSize[i] = angleSpeed + 0.1;
				//先頭以上の角度になったとき減速
				}else if(angle[i] > angle[lines - 1]){
					angleSize[i] = angleSpeed - 0.1;
				}
				angle[i] += angleSize[i];
			}
		} else {
			// 角度を0に戻す
			//angle[i] = 0;
		}
	}
	console.log(angleSize[10]);
}
function mouseEvent(){

	function MouseOverFunc(e){
		loop();
	}
	function MouseMoveFunc(e){
		mouseX = e.pageX;
		mouseY = e.pageY;
	}
	function MouseOutFunc(e){
	}

	// ------------------------------------------------------------
	// イベントのリッスンを開始する
	// ------------------------------------------------------------
	// イベントリスナーに対応している
	if(element.addEventListener){
		// マウスオーバー時に実行されるイベント
		element.addEventListener("mouseover" , MouseOverFunc);
		// マウスカーソルが移動するたびに実行されるイベント
		element.addEventListener("mousemove" , MouseMoveFunc);
		// マウスアウト時に実行されるイベント
		element.addEventListener("mouseout" , MouseOutFunc);
	// アタッチイベントに対応している
	}else if(element.attachEvent){
		// マウスオーバー時に実行されるイベント
		element.attachEvent("onmouseover" , MouseOverFunc);
		// マウスカーソルが移動するたびに実行されるイベント
		element.attachEvent("onmousemove" , MouseMoveFunc);
		// マウスアウト時に実行されるイベント
		element.attachEvent("onmouseout" , MouseOutFunc);
	}
}