var gui = new dat.GUI();
        var space = new Space();
       
        
        function Space()
        {
            this.ww = window.innerWidth;
            this.wh = window.innerHeight;
            this.numBoxes = 10;
            this.boxDistance = 250;
            this.numContainers = 8;
            this.cx = 30;
            this.cy = 30;
            this.cz = 60;
            this.cameraX = .25;
            this.cameraY = .25;
            this.lightX = .25;
            this.lightY = .25;
            this.lag = 2;
            this.tunnelSpeed = 30;
            this.cameraZ = 0;
            this.lightZ = 0;
            this.boxWidth = 50;
            
            this.colorScheme = 'random';
            
            this.colors = 
            [
		      new THREE.Color( 'rgb(1,35,69)' ),
		      new THREE.Color( 'rgb(18,52,86)' ),
		      new THREE.Color( 'rgb(35,69,103)'),
		      new THREE.Color( 'rgb(52,86,120)' ),
              new THREE.Color( 'rgb(69,103,137)' ),
              new THREE.Color( 'rgb(86,120,144)' ),
               
                
	        ];
            
            this.renderer;
            this.scene;
            this.camera;
            this.light;
            this.elements;
            this.r = getRandomInt(255);
            this.g = getRandomInt(255);
            this.b = getRandomInt(255);
            
            var _self = this;
            
            this.init = function()
            {
                /* WEBGL RENDERER */
                this.renderer = new THREE.WebGLRenderer({canvas : document.getElementById('scene')});
                this.renderer.setSize( this.ww, this.wh );

                this.scene = new THREE.Scene();

                this.camera = new THREE.PerspectiveCamera(50, this.ww/this.wh, 1, 10000 );
                this.scene.add( this.camera );

                this.light = new THREE.PointLight(0xffffff, 1, 1300);
            
                this.light.position.set( 0, 0, this.lightZ );
                this.scene.add(this.light);

                document.addEventListener( 'mousemove', _getPageValues );
                //console.log(this)
               
                _self.elements = new THREE.Object3D();
                for( var i = 0; i <= _self.numContainers; i++ ) _createBox(i, null);
                
                _self.farest = -_self.numBoxes * _self.boxDistance;
                _self.scene.add(_self.elements);
                
                _animate();
                
            };
            
            _getPageValues = function(e)
            {
                _self.cx = (_self.ww * .5) - e.pageX;
                _self.cy =  (_self.wh * .5) - e.pageY;
            }
            
            _createBox = function(i, $containerReference, $z)
            {              
	           
                var $boxSize = getRandomInt(_self.boxWidth) + 1;     
               var $geometry = new THREE.BoxGeometry($boxSize,$boxSize,$boxSize);
	           var $translate = new THREE.Matrix4().makeTranslation(0,0,0);

               var $container;
               if ( $containerReference == null )$container = new THREE.Object3D();
               else $container = $containerReference; 
                
                var $color = _returnColor(i);

                for(var j = 0; j < _self.numBoxes; j++ )
                {
                    var $material = new THREE.MeshLambertMaterial({color: $color });
                    var $cube = new THREE.Mesh($geometry, $material);
                    var $rotation =  new THREE.Matrix4().makeRotationZ(getRandomInt(360) );
                    $cube.applyMatrix( new THREE.Matrix4().multiplyMatrices( $rotation, $translate ) );
                    $cube.position.x = getRandomInt(_self.ww) - (_self.ww * .5);   
                    $cube.position.y = getRandomInt(_self.wh) - (_self.wh * .5);   
                    $container.add( $cube );

                }

                if ( $containerReference == null )
                {
                $container.position.z = -i * _self.boxDistance;
                _self.elements.add($container);
                }
                else $container.position.z = $z;
               
                
                   
               
            };
            
            _returnColor = function(i)
            {
                var $color;
                if ( _self.colorScheme == 'random' )
                {
                   _self.r = getRandomInt(255);
                   _self.g = getRandomInt(255);
                   _self.b = getRandomInt(255);
                    
                    $color = "rgb("+_self.r+","+_self.g+","+_self.b+")";
                }
                else if (_self.colorScheme == 'blue')
                {
                    $color = _self.colors[i%_self.colors.length]   
                }
                else
                {
                    _self.r+=3;
                    _self.g+=5;
                    _self.b++;                

                    if ( _self.r >= 256 ) _self.r = getRandomInt(255);
                    if ( _self.g >= 256 ) _self.g = getRandomInt(255);
                    if ( _self.b >= 256 ) _self.b = getRandomInt(255);
                    
                    $color = "rgb("+_self.r+","+_self.g+","+_self.b+")";
                }
                
                console.log( _self.r+","+_self.g+","+_self.b )
                
                return $color;
            }
            
            _animate = function()
            {
                requestAnimationFrame( _animate );

                for( var i = 0; i <= _self.numContainers; i++ )
                {
                    var $container = _self.elements.children[i];
                    if( _self.camera.position.z <= $container.position.z )
                    {                    
                        for(var j = 0; j < $container.children.length; j++ )$container.remove($container.children[j]);
                        
                        _self.farest -= _self.boxDistance;
                        _createBox(i, $container, _self.farest);
                    };
                };
                
                _self.cz -= _self.tunnelSpeed - Math.abs( _self.cy * .05);
                
               
                TweenMax.to( _self.light.rotation, _self.lag, {x:_self.cy * -.5, y:_self.cx * -.5, z:_self.cy * .1, ease:Quint.easeOut } )
                
                TweenMax.to( _self.light.position, _self.lag, {z:_self.cz-_self.lightZ, x:_self.cx * _self.lightX, y:_self.cy * -_self.lightY,  ease:Quint.easeOut } )
                TweenMax.to( _self.camera.position, _self.lag, {z:_self.cz - _self.cameraZ, x:_self.cx * _self.cameraX, y:_self.cy * -_self.cameraY, ease:Quint.easeOut } )
                
                
                _self.renderer.render( _self.scene, _self.camera );
            }
        };
        
        function getRandomInt( $n )
		{
			return Math.floor((Math.random()*$n)+1);	
		}
        
        
        space.init();
        
        
        gui.add( space, 'tunnelSpeed', 10, 100 );
        gui.add( space, 'lag', 0, 5 );
        
        gui.add( space, 'lightX', 0, 1 );
        gui.add( space, 'lightY', 0, 1 );
        gui.add( space, 'lightZ', -2000, 2000 );
        gui.add( space, 'cameraX', 0, 1 );
        gui.add( space, 'cameraY', 0, 1 );
        
        gui.add( space, 'cameraZ', -2000, 2000 );
        
        gui.add( space, 'numBoxes', 3, 50 ).step(1);
        gui.add(space, 'boxWidth', 1, 100);
        
        gui.add( space, 'boxDistance', 10, 500 );
        gui.add( space, 'colorScheme', [ 'random', 'sequenced', 'blue' ] );