/* Obviously this will not be good for larger images.
   If you want larger Images, https://wizgrav.github.io/three.js/runner/
   parameters:
   		canvas - <CANVAS DOM Element>
		  depth - <float> how far to extend the Image
		  hasOpacity - <boolean> If the canvas has opacity
   		material - <THREE.Material> The material to use on the geometry with THREE.MeshFaceMaterial();
   To use opacity:
   		set hasOpacity to true,
		set a material to use with transparency
		set the Mesh material to THREE.MeshFaceMaterial(yourCanvasGeometry.materials());
	*/
THREE.CanvasGeometry = function (canvas, depth, hasOpacity, material) {
	THREE.Geometry.call( this );
	var ctx = canvas.getContext('2d'),
		w = canvas.width,
		h = canvas.height;
	this.materials = [];
	this.opacitys = [];
	const cache = [];
	for(var x=0;x<w;x++) {
		if(!cache[x]) {
			cache[x] = [];
		}
		for(var y=0;y<h;y++) {
			const isCached = cache[x][y];
			const data = isCached ? cache[x][y] : _getImageData(x, y, x+1, y+1);
			cache[x][y] = data;
			if(data[3] !== 0) {
				var vectors = [];
				var v = new THREE.Vector3();
				var f = new THREE.Face3();
				f.color.setStyle("rgb("+data[0]+","+data[1]+","+data[2]+")");
				if(hasOpacity) {
					if(this.opacitys.indexOf(data[3]/255) == -1) {
						this.opacitys.push(data[3]/255);
						var materialClone = material.clone();
						materialClone.transparent = true;
						materialClone.opacity = data[3]/255;
						this.materials.push(materialClone);
					}
					f.materialIndex = this.opacitys.indexOf(data[3]/255);
				}
				v.set(x/w, -y/w, 0);
				this.vertices.push(v.clone());
				vectors.push(this.vertices.length-1);

				v.set((x+1)/w, -y/w, 0);
				this.vertices.push(v.clone());
				vectors.push(this.vertices.length-1);

				v.set((x+1)/w, (-y+1)/w, 0);
				this.vertices.push(v.clone());
				vectors.push(this.vertices.length-1);

				v.set(x/w, (-y+1)/w, 0);
				this.vertices.push(v.clone());
				vectors.push(this.vertices.length-1);

				v.set(x/w, -y/w, depth);
				this.vertices.push(v.clone());
				vectors.push(this.vertices.length-1);

				v.set((x+1)/w, -y/w, depth);
				this.vertices.push(v.clone());
				vectors.push(this.vertices.length-1);

				v.set((x+1)/w, (-y+1)/w, depth);
				this.vertices.push(v.clone());
				vectors.push(this.vertices.length-1);

				v.set(x/w, (-y+1)/w, depth);
				this.vertices.push(v.clone());
				vectors.push(this.vertices.length-1);

				f.set(vectors[2], vectors[1], vectors[0]);
				this.faces.push(f.clone());

				f.set(vectors[0], vectors[3], vectors[2]);
				this.faces.push(f.clone());

				f.set(vectors[4], vectors[5], vectors[6]);
				this.faces.push(f.clone());

				f.set(vectors[6], vectors[7], vectors[4]);
				this.faces.push(f.clone());

				//check left
				// const left = _getImageData(x-1, y);
				// console.log('left === ',left);
				if(x-1 < 0 || _getImageData(x-1, y)[3] == 0) {
					vectors = [];
					v.set(x/w, -y/w, 0);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					v.set(x/w, (-y+1)/w, 0);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					v.set(x/w, (-y+1)/w, depth);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					v.set(x/w, -y/w, depth);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					f.set(vectors[2], vectors[1], vectors[0]);
					this.faces.push(f.clone());
					f.set(vectors[0], vectors[3], vectors[2]);
					this.faces.push(f.clone());
				}
				// check right
				if(x+1 > w || _getImageData(x+1, y)[3] == 0) {
					vectors = [];
					v.set((x+1)/w, -y/w, 0);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					v.set((x+1)/w, (-y+1)/w, 0);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					v.set((x+1)/w, (-y+1)/w, depth);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					v.set((x+1)/w, -y/w, depth);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					f.set(vectors[0], vectors[1], vectors[2]);
					this.faces.push(f.clone());
					f.set(vectors[2], vectors[3], vectors[0]);
					this.faces.push(f.clone());
				}
				//check top
				if(y+1 > h || _getImageData(x, y+1)[3] == 0) {
					vectors = [];
					v.set(x/w, (-y)/w, 0);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					v.set((x+1)/w, (-y)/w, 0);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					v.set((x+1)/w, (-y)/w, depth);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					v.set(x/w, (-y)/w, depth);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					f.set(vectors[0], vectors[1], vectors[2]);
					this.faces.push(f.clone());
					f.set(vectors[2], vectors[3], vectors[0]);
					this.faces.push(f.clone());
				}
				//check bottom
				if(y-1 < 0 || _getImageData(x, y-1)[3] == 0) {
					vectors = [];
					v.set(x/w, (-y+1)/w, 0);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					v.set((x+1)/w, (-y+1)/w, 0);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					v.set((x+1)/w, (-y+1)/w, depth);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					v.set(x/w, (-y+1)/w, depth);
					this.vertices.push(v.clone());
					vectors.push(this.vertices.length-1);

					f.set(vectors[0], vectors[3], vectors[2]);
					this.faces.push(f.clone());
					f.set(vectors[2], vectors[1], vectors[0]);
					this.faces.push(f.clone());
				}

				function _getImageData(_x,_y) {
					const isCached = cache[_x] && cache[_x][_y];
					const data = isCached ? cache[_x][_y] : ctx.getImageData(_x, _y, 1, 1).data;
					if(!isCached) {
						if(!cache[_x])cache[_x] = [];
						cache[_x][_y] = data;
					}
					return cache[_x][_y];
				}
			}
		}
	}

	// console.log(this)
	this.mergeVertices();
	this.computeFaceNormals();
	this.computeVertexNormals();

	function _getImageData(_x, _y) {
		if(typeof cache[_x][_y] === "undefined") {
			cache[_x][_y] = ctx.getImageData(_x,_y,1,1).data;
		}
		return cache[_x][_y];
	}
};