var origs = {'top': 1.0, 'right': 1.2, 'bottom': -1.0, 'left': -2.2, };
var olds = [];
var holding = false;

function validate(f) {
	f.value = f.value.replace(/[^0-9\.\-]+/g, "");
	if(!f.value) f.value = "1.0";
	if(f.name == "iters") {
		if(f.value < 1) f.value = 512;		
		if(f.value > 8192) f.value = 8192;		
	}2;
}

function update(inputs, image) {
	image.style.opacity = 0.5;
	image.src = "/generate?iters=" + inputs[0].value + "&top=" + inputs[1].value + "&right=" + inputs[3].value + "&bottom=" + inputs[4].value + "&left=" + inputs[2].value;
}

function coordinate(e, inputs, obj) {
	if(!e) e = window.event;
	var left = (e.pageX - obj.offsetLeft);
	var top = (e.pageY - obj.offsetTop);
	var restore = false;
	if(e.type == "mousedown") {
		window.holding = true;
		window.olds[0] = inputs[1].value;
		window.olds[1] = inputs[2].value;
		window.olds[2] = inputs[3].value;
		window.olds[3] = inputs[4].value;
		inputs[1].value = ((inputs[1].value-inputs[4].value) * (1-top/obj.height)) + eval(inputs[4].value);
		inputs[2].value = ((inputs[3].value-inputs[2].value) * (left/obj.width)) + eval(inputs[2].value);
	}
	else if(e.type == "mouseup") {
		window.holding = false;
		inputs[3].value = ((inputs[3].value-window.olds[1]) * (left/obj.width)) + eval(window.olds[1]);
		inputs[4].value = ((window.olds[0]-inputs[4].value) * (1-top/obj.height)) + eval(inputs[4].value);
		if(document.getElementById('axis-selector').style.display == 'none') {
			alert('No no - draw yourself a rectangle.');
			restore = true;
		}
		else if(inputs[1].value != inputs[4].value && inputs[2].value != inputs[3].value) {
			obj.style.cursor = 'wait';
			update(inputs, obj);
		}
		else {
			alert('Precision limit reached; X or Y axes magnitude is zero.');
			restore = true;
		}
		if(restore) {
			inputs[1].value = window.olds[0];
			inputs[2].value = window.olds[1];
			inputs[3].value = window.olds[2];
			inputs[4].value = window.olds[3];
		}
	}			
	if(e.preventDefault) e.preventDefault(); else e.returnValue = false;
}

function draw(e, obj, image) {
	if(!e) e = window.event;
	var s = document.getElementById('axis-selector');
	var ratio = parseInt(s.style.width, 10)/parseInt(s.style.height, 10);
	if(window.holding) {
		if(s.style.display == 'none') {
			s.style.left = e.pageX + "px";
			s.style.top = e.pageY + "px";
			s.style.display = 'block';
		}
		else {
			s.style.width = e.pageX - parseInt(s.style.left, 10) + "px";
			s.style.height = e.pageY - parseInt(s.style.top, 10) + "px";
			if(ratio > 1.68 && ratio < 1.88)
				s.style.borderColor = 'green';
			else
				s.style.borderColor = 'red';
			document.getElementsByTagName('h1')[0].innerHTML = s.style.width + ", " + s.style.height;
		}
	}
	else {
		s.style.display = 'none';
		s.style.width = '0px';
		s.style.height = '0px';
	}
}

window.onload = function() {
	var inputs = document.getElementsByTagName('input');
	var image = document.getElementsByTagName('img')[0];
	var selector = document.getElementById('axis-selector');
	var dashboard = document.getElementById('dashboard');
	
	for(var i = 0; i < inputs.length; i++) {
		if(i == 0)
			inputs[i].maxLength = 4;
		else
			inputs[i].maxLength = 19;
		inputs[i].onchange = function() { validate(this); };
		inputs[i].onblur = function() { update(inputs, image); };
	}
	
	image.onload = function() {
			this.style.opacity = 1;
			selector.style.display = 'none';
			document.getElementsByTagName('h1')[0].innerHTML = document.getElementsByTagName('title')[0].innerHTML;
			this.style.cursor = 'crosshair';
			dashboard.innerHTML = '<a href="" onclick="save(this); return false;">Permalink</a>';
			dashboard.style.display = 'block';
			
	};
	image.onmousedown = function(e) { coordinate(e, inputs, this); };
	image.onmousemove = function(e) { draw(e, this, image); };
	selector.onmousemove = image.onmousemove;
	selector.onmouseup = function(e) { coordinate(e, inputs, image); };
	image.onmouseup = selector.onmouseup;
}