////////////////////////////////////////////////////////////////////////////////////////
// NOT IMPORTANT CODE ( begin )
////////////////////////////////////////////////////////////////////////////////////////
var screenW = 0, screenH = 0;
var circles_f = [];var circles_i = [];
window.addEventListener('resize', onWindowResize, false);
var cef = document.getElementById('cf');
var cf = cef.getContext('2d');
var cei = document.getElementById('ci');
var ci = cei.getContext('2d');
function btnClick(id,callback=null){var e = document.getElementById(id);if(callback==null) e.click();e.onclick = function(){callback(e);};}
function setText(x,value){document.getElementById(x).innerHTML = value;}
function getMS() { return (new Date).getTime(); }
function onWindowResize()
{var shift_gap = 500;screenW = window.innerWidth;screenH = window.innerHeight; 
	cef.width = ( screenW - shift_gap ) / 2; cef.height = screenH;
	cei.width = ( screenW - shift_gap ) / 2; cei.height = screenH; }
onWindowResize();
////////////////////////////////////////////////////////////////////////////////////////
// NOT IMPORTANT CODE ( end )
////////////////////////////////////////////////////////////////////////////////////////

///////////////////////
// Variables  

var scoring_active = true;
var auto_addon = true;
var frame_rate = 60
var update_rate = 1000/frame_rate;

///////////////////////
// SetInterval  

var setinterval_active = true;
var setinterval_id = setInterval(onTimer, update_rate); 
var setinterval_exe_count = 0;
var setinterval_start = getMS();
var setinterval_ms_total = 0;
var setinterval_tps = NaN;
var setinterval_eps = NaN;
var setinterval_eps_last = NaN;
var setinterval_loss = NaN;
var setinterval_score = NaN;

function onTimer()
{
	if( ! setinterval_active ) return;
	
	setinterval_eps++;
	setinterval_exe_count++;
	
	var now = getMS();
	var ms = now - setinterval_start;
	setinterval_start = now;
	setinterval_ms_total += ms;
	
	if( setinterval_ms_total >= 1000 )
	{
		setinterval_tps = setinterval_ms_total / setinterval_eps;
		setinterval_eps_last = setinterval_eps;
		
		setinterval_loss = ( setinterval_eps_last / 60 ) * ( (update_rate * setinterval_eps) / setinterval_ms_total );
		setinterval_score = ( setinterval_loss ) * ( circles_i.length );
		
		if( auto_addon && setinterval_eps_last > circles_addon_min_fps ) 
		{
			var i = circles_addon; 
			while( i-- > 0 ) circles_i.push( generate() );
		}
		
		setinterval_ms_total = 0;
		setinterval_eps = 0;
	}
	
	// -- 
	
	draw(ci, cei.width, cei.height, circles_i);
	
	// --
	
	setText('i1', setinterval_exe_count);
	setText('i2', setinterval_eps_last );
	setText('i3', setinterval_tps.toFixed(2) );
	setText('i4', circles_i.length );
	setText('i5', ( 100 * (1-setinterval_loss) ).toFixed(2) + " %" );
	setText('i6', scoring_active ? setinterval_score.toFixed(0) : "???" );
}

///////////////////////
// requestAnimationFrame  

var frame_active = true;
var frame_exe_count = 0;
var frame_start = setinterval_start;
var frame_ms_total = 0;
var frame_tps = NaN;
var frame_native_ms_last = NaN;
var	frame_native_ms_total = 0;
var frame_native_tps = NaN;
var frame_eps = 0;
var frame_eps_last = NaN;
var frame_loss = NaN;
var frame_score = NaN;

// -- 
	
