var chartColors = {
	red: 'rgb(255, 99, 132)'
};
var effectColors = {
	highlight: 'rgba(255, 255, 255, 0.75)',
	shadow: 'rgba(0, 0, 0, 0.5)',
	glow: 'rgb(255, 255, 0)'	
};

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

var MODES = [
	'source-over',
	'destination-over',
	'lighter',
	'multiply',
	'screen',
	'overlay',
	'darken',
	'lighten',
	'color-dodge',
	'color-burn',
	'hard-light',
	'soft-light',
	'difference',
	'exclusion',
	'hue',
	'saturation',
	'color',
	'luminosity'
];
var config = {
	type: 'bar',
	data: {
		labels: MODES,
		datasets: [{
			label: 'Dataset 1',
			backgroundColor: chartColors.red,
			borderWidth: 0,
			data: Array.apply(null, Array(18)).map(function() {
				return randomScalingFactor();
			}),
			backgroundOverlayMode: MODES
		}]
	},
	options: {
		title: {
			display: true,
			text: 'Overlay effect sample'
		},
		scales: {
			xAxes: [{
				scaleLabel: {
					display: true,
					labelString: 'backgroundOverlayMode'
				},
				ticks: {
					autoSkip: false
				}
			}],
			yAxes: [{
				scaleLabel: {
					display: true,
					labelString: 'Value'
				}
			}]
		}
	}
};

window.onload = function() {
	var img = new Image();
	img.src = 'blocks.png';
	img.onload = function() {
		var ctx = document.getElementById('myChart').getContext('2d');
		config.data.datasets[0].backgroundOverlayColor = ctx.createPattern(img, 'repeat');
		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();
});