var isIE = navigator.userAgent.indexOf('MSIE') !== -1 || navigator.userAgent.indexOf('Trident') !== -1;

var chartColors = {
	red: 'rgb(255, 99, 132)',
	orange: 'rgb(255, 159, 64)',
	yellow: 'rgb(255, 205, 86)',
	green: 'rgb(75, 192, 192)',
	blue: 'rgb(54, 162, 235)',
	purple: 'rgb(153, 102, 255)',
	grey: 'rgb(201, 203, 207)'
};

function randomScalingFactor() {
	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
}

var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var color = Chart.helpers.color;
var config = {
	type: 'line',
	data: {
		labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
		datasets: [{
			label: 'Dataset 1',
			backgroundColor: chartColors.red,
			borderColor: chartColors.red,
			data: [0, 0, 0, 0, 0, 0, 0].map(function() {
				return randomScalingFactor();
			})
		}, {
			label: 'Dataset 2',
			backgroundColor: chartColors.blue,
			borderColor: chartColors.blue,
			data: [0, 0, 0, 0, 0, 0, 0].map(function() {
				return randomScalingFactor();
			})
		}]
	},
	plugins: [ChartRough],
	options: {
		title: {
			display: true,
			text: 'Interactions sample'
		},
		elements: {
			rectangle: {
				borderWidth: 3
			}
		},
		scales: {
			xAxes: [{
				scaleLabel: {
					display: true,
					labelString: 'Month'
				}
			}],
			yAxes: [{
				scaleLabel: {
					display: true,
					labelString: 'Value'
				}
			}]
		},
		plugins: {
			rough: {
				enabled: true
			}
		},
		onResize: updateHachureGap
	}
};

function updateHachureGap(chart, size) {
	var roughOptions = config.options.plugins.rough;
	var fillStyle = roughOptions.fillStyle;
	var hachureGapElement = document.getElementById('hachureGap');
	var hachureGap;

	if (fillStyle === 'dots' || fillStyle === 'dashed' || fillStyle === 'zigzag-line') {
		hachureGapMin = Math.ceil(size.width * size.height / (fillStyle === 'dots' ? 20000 : 60000));
		hachureGap = Math.max(roughOptions.hachureGap, hachureGapMin);
		roughOptions.hachureGap = hachureGap;
		hachureGapElement.min = hachureGapMin;
		hachureGapElement.value = hachureGap;
		document.getElementById('hachureGapValue').innerHTML = hachureGap;
	} else {
		hachureGapElement.min = 1;
	}
}

Chart.defaults.global.defaultFontFamily = '"Indie Flower", cursive';
Chart.defaults.global.defaultFontSize = 14;

window.onload = function() {
	var ctx = document.getElementById('myChart').getContext('2d');
	window.myChart = new Chart(ctx, config);
};

document.getElementById('randomizeData').addEventListener('click', function() {
	config.data.datasets.forEach(function(dataset) {
		dataset.data = dataset.data.map(function() {
			return randomScalingFactor();
		});
	});
	window.myChart.update();
});

var colorNames = Object.keys(chartColors);
document.getElementById('addDataset').addEventListener('click', function() {
	var colorName = colorNames[config.data.datasets.length % colorNames.length];
	var newColor = chartColors[colorName];
	var newDataset = {
		label: 'Dataset ' + (config.data.datasets.length + 1),
		backgroundColor: newColor,
		borderColor: newColor,
		data: []
	};

	for (var index = 0; index < config.data.labels.length; ++index) {
		newDataset.data.push(randomScalingFactor());
	}

	config.data.datasets.push(newDataset);
	window.myChart.update();
});

document.getElementById('removeDataset').addEventListener('click', function() {
	config.data.datasets.pop();
	window.myChart.update();
});

document.getElementById('addData').addEventListener('click', function() {
	if (config.data.datasets.length > 0) {
		var month = MONTHS[config.data.labels.length % MONTHS.length];
		config.data.labels.push(month);

		config.data.datasets.forEach(function(dataset) {
			dataset.data.push(randomScalingFactor());
		});

		window.myChart.update();
	}
});

document.getElementById('removeData').addEventListener('click', function() {
	config.data.labels.splice(-1, 1); // remove the label first

	config.data.datasets.forEach(function(dataset) {
		dataset.data.pop();
	});

	window.myChart.update();
});

document.getElementById('roughness').addEventListener(isIE ? 'change' : 'input', function() {
	config.options.plugins.rough.roughness = +this.value;
	window.myChart.update({duration: 0});
	document.getElementById('roughnessValue').innerHTML = this.value;
});

document.getElementById('bowing').addEventListener(isIE ? 'change' : 'input', function() {
	config.options.plugins.rough.bowing = +this.value;
	window.myChart.update({duration: 0});
	document.getElementById('bowingValue').innerHTML = this.value;
});

document.getElementById('fillStyle').addEventListener(isIE ? 'change' : 'input', function() {
	config.options.plugins.rough.fillStyle = this.value;
	updateHachureGap(window.myChart, {
		width: window.myChart.width,
		height: window.myChart.height
	});
	window.myChart.update({duration: 0});
	document.getElementById('fillStyleValue').innerHTML = '\'' + this.value + '\'';
});

document.getElementById('fillWeight').addEventListener(isIE ? 'change' : 'input', function() {
	config.options.plugins.rough.fillWeight = +this.value;
	window.myChart.update({duration: 0});
	document.getElementById('fillWeightValue').innerHTML = this.value;
});

document.getElementById('hachureAngle').addEventListener(isIE ? 'change' : 'input', function() {
	config.options.plugins.rough.hachureAngle = +this.value;
	window.myChart.update({duration: 0});
	document.getElementById('hachureAngleValue').innerHTML = this.value;
});

document.getElementById('hachureGap').addEventListener(isIE ? 'change' : 'input', function() {
	config.options.plugins.rough.hachureGap = +this.value;
	window.myChart.update({duration: 0});
	document.getElementById('hachureGapValue').innerHTML = this.value;
});

document.getElementById('curveStepCount').addEventListener(isIE ? 'change' : 'input', function() {
	config.options.plugins.rough.curveStepCount = +this.value;
	window.myChart.update({duration: 0});
	document.getElementById('curveStepCountValue').innerHTML = this.value;
});

document.getElementById('simplification').addEventListener(isIE ? 'change' : 'input', function() {
	config.options.plugins.rough.simplification = +this.value;
	window.myChart.update({duration: 0});
	document.getElementById('simplificationValue').innerHTML = this.value;
});