Raphael.fn.drawGrid = function (x, y, w, h, wv, hv, color) {
	color = color || "#000";
	var path = ["M", x, y, "L", x + w, y, x + w, y + h, x, y + h, x, y],
        rowHeight = h / hv,
        columnWidth = w / wv;
	for (var i = 1; i < hv; i++) {
		path = path.concat(["M", x, y + i * rowHeight, "L", x + w, y + i * rowHeight]);
	}
	for (var i = 1; i < wv; i++) {
		path = path.concat(["M", x + i * columnWidth, y, "L", x + i * columnWidth, y + h]);
	}
	return this.path(path.join(",")).attr({ stroke: color });
};

$(function () {
	$("#data").css({
		position: "absolute",
		left: "-9999em",
		top: "-9999em"
	});
});

function DrawLineGraph(GraphItems,holderID,graphWidth,graphHeight) {
	$("#" + holderID).html('');
	// Grab the data
	var labels = [],
        data = []
	xAxisData = [];

	for (var i = 0; i < GraphItems.length; i++) {
		labels.push(GraphItems[i].Key.FullName);
		data.push(GraphItems[i].Value.DisplayValue);
		xAxisData.push(GraphItems[i].Key.ShortName);
	}


//	$("#data tfoot td").each(function () {
//		labels.push($(this).html());
//	});
//	$("#data tbody td").each(function () {
//		data.push($(this).html());
//	});
//	$("#data thead th").each(function () {
//		xAxisData.push($(this).html());
//	});

// Draw
var width = 300;
var height = 170;
if (graphWidth) {
    width = graphWidth;
}
if (graphHeight) {
    height = graphHeight;
}
	var leftgutter = 0,
        bottomgutter = 20,
        topgutter = 20,
        colorhue = 1 || Math.random(),
        color = "hsb(" + [colorhue, 0.80, .80] + ")",
        r = Raphael(holderID, width, height),
        mainText = { font: '13px Fontin-Sans, Arial', fill: "#fff" },
        subText = { font: '10px Fontin-Sans, Arial', fill: "#fff" },
        txt2 = { font: '12px Fontin-Sans, Arial', fill: "#000" },
		txtXAxis = { font: '11px Fontin-Sans, Arial', fill: "#000" },
        X = (width - leftgutter) / labels.length,
        max = 10,  // Math.max.apply(Math, data),
        Y = (height - bottomgutter - topgutter) / max;



	r.drawGrid(leftgutter + X * .5, topgutter, width - leftgutter - X, height - topgutter - bottomgutter, data.length-1, 5, "#D2DEEA");
	var path = r.path().attr({ stroke: "#1761A2", "stroke-width": 5, "stroke-linejoin": "round" }),
        bgp = r.path().attr({ stroke: "none", opacity: .3, fill: color }).moveTo(leftgutter + X * .5, height - bottomgutter),
		frame = r.rect(10, 10, 55, 30, 5).attr({ fill: "#E12959", "stroke-width": 0 }).hide(),
        label = [],
        is_label_visible = false,
        leave_timer,
        blanket = r.set();
	label[0] = r.text(60, 10, "").attr(mainText).hide();
	label[1] = r.text(60, 40, "").attr(subText).hide();

	for (var i = 0, ii = labels.length; i < ii; i++) {
		var y = Math.round(height - bottomgutter - Y * data[i]),
            x = Math.round(leftgutter + X * (i + .5)),
            t = r.text(x, height - 6, xAxisData[i]).attr(txtXAxis).toBack();
		bgp[i == 0 ? "lineTo" : "cplineTo"](x, y, 10);
		path[i == 0 ? "moveTo" : "cplineTo"](x, y, 10);
		var dot = r.circle(x, y, 5).attr({ fill: "#1761A2", stroke: "#FFF", "stroke-width": 2 });
		blanket.push(r.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({ stroke: "none", href: "#", fill: "#fff", opacity: 0 }));
		var rect = blanket[blanket.length - 1];
		(function (x, y, data, lbl, xaxis, dot) {
			var timer, i = 0;
			$(rect.node).hover(function () {
				clearTimeout(leave_timer);
				var newcoord = { x: +x + 7.5, y: y - 19 };
				if (newcoord.x + 60 > width) {
					newcoord.x -= 60;
				}
				frame.show().animate({ x: newcoord.x, y: newcoord.y }, 200 * is_label_visible);
				label[0].attr({ text: data + "" }).show().animateWith(frame, { x: +newcoord.x + 27, y: +newcoord.y + 12 }, 200 * is_label_visible);
				label[1].attr({ text: lbl + "" }).show().animateWith(frame, { x: +newcoord.x + 27, y: +newcoord.y + 22 }, 200 * is_label_visible);
				dot.attr("r", 7);
				is_label_visible = true;
			}, function () {
				dot.attr("r", 5);
				leave_timer = setTimeout(function () {
					frame.hide();
					label[0].hide();
					label[1].hide();
					is_label_visible = false;
					// r.safari();
				}, 1);
			});
		})(x, y, data[i], labels[i],xAxisData[i], dot);
	}
	bgp.lineTo(x, height - bottomgutter).andClose();
	frame.toFront();
	label[0].toFront();
	label[1].toFront();
	blanket.toFront();

}