// JavaScript Document

$(function(){
	$("#steam").hide();
	yuge();
	$("#steam").fadeIn(1500,function(){
		$(this).delay(500).fadeOut(1500);
	});
	var timerID = setInterval (function(){
		yuge();
		$("#steam").fadeIn(1500,function(){
			$(this).delay(500).fadeOut(1500);
		});
	},4000);
});

function yuge(){
	/* canvas要素のノードオブジェクト */
	var canvas = document.getElementById("steam");
	/* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
	if ( ! canvas || ! canvas.getContext ) {
		return false;
	}
	/* 2Dコンテキスト */
	var cx = canvas.getContext("2d"); 
	canvas.width = canvas.width;
	/* 湯気を描写 */
	for(i=0;i<500;i++){
		cx.beginPath();
		cx.fillStyle="rgba(255,255,255,0.08)";
		cx.arc(particleX(),particleY(),particleS (),0,2*Math.PI,true);
		cx.fill();
		cx.closePath();
	}
	/* 湯気を縁取り 「湯気をグラデーション」の部分でsource-inを使えればいいのだが、現状のwebkit系では非対応のため */
	var m = curveX();
	cx.beginPath();
	cx.moveTo(0,0);
	cx.lineTo(0,301);
	cx.quadraticCurveTo(m,-299,200,301);
	cx.lineTo(200,0);
	cx.closePath();
	cx.fillStyle="#ffffff";
	cx.globalCompositeOperation = "destination-out";
	cx.fill();
	/* 湯気をグラデーション */
	cx.beginPath();
	cx.moveTo(0,300);
	cx.quadraticCurveTo(m,-300,200,300);
	cx.closePath();
	var g = cx.createRadialGradient(100,230,0,100,230,90);
	g.addColorStop(0,"rgba(255,255,255,1)");
	g.addColorStop(0.7,"rgba(255,255,255,0)");
	cx.fillStyle=g;
	cx.globalCompositeOperation = "source-in";
	cx.fill();
}

function particleX (){
	var size = $("#steam");
	x = Math.floor(Math.random() * parseInt(size.width()));
	return x;
}
function particleY (){
	var size = $("#steam");
	y = Math.floor(Math.random() * parseInt(size.height()));
	return y;
}
function particleS (){
	s = Math.floor(Math.random() * 20 + 10);
	return s;
}
function curveX (){
	x = Math.floor(Math.random() * 200);
	return x;
}