// JavaScript Document
(function($){

	$(function(){

		//変数宣言
		var canvasElm = $("#canvas");
		var canvasBg = $("#canvasbg");
		var alpha = 0.3;				//透明度
		var locArray = 100;				//位置の配列数
		var sizeArray = 100;			//サイズの配列数
		var colorArray = 600;			//カラーの配列数
		var speed = 100;					//アニメーション速度
		var colorLen = colorArray-2;
		var sizeLen = sizeArray-2;
		var locLen = locArray-2;
		var canvasWidth, canvasHeight;
		var ctx;
		var sizeNum = 0;
		var colorNum = 0;

		//配列作成
		randomLoc = [];
		randomSize = [];
		randomSizeInitial = [];
		randomColor = [];
		color = [];
		vector = [];

		//ランダム値作成関数
		function random(a_num, a_min){ //a_minは最小値、a_num+a_minは最大値
			return randomNum = Math.floor(Math.random()*a_num)+a_min;
		}

		//配列追加
		for(var i=0; i<locArray; i++){
			randomLoc.push(random(50, 50));
		}
		for(var i=0; i<sizeArray; i++){
			randomSize.push(random(50, 10));
		}
		for(var i=0; i<colorArray; i++){
			randomColor.push(random(255, 100));
		}
		for(var i=0; i<sizeArray; i++){
			vector.push(1);
		}
		for(var i=0, len=randomSize.length; i<len; i++){
			randomSizeInitial[i] = randomSize[i];
		}

		//Canvasサイズ取得関数
		function canvasSize(){
			canvasElm.attr("width", canvasBg.width()).attr("height", canvasBg.height());
			canvasWidth = canvasElm.width();
			canvasHeight = canvasElm.height();
		}

		//canvas表示関数
		function init(){
			var canvas = document.getElementById("canvas");
			if (canvas.getContext){
				ctx = canvas.getContext("2d");
				if(jQuery.support.opacity){
					setInterval(draw, speed); //draw関数を繰り返す
				}
				else {
					draw();
				}
			}
		}

		//カラー取得関数
		function getColor(){
			for(var i=0; i<3; i++){
				color[i] = randomColor[colorNum];
				colorNum++;
				if(colorNum>colorLen){
					colorNum = 0;
				}
			}
			return "rgba("+color[0]+","+color[1]+","+color[2]+","+alpha+")";
		}

		//サイズ取得関数
		function getSize(){
			if(sizeNum>sizeLen){
				sizeNum = 0;
			}
			var size = randomSize[sizeNum];
			sizeNum++;
			return size;
		}

		//円表示コンストラクタ関数
		function Round(a_color, a_x, a_y, a_size){
			this.color = a_color;
			this.x = a_x;
			this.y = a_y;
			this.size = a_size;
		}

		//円表示メソッド
		Round.prototype.view = function(){
			ctx.fillStyle = this.color;
			ctx.beginPath();
			ctx.arc(this.x, this.y, this.size, 0, Math.PI*2, true);
			ctx.closePath();
			ctx.fill();
			locNum++;
			roundNum++;
		}

		//canvas表示内容関数
		function draw(){

			//Canvasに透明度のある背景色を重ねて徐々に消していく
			ctx.globalCompositeOperation = "source-over";
			ctx.beginPath();
			ctx.fillStyle = "rgba(255,255,255,0.3)";
			ctx.fillRect(0, 0, canvasWidth, canvasHeight);

			//円の重なり部分の描写を設定
			ctx.globalCompositeOperation = "xor";

			//変数初期化
			sizeNum = 0;
			colorNum = 0;
			locNum = 0;
			roundNum = 0;
			var locX = 0;
			var locY = 0;

			//配列作成
			roundPool = [];

			//関数キャッシュ
			var f_getColor = getColor;
			var f_getSize = getSize;
			var f_Round = Round;

			//ランダムに円を作成
			for(var i=0, len=canvasHeight; i<len; i+=loc){
				for(var j=0, len=canvasWidth; j<len; j+=loc){
					var loc = randomLoc[locNum];
					if(locNum>locLen){
						locNum = 0;
					}
					roundPool[roundNum] = new f_Round(f_getColor(), loc*locX, loc*locY, f_getSize());
					roundPool[roundNum].view();
					locX++;
				}
				locX = 0;
				locY++;
			}

			//サイズ配列の数値を変更（アニメーション設定）
			for(var i=0, len=sizeArray; i<len; i++){
				var nowSize = randomSize[i]-1;
				var maxSize = randomSizeInitial[i];
				var easing = Math.floor(Math.pow(nowSize-(maxSize/2), 2)/(-Math.pow(maxSize, 2)/12)+4); //イージング設定
				if(nowSize>maxSize-1 || nowSize<2){ //サイズが0もしくは初期値になったら縮小拡大を反転する
					vector[i]*=-1;
				}
				randomSize[i]-=easing*=vector[i]; //次回描写の円のサイズを設定
			}

		}

		//Canvas表示
		$(window).bind("load",function(){
			canvasSize();
			init();
		})
		.bind("resize",function(){ //ウィンドウリサイズ時にCanvasのサイズを変更
			canvasSize();
		});

	});

})(jQuery);