<figure class="normal"></figure>
<figure class="multiply"></figure>
<figure class="screen"></figure>
<figure class="overlay"></figure>
<figure class="darken"></figure>
<figure class="lighten"></figure>
<figure class="color-dodge"></figure>
<figure class="color-burn"></figure>
<figure class="hard-light"></figure>
<figure class="soft-light"></figure>
<figure class="difference"></figure>
<figure class="exclusion"></figure>
<figure class="hue"></figure>
<figure class="saturation"></figure>
<figure class="color"></figure>
<figure class="luminosity"></figure>

<style class="swatch" id="background_color"></style>

html, body { height: 100%; }

body {
  text-align: center;
  display: flex;
  user-select: none;
  background: black;
  backface-visibility: hidden;
  cursor: zoom-in;
}


figure {
  flex: 1;
  background-color: transparent;
  background-image: url(http://upload.wikimedia.org/wikipedia/commons/2/2c/Iguazu_D%C3%A9cembre_2007_-_Panorama_7.jpg);
  background-repeat: no-repeat;
  
  
  @for $item from 1 through 16 {
    &:nth-child(#{$item}){ 
      background-position: ($item/100)*100%;
    }
  } 

  &:before {
    display: block;
    font: smaller monospace;
    content: attr(class);
    padding-top: .25rem;
    color: black;
  }

  &:hover {
    box-shadow: inset 0 1.25rem;
  }
}

.multiply { background-blend-mode: multiply; }
.screen { background-blend-mode: screen; }
.overlay { background-blend-mode: overlay; }
.darken { background-blend-mode: darken; }
.lighten { background-blend-mode: lighten; }
.color-dodge { background-blend-mode: color-dodge; }
.color-burn { background-blend-mode: color-burn; }
.hard-light { background-blend-mode: hard-light; }
.soft-light { background-blend-mode: soft-light; }
.difference { background-blend-mode: difference; }
.exclusion { background-blend-mode: exclusion; }
.hue { background-blend-mode: hue; }
.saturation { background-blend-mode: saturation; }
.color { background-blend-mode: color; }
.luminosity { background-blend-mode: luminosity; }


.viewing {
  figure:not(.normal):not(.maximized){
    display: none;
  }
  
  cursor: zoom-out;
}

// Change y-axis control to "lightness" or "saturation"
  y_axis = "saturation"
  

width = $(window).width();
height = $(window).height();

$(window).resize(function(){
  width = $(window).width();
  height = $(window).height();  
});

var $bg = $("#background_color");


$(window).mousemove(function(e){
  var x = e.pageX;
  var y = e.pageY;
  
  var hue = Math.round((x/width)*256);
  var saturation = 100 - Math.round((y/height)*100);
  var lightness = 100 - Math.round((y/height)*100);
  
  if(y_axis == "saturation") {
    var hsl = 'hsl(' + hue + ',' + saturation + '%,50%)';
  } else {
    var hsl = 'hsl(' + hue + ',50%,' + lightness + '%)';
  }

  
  var style = 'figure { background-color: ' + hsl + '; color: ' + hsl + '; } ';
  
  $bg.text(style);
});


$("figure").mousedown(function(){
  $("figure").removeClass("maximized");
  $("body").addClass("viewing");
  $(this).addClass("maximized");
}).mouseup(function(){
  $("body").removeClass("viewing");
});