contrast brightness X,Y mouse coordinates

contrast brightness X,Y mouse coordinates round 2!!!

by ndw5015

HTML

<div id="mydiv"></div>
<button id="reset">
Reset
</button>
<div id="output">

</div>

CSS

#mydiv {
  width: 400px;
  height: 400px;
  background-image: url("http://www.lorempixel.com/200/200/");
  background-size: 100%;
  border: solid 1px black;
  background-repeat: no-repeat;
}

JavaScript

var inc_X_by = 0,
  inc_Y_by = 0,
  total_X = 0,
  total_Y = 0;

document.getElementById('mydiv').addEventListener("mousedown", function(event) {

  var in_X = (event.clientX - this.offsetLeft),
    in_Y = (event.clientY - this.offsetTop);

  document.getElementById('mydiv').addEventListener("mousemove", function(event) {
    var mouse_X = (event.clientX - this.offsetLeft),
      mouse_Y = (event.clientY - this.offsetTop);

    inc_X_by = (mouse_X - in_X) / 100 + 1;
    inc_Y_by = (mouse_Y - in_Y) / 100 + 1;

    document.getElementById("mydiv").style.filter = 'contrast(' + inc_X_by + ') brightness(' + inc_Y_by + ')';
    
    var inc_X_by_output = (mouse_X - in_X);
    var inc_Y_by_output = (mouse_Y - in_Y);

		document.getElementById("output").innerHTML = "X: " + inc_X_by_output + ", Y: " + inc_Y_by_output;
  
  });

});

//reset
document.getElementById("reset").addEventListener("click", function() {
  document.getElementById("mydiv").removeAttribute("style");
});


/* document.getElementById("mouse_over").addEventListener("mouseup", function(e){
    document.getElementById("mouse_over").onmousemove = null
}); */