<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		rect {
			/*fill: None;*/
			stroke: #aaa;
		}
	</style>
	<title>Hello</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="js/draper.activity_logger-2.1.1.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>
<body>
	<div id="canvas"></div>
	<div>
		<p>Mouse over elements to simulate user actions.</p>  
		<p>You should be able to see these coming through real time on the Kibana server.</p>
		<p>Also, if you open the JavaScript console, you should see the logs going out.</p>
	</div>
	<script>
	var activies = [
		'activiy-A',
		'activiy-B',
		'activiy-C',
		'activiy-D',
		'activiy-E',
		'activiy-F',
		'activiy-G'
	]
	var colors = d3.scale.category10()
	var svg = d3.select('#canvas').append('svg')
	.attr({'w': 200, 'h': 200});

	svg.selectAll('rect')
	.data(d3.range(400))
	.enter()
	.append('rect')
	.attr({
		x: function(d) { return d%20*10; },
		y: function(d) { return Math.floor(d/20)*10; },
		fill: function(d) { return colors(d%7); },
		height: 10,
		width: 10,
	})
	.on('mouseover', function(d) {
		ac.logUserActivity(
		'description', // description
		activies[d%activies.length], // activity_code
		d%7 // workflow State
		);
	})


	var worker = "js/draper.activity_worker-2.1.1.js"
	var ac = new activityLogger(worker)
	.testing(false) // simulate POST, won't send log
	.echo(true) // log to console
	.mute(['SYS']); // don't log SYSTEM actions

	ac.registerActivityLogger(
		"http://192.168.1.100",
		"my-component",
		"v0.1"
		);

	ac.logUserActivity(
	'User hovered over element to read popup', // description
	'hover_start', // activity_code
	ac.WF_EXPLORE // workflow State
	);
	</script>
</body>
</html>