/* my editor width                                                           */
/*	if( you.read(code.bellow) && you.strenght != strong )
				you.eye.setStatus(bleeding);
		==== let's begin. ==== */
console.clear();
document.addEventListener('DOMContentLoaded', ()=>{
	let canvas, ctx, w, h, vmin, vr, opts={}, gui, stats;

	function init(){
		if( w/h > 2.5){ let t; document.body.appendChild(t = document.createElement('div')); t.textContent = "Pen don't optimized for toooooo wide screens"; t.setAttribute('style', 'color: #fff; position: absolute; left: 0px; bottom: 0px; font-size: 10vh'); setTimeout(()=>t.style.display='none', 2000); }
		ctx.translate(0.5, 0.5); // make lines crisp

		opt('halt!', ()=> loop=()=>{} );
		opt('size', 100, 10, 500).step(10);
		opt('sections', 2, 1,10).step(1);
		opt('clear', 1, 0,1).step(0.01);
		opt('angle', Math.PI/4, 0, Math.PI*2).step(Math.PI/128);
		opt('f1', 1, 0,2).step(0.25);
		opt('f2', 2, 0,4).step(0.25);
		opt('f3', 0.5, 0,4).step(0.25);
		opt('legs', 4, 1, 8).step(1);
		opt('speedLeft', 1, 0, 4).step(0.25);
		opt('speedTop', 0, 0, 4).step(0.25);
		opt('cellSize', 5, 4, 9).step(1);
		opt('drawBoxes', false);
		opt('drawGrid', true);
		opt('reset', start);

		//opt('test', 5, 0, 10).step(2).listen().onChange(console.log);
		start(); // init/reset pen content
		loop();
	}

	function drawLeg(x, y, r, state, s1, s2){
		ctx.beginPath();
		//ctx.arc(x, y, 3, 0,Math.PI*2, 0);
		ctx.moveTo(x, y);
		ctx.lineTo(
			x - r+r*state[0]*s1,
			y - (state[0]+state[1])*r/2*s2
		);
		ctx.lineTo(
			x + r*state[0]*s1,
			y - r/2*s2 + state[1]*r*-s2
		);
		ctx.stroke();
	}

	function drawBody(pos, angle, r, state, legsPerSide=3, f1=1, f2=2, f3=0.5){
		ctx.save();
		ctx.translate(pos[0], pos[1]);
		ctx.rotate(angle);

		let n = legsPerSide + 1;
		let step = Math.PI/n;

		let s1 = 1;
		let s2 = 1;
		let list = [];
		for(let a=0; a<=Math.PI; a+=step)
			list.push([
				Math.cos(a)*r*f2,
				Math.sin(a)*r*f1+r*f3,
			]);
		ctx.beginPath();
		for(let t of list)
			ctx.lineTo(t[0], t[1]);
		list.reverse();
		for(let t of list)
			ctx.lineTo(t[0], -t[1]);
		ctx.closePath();
		ctx.stroke();
		list.pop();list.shift();list.reverse();
		let m = 0;
		let state2 = [1-state[0], 1-state[1]];
		for(let t of list)
			drawLeg(t[0], -t[1], r, ++m%2 ? state : state2, s1, s2);
		list.reverse();
		for(let t of list)
			drawLeg(t[0], t[1], r, ++m%2 ? state : state2, s1, -s2);

		ctx.restore();
	}

	let frame, pos, legState;
	function start(){
		frame = 0;
		pos = [100000, 100000];
		legState = [0,30];
	}

	function drawGrid(ctx, cellSize){
		ctx.save();
		ctx.translate(pos[0]%cellSize, pos[1]%cellSize);
		ctx.beginPath();
		for(let i=0; i<w; i+=cellSize){
			ctx.moveTo(i, -cellSize);
			ctx.lineTo(i, h);
		}
		for(let i=0; i<h; i+=cellSize){
			ctx.moveTo(-cellSize, i);
			ctx.lineTo(w, i);
		}
		ctx.strokeStyle = 'rgba(255,255,0,0.25)';
		ctx.stroke();
		ctx.restore();
	}

	function loop(){
		stats.begin();
		ctx.fillStyle = `rgba(0,0,0, ${Math.pow(opts.clear, 2)})`;		
		ctx.fillRect(0,0, w,h);

		if( opts.drawGrid )
			drawGrid(ctx, Math.pow(2, opts.cellSize));
		ctx.save();
		ctx.translate(w/2>>0, h/2>>0);

		let r = opts.size;
		let x = opts.speedLeft;
		let y = opts.speedTop;
		legState[0] += x;
		legState[1] += y;
		pos[0] += x * Math.cos(opts.angle) - y * Math.sin(opts.angle);
		pos[1] += y * Math.cos(opts.angle) + x * Math.sin(opts.angle);
		let state = [
			Math.abs( ( (legState[0] / r) % 1 ) * 2 - 1 ),
			Math.abs( ( (legState[1] / r) % 1 ) * 2 - 1 ),
		];

		let px = Math.cos(opts.angle)*r*opts.f2;
		let py = Math.sin(opts.angle)*r*opts.f2;
		ctx.translate(-px*(opts.sections/2-0.5), -py*(opts.sections/2-0.5));
		for(let i=0; i<opts.sections; ++i){
			if( opts.drawBoxes ){
				ctx.strokeStyle = 'rgba(255,0,0,0.5)';
				ctx.strokeRect(-r,-r, r*2, r*2);
			}
			ctx.strokeStyle = '#0f0';
			//let state = Math.abs( (((frame*opts.speed)%frames)/frames)*2 - 1 );
			drawBody(
				[0,0],
				opts.angle, r/2,
				state,
				opts.legs,
				opts.f1, opts.f2, opts.f3
			);
			ctx.translate(px,py);
		}

		++frame;

		ctx.restore();
		requestAnimationFrame(loop);
		stats.end();
	}

	stats = new Stats();
	stats.showPanel( 0 );
	stats.domElement.style.position = 'absolute';
	document.body.appendChild( stats.domElement );
	//let panel = stats.addPanel( new Stats.Panel( 'caption', '#ff8', '#221' ) );
	// panel.update(value, maxValue);

	/* i love DOM */
	canvas = document.createElement('canvas');
	document.body.appendChild(canvas);
	document.body.style.padding = '0px';
	document.body.style.margin = '0px';
	document.body.style.overflow = 'hidden';

	/* i love full screen */
	function resize(){
		w = canvas.width = window.innerWidth;
		h = canvas.height = window.innerHeight;
		vmin = Math.min(w,h);
		vr = vmin / 2;
	}
	resize();
	window.addEventListener('resize', resize, false);
	ctx = canvas.getContext('2d');

	/* i love bad short opts ^__^ like q or qwe */
	gui = new dat.GUI();
	function opt(name, value, min, max){
		opts[name] = value;
		return gui.add(opts, name, min, max);
	}

	init(); // i make it for you...

}, false);