var scriptTag = document.createElement('script')
scriptTag.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js'
//<script type="text/javascript" src="libs/three-r54.min.js"></script>
document.body.appendChild(scriptTag)

window.onload = function() {
	var renderer,
		scene,
		camera,
		cameraRadius = 50.0,
		cameraTarget,
		cameraX = 0,
		cameraY = 0,
		cameraZ = cameraRadius,
		particleSystem,
		particleSystemHeight = 100.0,
		clock,
		//controls,
		parameters,
		onParametersUpdate,
		texture,
        snowDisabled = true,
        disableBtn;

	init();
	animate();


	function init() {

        
		disableBtn = document.createElement('button')
		disableBtn.type = 'button'
		disableBtn.textContent = 'Toggle Ash'
        
		renderer = new THREE.WebGLRenderer({ alpha: true });
		renderer.setSize( window.innerWidth, window.innerHeight );
		renderer.setClearColor( 0x000000, 0 );

		scene = new THREE.Scene();

		camera = new THREE.PerspectiveCamera( 45, 4 / 3, 1, 10000 );
		cameraTarget = new THREE.Vector3( 0, 0, 0 );

		texture = new THREE.TextureLoader().load('./images/ash.png')
		
		var numParticles = 10000,
			width = 100,
			height = particleSystemHeight,
			depth = 100,
			parameters = {
				color: 0x999999,
				height: particleSystemHeight,
				radiusX: 2.5,
				radiusZ: 2.5,
				size: 75,
				scale: 4.0,
				opacity: 0.4,
				speedH: 0.4,
				speedV: 0.4
			},
			systemGeometry = new THREE.Geometry(),
			systemMaterial = new THREE.ShaderMaterial({
				uniforms: {
					color:  { type: 'c', value: new THREE.Color( parameters.color ) },
					height: { type: 'f', value: parameters.height },
					elapsedTime: { type: 'f', value: 0 },
					radiusX: { type: 'f', value: parameters.radiusX },
					radiusZ: { type: 'f', value: parameters.radiusZ },
					size: { type: 'f', value: parameters.size },
					scale: { type: 'f', value: parameters.scale },
					opacity: { type: 'f', value: parameters.opacity },
					texture: { type: 't', value: texture },
					speedH: { type: 'f', value: parameters.speedH },
					speedV: { type: 'f', value: parameters.speedV }
				},
				vertexShader: document.getElementById( 'step07_vs' ).textContent,
				fragmentShader: document.getElementById( 'step09_fs' ).textContent,
				blending: THREE.AdditiveBlending,
				transparent: true,
				depthTest: false
			});
	 
		for( var i = 0; i < numParticles; i++ ) {
			var vertex = new THREE.Vector3(
					rand( width ),
					Math.random() * height,
					rand( depth )
				);

			systemGeometry.vertices.push( vertex );
		}

		particleSystem = new THREE.Points( systemGeometry, systemMaterial );
		particleSystem.position.y = -height/2;

		scene.add( particleSystem );

		clock = new THREE.Clock();

		document.body.appendChild( renderer.domElement );
        document.body.appendChild( disableBtn )

		//onParametersUpdate = function( v ) {
			//systemMaterial.uniforms.color.value.set( parameters.color );
			//systemMaterial.uniforms.height.value = parameters.height;
			//systemMaterial.uniforms.radiusX.value = parameters.radiusX;
			//systemMaterial.uniforms.radiusZ.value = parameters.radiusZ;
			//systemMaterial.uniforms.size.value = parameters.size;
			//systemMaterial.uniforms.scale.value = parameters.scale;
			//systemMaterial.uniforms.opacity.value = parameters.opacity;
			//systemMaterial.uniforms.speedH.value = parameters.speedH;
			//systemMaterial.uniforms.speedV.value = parameters.speedV;
		//}

		//controls = new dat.GUI();
		//controls.close();

		//controls.addColor( parameters, 'color' ).onChange( onParametersUpdate );
		//controls.add( parameters, 'height', 0, particleSystemHeight * 2.0 ).onChange( onParametersUpdate );
		//controls.add( parameters, 'radiusX', 0, 10 ).onChange( onParametersUpdate );
		//controls.add( parameters, 'radiusZ', 0, 10 ).onChange( onParametersUpdate );
		//controls.add( parameters, 'size', 1, 400 ).onChange( onParametersUpdate );
		//controls.add( parameters, 'scale', 1, 30 ).onChange( onParametersUpdate );
		//controls.add( parameters, 'opacity', 0, 1 ).onChange( onParametersUpdate );
		//controls.add( parameters, 'speedH', 0.1, 3 ).onChange( onParametersUpdate );
		//controls.add( parameters, 'speedV', 0.1, 3 ).onChange( onParametersUpdate );

		//document.addEventListener( 'mousemove', function( e ) {
		//	var mouseX = e.clientX,
		//		mouseY = e.clientY,
		//		width = window.innerWidth,
		//		halfWidth = width >> 1,
		//		height = window.innerHeight,
		//		halfHeight = height >> 1;
		//	
		//	cameraX = cameraRadius * ( mouseX - halfWidth ) / halfWidth;
		//	cameraY = cameraRadius * ( mouseY - halfHeight ) / halfHeight;
	//	}, false );

	//	document.addEventListener( 'mousewheel', onMouseWheel, false );
	//	document.addEventListener( 'DOMMouseScroll', onMouseWheel, false );
        
        var r = renderer.domElement
		disableBtn.style.position = r.style.position = 'fixed'
		disableBtn.style.left = r.style.left = 0
		r.style.top = 0
		disableBtn.style.bottom = 0
		disableBtn.style.zIndex = r.style.zIndex = 100000
		r.style.pointerEvents = 'none'
		disableBtn.style.opacity = 0.6
		disableBtn.style.fontSize = '14px'
		disableBtn.style.padding = '6px 10px'
        
        window.addEventListener( 'resize', onWindowResize, false );
        disableBtn.addEventListener('click', toggleSnow, false)
		r.addEventListener('click', toggleSnow, false)
	}

	//function onMouseWheel( e ) {
	//	e.preventDefault();
		
	//	if( e.wheelDelta ) {
	//		cameraZ += e.wheelDelta * 0.05;
	//	} else if( e.detail ) {
	//		cameraZ += e.detail * 0.5;
	//	}
  //}
    function onWindowResize() {
        renderer.setSize( window.innerWidth, window.innerHeight )
    }
  	function toggleSnow() {
		if (snowDisabled) {
			snowDisabled = false
			renderer.domElement.style.display = 'block'
			animate()
		} else {
			snowDisabled = true
			renderer.domElement.style.display = 'none'
		}
	}
	function rand( v ) {
		return (v * (Math.random() - 0.5));
	}


	function animate() {
        if (snowDisabled) {
			return
		}

		requestAnimationFrame( animate );

		var delta = clock.getDelta(),
			elapsedTime = clock.getElapsedTime();

		particleSystem.material.uniforms.elapsedTime.value = elapsedTime * 10;

		camera.position.set( cameraX, cameraY, cameraZ );
		camera.lookAt( cameraTarget );

		renderer.clear();
		renderer.render( scene, camera );

	}
}
