$(document).ready(function() {
	if ($.url.param("id"))
	{
		displayTeamGraphs($.url.param("id"));
	}
});

function displayTeamGraphs(teamId)
{
	displayTeamEvolutionGraph(teamId);
	displayTeamScoresGraph(teamId);
}

 function showTooltip(x, y, contents) {
	$('<div id="tooltip">' + contents + '</div>').css( {
		position: 'absolute',
		display: 'none',
		top: y - 20,
		left: x + 5,
		border: '1px solid #fdd',
		padding: '2px',
		'background-color': '#fee',
		opacity: 0.80
	}).appendTo("body").fadeIn(200);
}

function displayTeamScoresGraph(teamId)
{
	$.ajax({
		type: "GET",
		url: "includes/ajax/ajax_factory.php?className=GetTeamScoresGraph",
		data: "teamId=" + teamId,
		dataType: "json",
		cache: false,
		success: function(json)
		{
			var options = {
					xaxis: { tickDecimals: 0, tickSize: 1 },
					series: { lines: { show: true, fill: false }, points: { show: true } },
					colors: ["rgb(30, 180, 20)", "rgb(200, 20, 30)"],
					grid: { hoverable: true, clickable: true },
				};
	
			var placeholder = $("#scoresGraph");
			
			var data = json["Message"];
			
			// and plot all we got
            $.plot(placeholder, data, options);
			
			var previousPoint = null;
			
			$("#scoresGraph").bind("plothover", function (event, pos, item) {
				$("#x").text(pos.x.toFixed(2));
				$("#y").text(pos.y.toFixed(2));
 
        
				if (item) {
					if (previousPoint != item.datapoint) {
						previousPoint = item.datapoint;
						
						$("#tooltip").remove();
						
						var x = item.datapoint[0].toFixed(2),
							y = item.datapoint[1].toFixed(2);
						
						showTooltip(item.pageX, item.pageY, item.series.label + " : " + y + " points");
					}
				}
				else {
					$("#tooltip").remove();
					previousPoint = null;            
				}
			});
		}
	});
}

function displayTeamEvolutionGraph(teamId)
{
$.ajax({
		type: "GET",
		url: "includes/ajax/ajax_factory.php?className=GetTeamEvolutionGraph",
		data: "teamId=" + teamId,
		dataType: "json",
		cache: false,
		success: function(json)
		{
			var options = {
					yaxis: { tickDecimals: 0, tickSize: 1 },
					xaxis: { tickDecimals: 0, tickSize: 1 },
					series: { lines: { show: true, fill: true, steps: true }, threshold: { below: 0, color: "rgb(200, 20, 30)" } },
					colors: ["rgb(30, 180, 20)"]
				};
			
			var placeholder = $("#evolutionGraph");
			
			var data = json["Message"];
			
			// and plot all we got
            $.plot(placeholder, data, options);
		}
	});
}