;(function($){

	//panoramaView
	jQuery.fn.panoramaViewer=function(prmUser){

		///////////////////////////////////////////////////////////////////////////////////////////
		// Var
		///////////////////////////////////////////////////////////////////////////////////////////

		//parameter
		const prmDef={
			camera : {
				fov  : 45,
				near : 1,
				far  : 2000
			}
		};
		const prm=$.extend(prmDef,prmUser);

		//canvas
		const myCanvas=$(this);
		var cv=new Canvas();
		function Canvas(){
			this._id  =myCanvas.attr("id");
			this._box =myCanvas.closest("#canvas_box");
			this._w   =this._box.width();
			this._h   =this._box.height();
		}
		myCanvas.attr({
			'width'  : cv._w,
			'height' : cv._h
		});

		//three.js
		var renderer;
		var scene;
		var group;
		var camera;


		///////////////////////////////////////////////////////////////////////////////////////////
		// Canvas
		///////////////////////////////////////////////////////////////////////////////////////////

		setCanvas();
		function setCanvas(){

			renderer=new THREE.WebGLRenderer({
				canvas    : document.querySelector('#'+cv._id),
				antialias : true,
				alpha     : true
			});

			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(cv._w,cv._h);

			scene=new THREE.Scene();
			group=new THREE.Group();

			camera=new THREE.PerspectiveCamera(prm.camera.fov,cv._w/cv._h,prm.camera.near,prm.camera.far);
			camera.position.set(0,100,100);

			//Geometry
			group.add(makeGeometry());

			scene.add(group);
			runAnimate();

			function runAnimate(){
				renderer.render(scene,camera);
				requestAnimationFrame(runAnimate);
			}
		}

		///////////////////////////////////////////////////////////////////////////////////////////
		// Window Resize
		///////////////////////////////////////////////////////////////////////////////////////////

		var timerResize=false;
		$(window).on("resize",function(){
			if(timerResize!==false){
				clearTimeout(timerResize);
			}
			timerResize=setTimeout(function(){
				resizeCanvas();
			},500);
		});

		function resizeCanvas(){
			cv._w=cv._box.width();
			cv._h=cv._box.height();
			myCanvas.attr({
				'width'  : cv._w,
				'height' : cv._h
			});

			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(cv._w,cv._h);
			camera.aspect=cv._w/cv._h;
			camera.updateProjectionMatrix();
		}

	};

	function makeGeometry(){
		var group=new THREE.Group();

		group.add(new THREE.GridHelper(1000,100));

		var testGeometry1=new THREE.BoxGeometry(150,150,120);
		var testMaterial1=new THREE.MeshNormalMaterial();
		var testMesh1=new THREE.Mesh(testGeometry1,testMaterial1);
		testMesh1.position.set(100,300,-500);
		group.add(testMesh1);

		var testGeometry2=new THREE.SphereGeometry(70,6,4);
		var testMaterial2=new THREE.MeshNormalMaterial();
		var testMesh2=new THREE.Mesh(testGeometry2,testMaterial2);
		testMesh2.position.set(-120,100,-400);
		group.add(testMesh2);

		return group;
	}

})(jQuery);