<div class="container">
	<h1>Example</h1>
	Choose a color: <input type="color" id="color">
</div>

body {
	min-height: 100vh;
	background: black;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-size: 1.5em;
	font-family: 'Raleway', sans-serif;
	transition: color 200ms ease;
}

// First train the neural network
var net = new brain.NeuralNetwork();
net.train([
	{input: { r: 0.0, g: 0.0, b: 0.0 }, output: { white: 1 }},
	{input: { r: 1.0, g: 1.0, b: 1.0 }, output: { black: 1 }},
	{input: { r: 0.03, g: 0.7, b: 0.5 }, output: { black: 1 }},
	{input: { r: 0.16, g: 0.09, b: 0.2 }, output: { white: 1 }},
	{input: { r: 0.5, g: 0.5, b: 1.0 }, output: { white: 1 }},
	{input: { r: 0.07, g: 0.34, b: 0.0 }, output: { white: 1 }},
	{input: { r: 1.0, g: 0.50, b: 0.50 }, output: { black: 1 }}
]);
var output;

// Color handling
const input = document.getElementById('color');

// Here happens the everything.
function changeColor(e) {
	document.body.style.backgroundColor = e.target.value;
	color = hexToRgb(e.target.value);
	Object.keys(color).map(function(key, index) {
   		color[key] = +(color[key]/255).toFixed(2);
	});
	output = net.run(color);
	document.body.style.color = likely(output);
}

function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

function likely(result) {
	return result.white > result.black ? "white" : "black";
}

input.addEventListener('input', changeColor);