<h3 style="font-family: monospace;">Welcome to Neurochromohexonics</h3>
  <div id="bgdiv" style="width: 300; height: 300; border: 1px solid;">
    <span id="fgtext">The rain in spain falls mainly on the plains.</span>
  </div>
  <div id="voting">
    Is the foreground text color good or bad for the background color?
    <ul>
      <li>Click to change color: <input type="color" id="fgpicker" alt="A color picker"></input></li>
      <li>Color is good: <button id="next">Next</button></li>
    </ul>

function randomColorVal(){
    // Should be 0 to 255 inclusive
    return Math.floor((Math.random() * 256));
  }
  function toHex(intVal){
    let hex = intVal.toString(16);
    if (hex.length === 1){
      hex = '0' + hex;
    }
    return hex;
  }
  function hexFromInts(r, g, b){
    return '#' + toHex(r) + toHex(g) + toHex(b);
  }
  function randomHex(){
    let r = randomColorVal();
    let g = randomColorVal();
    let b = randomColorVal();
    return hexFromInts(r, g, b);
  }
  function intsFromHex(hex){
    return [
      parseInt(hex[1] + hex[2], 16),
      parseInt(hex[3] + hex[4], 16),
      parseInt(hex[5] + hex[6], 16),
    ];
  }
  var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
  //Function to convert rgb color to hex format
  function rgb2hex(rgb) {
   rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+).*\)$/);
   return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  }
  function hex(x) {
    return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
   }
  function regen(){
    train()
    let bgcolor = randomHex();
    //let fgcolor = randomHex();
    $('#bgdiv').css({
      'background-color': bgcolor})
    //console.log(intsFromHex(fgcolor))
    let fgcolor = generateFg();
    $('#bgdiv').css({'color': fgcolor})
    $('#fgpicker').val(fgcolor);
  }
  function train(){
    let bgvals = intsFromHex(rgb2hex($('#bgdiv').css('background-color')));
    let fgvals = intsFromHex(rgb2hex($('#bgdiv').css('color')));
    bgvals = bgvals.map(n => n / 256)
    fgvals = fgvals.map(n => n / 256)
    console.log('bgvals', bgvals)
    console.log('fgvals', fgvals)
    //for (let i = 0; i < 20000; i++){
      trainer.train([{input: bgvals, output: fgvals}])
    //}
  }
  function regenClicker(event){
    regen()
    event.preventDefault();
  }
  const Neuron = synaptic.Neuron,
  	Layer = synaptic.Layer,
  	Network = synaptic.Network,
  	Trainer = synaptic.Trainer,
  	Architect = synaptic.Architect;
  let generator = new Architect.Perceptron(3,27,3);
  let trainer = new Trainer(generator);
  function generateFg(){
    let input = intsFromHex(rgb2hex($('#bgdiv').css('background-color')))
    for(let i = 0; i < input.length; i++){
      input[i] = input[i] / 256;
    }
    output = generator.activate(input)
    for (let i = 0; i < output.length; i++){
      output[i] = Math.floor(output[i] * 256);
    }
    return hexFromInts(...output);
  }
  $(function(){
    $('#next').click(regenClicker);
    $('#fgpicker').on('input', function(){
      $('#bgdiv').css({'color': this.value})
    })
    for (let i = 0; i < 1; i++){
      trainer.train([
        {input: [0, 0, 0], output: [1, 1, 1]},
        {input: [1, 1, 1], output: [0, 0, 0]}
      ])
    }
    regen();
  });