window.onload = () => {

	/* scale benner image map co-ordinates */
	
	const image = document.querySelector('.banner');
	const areas = document.querySelectorAll('.bannermap > area');	

	const max_width = 1600;
	const image_height_ratio = 0.35;

	const image_map_coords = [
		[108,187,240,343],
		[246,187,359,343],
		[363,187,492,343]
	];

	function calcTransform(prop) {		
		let scale, offset;
		prop.original_aspect = prop.original_width / prop.original_height;
		prop.scaled_width = prop.image_height * prop.original_aspect;
		prop.image_aspect = prop.image_width / prop.image_height;
		if (prop.scaled_width < prop.image_width) {
			prop.scaled_height = prop.image_height * prop.image_aspect / prop.original_aspect;
			offset = (prop.image_height - prop.scaled_height) / 2;
			scale = prop.scaled_height / prop.original_height;
		} else {
			offset = 0;
			scale = prop.image_height / prop.original_height;
		}
		return [scale, offset];
	}

	function setCoords() {		
		areas.forEach((area, index) => {
			const [x1, y1, x2, y2] = image_map_coords[index];			
			let prop = {
				screen_width: (window.innerWidth),
				contained_width: (window.innerWidth <= max_width) ? window.innerWidth : max_width,
				screen_height: window.innerHeight,
				image_width: image.offsetWidth,
				image_height: image.offsetHeight,
				original_width: image.naturalWidth,
				original_height: image.naturalHeight
			};
			let [ scale, offset ] = calcTransform(prop);
			const scaled_coords = `${x1*scale}, ${y1*scale + offset}, ${x2*scale}, ${y2*scale + offset}`;
			area.setAttribute('coords', scaled_coords);
		});
	}
	
	new ResizeObserver(setCoords).observe(image);
};