var canvas_blur = document.querySelector(".canvas.blur");
var pixelRatio = window.devicePixelRatio || 1;
var c_w = parseInt(getComputedStyle(canvas_blur).width);
var c_h = parseInt(getComputedStyle(canvas_blur).height);
canvas_blur.width = c_w;
canvas_blur.height = c_h;

/******************************canvas blur class********************************/
class CanvasFastBlur {
	constructor(options) {
		this.blurRadius = options.blur || 3;
		
	}
	initCanvas(canvas){
		this.canvas = canvas;
		this.ctx = canvas.getContext('2d');
		let w = canvas.width;
		let h = canvas.height;
		this.canvas_off = document.createElement("canvas");
		this.ctx_off = this.canvas_off.getContext("2d");
		this.canvas_off.width = w;
		this.canvas_off.height = h;
		this.ctx_off.drawImage(canvas, 0, 0);
	}
	recoverCanvas(){
		let w = this.canvas_off.width;
		let h = this.canvas_off.height;
		this.canvas.width = w;
		this.canvas.height = h;
		this.ctx.drawImage(this.canvas_off,0,0);
	}
	gBlur(blur) {
		let start = +new Date();
		blur = blur || this.blurRadius;
		let canvas = this.canvas;
		let ctx = this.ctx;
		
		let sum = 0;
		let delta = 5;
		let alpha_left = 1 / (2 * Math.PI * delta * delta);
		let step = blur < 3 ? 1 : 2;
		for (let y = -blur; y <= blur; y += step) {
			for (let x = -blur; x <= blur; x += step) {
				let weight = alpha_left * Math.exp(-(x * x + y * y) / (2 * delta * delta));
				sum += weight;
			}
		}
		let count = 0;
		for (let y = -blur; y <= blur; y += step) {
			for (let x = -blur; x <= blur; x += step) {
				count++;
				ctx.globalAlpha = alpha_left * Math.exp(-(x * x + y * y) / (2 * delta * delta)) / sum * blur;
				ctx.drawImage(canvas,x,y);
			}
		}
		ctx.globalAlpha = 1;
		console.log("time: "+(+new Date() - start))
	}
	mBlur(distance){
		distance = distance<0?0:distance;
		console.log(distance);
		let w = this.canvas.width;
		let h = this.canvas.height;
		this.canvas.width = w;
		this.canvas.height = h;
		let ctx = this.ctx;
		ctx.clearRect(0,0,w,h);
		let canvas_off = this.canvas_off;
		
		for(let n=0;n<5;n+=0.1){
			ctx.globalAlpha = 1/(2*n+1);
			let scale = distance/5*n;
			ctx.transform(1+scale,0,0,1+scale,0,0);
			ctx.drawImage(canvas_off, 0, 0);
		}
		ctx.globalAlpha = 1;
		if(distance<0.01){
			window.requestAnimationFrame(()=>{
				this.mBlur(distance+0.0005);
			});
		}
	}
	
}
/*******************************************************************************/
var canvasBlur = new CanvasFastBlur({
	blur: 6
});
document.querySelector("#g_blur").addEventListener("click", function() {
	var blur = document.querySelector("#blur_val").value;
	canvasBlur.gBlur(blur);
});
document.querySelector("#m_blur").addEventListener("click", function() {
	var dis = document.querySelector("#blur_val_m").value/100;
	canvasBlur.mBlur(dis);
});
document.querySelector("#recover").addEventListener("click", function() {
	canvasBlur.recoverCanvas();
});
/***************************open image and draw to canvas*************************/
document.querySelector("#open").addEventListener("click", function() {
	canvas_blur.width = c_w;
	canvas_blur.style.width = c_w + "px";
	canvas_blur.height = c_h;
	canvas_blur.style.height = c_h + "px";
	openFile();
});

function openFile() {
	var input = document.querySelector("open_file");
	if(!input){
	    input = document.createElement('input');
		input.id = "open_file";
	}
	input.style.display = "none";
	document.body.appendChild(input);
	input.addEventListener('change', readFile, false);
	input.type = 'file';
	input.accept = 'image/*';
	input.click();
}

function readFile() {
	var file = this.files[0]; //获取input输入的图片
	//判断是否图片，在移动端由于浏览器对调用file类型处理不同，虽然加了accept = 'image/*'，但是还要再次判断
	if (!/image\/\w+/.test(file.type)) {
		console.log("image needed!");
		return false;
	}
	var reader = new FileReader();
	reader.readAsDataURL(file); //转化成base64数据类型
	reader.onload = function(e) {
		drawToCanvas(this.result);
	}
}

function drawToCanvas(imgData) {
	var context = canvas_blur.getContext('2d');
	var img = new Image();
	img.src = imgData;
	img.onload = function() {
		context.clearRect(0, 0, canvas_blur.width, canvas_blur.height);
		var img_w = img.width > canvas_blur.width ? canvas_blur.width : img.width;
		var img_h = img.height > canvas_blur.height ? canvas_blur.height : img.height;
		var scale = (img_w / img.width < img_h / img.height) ? (img_w / img.width) : (img_h / img.height);
		img_w = img.width * scale;
		img_h = img.height * scale;
		canvas_blur.style.width = img_w + "px";
		canvas_blur.style.height = img_h + "px";
		canvas_blur.width = img_w;
		canvas_blur.height = img_h;
		context.drawImage(img, 0, 0, img.width, img.height, (canvas_blur.width - img_w) / 2, (canvas_blur.height - img_h) / 2, img_w, img_h);
		canvasBlur.initCanvas(canvas_blur);
	}
}
/**********************************************************************************/