function getData() {
	var req;
	if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) {
		try {
			req = new ActiveXObject('MSXML2.XMLHTTP');
		}
		catch(e) {
			try {
				req = new ActiveXObject('Microsoft.XMLHTTP');
			}
			catch(e2) {
				return false;
			}
		}
	}
	req.onreadystatechange = function() {
		getResponse(req);
	}
	req.open('GET', '/engbldg2/48h.dat', true);
	req.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
	req.send('');
}

function getResponse(req) {
	if (req.readyState == 4) {
		eval('var data = ' + req.responseText);
		drawGraph(data);
	}
}

function drawGraph(data) {
	var dat = data.data;
	var canvas = document.getElementById('powergraph');
	if (!canvas || !canvas.getContext) {
		return false;
	}
	var ctx = canvas.getContext('2d');

	var target = data.target;
	var max = target;
	for (var i = 0; i < 96; i++) {
		if (max < dat[i]) {
			max = dat[i];
		}
	}
	var scale = Math.floor(max / 500) + 1;

	// 目標値
	var targetPos = Math.floor(target * 24 / 100 / scale);
	ctx.beginPath();
	ctx.lineWidth = 2;
	ctx.strokeStyle = '#d40069';
	ctx.moveTo(39, 125 - targetPos);
	ctx.lineTo(520, 125 - targetPos);
	ctx.stroke();

	// 縦軸表示
	for (var i = 0; i <= 5; i++) {
		var div = document.createElement('DIV');
		div.appendChild(document.createTextNode(i * 100 * scale));
		div.style.fontSize = '10px';
		div.style.fontFamily = 'Arial,sans-serif';
		div.style.color = '#666666';
		div.style.margin = '0';
		div.style.padding = '0';
		div.style.position = 'absolute';
		div.style.left = '0px';
		div.style.top = '0px';
		div.style.visible = 'hidden';
		canvas.parentNode.appendChild(div);
		var w = div.offsetWidth;
		div.parentNode.removeChild(div);
		div.style.position = 'absolute';
		div.style.left = (29 - w) + 'px';
		div.style.top = 119 - (i * 24) + 'px';
		div.style.visible = 'show';
		canvas.parentNode.appendChild(div);
	}

	// 棒グラフ描画
	for (var i = 0; i < 96; i++) {
		var h = Math.floor(dat[i] * 24 / 100 / scale);
		var x = i * 5 + 38;
		var y = 125 - h;
		ctx.beginPath();
		var grad = ctx.createLinearGradient(0, y, 0, 125);
		if (i < 48) {
			grad.addColorStop(0, '#84a8a0');
			grad.addColorStop(1, '#bfd7d4');
		}else{
			grad.addColorStop(0, '#68a86b');
			grad.addColorStop(1, '#b0d66b');
		}
		ctx.fillStyle = grad;
		ctx.fillRect(x, y, 4, h);
	}

	var element;
	element = document.getElementById("graphmonth");
	if (element != null)
		element.childNodes[0].nodeValue = data.month;

	element = document.getElementById("graphday");
	if (element != null)
		element.childNodes[0].nodeValue = data.day;

	element = document.getElementById("graphtoday");
	if (element != null)
		element.childNodes[0].nodeValue = data.today;

	element = document.getElementById("graphtarget");
	if (element != null)
		element.childNodes[0].nodeValue = data.target;

	element = document.getElementById('graphtotal1');
	if (element != null)
		element.childNodes[0].nodeValue = data.total1;
	element = document.getElementById('graphtotal2');
	if (element != null)
		element.childNodes[0].nodeValue = data.total2;
	element = document.getElementById('graphtotal3');
	if (element != null)
		element.childNodes[0].nodeValue = data.total3;
	element = document.getElementById('graphtotal4');
	if (element != null)
		element.childNodes[0].nodeValue = data.total4;
	element = document.getElementById('graphtotal5');
	if (element != null)
		element.childNodes[0].nodeValue = data.total5;
	element = document.getElementById('graphtotal6');
	if (element != null)
		element.childNodes[0].nodeValue = data.total6;
}

function initGraph() {
	var canvas = document.getElementById('powergraph');
	if (!canvas || !canvas.getContext) {
		return false;
	}
	var ctx = canvas.getContext('2d');

	// グラフ背景（昨日）
	ctx.beginPath();
	ctx.fillStyle = '#ebebeb';
	ctx.fillRect(38, 0, 240, 125);

	// グラフ背景（今日）
	ctx.beginPath();
	var grad = ctx.createLinearGradient(0,0, 0,125);
	grad.addColorStop(0, '#c0c0c0');
	grad.addColorStop(1, '#ffffff');
	ctx.fillStyle = grad;
	ctx.fillRect(278, 0, 242, 125);

	// グラフ枠
	ctx.beginPath();
	ctx.strokeStyle = '#bbbbbb';
	ctx.strokeRect(38.5, 0.5, 482, 125);

	// グラフ横線
	for (var i = 0; i < 10; i++) {
		ctx.beginPath();
		ctx.strokeStyle = '#ffffff';
		ctx.moveTo(39, (i * 12) + 5.5);
		ctx.lineTo(520, (i * 12) + 5.5);
		ctx.stroke();
	}

	// 縦軸目盛
	for (var i = 0; i <= 5; i++) {
		ctx.beginPath();
		ctx.strokeStyle = '#999999';
		ctx.moveTo(30, (i * 24) + 5.5);
		ctx.lineTo(38, (i * 24) + 5.5);
		ctx.stroke();
	}

	var div = document.createElement('DIV');
	div.appendChild(document.createTextNode('kW'));
	div.style.fontSize = '10px';
	div.style.fontFamily = 'Arial,sans-serif';
	div.style.color = '#666666';
	div.style.margin = '0';
	div.style.padding = '0';
	div.style.position = 'absolute';
	div.style.left = '11px';
	div.style.top = '-15px';
	canvas.parentNode.appendChild(div);

	// 横軸目盛
	for (var i = 0; i <= 48; i++) {
		ctx.beginPath();
		ctx.strokeStyle = '#999999';
		ctx.moveTo((i * 10) + 38.5, 125);
		ctx.lineTo((i * 10) + 38.5, 129);
		ctx.stroke();
	}

	// 横軸表示
	for (var i = 0; i < 49; i += 2) {
		var hour = i % 24;
		var div = document.createElement('DIV');
		div.appendChild(document.createTextNode(hour));
		div.style.fontSize = '10px';
		div.style.fontFamily = 'Arial,sans-serif';
		div.style.color = (i < 24)? '#999999' : '#666666';
		div.style.margin = '0';
		div.style.padding = '0';
		div.style.position = 'absolute';
		div.style.left = '0px';
		div.style.top = '0px';
		div.style.visible = 'hidden';
		canvas.parentNode.appendChild(div);
		var w = div.offsetWidth;
		div.parentNode.removeChild(div);

		div.style.position = 'absolute';
		div.style.top = '132px';
		div.style.left = ((i * 10) + 38.5 - (w / 2)) + 'px';
		div.style.visible = 'show';
		canvas.parentNode.appendChild(div);
	}
}

