var barGraph = function(id, xml) {
	this.canvas = document.getElementById(id);
	this.xml = xml;
};

barGraph.prototype.draw = function() {
	var handler = function(xml, g) {
		times = [ ];
		title = [ ];
		data = [ ];
		var chart = xml.documentElement.getElementsByTagName('chart').item(0);
		var ss = chart.getElementsByTagName('series');
		for(var i=0 ; i<ss.length ; i++) {
			if(ss[i].getAttribute('type') == 'time') {
				var ts = ss[i].getElementsByTagName('time');
				for(var j=0 ; j<ts.length ; j++) {
					times.push(ts[j].childNodes.item(0).data);
				}
			} else {
				var ts = ss[i].getElementsByTagName('data');
				var values = [ ];
				for(var j=0 ; j<ts.length ; j++) {
					values.push(ts[j].childNodes.item(0).data);
				}
				title.push(ss[i].getAttribute('title'));
				data.push(values);
			}
		}
		g.drawGraph();
	};
	
	var g = this;
	if(typeof jQuery != 'undefined') {
		var ajax = jQuery.get(this.xml, function () {
			handler(ajax.responseXML, g);
		});
	} else if(typeof Ajax.Request != 'undefined') {
		// for prototype.js
		new Ajax.Request(this.xml, {
			method: 'get',
			onSuccess: function(transport) {
				handler(transport.responseXML, g);
			}
		});
	}
};

barGraph.prototype.drawGraph = function() {
	this.ctx = this.canvas.getContext('2d');
	this.canvas.style.margin = "0";
	this.canvas.parentNode.style.position = "relative";
	this.canvas.parentNode.style.padding = "0";
	

	// 
	this.ctx.beginPath();
	this.ctx.fillStyle = "#FFFFFF";
	this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
	
	// 
	var x=20, y=30, my=125, w=620, h=20;
	var pxs = [ ];
	for(var ti=0 ; ti<times.length ; ti++) {
		var dy = y+ti*(h+my);
		var px_curr = [ 0 ];
		this.ctx.fillStyle = "#ffffff";
		this.ctx.fillRect(x, dy, w, h);
		
		var total = 0;
		for(var di=0 ; di<data.length ; di++) {
			total += 1 * data[di][ti];
		}
		var dx = 0;
		for(var di=0 ; di<data.length ; di++) {
			var dw = data[di][ti]/total * w;
			this.ctx.fillStyle = colors[di];
			this.ctx.fillRect(x+dx, dy, dw, h);
			dx += dw;
			px_curr.push(dx);
			
			set_html('graph1_t'+(ti+1)+'_s'+(di+1), add_comma(data[di][ti]));
			set_html('graph1_t'+(ti+1)+'_s'+(di+1)+'_r', format_float(Math.round(format_float(10000*data[di][ti]/total, 2))/100,2));
		}
		
		set_html('graph1_t'+(ti+1)+'_total', add_comma(total));
		
		if(0 < ti) {
			for(var di=0 ; di<px_curr.length ; di++) {
//				dotted_line(this.ctx, x+pxs[pxs.length-1][di], dy-my, x+px_curr[di], dy);
			}
		}
		pxs.push(px_curr);
	}
	
	var th = 20, tmy = 20;
	var count = data.length;
	this.ctx.fillStyle = "#ffffff";
	this.ctx.strokeStyle = 'rgb(90,90,90)';
	this.ctx.lineWidth = 1;
	for(var di=0 ; di<data.length ; di++) {
		var px, pxx, py;
		
		// upper
		px = x+(w-10*(count-1))/count*di+10*di;
		pxx = x+(pxs[0][di]+(di<count?pxs[0][di+1]:w))/2;
		py = y+h+tmy-tmy*(count-di)/(count+1);
	//	this.ctx.fillRect(px, y-th-tmy, w*0.9/count, th);
		vline(this.ctx, px, y+h+tmy+2, py);
		hline(this.ctx, px, pxx, py);
		vline(this.ctx, pxx, py, y+h);
		
		// lower
		px = x+(w-10*(count-1))/count*di+10*di;
		pxx = x+(pxs[1][di]+(di<count?pxs[1][di+1]:w))/2;
		py = y+h+my+h+tmy*(di+1)/(count+1);
	//	this.ctx.fillRect(px, y+h+my+h+tmy, w*0.9/count, th);
		vline(this.ctx, px, y+h+my+h+tmy+2, py);
		hline(this.ctx, px, pxx, py);
		vline(this.ctx, pxx, py, y+h+my+h);
	}
};

function dotted_line(ctx, x1, y1, x2, y2) {
	var len = Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
	var count = Math.floor(len/5);
//	ctx.strokeStyle = 'rgb(100,100,100)';
//	ctx.lineWidth = 1;
	ctx.fillStyle = "#555555";
	for(var i=0 ; i<=count ; i++) {
	//	ctx.moveTo(x1+(x2-x1)*i/count, y1+(y2-y1-2)*i/count);
	//	ctx.lineTo(x1+(x2-x1)*i/count+1, y1+(y2-y1-2)*i/count+1);
	//	ctx.stroke();
		ctx.beginPath();
		ctx.fillRect(x1+(x2-x1)*i/(count+1)-1, y1+(y2-y1-2)*(i+1)/(count+1)-1, 2, 2);
	}
}

function vline(ctx, x, y1, y2) {
	dp(x+" "+y1+" "+y2+"<BR>");
	ctx.moveTo(Math.floor(x), Math.floor(y1));
	ctx.lineTo(Math.floor(x), Math.floor(y2));
	ctx.stroke();
}

function hline(ctx, x1, x2, y) {
	dp(x1+" "+x2+" "+y+"<BR>");
	ctx.moveTo(Math.floor(x1), Math.floor(y));
	ctx.lineTo(Math.floor(x2), Math.floor(y));
	ctx.stroke();
}

function set_html(id, html) {
	var obj = document.getElementById(id);
	if(obj) {
		obj.innerHTML = html;
	} else {
		alert(id + " is not found.");
	}
}

function add_comma(s) {
	var to = String(s);
	var tmp = "";
	while(to != (tmp = to.replace(/^([+-]?\d+)(\d\d\d)/,"$1,$2"))) {
		to = tmp;
	}
	return to;
}

function format_float(s, n) {
	for(var i=0 ; i<n ; i++) {
		s *= 10;
	}
	s = new String(Math.floor(s+0.5));
	return (s.substr(0, s.length-n) || '0') + '.' + s.substr(s.length-n);
}