var delau1 = null;
var delau2 = null;
var delau3 = null;

$(document).ready(function (){


	try{
		var canvas = document.getElementById('canvas');


		var context = canvas.getContext('2d');
		var canvas2 = document.getElementById('canvas2');
		var context2 = canvas2.getContext('2d');
		var canvas3 = document.getElementById('canvas3');
		var context3 = canvas3.getContext('2d');

		var  bool = Math.floor( Math.random()*2 );

		
		
		var  ran = Math.floor( Math.random()*40 );
		delau1 = new Delaunays(canvas, context, 180 + ran, 180 + ran);
		 ran = Math.floor( Math.random()*20 );
		delau2 = new Delaunays(canvas2, context2, 60 + ran , 60 + ran);
		 ran = Math.floor( Math.random()*20 );
		delau3 = new Delaunays(canvas3, context3, 30 + ran, 30 + ran);
		

		if(bool == 0){
			delau2.pointColor = "#bc0606"
		}else{
			delau3.pointColor = "#bc0606"
		}

		

		$("#canvas").mousedown(function (e){
				delau1._down = !delau1._down;
				if(delau1._down == true) delau1.reset();
		});

		$("#canvas2").mousedown(function (e){
				delau2._down = !delau2._down;
				if(delau2._down == true) delau2.reset();
		});
		$("#canvas3").mousedown(function (e){
				delau3._down = !delau3._down;
				if(delau3._down == true) delau3.reset();
		});
	}catch(e){
		$("#visual_bg").find("#canvas").css({"display":"block", "margin-top":"50px"});
	}
});


var  Delaunays = function($canvas, $ctx, $width, $height){

	this._total = 9;
	this._total2 = 9;
	this._speed = 0.015;
	
	this._canvas = $canvas;
	this._context = $ctx;
	this._txtArr = [];
	this._h_arrays = [];
	this._m_arrays = [];
	this._b_arrays = [];
	this._t_arrays = [];
	this._fishbodys = 20;
	this._stageWidth = $width;
	this._stageHeight = $height;
	this._down = Math.floor(Math.random()*2) == 1 ? true : false;
	this._down = false;
	if($($canvas).attr("down") == "true"){
		this._down = true;
	}

	this.__target = {x:0, y:0}
	this._index = 0;
	this.minDist = 100;
	this.springAmount = 0.001;
	this.vertices = new Array(2048);
	this.pointColor = null;
	this.___aaa = false;

	this.init();
}
Delaunays.prototype.reClick =  function (){
	this._down = !this._down;
	if(this._down == true) this.reset();
}


