// Collect all our items that we need
var circle = document.getElementById('cursor-tracker');
var svg = document.getElementById('svg');
var dxLine = document.getElementById('dx');
var dyLine = document.getElementById('dy');
var dxTxt = document.getElementById('dx-txt');
var dyTxt = document.getElementById('dy-txt');

// Define some variables
var arrowLoc = {
  x: 200,
  y: 350
}

svg.addEventListener('mousemove', function(event) {
  //console.log(event.clientX, event.clientY);
  updateComponents(event.clientX, event.clientY);
});

svg.addEventListener('touchmove', function(event) {
  //console.log(event);
  updateComponents(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
})


function updateComponents(x, y) {
  // First, we need to do a coordinate change because the x and y origin of the SVG is offset from that of the page.
  x -= 5 + svg.getBoundingClientRect().x;
  y -= 5 + svg.getBoundingClientRect().y;
  
  // Now we move the circle as well as the lines so they demonstrate the triangle.
  circle.setAttribute("cx", x);
  circle.setAttribute("cy", y);
  dxLine.setAttribute("x1", x);
  dxLine.setAttribute("y1", y);
  dxLine.setAttribute("y2", y);
  dyLine.setAttribute("y1", y);
  
  // Now round the values and display them
  dxTxt.innerHTML = Math.round(x - arrowLoc.x);
  dyTxt.innerHTML = Math.round(y - arrowLoc.y);
}