diff --git a/js/main.js b/js/main.js
index 28fcb95e6fb7250c299465d5f91abdb3d8d7c781..afb37063b334635834d5e58d7a9e8aa361134b53 100644
--- a/js/main.js
+++ b/js/main.js
@@ -7,6 +7,7 @@ var Parallel = Parallel || {};
 
 $(function(){
 
-    threeSetup();
+    var threeMain = ThreeMain();
+    setupNavBar(threeMain);
 
 });
diff --git a/js/navbar.js b/js/navbar.js
index dee5fb96822d132176ee69e24d94aff77e415a86..379c344407093bd6cf0e4b4598f2c5b8a02b4e16 100644
--- a/js/navbar.js
+++ b/js/navbar.js
@@ -2,7 +2,7 @@
  * Created by aghassaei on 1/7/15.
  */
 
-$(function(){
+function setupNavBar(threeSpace){
 
     var allMenus = $(".navMenu");
     var allNavMenuLinks = $(".menuHoverControls");
@@ -47,4 +47,14 @@ $(function(){
         return false;
     });
 
-});
\ No newline at end of file
+    //clear canvas
+    $("#clearAll").click(function(){
+        _.each(threeSpace.scene.children, function(object) {
+          if (object instanceof THREE.Mesh){
+                threeSpace.scene.remove(object);
+            }
+        });
+        threeSpace.render();
+    });
+
+}
\ No newline at end of file
diff --git a/js/threeMain.js b/js/threeMain.js
new file mode 100644
index 0000000000000000000000000000000000000000..753a6cc3ec617ffe9aeb762cf7cf89e246dddb41
--- /dev/null
+++ b/js/threeMain.js
@@ -0,0 +1,91 @@
+/**
+ * Created by aghassaei on 1/8/15.
+ */
+
+function ThreeMain(){
+
+    var self = this;
+
+    var container = $("#threeContainer");
+    var camera, scene, renderer, controls;
+
+    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+    camera.position.z = 500;
+
+    scene = new THREE.Scene();
+    scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
+
+    controls = new THREE.OrbitControls( camera, container.get(0) );
+    controls.addEventListener( 'change', render );
+
+    // world
+
+    var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
+    var material = new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } );
+
+    for ( var i = 0; i < 500; i ++ ) {
+
+        var mesh = new THREE.Mesh( geometry, material );
+        mesh.position.x = ( Math.random() - 0.5 ) * 1000;
+        mesh.position.y = ( Math.random() - 0.5 ) * 1000;
+        mesh.position.z = ( Math.random() - 0.5 ) * 1000;
+        mesh.updateMatrix();
+        mesh.matrixAutoUpdate = false;
+        scene.add( mesh );
+
+    }
+
+    // lights
+
+    light = new THREE.DirectionalLight( 0xffffff );
+    light.position.set( 1, 1, 1 );
+    scene.add( light );
+
+    light = new THREE.DirectionalLight( 0x002288 );
+    light.position.set( -1, -1, -1 );
+    scene.add( light );
+
+    light = new THREE.AmbientLight( 0x222222 );
+    scene.add( light );
+
+
+    // renderer
+
+    renderer = new THREE.WebGLRenderer( { antialias: false } );
+    renderer.setClearColor( scene.fog.color, 1 );
+    renderer.setSize( window.innerWidth, window.innerHeight );
+
+    container.append(renderer.domElement);
+
+    window.addEventListener( 'resize', onWindowResize, false );
+
+    animate();
+
+    function onWindowResize() {
+
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+
+      renderer.setSize( window.innerWidth, window.innerHeight );
+      render();
+    }
+
+    function animate() {
+
+      requestAnimationFrame( animate );
+      controls.update();
+    }
+    
+    function render(){
+        
+      renderer.render( scene, camera );
+    }
+    
+    return {//public properties
+        scene:scene,
+//        camera:camera,
+//        controls:controls,
+//        renderer:renderer,
+        render:render
+    }
+}
\ No newline at end of file
diff --git a/js/threeSetup.js b/js/threeSetup.js
deleted file mode 100644
index 1efa3653672bbe63e6c433cb8b0bee73094a31a4..0000000000000000000000000000000000000000
--- a/js/threeSetup.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Created by aghassaei on 1/7/15.
- */
-
-function threeSetup(){
-
-    var camera, controls, scene, renderer;
-
-    init();
-    animate();
-
-    function init() {
-
-      var container = $("#threeContainer");
-
-      camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
-      camera.position.z = 500;
-
-      controls = new THREE.OrbitControls( camera, container.get(0) );
-      controls.addEventListener( 'change', render );
-
-      scene = new THREE.Scene();
-      scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
-
-      // world
-
-      var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
-      var material = new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } );
-
-      for ( var i = 0; i < 500; i ++ ) {
-
-        var mesh = new THREE.Mesh( geometry, material );
-        mesh.position.x = ( Math.random() - 0.5 ) * 1000;
-        mesh.position.y = ( Math.random() - 0.5 ) * 1000;
-        mesh.position.z = ( Math.random() - 0.5 ) * 1000;
-        mesh.updateMatrix();
-        mesh.matrixAutoUpdate = false;
-        scene.add( mesh );
-
-      }
-
-      // lights
-
-      light = new THREE.DirectionalLight( 0xffffff );
-      light.position.set( 1, 1, 1 );
-      scene.add( light );
-
-      light = new THREE.DirectionalLight( 0x002288 );
-      light.position.set( -1, -1, -1 );
-      scene.add( light );
-
-      light = new THREE.AmbientLight( 0x222222 );
-      scene.add( light );
-
-
-      // renderer
-
-      renderer = new THREE.WebGLRenderer( { antialias: false } );
-      renderer.setClearColor( scene.fog.color, 1 );
-      renderer.setSize( window.innerWidth, window.innerHeight );
-
-      container.append(renderer.domElement);
-
-      window.addEventListener( 'resize', onWindowResize, false );
-
-    }
-
-    function onWindowResize() {
-
-      camera.aspect = window.innerWidth / window.innerHeight;
-      camera.updateProjectionMatrix();
-
-      renderer.setSize( window.innerWidth, window.innerHeight );
-
-      render();
-
-    }
-
-    function animate() {
-
-      requestAnimationFrame( animate );
-      controls.update();
-
-    }
-
-    function render() {
-      renderer.render( scene, camera );
-    }
-}
\ No newline at end of file
diff --git a/main.html b/main.html
index 9c0f7a8663b13d3b1adb1bd302083a5500327c30..16e88208fe5770af32ac0e9d62b3ef443b050c27 100644
--- a/main.html
+++ b/main.html
@@ -26,7 +26,7 @@
     <!--threeJS-->
     <script src="dependencies/three.js"></script>
     <script src="dependencies/OrbitControls.js"></script>
-    <script src="js/threeSetup.js"></script>
+    <script src="js/threeMain.js"></script>
 
     <!--multi-threading-->
     <script src="dependencies/parallel.js"></script>
@@ -63,16 +63,7 @@
           </ul>
         </li>
        </ul>
-       <form class="navbar-form navbar-right" action="#" role="search">
-        <div class="form-group">
-          <div class="input-group">
-            <input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
-            <span class="input-group-btn">
-              <button type="submit" class="btn"><span class="fui-search"></span></button>
-            </span>
-          </div>
-        </div>
-      </form>
+       <a href="#fakelink" id="clearAll" class="navbar-right btn btn-lg btn-primary">Clear All</a>
     </div><!-- /.navbar-collapse -->
   </nav>
 <div id="controls1Menu" class="row navMenu">