const _SVG = $$('svg'), 
			D = _SVG._attr('viewBox').split(' ')[2], 
			O = -.5*D, 
			MIN_R = .125*D, MAX_R = .365*D, 
			RP = $$('#point')._attr('r'), 
			_VE = {}, 
			CF = 180/PI;

let f, ox, oy, drag = false;

let size = function() {
	let dh, r = _SVG.getBoundingClientRect();
	
	f = D/min(r.width, r.height);
	dh = .5*abs(r.width - r.height);
	ox = r.width > r.height ? dh : 0;
	oy = r.width > r.height ? 0 : dh;
};

let getE = function(ev) {
	return ev.touches ? ev.touches[0] : ev;
};

let lock = function(ev) {
	let e = getE(ev), 
			t = e.target.correspondingUseElement || 
					e.target;
		
	if(t.parentNode === _VE.rotor) {
		drag = true;
		$.body.classList.add('drag');
	}
};

let act = function(ev) {
	if(drag) {
		let e = getE(ev), 
				x = O + f*(e.clientX - ox), 
				y = O + f*(e.clientY - oy), 
				ρ = min(MAX_R, 
								max(MIN_R, hypot(x, y))), 
				θ = atan2(y, x), t = CF*θ, 
				xs, ys, rs, ts, tx, ty, 
				mr = max(.32*ρ, .2*MIN_R), 
				s = sign(θ), s1 = sign(cos(θ)), 
				c = .5*(1 + s), 
				mx = mr*cos(θ), my = mr*sin(θ), 
				ar = .65*mr, ax, ay, 
				aa = s*.5*min(.5*PI, abs(θ));
		
		
		x = ρ*cos(θ);
		y = ρ*sin(θ);
		xs = round(.1*x);
		ys = round(.1*y);
		rs = round(.1*ρ);
		ts = round(t);
		tx = s1*max(.5*abs(x), .025*D);
		ty = s*max(.5*abs(y), .025*D);
		
		if(abs(ty) < mr && s1 < 0) ar = 1.35*mr;
		if((abs(x) < mr && s1 > 0) || 
			 (ρ < .2*D) || 
			 (abs(ts) < 15 && abs(ts) > 5)) 
			ar = ρ + .35*MIN_R;
		
		ax = ar*cos(aa);
		ay = ar*sin(aa);
		
		if(abs(ts) <= 5) {
			ay = -s*RP;
			
			if(_VE.ta.classList.contains('dvm')) {
				_VE.ta.classList.remove('dvm');
			}
			
			if(s < 0)
				_VE.ta.classList.add('dv0');
			else
				_VE.ta.classList.remove('dv0');
		} else 			
			if(!_VE.ta.classList.contains('dvm')) {
				_VE.ta.classList.add('dvm')
			}
		
		if(abs(t) > 90 && 
			 _VE.orig.classList.contains('dh1')) {
			_VE.orig.classList.remove('dh1');
			_VE.orig._attr({'x': RP});
			_VE.tp.classList.add('dh1');
			_VE.ty.classList.remove('dh1');
			_VE.ty._attr({'x': RP});
		} else if(abs(t) <= 90 && 
			 !_VE.orig.classList.contains('dh1')) {
			_VE.orig.classList.add('dh1');
			_VE.orig._attr({'x': -RP});
			_VE.tp.classList.remove('dh1');
			_VE.ty.classList.add('dh1');
			_VE.ty._attr({'x': -RP});
		}
		
		if(s < 0 && 
			 !_VE.orig.classList.contains('dv0')) {
			_VE.orig.classList.add('dv0');
			_VE.orig._attr({'y': RP});
			_VE.tp.classList.remove('dv0');
			_VE.tx.classList.add('dv0');
			_VE.tx._attr({'y': RP});
		} else if(s > 0 && 
			 _VE.orig.classList.contains('dv0')) {
			_VE.orig.classList.remove('dv0');
			_VE.orig._attr({'y': -RP});
			_VE.tp.classList.add('dv0');
			_VE.tx.classList.remove('dv0');
			_VE.tx._attr({'y': -RP});
		}
				
		_VE.circ._attr({'r': ρ});
		
		_VE.arc._attr({
			'd':
			t ? 
			`M0,0h${mr}A${[mr,mr,0,0,c,mx,my]}` : 
			'M0,0'
		});
		
		if(_VE.arc.getTotalLength() < .14*D && 
			 ts < 30) {
				_VE.arc.classList.remove('arr');
		} else _VE.arc.classList.add('arr');
		
		if(ts) {
			_VE.ta._attr({'x': ax, 'y': ay});
			_VE.ta.textContent = `${ts}°`;
		} else _VE.ta.textContent = '';
		
		_VE.rotor._attr({
			'transform': `rotate(${round(t)})`
		});
		
		_VE.rl._attr({'x2': ρ});
		_VE.rp._attr({'cx': ρ});
		
		_VE.tp._attr({
			'x': x + (s1 || 1)*RP, 
			'y': y + (s || 1)*RP
		});
		
		_VE.coord.textContent = `(${xs},${ys})`;
		
		if(abs(xs) > 20 && abs(ys) > 10) {
			_VE.tr._attr({'x': .5*x, 'y': .5*y});
			_VE.tr.textContent = rs;
		} else _VE.tr.textContent = '';
		
		_VE.px._attr({'x2': x});
		_VE.fx._attr({'x': x});
		
		if(xs) {
			_VE.tx._attr({'x': tx});
			_VE.tx.textContent = xs;
		}
		else _VE.tx.textContent = '';
		
		_VE.gx._attr({'d': `M${x},0v${y}`});
		
		_VE.cx.textContent = 
			`${rs}·cos(${ts}°) = ${xs}`
		
		_VE.py._attr({'y2': y});
		_VE.fy._attr({'y': y});
		
		if(ys) {
			_VE.ty._attr({'y': ty});
			_VE.ty.textContent = ys;
		}
		else _VE.ty.textContent = '';
		
		_VE.gy._attr({'d': `M0,${y}h${x}`});
		
		_VE.cy.textContent = 
			`${rs}·sin(${ts}°) = ${ys}`
	}
};

let release = function(e) {
	if(drag) {
		drag = false;
		$.body.classList.remove('drag');
	}
};

(function init() {
	let ids = ['orig', 'circ', 'arc', 'ta', 
						 'rotor', 'rl', 'rp', 
						 'tp', 'coord', 'tr', 
						 'px', 'fx', 'tx', 'gx', 'cx', 
						 'py', 'fy', 'ty', 'gy', 'cy'], 
			nids = ids.length;
	
	for(let i = 0; i < nids; i++)
		_VE[ids[i]] = $$(`#${ids[i]}`);
	
	size();
})();

addEventListener('resize', size, false);

addEventListener('mousedown', lock, false);
addEventListener('touchstart', lock, false);

addEventListener('mousemove', act, false);
addEventListener('touchmove', act, false);

addEventListener('mouseup', release, false);
addEventListener('touchend', release, false);