function onFrame( native_now )
{
	if( ! frame_active ) return;
	
	if( isNaN( frame_native_ms_last ) ) frame_native_ms_last = native_now;
	else {
		var native_ms = native_now - frame_native_ms_last;
		frame_native_ms_total += native_ms;
		frame_native_ms_last = native_now;
	}
	
	frame_eps++;
	frame_exe_count++;
	
	var now = getMS();
	var ms = now - frame_start;
	var instantFPS = 1000 / ms;
	frame_start = now;
	frame_ms_total += ms;
	//if( auto_addon && instantFPS > circles_addon_min_fps ) circles_f.push( generate() );
	
	if( frame_ms_total >= 1000 )
	{
		frame_tps = frame_ms_total / frame_eps;
		frame_native_tps = frame_native_ms_total / frame_eps;
		frame_eps_last = frame_eps;
		frame_loss = ( frame_eps_last / 60 ) * ( (update_rate * frame_eps) / frame_ms_total );
		frame_score = ( frame_loss ) * ( circles_f.length );
		
		if( auto_addon && frame_eps_last > circles_addon_min_fps ) 
		{
			var i = circles_addon; 
			while( i-- > 0 ) circles_f.push( generate() );
		}
		
		frame_ms_total = 0;
		frame_native_ms_total = 0;
		frame_eps = 0;
	}
	
	// -- 
	
	draw(cf, cef.width, cef.height, circles_f);
	
	// -- 
	
	setText('f1', frame_exe_count);
	setText('f2', frame_eps_last);
	setText('f3', frame_tps.toFixed(2) );
	setText('f4', circles_f.length );
	setText('f5', ( 100 * (1-frame_loss) ).toFixed(2) + " %" );
	setText('f6', scoring_active ? frame_score.toFixed(0) : "???" );
	setText('f7', frame_native_tps.toFixed(2) );
	
	// -- 
	
	requestAnimationFrame( onFrame );
}

// -- 
	
requestAnimationFrame( onFrame );

///////////////////////
// circles  

var circles_count = 128;
var circles_addon = 64;
var circles_addon_min_fps = 55;
for( var f = 0; f < circles_count; ++f ) circles_f[f] = generate();
for( var i = 0; i < circles_count; ++i ) circles_i[i] = generate();
function generate(){return [10,10,Math.random()*12+2,Math.random()*6+2,Math.random()*10+20,"rgba(" + parseInt(Math.random()*255) + "," + parseInt(Math.random()*255) + "," + parseInt(Math.random()*255) + "," + "0.8)"];}
function draw( ctx, w, h, circles = null )
{
	ctx.clearRect(0,0,w,h);
  
	if( circles == null ) return;
	
	for( var i = 0; i < circles.length; ++i )
	{
		var k = circles[i];
			 k[0] += 				k[2];		 k[1] += k[3];
		if(k[0]+1.55*k[4]>w && k[2] > 0)k[2] = -k[2];
		if(k[1]+1.05*k[4]>h && k[3] > 0)k[3] = -k[3];
		if(k[0]-1.55*k[4]<0 && k[2] < 0)k[2] = -k[2];
		if(k[1]-1.05*k[4]<0 && k[3] < 0)k[3] = -k[3];
		ctx.fillStyle = 	k[5];	ctx.beginPath();
		ctx.arc(k[0],k[1],k[4],0,6.283185,0,true);
		ctx.fill();
	}
}

///////////////////////
// buttons  

function btnI_click(b){
	//scoring_active = false;
	b.innerHTML = ( setinterval_active ? "Start" : "Stop" ) + "<u> Interval</u>"; 
	setinterval_active = !setinterval_active;
}
btnClick( 'btnI', btnI_click );
function btnF_click(b){
	//scoring_active = false;
	frame_active = !frame_active;
	if( frame_active ) requestAnimationFrame( onFrame );
	b.innerHTML = ( ! frame_active ? "Start" : "Stop" ) + "<u> Frame</u>"; 
}
btnClick( 'btnF', btnF_click );
btnClick( 'btnR', function(b) { 
	if(!frame_active) btnF_click(document.getElementById('btnF'));
	if(!setinterval_active) btnI_click(document.getElementById('btnI'));
	scoring_active  = true;
	setinterval_exe_count = 0;setinterval_start = getMS();setinterval_ms_total = 0;setinterval_tps = NaN;setinterval_eps = NaN;setinterval_eps_last = NaN;frame_exe_count = 0;frame_start = setinterval_start;frame_ms_total = 0;frame_tps = NaN;frame_eps = 0;frame_eps_last = NaN;circles_f = [];for( var f = 0; f < circles_count; ++f ) circles_f[f] = generate(); circles_i = []; for( var i = 0; i < circles_count; ++i ) circles_i[i] = generate();
} );