document.getElementById(`imageInput`).onchange = event =>
{
	document.getElementById(`imagePreview`).src = URL.createObjectURL(event.target.files[0]);
}

var filters = {
	invert: [0, `%`],
	"hue-rotate": [0, `deg`]
}

let updateFilters = () => {
	var stringified = [];
	Object.entries(filters).forEach(entry => {
		stringified.push(`${entry[0]}(${entry[1].join(``)})`);
	});
	console.log(document.getElementById(`imagePreview`).style.filter = stringified.join(` `));
}

document.getElementById(`imageInvert`).onchange = event =>
{
	filters.invert[0] = event.target.checked ? 100 : 0;
	updateFilters();
}

document.getElementById(`imageHue`).onchange = event =>
{
	filters[`hue-rotate`][0] = event.target.value
	document.getElementById(`imageHueValue`).innerText = `${filters[`hue-rotate`].join(``)}`;
	updateFilters();
}