var svgEl = document.querySelector("svg");
var pathEl = document.querySelector("#bezier");
var pathElSegList = pathEl.pathSegList;
var evtStartTarget = {};
var pointArray = [{x: 15, y: 35}, {x: 15, y: 60}, {x: 50, y: 60}, {x: 50, y: 35}, {x: 50, y: 10}, {x: 85, y: 10}, {x: 85, y: 35}];

document.querySelector("#sOffset").addEventListener("input", function(ev) {
  document.querySelector("#tp").setAttribute("startOffset", ev.target.value + "%");
});

// draw initial UI
svgEl.appendChild(uiLine(pointArray[0].x, pointArray[0].y, pointArray[1].x, pointArray[1].y, 1));
svgEl.appendChild(uiLine(pointArray[2].x, pointArray[2].y, pointArray[3].x, pointArray[3].y, 2));
svgEl.appendChild(uiLine(pointArray[3].x, pointArray[3].y, pointArray[4].x, pointArray[4].y, 3));
svgEl.appendChild(uiLine(pointArray[5].x, pointArray[5].y, pointArray[6].x, pointArray[6].y, 4));

for (var i = 0; i < pathElSegList.numberOfItems; i++) {
  svgEl.appendChild(uiDot(pathElSegList.getItem(i).x, pathElSegList.getItem(i).y, 3*i));
  if ("x1" in pathElSegList.getItem(i)) {
    svgEl.appendChild(uiDot(pathElSegList.getItem(i).x1, pathElSegList.getItem(i).y1, 3*(i-1)+1));
  }
  if ("x2" in pathElSegList.getItem(i)) {
    svgEl.appendChild(uiDot(pathElSegList.getItem(i).x2, pathElSegList.getItem(i).y2, 3*(i-1)+2));
  }
}

function uiLine(x1, y1, x2, y2, i) {
  var lineEl = document.createElementNS("http://www.w3.org/2000/svg", "line");
  lineEl.setAttribute('x1', x1);
  lineEl.setAttribute('y1', y1);
  lineEl.setAttribute('x2', x2);
  lineEl.setAttribute('y2', y2);
  lineEl.setAttribute('id', "line" + i);
  return lineEl;
}

function uiDot(x, y, i) {
  var circleEl = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  circleEl.setAttribute('cx', x);
  circleEl.setAttribute('cy', y);
  circleEl.setAttribute('r', 2);
  circleEl.addEventListener("mousedown", mdEvent, true);
  circleEl.addEventListener("touchstart", mdEvent, true);
  circleEl.setAttribute("id", "dot" + i);
  return circleEl;
}

// mouse/touch event handling
function mdEvent (evt) {
  evt.preventDefault();
  evtStartTarget = evt.target;
  document.addEventListener("mousemove", mmEvent, true);
  document.addEventListener("mouseup", muEvent, true);
  document.addEventListener("touchmove", mmEvent, true);
  document.addEventListener("touchend", muEvent, true);
}

function mmEvent (evt) {
  var pointIndex = 0;
  evt.preventDefault();
  var p = svgEl.createSVGPoint();
  if(evt.targetTouches) {
    p.x = evt.targetTouches[0].clientX;
    p.y = evt.targetTouches[0].clientY;
  } else {
    p.x = evt.clientX;
    p.y = evt.clientY;
  }
  p = coordinateTransform(p);
  pointIndex = parseInt(evtStartTarget.getAttribute("id").slice(-1), 10);
  pointArray[pointIndex].x = p.x.toFixed(2);
  pointArray[pointIndex].y = p.y.toFixed(2);
  updateUI(pointIndex);
}

function muEvent (evt) {
  evt.preventDefault();
  document.removeEventListener("mousemove", mmEvent, true);
  document.removeEventListener("mouseup", muEvent, true);
  document.removeEventListener("touchmove", mmEvent, true);
  document.removeEventListener("touchend", muEvent, true);    }

// update the ui
function updateUI (index) {
  // draw dots
  evtStartTarget.setAttribute("cx", pointArray[index].x);
  evtStartTarget.setAttribute("cy", pointArray[index].y);
  // draw lines
  switch (index) {
    case 0:
    case 1:
      var lineEl = document.querySelector("#line1");
      lineEl.setAttribute("x1", pointArray[0].x);
      lineEl.setAttribute("y1", pointArray[0].y);
      lineEl.setAttribute("x2", pointArray[1].x);
      lineEl.setAttribute("y2", pointArray[1].y);
      break;
    case 2:
    case 3:
    case 4:
      var lineEl = document.querySelector("#line2");
      lineEl.setAttribute("x1", pointArray[2].x);
      lineEl.setAttribute("y1", pointArray[2].y);
      lineEl.setAttribute("x2", pointArray[3].x);
      lineEl.setAttribute("y2", pointArray[3].y);
      var lineEl = document.querySelector("#line3");
      lineEl.setAttribute("x1", pointArray[3].x);
      lineEl.setAttribute("y1", pointArray[3].y);
      lineEl.setAttribute("x2", pointArray[4].x);
      lineEl.setAttribute("y2", pointArray[4].y);
      break;
    case 5:
    case 6:
      var lineEl = document.querySelector("#line4");
      lineEl.setAttribute("x1", pointArray[5].x);
      lineEl.setAttribute("y1", pointArray[5].y);
      lineEl.setAttribute("x2", pointArray[6].x);
      lineEl.setAttribute("y2", pointArray[6].y);
  }
  // draw bezier path
  pathElSegList[0].x = pointArray[0].x;
  pathElSegList[0].y = pointArray[0].y;
  pathElSegList[1].x1 = pointArray[1].x;
  pathElSegList[1].y1 = pointArray[1].y;
  pathElSegList[1].x2 = pointArray[2].x;
  pathElSegList[1].y2 = pointArray[2].y;
  pathElSegList[1].x = pointArray[3].x;
  pathElSegList[1].y = pointArray[3].y;
  pathElSegList[2].x1 = pointArray[4].x;
  pathElSegList[2].y1 = pointArray[4].y;
  pathElSegList[2].x2 = pointArray[5].x;
  pathElSegList[2].y2 = pointArray[5].y;
  pathElSegList[2].x = pointArray[6].x;
  pathElSegList[2].y = pointArray[6].y;
}

//  https://msdn.microsoft.com/en-us/library/ie/hh535760(v=vs.85).aspx
function coordinateTransform(screenPoint) {
  var CTM = svgEl.getScreenCTM();
  return screenPoint.matrixTransform( CTM.inverse() );
}