var _length = 0;
var _opacity = 1;
var timerBool = false;
var radian = 0;
Delaunays.prototype.drawCtx =  function (){
	
	var ctx = this._context;
	var canvas = this._canvas;
	var vertices = this.vertices;
	
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	vertices.length = 0;

	this.loop2();

	if(this.___aaa == true && this._down == false){
		this.reset();
	}
	
	var len = this._down == false ? this._total2 : this._h_arrays.length;
	for (var i = 0; i<len; i++) {
		vertices[i] = [this._h_arrays[i].x, this._h_arrays[i].y];
	}
	this.___aaa = this._down;

	var triangles = Delaunay.triangulate(vertices);
	
	var c0 = "#42465f";
	var c1 = "#707686";
	var c2 = "#70cbbc";
	var c3 = "#2ab6ad";
	if(this.pointColor != null){
		c2 = this.pointColor;
	}

	var gl = ctx.createLinearGradient(0,0,0,200);
	

	var opacity = 0.9;
	var length = _length;
	_length = triangles.length;

	if(length != _length) _opacity = 1;
	for(i = triangles.length; i; ) {
		ctx.beginPath();
		ctx.lineWidth = 0.4;
		if(this._down) opacity = 0;
		
		
		if(i%3 == 0) ctx.fillStyle = utils.colorToRGB(c0, opacity);
		if(i%6 == 0) ctx.fillStyle = utils.colorToRGB(c1, opacity);
		if(i%10 == 0) ctx.fillStyle = utils.colorToRGB(c2, (opacity));

		for(var j =0;j<200;j++){
			if(j%4 == 0) gl.addColorStop(j*0.005,"rgb(255,255,255)");
			if(j%4 == 1) gl.addColorStop(j*0.005,"rgb(255,255,255)");
			if(j%4 == 2) gl.addColorStop(j*0.005,"rgb(255,255,255)");
			if(j%4 == 3) gl.addColorStop(j*0.005, c3);
		}
		if(this._down) 	if(i%4 == 0) ctx.fillStyle = gl;


		--i; ctx.moveTo(vertices[triangles[i]][0], vertices[triangles[i]][1]);
		--i; ctx.lineTo(vertices[triangles[i]][0], vertices[triangles[i]][1]);
		--i; ctx.lineTo(vertices[triangles[i]][0], vertices[triangles[i]][1]);
		
		if(this.pointColor != null) c3 = this.pointColor;
		if(this._down) ctx.strokeStyle = utils.colorToRGB(c3, 1);
		else ctx.strokeStyle = utils.colorToRGB(c1, 0);

		ctx.closePath();
		ctx.fill();
		ctx.stroke();
	}
}



Delaunays.prototype.size = function (){
	var sw = this._stageWidth;
	var sh = this._stageHeight;
	var obj = {x:Math.floor(Math.random()*(sw+400) - 200), y:Math.floor(Math.random()*(sh+400) - 200)};
	obj = {x:Math.floor( (Math.random()*sw)  ), y:Math.floor(Math.random()*(sh))};

	return obj;
}

Delaunays.prototype.reset = function (){
	var sw = this._stageWidth;
	var sh = this._stageHeight;

	this._h_arrays.length = 0;
	this._m_arrays.length = 0;
	this._b_arrays.length = 0;
	this._t_arrays.length = 0;


	for (var i = 0; i<this._total; i++) {
		var _target = {x:this.size().x, y:this.size().y}
		var _h_mc = new Ball(0, "#ffffff");
			_h_mc.x = Math.floor(Math.random()*(sw) + 0);
			_h_mc.y = Math.floor(Math.random()*(sw) + 0);
			_h_mc.tx = Math.floor(Math.random()*(sw) + 0);
			_h_mc.ty = Math.floor(Math.random()*(sw) + 0);
		
		var _m_mc = new Ball(0, "#ffffff");
			_m_mc.x = Math.floor(Math.random()*sw - 0);
			_m_mc.y = Math.floor(Math.random()*sw - 0);

			this._h_arrays[i] = _h_mc;
			this._m_arrays[i] = _m_mc;
			this._b_arrays[i] = {x:0,y:0};
			this._t_arrays[i] = _target;
	}
}

Delaunays.prototype.init = function (){
	var sw = this._stageWidth;
	var sh = this._stageHeight;

	for (var i = 0; i<this._total; i++) {
		var _target = {x:this.size().x, y:this.size().y}
		var _h_mc = new Ball(0, "#ffffff");
			_h_mc.x = Math.floor(Math.random()*(sw) + 0);
			_h_mc.y = Math.floor(Math.random()*(sw) + 0);
			_h_mc.tx = Math.floor(Math.random()*(sw) + 0);
			_h_mc.ty = Math.floor(Math.random()*(sw) + 0);
		
		var _m_mc = new Ball(0, "#ffffff");
		var ran = Math.random() * 50 - 100;
			_m_mc.x = Math.floor(Math.random()*sw - ran);
			_m_mc.y = Math.floor(Math.random()*sw - ran);

			this._h_arrays[i] = _h_mc;
			this._m_arrays[i] = _m_mc;
			this._b_arrays[i] = {x:0,y:0};
			this._t_arrays[i] = _target;
	}
}

