var toPX = 35.43307;
var widthInCM = 27;
var heightInCM = 20;
var widthInPX = widthInCM * toPX;
var heightInPX = heightInCM * toPX;

//var toCM = 1/toPX;
/*
*  Set up some basic variables
*
* */

function createPolygon(x, y, numOfSides, radius, startAngle) {
  var arr = [], xo, yo;
  for (var i = 0; i < numOfSides; i++) {
    t = (2*Math.PI / numOfSides * i) + startAngle * (Math.PI / 180);
    xo = x + radius * Math.sin(t);
    yo = y + radius * Math.cos(t);
    arr.push({x: xo, y: yo});
  }
  return arr;
}

function generatePolygonData(howmany, x,y, numSides, radius, startAngle) {
  var polygons = [];
  for (var i = 0; i < howmany; i++) {
    polygons.push(createPolygon( x, y, numSides, radius + i*i/2, startAngle + 20*Math.sin(i*Math.PI/9)));
    //polygons.push(createPolygon( x, y, numSides, radius + i*5, startAngle ));
  }

  return polygons;
}


function generatePaths(root, polygonData) {

  var drawShape = d3.line()
    .x(function(d) {
      return d.x;
    })
    .y(function(d) {
      return d.y;
    })
    .curve(d3.curveCardinalClosed.tension(polygonData.tension));

  var enterElements = root.selectAll('g')
    .data(generatePolygonData(polygonData.howMany, polygonData.x, polygonData.y, polygonData.numOfSides, polygonData.radius, polygonData.startAngle))
    .enter()
    .append("path")
    .attr("d", function(d) { return drawShape(d)})
    .attr("stroke", "black")
    .attr("stroke-width", 1)
    .attr("fill", "none");
}

var polygonParams = {
  howMany : 20,
  x : 100*toPX/10,
  y : 100*toPX/10,
  radius: 10*toPX/10, // in mm
  numOfSides : 5,
  startAngle : 0,
  tension : 0.8
};

var polygonParams2 = {
  howMany : 30,
  x : 10*toPX/10,
  y : 100*toPX/10,
  radius: 10*toPX/10, // in mm
  numOfSides : 6,
  startAngle : 0,
  tension : 0.3
};

var svg = d3.select("#graphics").append("svg")
  .attr("title", "artincode")
  .attr("version", 1.1)
  .attr("width", widthInCM + "cm")
  .attr("height", heightInCM + "cm")
  .attr("viewBox", "0 0 "+widthInPX+ " "+heightInPX)
  .attr("xmlns", "http://www.w3.org/2000/svg");

var rootGroup = svg.append("g");

function update(polygonData) {

  var t = d3.transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; });

  var drawShape = d3.line()
    .x(function(d) {
      return d.x;
    })
    .y(function(d) {
      return d.y;
    })
    .curve(d3.curveCardinalClosed.tension(polygonData.tension));

  // DATA JOIN
  // Join new data with old elements, if any.
  var curves = rootGroup.selectAll("path")
    .data(generatePolygonData(polygonData.howMany, polygonData.x, polygonData.y, polygonData.numOfSides, polygonData.radius, polygonData.startAngle));

  // UPDATE
  // Update old elements as needed.
  curves.attr("class", "update");

  // ENTER
  // Create new elements as needed.
  //
  // ENTER + UPDATE
  // After merging the entered elements with the update selection,
  // apply operations to both.
  curves.enter().append("path")
    .attr("stroke", "white")
    .attr("stroke-width", 1)
    .attr("fill", "none")
    .merge(curves)
    .transition().duration(200).ease(d3.easeLinear).delay(function(d, i) { return i * 10; }).style("stroke", "black")
    .attr("d", function(d) { return drawShape(d)});


  // EXIT
  // Remove old elements as needed.
  curves.exit().transition().duration(100).ease(d3.easeLinear).delay(function(d, i) { return i * 10; }).style("stroke", "white").remove();
}

//generatePaths(rootGroup, polygonParams);
update(polygonParams);

var whichOne = false;

d3.selectAll('.regenerate')
  .on('click', function() {
    if (whichOne === false ) {
      update(polygonParams2);
      whichOne = true;
    } else {
      update(polygonParams);
      whichOne = false ;

    }
  });

d3.selectAll('.save').on('click',   writeDownloadLink);

function writeDownloadLink(){
 var svgDoctype = '<?xml version="1.0" standalone="no"?>\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';

  // serialize our SVG XML to a string.
  var svgString = (new XMLSerializer()).serializeToString(d3.select('svg').node());

  // reduce the SVG path by cutting off floating point values after the first digit beyond floating point (~50% less MBs)
  svgString = svgString.replace(/([\-+]?\d{1,}\.\d{3,}([eE][\-+]?\d+)?)/g, function (x) {
    return (+x).toFixed(1)
  });

  var blob = new Blob([svgDoctype + svgString], {type: 'image/svg+xml;charset=utf-8'});

  /* This portion of script saves the file to local filesystem as a download */
  var svgUrl = URL.createObjectURL(blob);

  var downloadLink = document.createElement("a");
  downloadLink.href = svgUrl;
  downloadLink.download = "d3-plotterpattern_" + Date.now() + ".svg";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}