if (!AWP.Realtime) AWP.Realtime = {};
AWP.Realtime.Chart = function(config) {
	config = config || {};
	
	this.container = config.container;
	this.width = this.container.offsetWidth - this.left - this.right;
	this.height = this.container.offsetHeight - this.top - this.bottom;
	
	this.xDivisions = config.xDivisions || 12;
	this.yDivisions = config.yDivisions || 10;
	this.xMin = config.x0 || 0;
	this.xMax = config.x1 || 24;
	
	this.charts = [];
	this.init();
};

AWP.Realtime.Chart.prototype = {
	svgNS: "http://www.w3.org/2000/svg",
	xDivisions: 0, yDivisions: 0,
	xMin: 0, xMax: 0,
	left: 20, right: 10, top: 10, bottom: 15,
	width: 0, height: 0,
	chartGroup: null,
	charts: null,
	colors: ["blue", "red", "gree", "orange", "silver"],
	currentNodeInfo: null,
	init: function() {
		var svgNS = this.svgNS;
		var svg = document.createElementNS(svgNS, "svg");
		svg.setAttribute("width", "100%"); 
		svg.setAttribute("height", "100%");
		this.container.appendChild(svg);
		
		this.chartGroup = document.createElementNS(svgNS, "g");
		this.chartGroup.setAttribute("transform", "translate(" + this.left + ", " + this.top + ")");
		svg.appendChild(this.chartGroup);
		
		var axisGroup = document.createElementNS(svgNS, "g");
		var axisPath = document.createElementNS(svgNS, "path");
		axisPath.setAttribute("stroke", "black"); 
		axisPath.setAttribute("stroke-width", "1");
		axisGroup.appendChild(axisPath);
		this.chartGroup.appendChild(axisGroup);
		
		pathText = "M 0 " + this.height / 2;
		for (var i = 0; i <= this.xDivisions; i++) {
			if (i == this.xDivisions) {
				pathText += "l 0 5 l 0 -5 ";
			} else {
				pathText += "l 0 5 l 0 -5 l " + this.width/this.xDivisions + " 0";
			}
		}
		pathText += "M 0 " + this.height;
		for (var i = 0; i <= this.yDivisions; i++) {
			if (i == this.yDivisions) {
				pathText += "l -5 0 l 5 0 ";
			} else {
				pathText += "l -5 0 l 5 0 l 0 -" + this.height / this.yDivisions;
			}
		}
		axisPath.setAttribute("d", pathText);
		
		return
		pathText = "M 0 " + this.height;
		for (var i = 0; i <= this.xDivisions; i++) {
			if (i == this.xDivisions) {
				pathText += "l 0 5 l 0 -5 ";
			} else {
				pathText += "l 0 5 l 0 -5 l " + this.width/this.xDivisions + " 0";
			}
		}
		pathText += "M 0 " + this.height;
		for (var i = 0; i <= this.yDivisions; i++) {
			if (i == this.yDivisions) {
				pathText += "l -5 0 l 5 0 ";
			} else {
				pathText += "l -5 0 l 5 0 l 0 -" + this.height / this.yDivisions;
			}
		}
		axisPath.setAttribute("d", pathText);
		
		for (var i = 0; i <= this.xDivisions; i++) {
			t = document.createElementNS(svgNS, "text");
			t.appendChild(document.createTextNode(2 * i));
			t.setAttribute("x", i * this.width / this.xDivisions);
			t.setAttribute("y", this.height); 
			t.setAttribute("font-size", 7); 
			axisGroup.appendChild(t);
			t.setAttribute("x", i * this.width / this.xDivisions - t.getBBox().width / 2 - 2);
			t.setAttribute("y", this.height + t.getBBox().height + 7);
		}
		
		for (var i = 0; i <= this.yDivisions; i++) {
			t = document.createElementNS(svgNS, "text");
			t.appendChild(document.createTextNode(i * 10));
			t.setAttribute("x", 0);
			t.setAttribute("y", this.height - i * this.height / this.yDivisions);
			t.setAttribute("font-size", 7);
			t.setAttribute("text-align", "right");
			axisGroup.appendChild(t);
			t.setAttribute("x", 0 - t.getBBox().width - 7);
			t.setAttribute("y", this.height - i * this.height / this.yDivisions + t.getBBox().height / 2);
		}
	},
	drawData: function(name, data) {
		var svgNS = this.svgNS;
		
		var chart = document.createElementNS(svgNS, "g");
		this.chartGroup.appendChild(chart);
		
		var dataPath = document.createElementNS(svgNS, "path");
		dataPath.setAttribute("stroke", "black");
		dataPath.setAttribute("stroke-width", "1");
		dataPath.setAttribute("fill", "none");
		chart.appendChild(dataPath);
		
		var xMin, xMax, yMin, yMax;
		for (var i = 0, len = data.length; i < len; i++) {
			xMin = xMin ? Math.min(xMin, data[i][0]) : data[i][0];
			xMax = xMax ? Math.max(xMax, data[i][0]) : data[i][0];
			yMin = yMin ? Math.min(yMin, data[i][1]) : data[i][1];
			yMax = yMax ? Math.max(yMax, data[i][1]) : data[i][1];
		}
		for (var i = 0, len = data.length; i < len; i++) {
			var x = data[i][0], y = data[i][1];
			var coordX = (x - xMin) * this.width / (xMax - xMin);
			var coordY = this.height - (y - yMin) * this.height / (yMax - yMin) * (1 - this.charts.length * 0.1);
			var circle = this.addPoint(dataPath, coordX, coordY, this.charts.length);
			circle.onmouseout = OpenLayers.Function.bind(function() {
				if (this.currentNodeInfo) {
					this.chartGroup.removeChild(this.currentNodeInfo);
					this.currentNodeInfo = null;
				}
			}, this);
			circle.onmouseover = function(a, b, x, y, scope) {
				return OpenLayers.Function.bind(function() {
					if (this.currentNodeInfo) {
						this.chartGroup.removeChild(this.currentNodeInfo);
						this.currentNodeInfo = null;
					}
					
					this.currentNodeInfo = document.createElementNS(svgNS, "text");
					var dt = new Date(x);
					var date = dt.format("m-d H:i");
					this.currentNodeInfo.appendChild(document.createTextNode(date + "\n" + y));
					this.currentNodeInfo.setAttribute("x", a);
					this.currentNodeInfo.setAttribute("y", b);
					this.chartGroup.appendChild(this.currentNodeInfo);
					this.currentNodeInfo.setAttribute("x", this.width - this.currentNodeInfo.getBBox().width);
					this.currentNodeInfo.setAttribute("y", this.height + 15);
				}, scope);
			}(coordX, coordY, x, y, this);
		}
		
		this.charts.push(chart);
	},
	addPoint: function(dataPath, coordX, coordY, chartIndex) {
		var svgNS = this.svgNS;
		
		var circle = document.createElementNS(svgNS, "circle"); 
		circle.setAttribute("cx", coordX); // X position
		circle.setAttribute("cy", coordY); // Y position
		circle.setAttribute("r", 3); // radius
		circle.setAttribute("stroke", this.colors[chartIndex]);
		circle.setAttribute("fill", this.colors[chartIndex]); // color
		this.chartGroup.appendChild(circle);
		
		current = dataPath.getAttribute("d");
		// update path definition
		if (!current || current == "") {
			dataPath.setAttribute("d", " M " + coordX + " " + coordY);  
		} else {
			dataPath.setAttribute("d", current + " L " + coordX + " " + coordY);
		}
		
		return circle;
	},
	creatPointInfo: function() {
		
	}
}

// draws a new point on the graph