/* ---------------------------------- */

/*
 * Sadakitchen
 * 2011
 *
 * sadakitchen.js
 *
 * 
 */
 
 
/* ---------------------------------- */

/*
 *  TABLE OF CONTENTS
 *  
 *  @sizing
 *  @FPS
 *  @Hyperspace
 *  @draw
 *
 */
 
/* ---------------------------------- */

/* @sizing */

function sizing(){
	$("#canv").attr({height:$("#wrapper").height()});
	$("#canv").attr({width:$("#wrapper").width()});
}




/* @FPS */

var FPS = function(target) {
    // FPSの計算を行うクラス
	this.target = target; // 目標FPS
	this.interval = 1000 / target;	// setTimeoutに与えるインターバル
	this.checkpoint = new Date();
	this.fps = 0; 
};
FPS.prototype = {
	// checkからcheckまでの時間を元にFPSを計算
	check: function() {
		var now = new Date();
		this.fps = 1000 / (now - this.checkpoint);
		this.checkpoint = new Date();
	},
	// 現在のFPSを取得
	getFPS: function() {
		return this.fps.toFixed(2);
	},
	// 次回処理までのインターバルを取得
	getInterval: function() {
		var elapsed = new Date() - this.checkpoint;
		return this.interval - elapsed > 10 ? this.interval - elapsed : 10;
	}
};



/* @Hyperspace */
var Hyperspace = function(){
	
	// canvas要素を取得してcontextを取り出す
	var canvas = document.getElementById('canv');
	var ctx = canvas.getContext('2d');
	
	// 次までの距離
	var dx = 26;
	var dy = 16;
	
	var r;  // R
	var g;  // G
	var b;  // B
	var a;  // A
	
	// drawで仕様
	var time = 1;
	var looptime = 2;
	
	
	var dotX1Num;
	var dotX2Num;
	var dotYNum;
	
	// ドット初期設定
	var dotSize  = 4;
	
	// 20FPSでアニメーション
	var fps = new FPS(20);
	
	// @init
	var init = function init(){
		ctx.save(); // 描画パラメータの保存（初期状態＝指定なし）

		//background 全画面
		ctx.fillStyle = '#FFF'; // 塗りの色
		ctx.fillRect(0, 0, canvas.width + 50, canvas.height + 50);
		
		dotX1Num = Math.floor(canvas.width / dx) + 1;
		dotX2Num = Math.floor(canvas.width / dx) + 2;
		dotYNum  = Math.floor(canvas.height / dy) + 1;
		
		
		// どっと描画
		for( j = 0; j < dotYNum; j++){
			if( j % 2 == 0){
				for( i1 = 0; i1 < dotX1Num; i1++){
					ctx.save();
					ctx.beginPath();
					r = Math.floor(Math.random() * 256);
					g = Math.floor(Math.random() * 256);
					b = Math.floor(Math.random() * 256);
					a = 0.1;
					ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
					//ctx.fillStyle     = '#F2F2F2';
					ctx.arc(dx * i1, dy * j + dy * 0.5, dotSize, 0, Math.PI * 2, false);
					ctx.fill();
					ctx.restore();
				}
			} else {
				for( i2 = 0; i2 < dotX2Num; i2++){
					ctx.save();
					ctx.beginPath();
					r = Math.floor(Math.random() * 256);
					g = Math.floor(Math.random() * 256);
					b = Math.floor(Math.random() * 256);
					a = 0.1;
					ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
					//ctx.fillStyle     = '#F2F2F2';
					ctx.arc(dx * i2 - dx  * 0.5, dy * j + dy * 0.5, dotSize, 0, Math.PI * 2, false);
					ctx.fill();
					ctx.restore();
				}
			}
		}
		time = 1;
	}
	
	// @draw
	var draw = function draw(){
		
		init();
		
		
		//reset
		ctx.save();
		
		if(time != looptime){
			ctx.translate(-6, -8);
			time++;
		} else {
			ctx.translate(6*looptime, 8*looptime);
			time = 0;
		}
		
		// どっと描画
		for( j = 0; j < dotYNum; j++){
			if( j % 2 == 0){
				for( i1 = 0; i1 < dotX1Num; i1++){
					ctx.save();
					ctx.beginPath();
					r = Math.floor(Math.random() * 256);
					g = Math.floor(Math.random() * 256);
					b = Math.floor(Math.random() * 256);
					a = 0.1;
					ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
					//ctx.fillStyle     = '#F2F2F2';
					ctx.arc(dx * i1, dy * j + dy * 0.5, dotSize, 0, Math.PI * 2, false);
					ctx.fill();
					ctx.restore();
				}
			} else {
				for( i2 = 0; i2 < dotX2Num; i2++){
					ctx.save();
					ctx.beginPath();
					r = Math.floor(Math.random() * 256);
					g = Math.floor(Math.random() * 256);
					b = Math.floor(Math.random() * 256);
					a = 0.1;
					ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
					//ctx.fillStyle     = '#F2F2F2';
					ctx.arc(dx * i2 - dx  * 0.5, dy * j + dy * 0.5, dotSize, 0, Math.PI * 2, false);
					ctx.fill();
					ctx.restore();
				}
			}
		}
		
		//setTimeout(draw, fps.getInterval());
		
	};
	
	
	return ({'draw': draw});
	
};


$(function () {
	
	sizing();
	
	var hyperspace = new Hyperspace();
	//hyperspace.init();
	hyperspace.draw();
		
	//$("#canv").fadeIn('fast');
	$(window).resize(function(){
		sizing();
		//hyperspace.init();
		hyperspace.draw();
	});
	
});