Delaunays.prototype.loop2 = function (){
	var i = 0;
	var len = this._h_arrays.length;
	//len = this._down == false ? this._total2 : len;
	for(i = 0;i<len;i++){
		var h = this._h_arrays[i];
		var m = this._m_arrays[i];
		var b = this._b_arrays[i];
		var t = this._t_arrays[i];
		//console.log(this);
		this.loop3(b, m, h, t, i)
	}
};

Delaunays.prototype.loop3 = function ($b, $m, $h, $t,  $index){
	//console.log($b);

	var bb = $b;
	var _m_mc = $m;
	var _h_mc = $h;
	var index = $index;
	var target = $t;

	if(this._down == true){
		//target.x = _paticles[index][0] + 100;
		//target.y = _paticles[index][1] + 100;
		
		//_m_mc.x = _paticles[index][0] + 100;
		//_m_mc.y = _paticles[index][1] + 100;
	}

	bb.x += (target.x - bb.x)*0.1;
	bb.y += (target.y - bb.y)*0.1;
	
	var gap = Math.abs((target.x - bb.x));
	/*if( this._down == true){
		if(index == 0 ) {
			//console.log(gap);
			if(gap < 0.005) {
				this.reClick();
				return;
			}
		}
	}

	if( this._down == true){
		//if(gap < 0.05) {
			//this._down = false;
			this._speed = 0.1;
			this._index++;
		//}
	}*/
	
	

	if(gap < 0.5) {
		var t = {x:0, y:0}
		t.x = this.size().x;
		t.y = this.size().y;
		//console.log(t.x, t.y);
		this._t_arrays[$index] = t;
	}

	_m_mc.x += (bb.x - _m_mc.x)*0.1;
	_m_mc.y += (bb.y - _m_mc.y)*0.1;
	_h_mc.tx = _h_mc.x;
	_h_mc.ty = _h_mc.y;
	_h_mc.x += (_m_mc.x - _h_mc.x)*this._speed;
	_h_mc.y += (_m_mc.y - _h_mc.y)*this._speed;
	//_h_mc.rotation = Math.atan2(_m_mc.y - _h_mc.y, _m_mc.x - _h_mc.x)*180/Math.PI;
};


(function drawFrame () {
		window.requestAnimationFrame(drawFrame);

		try{
			if(delau1 != null) delau1.drawCtx();
			if(delau2 != null) delau2.drawCtx();
			if(delau3 != null) delau3.drawCtx();
		}catch(e){}

 }());


