<!-- As this feature is not really in spec yet make sure to look at this pen in the latest chrome -->


<div class="inputs1">
<input type="color" id="font-color" value="#22FF00"/>
<select name="" id="blend-mode">
  
<option value="normal">normal</option> 
<option value="multiply">multiply</option> 
<option value="screen">screen</option> 
<option value="overlay">overlay</option> 
<option value="darken">darken</option> 
<option value="lighten" >lighten</option> 
<option value="color-dodge">color-dodge</option> 
<option  value="color-burn">color-burn</option> 
<option value="hard-light">hard-light</option> 
<option value="soft-light">soft-light</option> 
<option value="difference" selected>difference</option> 
<option value="exclusion">exclusion</option> 
<option value="hue">hue</option> 
<option value="saturation">saturation</option> 
<option value="color">color</option> 
<option value="luminosity">luminosity</option>
  </select>
  </div>

<div class="inputs2">
<input type="color" id="bg-color" value="#842E3D"/>
<select name=""  id="blend-mode-image">

<option value="normal">normal</option> 
<option value="multiply">multiply</option> 
<option value="screen">screen</option> 
<option value="overlay">overlay</option> 
<option value="darken">darken</option> 
<option value="lighten">lighten</option> 
<option value="color-dodge">color-dodge</option> 
<option value="color-burn">color-burn</option> 
<option value="hard-light">hard-light</option> 
<option selected value="soft-light">soft-light</option> 
<option value="difference">difference</option> 
<option value="exclusion">exclusion</option> 
<option value="hue">hue</option> 
<option value="saturation">saturation</option> 
<option value="color">color</option> 
<option value="luminosity">luminosity</option>
  </select>
  </div>
<h1 contenteditable="true">Hey there, you are awesome</h1>


<div class="image"></div>

.image{
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-blend-mode: var(--blend-mode-image);
  background-color: var(--bg-color);
  background-position: center center;
  background-image: url('https://images.unsplash.com/photo-1483043012503-8a8849b4c949?dpr=2&auto=compress,format&fit=crop&w=767&h=512&q=80&cs=tinysrgb&crop=&bg=');
}

h1{
  position: relative;
  font-family: Avenir,Asap,Verdana,sans-serif;
  font-size: 100px;
  font-weight: 600;
  margin: 0;
  padding: 5vw;
  line-height: .8;
  text-transform: uppercase;
  font-weight: 900;
  position: absolute;
  z-index: 6;
  mix-blend-mode: var(--blend-mode);
  color: var(--font-color);
}
body{
  margin: 0;
  padding: 0;
  
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.inputs1{
  position: fixed;
  z-index: 8;
  top: 1em;left: 1em;
}
.inputs2{
  position: fixed;
  right: 1em;
  top: 1em;
}

img{
  display: block;
  mix-blend-mode: multiply;
  width: 100%;
  height: 100vh;
}


#image-url{
  position: fixed;
  width: 80vw;
  bottom: 1em;
  z-index: 20;
}

// This adds the css variable to the html node of the dom to make the colorpickers work. 

const inputs = document.querySelectorAll('input,select');
// listen for changes
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

function handleUpdate(e) {
  console.log('id', this.id);
  console.log('value', this.value);

  document.documentElement.style.setProperty(`--${this.id}`, this.value);
}
window.onload = () => {
	inputs.forEach(input => handleUpdate.call(input));
};

console.log('bockwurst');