var Player = Class.create(
{
	initialize: function(name, color)
	{
		this.name = name;
		this.color = color;
	}
});

var Graph = Class.create(
{
	initialize: function(canvasId, height, width)
	{
		this.name = name;
		this.canvas = $(canvasId);

		if (!this.canvas)
		{
			alert("Canvas not found");
			return;
		}

		this.context = this.canvas.getContext('2d');
		this.height = height;
		this.width = width;
		this.marginTop = 25;
		this.marginLeft = 25;

		this.numPlayers = 0;

		this.colors = [
			"rgb(200,0,0)",
			"rgb(0,200,0)",
			"rgb(0,0,200)",
			"rgb(200,200,0)",
			"rgb(200,0,200)",
			"rgb(0,200,200)",
			"rgb(200,200,200)",
		];
		this.lastColor = 0;

		this.context.textAlign = "center";
		this.context.fillStyle = "white";
		this.context.textBaseline = "middle";
		this.context.fillText("(plase wait - loading data)",
			this.width / 2, this.height / 2);
	},
	draw: function(data)
	{
		this.data = data;

		meta = data.meta;
		this.xOffset = meta.firstSec;
		this.xRange = meta.range;
		this.max = meta.max;
		this.name = meta.title;

		this.addLines();

		$H(this.data.values).each(function(pair)
		{
			this.addPlayer(new Player(pair.key,
				this.colors[this.lastColor++]), $H(pair.value));
		}, this);
	},
	addLines: function()
	{
		this.context.strokeStyle = "rgb(50,50,50)";
		this.context.lineWidth = 1;
		this.context.beginPath();
		this.context.moveTo(this.marginLeft, this.marginTop);
		this.context.lineTo(this.marginLeft, this.height);
		this.context.lineTo(this.width, this.height);
		this.context.stroke();

		this.context.fillStyle = "white";
		this.context.moveTo(0, 0);

		this.context.textAlign = "left";
		this.context.fillText(this.data.meta.startDate, 0,
			this.height + 12);
		this.context.textAlign = "center";
		this.context.fillText(this.data.meta.endDate, this.width,
			this.height + 12);

		this.context.textAlign = "center";
		this.context.fillText(this.name, this.width / 2, 12);
	},
	addLabel: function(position, player)
	{
		this.context.textAlign = "left";
		this.context.fillStyle = player.color;
		this.context.fillRect(this.width + 20, position * 20 + 10, 10, 10);

		this.context.fillStyle = "rgb(200,200,200)";
		this.context.textBaseline = "middle";
		this.context.fillText(player.name, this.width + 40,
			position * 20 + 15);
	},
	addPlayer: function(player, values)
	{
		this.addLabel(this.numPlayers++, player);

		this.context.fillStyle = player.color;
		this.context.strokeStyle = player.color;

		this.context.moveTo(this.marginLeft, this.height);

		var x,y;

		this.context.beginPath();
		values.each(function(pair)
		{
			x = (parseInt(pair.key) - this.xOffset) / this.xRange
				* (this.width - this.marginLeft);
			y = parseFloat(pair.value) / this.max *
				(this.height - this.marginTop);
			this.addSegment(x, y);
		}, this);
		this.addPadding(x, y);
		this.context.stroke();
	},
	addPadding: function(x, y)
	{
		this.context.lineTo(this.width, this.height - y + 2);
	},
	addSegment: function(x, y)
	{
		this.context.lineTo(x + this.marginLeft, this.height - y + 2);
		//this.context.fillRect(x + this.marginLeft - 2,
		//	this.height - y, 4, 4);
	},
	clear: function()
	{
		this.context.clearRect(0, 0, 200, 500);
		var w = this.canvas.width;
		this.canvas.width = 1;
		this.canvas.width = w;
	}
});