/*
 Here add the ID of the HTML elements for which to show the mouse coords
 Within quotes, separated by comma.
 E.g.:   ['imgid', 'divid'];
*/
var elmids = ['space'];

var x, y = 0;       // variables that will contain the coordinates

// Get X and Y position of the elm (from: vishalsays.wordpress.com)
function getXYpos(elm) {
  x = elm.offsetLeft;        // set x to elm’s offsetLeft
  y = elm.offsetTop;         // set y to elm’s offsetTop

  elm = elm.offsetParent;    // set elm to its offsetParent

  //use while loop to check if elm is null
  // if not then add current elm’s offsetLeft to x
  //offsetTop to y and set elm to its offsetParent
  while(elm != null) {
    x = parseInt(x) + parseInt(elm.offsetLeft);
    y = parseInt(y) + parseInt(elm.offsetTop);
    elm = elm.offsetParent;
  }

  // returns an object with "xp" (Left), "=yp" (Top) position
  return {'xp':x, 'yp':y};
}

function roundNum(value, decimals) {
    return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}

// Convert mouse position into percentage Percents towards a certain master
function getPercents(xCoord, yCoord) {
	var xSkew;
	var ySkew;

	xSkew = (x / document.getElementById(elmids).offsetWidth) * 100;
	ySkew = (y / document.getElementById(elmids).offsetHeight) * 100;

	document.getElementById('percents').innerHTML = 'Percents: X='+ roundNum(xSkew, 0)+', Y=' + roundNum(ySkew, 0);
}

// Get X, Y coords, and displays Mouse coordinates
function getCoords(e) {
  var xy_pos = getXYpos(this);

	x = e.pageX;
	y = e.pageY;

  x = x - xy_pos['xp'];
  y = y - xy_pos['yp'];

  getPercents(x, y);
  document.getElementById('coords').innerHTML = 'Coordinates: X='+ x+', Y=' +y;
}	

// register onmousemove, and onclick the each element with ID stored in elmids
for(var i=0; i<elmids.length; i++) {
  if(document.getElementById(elmids[i])) {
    // calls the getCoords() function when mousemove;
    document.getElementById(elmids[i]).onmousemove = getCoords;
  }
}

// Grab the points of the SVG
function getSVG(element, pointNum) {
	var coordinatePoints;
	coordinatePoints = [roundNum(element.children[0].animatedPoints[pointNum].x, 0), roundNum(element.children[0].animatedPoints[pointNum].y, 0)]

	return coordinatePoints;
}

// Take an SVG's innerHTML (with a polygon) and return just the floating point numbers.
function htmlToArray (CoordList, originalElement) {
  var list = CoordList.match(/(?:\d*\.)?\d+/g); /* Get only the floating point numbers */

  /* Get the first X and Y coordinates */
  var firstX = roundNum(originalElement.children[0].animatedPoints[0].x, 0);
  var firstY = roundNum(originalElement.children[0].animatedPoints[0].y, 0);

  /* The new array to push the values from the innerHTML into */
  var generatedArray = [];
  var pointAmount = (originalElement.children[0].animatedPoints).length;

  // If the second and third set of numbers match the x and y coordinates in our list,
  // then shift off the first element in the array – it's just the hex color
  if ((roundNum(list[1], 0) === firstX) && (roundNum(list[2], 0) === firstY)) {
    list.shift(); /* Delete first first index – it holds a color value */
  }

  for (var i = 0; i < pointAmount; i++) {
    generatedArray.push();

    console.log("counting " + i);
  }

  // We need to figure out how to get an array from this.
  // Maybe push every other one into another array.

  return list;
}

// Modify the points of the SVG
function setSVG(element, pointNum) {
  var list;

  list = htmlToArray(element.innerHTML, element);

  // var coordinatePoints;
  // coordinatePoints = [roundNum(element.children[0].animatedPoints[pointNum].x, 0), roundNum(element.children[0].animatedPoints[pointNum].y, 0)]

  // element.children[0].animatedPoints[pointNum].x = 100;
  // element.children[0].animatedPoints[pointNum].y = 100;

  // Write the modifications through the innerHTML.
  element.innerHTML = '<polygon fill="#000" points="239.8,0 0,0 0,60 91.9,60 90.9,67.5 90.9,270.8 148.9,270.8 148.9,67.2 147.9,60 239.8,60 "></polygon>';


  console.log(list);

  // return coordinatePoints;
}

console.log(getSVG(document.getElementById('master_1'), 0));
console.log(getSVG(document.getElementById('master_2'), 0));
console.log(getSVG(document.getElementById('master_3'), 0));
console.log(getSVG(document.getElementById('master_4'), 0));

console.log(getSVG(document.getElementById('result-svg'), 0));


console.log(setSVG(document.getElementById('result-svg'), 0));