"use strict";

// goals: 
//    choose: color, width, interpolation
//    show code

// so that touchmove is not scrolling
document.body.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false);

// create svg
var width = 1000; 
var height = 1000;
var margin = {left: 22, top: 18, right: 0, bottom: 0};

var svg = d3.select('#example')
  .append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// set major dimensions
var rectDim = {"x": 10,"y":10, "height": 400, "width": 400}
// drawable dimensions
var drawDim = {"x": 0,"y":0, "height": 440, "width": 440}

////////////////
// click to clear
////////////////

d3.select("#clickToClear").append("svg").attr("width", 250).attr("height", 30)
  .append("text")
  .on("click", function(d){
	d3.select(".userShape").classed('hidden',true);
	d3.select("circle").style("fill", "none");
	points = [];
	texturePoints = [];
  })
  .attr("class", "clickToClear")
  .attr({x: 0, y:20})
  .text("Click here to Clear")

///////////////////////////////////
// set up input box
//////////////////////////////////
var dashedLinesVert = []
var dashedLinesHori = []
var bufferDist = 10;

for (var i = 0; i < 3; i++){
	dashedLinesVert[i] = {
		"x1": rectDim.x + (i + 1) * rectDim.width / 4,
		"x2": rectDim.x + (i + 1) * rectDim.width / 4,
		"y1": rectDim.y - bufferDist,
		"y2": rectDim.y + rectDim.height + bufferDist
	}
}

for (var i = 0; i < 3; i++){
	dashedLinesHori[i] = {
		"y1": rectDim.y + (i + 1) * rectDim.height / 4,
		"y2": rectDim.y + (i + 1) * rectDim.height / 4,
		"x1": rectDim.x - bufferDist,
		"x2": rectDim.x + rectDim.width + bufferDist
	}
}


function drawDashed(data, direction){
  svg.selectAll("." + direction)
    .data(data)
    .enter()
    .append("line")
    .attr("x1", function(d){return d.x1})
    .attr("x2", function(d){return d.x2})
    .attr("y1", function(d){return d.y1})
    .attr("y2", function(d){return d.y2})
    .attr("class", "dashedLines " + direction);
}

drawDashed(dashedLinesVert, "vert");
drawDashed(dashedLinesHori, "hori");


var points = [];
var texturePoints = [];

// draw rect
var canvas = svg.append("rect")
  .attr(rectDim)
  .style({
      "fill": "transparent",
      "stroke": "darkorange",
      "shape-rendering": "crispEdges",
      "stroke-width": 2
  });
var drawSurface = svg.append("rect")
.attr(drawDim)
.style({
  fill: "transparent"
})

// thanks to enjalot for replacing mouseover w/ click & drag functionality
// http://tributary.io/inlet/8c7d398f505adda2cb08

var drag = d3.behavior.drag()
.on("drag", function(d) {
  updateArray([d3.event.x, d3.event.y])
})
.on("dragstart", function(d) {
  points.push([]);
  texturePoints.push([]);
})

drawSurface.call(drag)


////////////////////////
// set up easy options
///////////////////////


var userOptions = function() {
  this.basesize = 120
  this.baseEdge = this.basesize / 4;
  this.thickness = 2;
  this.patternColor = '#ffffff';
  this.interpolation = 'basis';
};

var text = new userOptions();


/////////////////////
// set up Texture
/////////////////////
var makeItaPath = d3.svg.line()
  .x(function(d){return d.x})
  .y(function(d){return d.y})
  .interpolate("linear");

var t = textures.paths()
  .d(function(s) {
      return makeItaPath([]);
  })
  .size(text.basesize)
  .strokeWidth(1)
  .thicker(2)
  .stroke("blue");

svg.call(t);

svg.append("circle")
  .attr({"cx": rectDim.x + rectDim.width * 3/2 + 50, "cy": rectDim.height / 2 + rectDim.y, "r": rectDim.height / 2, "stroke": "darkorange"})
  .style("fill", t.url());

svg.append("path")
  .attr("d", makeItaPath([]))
  .attr("class", "userShape")
  .attr("fill", "none")
  .attr("stroke", "blue")
  .attr("stroke-width", 5);

function allPaths(arrayOfPoints) {
  //console.log(arrayOfPoints)
  var path = ""
  for(var i = 0; i < arrayOfPoints.length; i++){
    path = path + makeItaPath(arrayOfPoints[i])
  }
  return path;
}

//////////////////////
// let user draw
//////////////////////



function updateArray(coord){
  points[points.length - 1].push({
    x: coord[0],
    y: coord[1]
  })

  texturePoints[texturePoints.length - 1].push({
    x: (coord[0] - rectDim.x) / (rectDim.width / text.baseEdge),
    y: (coord[1] - rectDim.y) / (rectDim.width / text.baseEdge)
  })

  d3.select(".userShape").attr("d", allPaths(points)).classed("hidden", false);

  updateTexture();
}

function updateTexture(){
	var t = textures.paths()
      .d(function(s) {
          return allPaths(texturePoints);
      })
      .size(text.basesize)
      .strokeWidth(2)
      .thicker(2)
      .stroke("blue");
	svg.call(t);
	d3.select("circle").style("fill", t.url());
}