"use strict";

// standard parameters
var margin = {
		top: 20,
		right: 0,
		bottom: 0,
		left: 0
	},
	width = 1400 - margin.left - margin.right,
	height = 500 - margin.bottom - margin.top;

// new parameters
var points = [];
var jitter = 12;

// define the function for the line with jitter
var lineFunction = d3.svg.line()
	.x(function(d) {
		return d.x + Math.random() * jitter - jitter/2 - margin.left;
		console.log('x here')
	})
	.y(function(d) {
		return d.y + Math.random() * jitter - jitter/2 - margin.top;
	})
	.interpolate('basis');

// standard svg intro + mousemove
var svg = d3.select(".main").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.on("mousemove", function() {
		tick(d3.mouse(this));
	});

// update line with new points
function update() {
	svg.selectAll("path").remove();

	svg.append('path')
		.attr("d", lineFunction(points))
		.attr("class", "mainPath");
}

// update point array
function tick(coord) {

	points.push({
		x: coord[0],
		y: coord[1]
	});

	if (points.length > 40) {
		points.shift()
	}

	update()

};