// ratio of each part's height to the width of the image (1082px)
var ratios = {
	"top": 1.3577,
	"leggies": 0.7311,
	"bottom": 0.2431
}
// ratio of the image's height to its width
var overall_ratio = 2.3318;
var leggy_factor = 0;

function update_sizes() {
	let target_height = window.innerHeight - 300;
	let width = target_height / overall_ratio;
	if (width > window.innerWidth * 0.90) {
		width = window.innerWidth * 0.90;
	}
	dgel('big-leggy-lynne').style.width = `${width}px`;
	for (let [part, ratio] of Object.entries(ratios)) {
		dgel(`bll-${part}`).style.height = `${ratio * width}px`;
	}

	let leggy_height = ratios['leggies'] * width;
	dgel('bll-leggies').style.height = `${leggy_height + leggy_factor * 25}px`;
}

window.addEventListener('resize', update_sizes);

window.onload = function () {
	this.dgel('bll-enlarge').onclick = function () {
		leggy_factor++;
		update_sizes();
		window.scrollTo({
			left: 0,
			top: document.body.scrollHeight,
			behavior: "smooth"
		})
	}

	update_sizes();
}