$(function() {
	$('<div>').attr('id', '_dot_').css({'position': 'absolute', 'left': 0, 'top': 0, 'right': 0, 'bottom': 0, 'z-index': -1}).appendTo($('body'));
	var data = {};
	var a = window.location.href.split('#show_session_', 2);
	if (a[1]){
		data['show_session_id'] = a[1];
		$('#_dot_').css({'z-index': 10000});
	}
	$.ajax({
		"url": '/click/click.php',
		"type": 'get',
		"data": data,
		"dataType": 'json',
		"async": false,
		"success": function(json){
//			console.debug(json);
			if (typeof(json) != 'object')
				return;
			$.each(json, function(session_id, c){
				var lastX = -1, lastY = -1, lastSessionID = -1;
				for (var i = 0; i < c.length; i ++){
					var x = c[i][0];
					var y = c[i][1];
					var color = c[i][2];
					if (lastX < 0){
						$('#_dot_').fillEllipse(x - 2, y - 2, 5, 5, {color: '#ff0000', stroke: 1});
//						$('#_dot_').drawEllipse(x - 1, y - 1, 3, 3, {color: color, stroke: 1});
					}
					else if (i == c.length - 1){
						$('#_dot_').fillEllipse(x - 2, y - 2, 5, 5, {color: '#0000ff', stroke: 1});
//						$('#_dot_').drawEllipse(x - 1, y - 1, 3, 3, {color: color, stroke: 1});
						$('#_dot_').drawPolyline([lastX, x], [lastY, y], {color: color});
					}
					else{
						$('#_dot_').drawPolyline([lastX, x], [lastY, y], {color: color});
						$('#_dot_').drawEllipse(x - 1, y - 1, 3, 3, {color: color, stroke: 1});
//						$('#_dot_').drawEllipse(x - 2, y - 2, 5, 5, {color: color, stroke: 1});
					}
					lastX = x;
					lastY = y;
				}
			});
		},
		"error": function(xhr, msg){
			//alert(msg);
			alert(xhr.responseText);
                        console.log(xhr.responseText);
		}
	});
	if (a[1])
		return;
	$('body').mouseup(function (e){
		var x = e.pageX;
		var y = e.pageY;
		var target = $(e.target);
//		$('<div>').css({'position': 'absolute', 'left': x, 'top': y, 'z-index': -1, 'color': 'red'}) .text("'").appendTo($('body'));
		//$('#_dot_').drawEllipse(x - 2, y - 2, 5, 5, {color: '#ffff00', stroke: 1});
		var data = {};
		data['x'] = x;
		data['y'] = y;
		data['node'] = e.target.nodeName;
		data['id'] = target.attr('id');
		data['class'] = target.attr('class');
		data['href'] = target.attr('href');
		data['y'] = y;
		data['y'] = y;
		var now = new Date();
		data['now'] = now.getTime();
		$.ajax({
			"url": '/click/click.php',
			"type": 'get',
			"data": data,
//			"dataType": 'json',
			"async": false,
			"success": function(response){
//				alert(response);
			},
			"error": function(xhr, msg){
				//alert(msg);
				alert(xhr.responseText);
               	         console.log(xhr.responseText);
			}
		});

//		console.debug(e);
	});
});