// JavaScript Document

$(function(){

var ctx = document.getElementById('waku2');
var dispMonth = "10";

ctx.width = 1100 + 151;
ctx.height = 520 + 141;

var dispMonth = "10";

var selMonth = new Date( 2016, dispMonth-2, 1 );

var myTime = new Array('0:00','6:00','12:00','18:00','0:00','6:00','12:00','18:00','0:00');

var indexHum = new Array(0,20,40,60,80,100,120,140); //湿度
if(dispMonth > 10 || dispMonth < 5){
	var indexTemp = new Array(-20,-15,-10,-5,0,5,10,15); //気温
}else{
	var indexTemp = new Array(0,5,10,15,20,25,30,35); //気温
}
var indexSun = new Array(0,6,12,18,24,30,36); //日射量
var indexRain = new Array(30,25,20,15,10,5,0); //降水量

var wakuWidth = 1100;
var wakuHeight = 520;

var split_lineX = 62;
var split_lineY1 = 7;
var split_lineY2 = 6;

var px = 75.5;
var py = 70.5;

var splitLineX = wakuWidth / split_lineX;
var splitLineY1 = wakuHeight / split_lineY1;
var splitLineY2 = wakuHeight / split_lineY2;

var fontX = 8;
var fontY = 6;

ctx.strokeStyle = "rgb(187,187,187)";
ctx.lineWidth = 1;

//縦線

	for(i = 4; i < split_lineX; i=i+7){
		
		var p1 = 0;
		var line_path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
		line_path.setAttribute('d', 'M' + ' ' + ((i*splitLineX)+px+p1) +',' + py + ' ' + ((i*splitLineX)+px+p1) + ',' + (py+wakuHeight));
		line_path.setAttribute('stroke', "rgb(187,187,187)");
		line_path.setAttribute('stroke-width', 1);
		//line_path.setAttribute('stroke-dasharray', 2);
		ctx.appendChild(line_path);
		
	}
	
	var text1 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
	text1.setAttribute('text-anchor', 'middle');
	text1.setAttribute('x', (wakuWidth / 2) + px );
	text1.setAttribute('y', 25);
	text1.setAttribute('style', "font-size: 14pt; font-weight: bold; font-family: 'ヒラギノ角ゴ Pro W3'; text-align: center; fill: #6DB2B3;");
	text1.textContent = "日射量・降水量情報";
	ctx.appendChild(text1);
	
	var text2 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
	text2.setAttribute('x', 30);
	text2.setAttribute('y', 50);
	text2.setAttribute('style', "font-size: 14pt; font-weight: bold; font-family: 'ヒラギノ角ゴ Pro W3'; text-align: center; fill: #333333;");
	text2.textContent = "日射量(MJ/㎡)";
	ctx.appendChild(text2);
	
	var text3 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
	text3.setAttribute('x', wakuWidth);
	text3.setAttribute('y', 50);
	text3.setAttribute('style', "font-size: 14pt; font-weight: bold; font-family: 'ヒラギノ角ゴ Pro W3'; text-align: center; fill: #333333;");
	text3.textContent = "降水量(mm)";
	ctx.appendChild(text3);
	
/* 時間 */

	for(j = 1; j < split_lineY2; j=j+1){
		
		var line_path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
		line_path.setAttribute('d', 'M' + ' ' + px +',' + (py+(j*splitLineY2)) + ' ' + (px+wakuWidth) + ',' + (py+(j*splitLineY2)) );
		line_path.setAttribute('stroke', "rgb(187,187,187)");
		line_path.setAttribute('stroke-width', 1);
		//line_path.setAttribute('stroke-dasharray', 2);
		ctx.appendChild(line_path);
		
	}
	
	for(i = 6; i >= 0; i=i-1){
		
		var lefttext = document.createElementNS('http://www.w3.org/2000/svg', 'text');
		lefttext.setAttribute('text-anchor', 'end');
		lefttext.setAttribute('x', px - 10 );
		lefttext.setAttribute('y', py+(i*splitLineY2) + fontY);
		lefttext.setAttribute('style', "font-size: 14pt; font-weight: bold; font-family: 'ヒラギノ角ゴ Pro W3'; text-align: right; fill: #333333;");
		lefttext.textContent = indexSun[6-i];
		ctx.appendChild(lefttext);
		
		var righttext = document.createElementNS('http://www.w3.org/2000/svg', 'text');
		righttext.setAttribute('x', px + wakuWidth + 8);
		righttext.setAttribute('y', py + (i*splitLineY2) + fontY);
		righttext.setAttribute('style', "font-size: 14pt; font-weight: bold; font-family: 'ヒラギノ角ゴ Pro W3'; text-align: left; fill: #333333;");
		righttext.textContent = indexRain[6-i];
		ctx.appendChild(righttext);

	}
	
 	var wakuline = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
	wakuline.setAttribute('x', px);
	wakuline.setAttribute('y', py);
	wakuline.setAttribute('width', wakuWidth);
	wakuline.setAttribute('height', wakuHeight);
	wakuline.setAttribute('fill', 'none');
	wakuline.setAttribute('stroke', '#333333');
	wakuline.setAttribute('stroke-width', 1);
	wakuline.setAttribute('opacity', 1);
	wakuline.setAttribute('fill-opacity', 1);
	wakuline.setAttribute('stroke-opacity', 1);
	wakuline.setAttribute('transform', "rotate(0)");
	ctx.appendChild(wakuline);


/* 凡例 */


 	var sample1 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
	sample1.setAttribute('x', wakuWidth + px - 150);
	sample1.setAttribute('y', 10);
	sample1.setAttribute('width', 6);
	sample1.setAttribute('height', 8);
	sample1.setAttribute('fill', 'rgb(255,204,0)');
	sample1.setAttribute('stroke', 'none');
	sample1.setAttribute('stroke-width', 1);
	sample1.setAttribute('opacity', 1);
	sample1.setAttribute('fill-opacity', 1);
	sample1.setAttribute('stroke-opacity', 1);
	sample1.setAttribute('transform', "rotate(0)");
	ctx.appendChild(sample1);

 	var sample2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
	sample2.setAttribute('x', wakuWidth + px - 50);
	sample2.setAttribute('y', 10);
	sample2.setAttribute('width', 6);
	sample2.setAttribute('height', 8);
	sample2.setAttribute('fill', 'rgb(0,204,255)');
	sample2.setAttribute('stroke', 'none');
	sample2.setAttribute('stroke-width', 1);
	sample2.setAttribute('opacity', 1);
	sample2.setAttribute('fill-opacity', 1);
	sample2.setAttribute('stroke-opacity', 1);
	sample2.setAttribute('transform', "rotate(0)");
	ctx.appendChild(sample2);

	var text_sample1 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
	text_sample1.setAttribute('x', wakuWidth + px - 130);
	text_sample1.setAttribute('y', 22);
	text_sample1.setAttribute('style', "font-size: 14pt; font-weight: bold; font-family: 'ヒラギノ角ゴ Pro W3'; text-align: left; fill: #333333;");
	text_sample1.textContent = '日射量';
	ctx.appendChild(text_sample1);

	var text_sample2 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
	text_sample2.setAttribute('x', wakuWidth + px - 30);
	text_sample2.setAttribute('y', 22);
	text_sample2.setAttribute('style', "font-size: 14pt; font-weight: bold; font-family: 'ヒラギノ角ゴ Pro W3'; text-align: left; fill: #333333;");
	text_sample2.textContent = '降水量';
	ctx.appendChild(text_sample2);

});