/**************************************************
 * 線形グラデーション用
 * @param x
 * @param y
 * @param w
 * @param h
 * @param a
 * @return
 **************************************************/
function infoLinear(x, y, w, h, a){
	this.x = x;
	this.y = y;
	this.w = w;
	this.h = h;
	this.a = a;
};
/**************************************************
 * 円形グラデーション用
 * @param x1
 * @param y1
 * @param r1
 * @param x2
 * @param y2
 * @param r2
 * @param a
 * @return
 **************************************************/
function infoRadial(x1, y1, r1, x2, y2, r2, a){
	this.x1 = x1;
	this.y1 = y1;
	this.r1 = r1;
	this.x2 = x2;
	this.y2 = y2;
	this.r2 = r2;
	this.a = a;
};
/**************************************************
 * 角丸矩形範囲
 * @param ctx
 * @param inforr
 * @return
 **************************************************/
function rr(ctx, inforr){
	ctx.beginPath();
	ctx.moveTo(inforr.x, inforr.y + inforr.r);
	ctx.lineTo(inforr.x, inforr.y + inforr.h - inforr.r);
	ctx.quadraticCurveTo(inforr.x, inforr.y + inforr.h, inforr.x + inforr.r, inforr.y + inforr.h);
	ctx.lineTo(inforr.x + inforr.w - inforr.r, inforr.y + inforr.h);
	ctx.quadraticCurveTo(inforr.x + inforr.w, inforr.y + inforr.h, inforr.x + inforr.w, inforr.y + inforr.h - inforr.r);
	ctx.lineTo(inforr.x + inforr.w, inforr.y + inforr.r);
	ctx.quadraticCurveTo(inforr.x + inforr.w, inforr.y, inforr.x + inforr.w - inforr.r, inforr.y);
	ctx.lineTo(inforr.x + inforr.r, inforr.y);
	ctx.quadraticCurveTo(inforr.x, inforr.y, inforr.x, inforr.y + inforr.r);
	ctx.closePath();
}
/**************************************************
 * 線形グラデーションstyle作成
 * @param ctx
 * @param info
 * @return
 **************************************************/
function makeLinearStyle(ctx, info) {
	var tmp = ctx.createLinearGradient(info.x, info.y, info.w, info.h);
	var opt = Math.min(parseFloat(info.a + 0.1),1.0);
	tmp.addColorStop(0,		'rgba(0,0,0,' + opt + ')');
	tmp.addColorStop(0.25,	'rgba(0,0,0,' + info.a + ')');
	tmp.addColorStop(1,		'rgba(0,0,0,0)');
	return tmp;
}
/**************************************************
 * 円形グラデーションstyle作成
 * @param ctx
 * @param info
 * @return
 **************************************************/
function makeRadialStyle(ctx, info) {
	var tmp = ctx.createRadialGradient(info.x1, info.y1, info.r1, info.x2, info.y2, info.r2);
	var opt = Math.min(parseFloat(info.a + 0.1),1.0);
	tmp.addColorStop(0,		'rgba(0,0,0,' + opt + ')');
	tmp.addColorStop(0.25,	'rgba(0,0,0,' + info.a + ')');
	tmp.addColorStop(1,		'rgba(0,0,0,0)');
	return tmp;
}
/**************************************************
 * 明るい部分作成及び反映
 * @param ctx
 * @param info
 * @return
 **************************************************/
function drawBright(ctx, info) {
	var style = ctx.createLinearGradient(0, info.y,0, info.y + info.h);
	style.addColorStop(0,'rgba(254,254,254,' + info.a + ')');
	style.addColorStop(1,'rgba(254,254,254,0.1)');
	ctx.beginPath();
	ctx.moveTo(info.x, info.y + info.r);
	ctx.lineTo(info.x, info.y + info.h - info.r);
	ctx.quadraticCurveTo(info.x, info.y + info.h, info.x + info.r, info.y + info.h);
	ctx.lineTo(info.x + info.w - info.r, info.y + info.h);
	ctx.quadraticCurveTo(info.x + info.w, info.y + info.h, info.x + info.w, info.y + info.h - info.r);
	ctx.lineTo(info.x + info.w, info.y + info.r);
	ctx.quadraticCurveTo(info.x + info.w, info.y, info.x + info.w - info.r, info.y);
	ctx.lineTo(info.x + info.r, info.y);
	ctx.quadraticCurveTo(info.x, info.y, info.x, info.y + info.r);
	ctx.closePath();
	ctx.fillStyle = style;
	ctx.fill();
}
/**************************************************
 * 暗い部分作成及び反映
 * @param ctx
 * @param info
 * @return
 **************************************************/
