function five_graph()
{
	var xmldoc = XML.newDocument();

	if (document.implementation && document.implementation.createDocument) {
		xmldoc.onload = function() {parseXml(xmldoc);};
	}
	else {
		xmldoc.onreadystatechange = function() {
			if (xmldoc.readyState == 4) parseXml(xmldoc);
		};
	}
}

function parseXml(dom) {
	var records = dom.getElementsByTagName("record");
	var index = records.length-1;
	var record = records[index];
	var arr = new Array();
	var label;
	var last;
	while(arr.length < 200) {
		label = record.getAttribute("month") + record.getAttribute("day")+record.getAttribute("hour");
		if (label != last) {
			arr.unshift(record);
		}
		index--;
		if (index < 0) {
			break;
		}
		record = records[index];
		last = label;
	}
	draw(arr);
}

function draw(elm) {
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	var w = start(elm, canvas);
	var min = getMin(w,elm);
	var max = getMax(w,elm);
	min = parseInt(min / 5)*5;
	max = parseInt(max / 5 + 1)*5;
	var f = 0;
	while (max - min < 25) {
		if (f == 0) {
			min -= 5;
		} else {
			max += 5;
		}
		f = 1 - f;
	}

	ctx.strokeText("セントポールの最近の気温 (℃)",0,15);
	drawMemory(canvas, min, max);

	drawGraph(canvas, elm, w, min, max);
	
	drawTemp(canvas, min, max);
}

function drawMemory(canvas, min, max) {
	var ctx = canvas.getContext("2d");
	var base = 100;
	var res = 3;
	var i
	ctx.lineWidth=1;
	ctx.beginPath();
	ctx.strokeStyle = 'rgb(0,128,128)';
	for(i = 5;i < max-min;i+=5) {
		ctx.moveTo(0,base - res * i);
		ctx.lineTo(canvas.clientWidth,base - res * i);
	}
	ctx.stroke();
}

function drawTemp(canvas, min, max) {
	var ctx = canvas.getContext("2d");
	var base = 100;
	var res = 3;
	var i
	ctx.lineWidth=1;
	ctx.beginPath();
	ctx.textAlign="end";
	ctx.strokeStyle = 'rgb(0,0,0)';
	for(i = 5;i < max-min;i+=5) {
		ctx.strokeText(min + i, 20,base - res * i+2);
	}
	ctx.stroke();
}

function drawGraph(canvas, elm, w, min, max) {
	var base = 100;
	var res = 3;
	var ctx = canvas.getContext("2d");
	ctx.beginPath();
	var i=w;
	ctx.strokeStyle = 'rgba(224,0,0,.8)';
	ctx.fillStyle = 'rgba(224,0,0,.8)';
	if (min > 0) {
		org = base;
	} else if (max < 0) {
		org = base - res*(max-min);
	} else {
		org = base - res*(-min);
	}
	ctx.moveTo(i-w,org);
	for(i=w;i < elm.length;i++) {
		ctx.lineTo(i-w,base-res*(getTemp(elm[i])-min));
	}
	ctx.lineTo(i-w-1,org);
	ctx.closePath();
	ctx.fill();

	ctx.beginPath();
	ctx.strokeStyle = 'rgb(0,0,0)';
	var day;
	var last=elm[w].getAttribute("day");
	for(i=w;i < elm.length;i++) {
		day=elm[i].getAttribute("day");
		if (last != day) {
			ctx.strokeText(day+"日",(i-w), base-2);
			last = day;
		}
	}
	ctx.stroke();
}


function start(elm, canvas) {
	var s = elm.length - canvas.clientWidth;
	if (s < 0) {
		s = 0;
	}
	return s;
}


function getMin(w, elm) {
	var min = getTemp(elm[w]);
	var i;
	for(i=w+1;i < elm.length;i++) {
		var f = getTemp(elm[i]);
		if(min > f) {
			min = f;
		}
	}
	return min;
}

function getMax(w, elm) {
	var max = getTemp(elm[w]);
	var i;
	for(i=w+1;i < elm.length;i++) {
		var f = getTemp(elm[i]);
		if(max < f) {
			max = f;
		}
	}
	return max;
}	

function getTemp(elm) {
	//return parseFloat(elm.getAttribute("ferh"));
	return (parseFloat(elm.getAttribute("ferh"))-32)*5/9;
}