dimensions

function sceneSetup(){
			scene = new THREE.Scene();
            
            container = document.getElementById( 'canvas' );
            
			var width = container.offsetWidth;
			var height = container.offsetHeight;
			camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
			camera.position.z = 2;
        
            document.getElementById( 'fix' ).appendChild( container );

			renderer = new THREE.WebGLRenderer({ antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( container.offsetWidth, container.offsetHeight );  
            
            document.getElementById( 'fix' ).appendChild( renderer.domElement );
            window.addEventListener( 'resize', onWindowResize, false );
            
            document.body.addEventListener( 'mousedown', onDocumentMouseDown, false );
            
            pic[0] = new THREE.TextureLoader().load( "n68.jpg" );
            
		}

		function bufferTextureSetup(){
            
            rnd= -10+Math.random()*20;
            if (rnd <= 1.0 && rnd >= -1.0){
                rnd = 3.0;
            }
            
            
            //console.log("d: "+rnd);
            
			//Create buffer scene
			bufferScene = new THREE.Scene();
            
            
			//Create 2 buffer textures
			textureA = new THREE.WebGLRenderTarget( container.offsetWidth, container.offsetHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter});
			textureB = new THREE.WebGLRenderTarget( container.offsetWidth, container.offsetHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter} );
			//Pass textureA to shader
      
      //THREE.ImageUtils.crossOrigin = '';
      
			bufferMaterial = new THREE.ShaderMaterial( {
				uniforms: {
				 bufferTexture: { type: "t", value: textureA.texture },
         "myTex" :    { type: "t", value: pic[nr] }, // ***THIS IS THE TEXTURE WE BLUR/MUNGE
				 res : {type: 'v2',value:new THREE.Vector2(container.offsetWidth,container.offsetHeight)},
				 time: {type:"f",value:Math.random()*Math.PI*2+Math.PI},
                    screenSize: {type:"f",value:screenSize},
                    random: {type:"f",value:rnd}
				},
				fragmentShader: document.getElementById( 'fragShader' ).innerHTML
			} );
			plane = new THREE.PlaneBufferGeometry( container.offsetWidth, container.offsetHeight );
			bufferObject = new THREE.Mesh( plane, bufferMaterial );
			bufferScene.add(bufferObject);
            
            bufferMaterial.uniforms.screenSize.value = screenSize;

			//Draw textureB to screen 
			finalMaterial =  new THREE.MeshBasicMaterial({map: textureB});
			quad = new THREE.Mesh( plane, finalMaterial );
			scene.add(quad);
            
            //console.log("SS - "+bufferMaterial.uniforms.screenSize.value);
		}

		//Initialize the Threejs scene
		sceneSetup();
		bufferTextureSetup();
        
        window.onload = function() {
      onWindowResize();
    }
        



		function render() {
            
            if (tid>2.0 && swi==true){
                swi=false;
                document.getElementById("textCont").style.mixBlendMode = "";
                console.log("changed!!!");
            }

		  requestAnimationFrame( render );
           
		  //Draw to textureB
		  renderer.render(bufferScene,camera,textureB,true);
			//if (clicko==1){ 
		  //Swap textureA and B
		  var t = textureA;
		  textureA = textureB;
		  textureB = t;
		  quad.material.map = textureB.texture;
		  bufferMaterial.uniforms.bufferTexture.value = textureA.texture;
        

		  //Update time
            //console.log(tid);
                tid += 0.01;
		      bufferMaterial.uniforms.time.value = tid;
                
                //console.log("dir - " + bufferMaterial.uniforms.random.value);
            //}
                
		  //Finally, draw to the screen
		  renderer.render( scene, camera );
		}
		render();
       
        
        function onWindowResize(){
            
            console.log("daaa - "+window.innerWidth/window.innerHeight);
            if (picRatio < window.innerWidth/window.innerHeight)
                {
                    tempVal = (((window.innerWidth)-window.innerHeight*1.5))/2;
                    tempVal = tempVal*-1;
                    console.log("temp - "+tempVal);
                    document.getElementById("fix").style.marginTop = tempVal+"px";
                    document.getElementById("fix").style.marginBottom = tempVal+"px";
                    
                }else
                {
                    tempVal = (((window.innerHeight*1.5)-window.innerWidth))/2;
                    tempVal = tempVal*-1;
                    console.log("temp - "+tempVal);
                    document.getElementById("fix").style.marginLeft = tempVal+"px";
                    document.getElementById("fix").style.marginRight = tempVal+"px";
                       
                }
              
            camera.aspect = container.offsetWidth / container.offsetHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( container.offsetWidth, container.offsetHeight );
            
            screenSize = container.offsetHeight/1200;
            bufferMaterial.uniforms.screenSize.value = screenSize;

        }