function drawDark(ctx, info) {
	var style = ctx.createLinearGradient(0, info.y,0, info.y+info.h);
	style.addColorStop(0,'rgba(0,0,0,0)');
	style.addColorStop(1,'rgba(0,0,0,' + info.a +')');
	ctx.beginPath();
	ctx.moveTo(info.x, info.y);
	ctx.lineTo(info.x, info.y + info.h - info.r);
	ctx.quadraticCurveTo(info.x, info.y + info.h, info.x + info.r, info.y + info.h);
	ctx.lineTo(info.x + info.w - info.r, info.y + info.h);
	ctx.quadraticCurveTo(info.x + info.w, info.y + info.h, info.x + info.w, info.y + info.h - info.r);
	ctx.lineTo(info.x + info.w, info.y);
	ctx.lineTo(info.x, info.y);
	ctx.closePath();
	ctx.fillStyle = style;
	ctx.fill();
}
/**************************************************
 * 枠追加
 * @param ctx
 * @param info
 * @return
 **************************************************/
function drawFrame(ctx, info) {
	rr(ctx, info);
	var style = ctx.createLinearGradient(0, 0, 0, info.h);
	style.addColorStop(0,'rgba(254,254,254,' + info.a + ')');
	style.addColorStop(1,'rgba(0,0,0,' + info.a + ')');
	ctx.lineWidth = (info.r + info.x) / 2;
	ctx.strokeStyle = style;
	ctx.stroke();
}
/**************************************************
 * 影作成及び反映
 * @param ctx
 * @param info
 * @return
 **************************************************/
function addShadow(ctx, info){
	var rh = info.r / 2;
	ctx.beginPath();
	ctx.rect(info.x + info.r, info.y, info.w - (info.r * 2), info.y + rh);
	ctx.closePath();
	ctx.fillStyle = makeLinearStyle(ctx, new infoLinear(info.x + info.r, info.y + rh, info.x + info.r, info.y, info.a));
	ctx.fill();

	ctx.beginPath();
	ctx.rect(info.x, info.y + info.r, rh, info.h - (info.r * 2));
	ctx.closePath();
	ctx.fillStyle = makeLinearStyle(ctx, new infoLinear(info.x + rh, info.y + info.r, info.x, info.y + info.r, info.a));
	ctx.fill();

	ctx.beginPath();
	ctx.rect(info.x + info.w - rh, info.y + info.r,rh, info.h - (info.r * 2));
	ctx.closePath();
	ctx.fillStyle = makeLinearStyle(ctx, new infoLinear(info.x + info.w - rh, info.y + info.r, info.x + info.w, info.y + info.r, info.a));
	ctx.fill();

	ctx.beginPath();
	ctx.rect(info.x + info.r, info.y + info.h - rh, info.w - (info.r * 2), rh);
	ctx.closePath();
	ctx.fillStyle = makeLinearStyle(ctx, new infoLinear(info.x + info.r, info.y + info.h - rh, info.x + info.r, info.y + info.h, info.a));
	ctx.fill();

	ctx.beginPath();
	ctx.rect(info.x, info.y, info.r, info.r);
	ctx.closePath();
	ctx.fillStyle = makeRadialStyle(ctx, new infoRadial(info.x + info.r, info.y + info.r, info.r - rh, info.x + info.r, info.y + info.r, info.r, info.a));
	ctx.fill();

	ctx.beginPath();
	ctx.rect(info.x, info.y + info.h-info.r, info.r, info.r);
	ctx.closePath();
	ctx.fillStyle = makeRadialStyle(ctx, new infoRadial(info.x + info.r, info.y + info.h-info.r, info.r - rh, info.x + info.r, info.y + info.h-info.r, info.r, info.a));
	ctx.fill();

	ctx.beginPath();
	ctx.rect(info.x + info.w-info.r, info.y + info.h-info.r, info.r, info.r);
	ctx.closePath();
	ctx.fillStyle = makeRadialStyle(ctx, new infoRadial(info.x + info.w-info.r, info.y + info.h-info.r, info.r - rh, info.x + info.w-info.r, info.y + info.h-info.r, info.r, info.a));
	ctx.fill();

	ctx.beginPath();
	ctx.rect(info.x + info.w-info.r, info.y, info.r, info.r);
	ctx.closePath();
	ctx.fillStyle = makeRadialStyle(ctx, new infoRadial(info.x + info.w-info.r, info.y + info.r, info.r - rh, info.x + info.w-info.r, info.y + info.r, info.r, info.a));
	ctx.fill();
}