var _paticles = [[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[0,100,700], 
[-30,96,700], 
[-29,96,710], 
[-24,96,719], 
[-18,96,725], 
[-9,96,730], 
[0,96,731], 
[10,96,730], 
[19,96,725], 
[25,96,719], 
[30,96,710], 
[31,96,701], 
[30,96,691], 
[26,96,682], 
[19,96,676], 
[10,96,671], 
[1,96,670], 
[-9,96,671], 
[-18,96,675], 
[-24,96,682], 
[-29,96,691], 
[-30,96,700], 
[-58,81,700], 
[-55,81,719], 
[-47,81,735], 
[-34,81,748], 
[-18,81,756], 
[0,81,759], 
[19,81,756], 
[35,81,748], 
[48,81,735], 
[56,81,719], 
[59,81,701], 
[56,81,682], 
[48,81,666], 
[35,81,653], 
[19,81,645], 
[1,81,642], 
[-18,81,645], 
[-34,81,653], 
[-47,81,666], 
[-55,81,682], 
[-58,81,700], 
[-80,59,700], 
[-76,59,725], 
[-65,59,748], 
[-47,59,766], 
[-25,59,777], 
[0,59,781], 
[25,59,777], 
[48,59,766], 
[66,59,748], 
[77,59,726], 
[81,59,701], 
[77,59,675], 
[66,59,653], 
[48,59,635], 
[26,59,624], 
[1,59,620], 
[-24,59,624], 
[-47,59,635], 
[-65,59,653], 
[-76,59,675], 
[-80,59,700], 
[-95,31,700], 
[-90,31,730], 
[-76,31,756], 
[-55,31,777], 
[-29,31,791], 
[0,31,796], 
[30,31,791], 
[56,31,777], 
[77,31,756], 
[91,31,730], 
[96,31,701], 
[91,31,671], 
[77,31,645], 
[56,31,624], 
[30,31,610], 
[1,31,605], 
[-29,31,610], 
[-55,31,624], 
[-76,31,645], 
[-90,31,671], 
[-95,31,700], 
[-100,1,700], 
[-95,1,731], 
[-80,1,759], 
[-58,1,781], 
[-30,1,796], 
[0,1,800], 
[31,1,796], 
[59,1,781], 
[81,1,759], 
[96,1,731], 
[100,1,701], 
[96,1,670], 
[81,1,642], 
[59,1,620], 
[31,1,605], 
[1,1,600], 
[-30,1,605], 
[-58,1,620], 
[-80,1,642], 
[-95,1,670], 
[-100,1,700], 
[-95,-30,700], 
[-90,-30,730], 
[-76,-30,756], 
[-55,-30,777], 
[-29,-30,791], 
[0,-30,796], 
[30,-30,791], 
[56,-30,777], 
[77,-30,756], 
[91,-30,730], 
[96,-30,701], 
[91,-30,671], 
[77,-30,645], 
[56,-30,624], 
[30,-30,610], 
[1,-30,605], 
[-29,-30,610], 
[-55,-30,624], 
[-76,-30,645], 
[-90,-30,671], 
[-95,-30,700], 
[-80,-58,700], 
[-76,-58,725], 
[-65,-58,748], 
[-47,-58,766], 
[-25,-58,777], 
[0,-58,781], 
[25,-58,777], 
[48,-58,766], 
[66,-58,748], 
[77,-58,726], 
[81,-58,701], 
[77,-58,675], 
[66,-58,653], 
[48,-58,635], 
[26,-58,624], 
[1,-58,620], 
[-24,-58,624], 
[-47,-58,635], 
[-65,-58,653], 
[-76,-58,675], 
[-80,-58,700], 
[-58,-80,700], 
[-55,-80,719], 
[-47,-80,735], 
[-34,-80,748], 
[-18,-80,756], 
[0,-80,759], 
[19,-80,756], 
[35,-80,748], 
[48,-80,735], 
[56,-80,719], 
[59,-80,701], 
[56,-80,682], 
[48,-80,666], 
[35,-80,653], 
[19,-80,645], 
[1,-80,642], 
[-18,-80,645], 
[-34,-80,653], 
[-47,-80,666], 
[-55,-80,682], 
[-58,-80,700], 
[-30,-95,700], 
[-29,-95,710], 
[-25,-95,719], 
[-18,-95,726], 
[-9,-95,730], 
[0,-95,731], 
[10,-95,730], 
[19,-95,726], 
[26,-95,719], 
[30,-95,710], 
[31,-95,701], 
[30,-95,691], 
[26,-95,682], 
[19,-95,675], 
[10,-95,671], 
[1,-95,670], 
[-9,-95,671], 
[-18,-95,675], 
[-25,-95,682], 
[-29,-95,691], 
[-30,-95,700], 
[0,-100,700], 
[0,-100,701], 
[0,-100,701], 
[0,-100,701], 
[0,-100,701], 
[0,-100,701], 
[1,-100,701], 
[1,-100,701], 
[1,-100,701], 
[1,-100,701], 
[1,-100,701], 
[1,-100,700], 
[1,-100,700], 
[1,-100,700], 
[1,-100,700], 
[1,-100,700], 
[0,-100,700], 
[0,-100,700], 
[0,-100,700], 
[0,-100,700], 
[0,-100,700]]