diff --git a/js/script.js b/js/script.js
index 5bb3ddb..3634a8a 100755
--- a/js/script.js
+++ b/js/script.js
@@ -70,273 +70,213 @@ var quicksortUtil = (function (){
     return quicksortUtil;
 })();
 
-var animationUtil= (function() {
-    var animationUtil = {
-
-    };
-    return animationUtil;    
-})();
-
-// // Takes in a list of objects and then uses the compare function to determine the ordering. 
-// // It's expected that the comparsion functon returns -1 when a is less than b, 1 when a is greater than b, and 0 when they are equal. 
-// Array.prototype.quicksort= function (compare){
-//     //One element is already sorted.
-//     if (this.length <= 1){
-//         return this;
-//     }
-//     //Simple way to pick the pivot point. 
-//     var pivotIndex = Math.floor(this.length/2);
-//     var pivot = this[pivotIndex];
-
-//     //Arrays holding the elements that have been seperated into less and more
-//     var less = [];
-//     var more = [];
-
-//     //Simple for look using compare
-//     for(var i = 0; i <this.length; i++){
-//         if(i != pivotIndex){
-//             var next = this[i];
-//             if(-1 == compare(next,pivot)){
-//                 less.push(next);
-//             }
-//             else {
-//                 more.push(next);
-//             }            
-//         }
-//     }    
-//     //Return the array recursively sorted
-//     return less.quicksort(compare).concat([pivot],more.quicksort(compare));
-// };
-
-// //Takes in two numbers and compares them in the standard way. 
-// var numCompare = function(a,b){
-//     var state = 0;
-//     if (a<b){
-//         state = -1;
-//     }
-//     else if (b<a){
-//         state = 1;
-//     }
-//     return state;            
-// };
-
-// //Numberical quicksort. 
-// Array.prototype.numQuicksort = function(){return this.quicksort(numCompare);};
-
-// //Takes in a list and outputs an object that contains a pivot point, all the items in the list "less" than the pivot , and all the items  in the "more" than the pivot. 
-// //Example input: [3,2,4,5], numCompare
-// //Example output: {less:[2],pivot:3, more:[4,5]}
-// Array.prototype.quicksortStep = function (compare){
-//     if (this.length <= 1){
-//         return this;
-//     }
-//     var pivotIndex = Math.floor(this.length/2);
-//     var pivot = this[pivotIndex];
-//     var less = [];
-//     var more = [];
-//     for(var i = 0; i <this.length; i++){
-//         if(i != pivotIndex){
-//             var next = this[i];
-//             if(-1 == compare(next,pivot)){
-//                 less.push(next);
-//             }
-//             else {
-//                 more.push(next);
-//             }            
-//         }
-//     }    
-//     return {less:less, pivot:pivot, more: more};
-// };
-
-/**
- * Provides requestAnimationFrame in a cross browser way.
- * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
- */
-
-if ( !window.requestAnimationFrame ) {
-	window.requestAnimationFrame = ( function() {
-
-		return window.webkitRequestAnimationFrame ||
-		window.mozRequestAnimationFrame ||
-		window.oRequestAnimationFrame ||
-		window.msRequestAnimationFrame ||
-		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
-
-			window.setTimeout( callback, 1000 / 60 );
-
-		};
-
-	} )();
-}
-
-
-//Displaying everything
+//Used to display everything
 //https://github.com/mrdoob/three.js/blob/master/examples/canvas_particles_random.html
 //http://mrdoob.com/projects/voxels/#A/afhaddadkShahhShaffShSh
 //Modified to get the quicksort out there correctly. 
-var container;
-var camera, scene, renderer, group, particle;
-var mouseX = 0, mouseY = 0;
-
-var windowHalfX = window.innerWidth / 2;
-var windowHalfY = window.innerHeight / 2;
-
-var projector,ray, objectHovered,
-    mouse3D, isMouseDown = false, onMouseDownPosition,
-    radious = 5000, theta = 45, onMouseDownTheta = 45, phi = 60, onMouseDownPhi = 60,
-    isShiftDown = false;
-var buttons; 
-var speed = 1000;
-
-//The particles that need to be quicksorted away 
-var leftovers;
+var animationUtil= (function() {
+    //Set up some variables and independent variables
+    var animationUtil = {
+        windowHalfX : window.innerWidth / 2
+        ,windowHalfY : window.innerHeight / 2
+        ,isMouseDown: false
+        ,radius: 5000
+        ,theta : 45
+        ,onMouseDownTheta: 45
+        ,phi: 60
+        ,onMouseDownPhi: 60
+        ,speed : 1000
+        ,scene: (function(){
+            var scene = new THREE.Scene();
+            return scene;
+            })()
+        ,group: new THREE.Object3D()
+        ,onMouseDownPosition: new THREE.Vector2()
+    };
 
-setup();
-init();
-animate();
-
-function setup(){
-    //Setting up the controls and container
-    buttons = $( "#radio" ).buttonset()
-        .click(function(event){
-        var target = $(event.target);
-        switch(target.attr('id')){
-            case("speed1"):
-            speed = 3000;
-            break;
-
-            case("speed2"):
-            speed = 1000; 
-            break;
-
-            case("speed3"):
-            speed = 333;
-            break;
+    //Set up the first round of variables that depends on other constants defined previously
+    $.extend(animationUtil,{     
+        camera: (function(){
+            var camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
+            camera.position.x = animationUtil.radius * Math.sin( animationUtil.theta * Math.PI / 360 ) * Math.cos( animationUtil.phi * Math.PI / 360 );
+            camera.position.y = animationUtil.radius * Math.sin( animationUtil.phi * Math.PI / 360 );
+            camera.position.z = animationUtil.radius * Math.cos( animationUtil.theta * Math.PI / 360 ) * Math.cos( animationUtil.phi * Math.PI / 360 );
+            return camera;
+            })()
+        ,renderer: (function(){
+            var renderer = new THREE.CanvasRenderer();
+            renderer.setSize( window.innerWidth, window.innerHeight );
+            $("#container").append( renderer.domElement );
+            return renderer;
+            })()
+        ,createParticles: (function(){            
+            var PI2 = Math.PI * 2;
+            var program = function ( context ) {
+	        context.beginPath();
+	        context.arc( 0, 0, 1, 0, PI2, true );
+	        context.closePath();
+	        context.fill();
+            };        
             
-            default: break;
+            //Creating a group to hold all the particles
+            for ( var i = 0; i < 600; i++ ) {
+	        var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0, program: program } ) );
+	        particle.position.x = Math.random() * 2000 - 1000;
+	        particle.position.y = Math.random() * 2000 - 1000;
+	        particle.position.z = Math.random() * 2000 - 1000;
+	        particle.scale.x = particle.scale.y = 50;
+	        animationUtil.group.add( particle );
+            }
+            })
+        ,animate: function() {
+            requestAnimationFrame( animationUtil.animate );
+            animationUtil.render();
         }
-
-        })
-        .parent()
-        .offset({top:10, left:100});
-
-    container = document.createElement( 'div' );
-
-    document.body.appendChild( container );
-
-    //Getting the camera ready to be moved correctly.
-    camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
-    camera.position.x = radious * Math.sin( theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );
-    camera.position.y = radious * Math.sin( phi * Math.PI / 360 );
-    camera.position.z = radious * Math.cos( theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );
-
-    scene = new THREE.Scene();
-    //http://nooshu.com/debug-axes-in-three-js
-    //Adding in an axis
-    var v = function (x,y,z){ 
-            return new THREE.Vertex(new THREE.Vector3(x,y,z)); 
-    };
-    
-    //Create axis (point1, point2, colour)
-    var createAxis = function (p1, p2, color){
-            var line, lineGeometry = new THREE.Geometry(),
-            lineMat = new THREE.LineBasicMaterial({color: color, lineWidth: 1});
-            lineGeometry.vertices.push(p1, p2);
-            line = new THREE.Line(lineGeometry, lineMat);
-            scene.add(line);
-    };       
-
-    var axisLength= 3000;
-    createAxis(v(0, 0, -axisLength), v(0, 0, axisLength), 0x0000FF);
-    group = new THREE.Object3D();
-    scene.add( group );
-}
-
-
-
-function init() {
-
-    var PI2 = Math.PI * 2;
-    var program = function ( context ) {
-	context.beginPath();
-	context.arc( 0, 0, 1, 0, PI2, true );
-	context.closePath();
-	context.fill();
-    };        
+        ,render : function() {
+            animationUtil.camera.lookAt( animationUtil.scene.position );
+            animationUtil.renderer.render( animationUtil.scene, animationUtil.camera );
+        }
+        ,startup: function(){
+            this.createParticles();
+            }
+        });
     
-    //Creating a group to hold all the particles
-    for ( var i = 0; i < 600; i++ ) {
-	particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0, program: program } ) );
-	particle.position.x = Math.random() * 2000 - 1000;
-	particle.position.y = Math.random() * 2000 - 1000;
-	particle.position.z = Math.random() * 2000 - 1000;
-	particle.scale.x = particle.scale.y = 50;
-	group.add( particle );
-    }
-
-    //Three js stuff
-    renderer = new THREE.CanvasRenderer();
-    renderer.setSize( window.innerWidth, window.innerHeight );
-    container.appendChild( renderer.domElement );
-    onMouseDownPosition = new THREE.Vector2();
-
-    //Set up event controls
-    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-    document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-    leftovers =[group.children]; 
-}
-
+    return animationUtil;    
+})();
 
-//Capture the mouse down positon
-function onDocumentMouseDown( event ) {
-    event.preventDefault();
+var interfaceUtil = (function (){
+    var interfaceUtil = {
+        createInterface: function(){
+            $( "#radio" ).buttonset()
+                .click(function(event){
+                    var target = $(event.target);
+                    switch(target.attr('id')){
+                    case("speed1"):
+                        animationUtil.speed = 3000;
+                        break;
+                        
+                    case("speed2"):
+                        animationUtil.speed = 1000; 
+                        break;
+                        
+                    case("speed3"):
+                        animationUtil.speed = 333;
+                        break;
+                        
+                    default: break;
+                    }
 
-    isMouseDown = true;
+                })
+                .parent()
+                .offset({top:10, left:100});
+        }
+        ,findRequestAnimationFrame: function() {
+            /**
+             * Provides requestAnimationFrame in a cross browser way.
+             * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+             */
+            if ( !window.requestAnimationFrame ) {
+	        window.requestAnimationFrame = ( function() {
+		    return window.webkitRequestAnimationFrame ||
+		        window.mozRequestAnimationFrame ||
+		        window.oRequestAnimationFrame ||
+		        window.msRequestAnimationFrame ||
+		        function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
+			    window.setTimeout( callback, 1000 / 60 );
+		        };
+	        } )();
+            }
 
-    onMouseDownTheta = theta;
-    onMouseDownPhi = phi;
-    onMouseDownPosition.x = event.clientX;
-    onMouseDownPosition.y = event.clientY;
-}
+        }
+        ,drawAxis: function(){
+            //Getting the camera ready to be moved correctly.    
+            //http://nooshu.com/debug-axes-in-three-js
+            //Adding in an axis
+            var v = function (x,y,z){ 
+                return new THREE.Vertex(new THREE.Vector3(x,y,z)); 
+            };
+            
+            //Create axis (point1, point2, colour)
+            var createAxis = function (p1, p2, color){
+                var line, lineGeometry = new THREE.Geometry(),
+                    lineMat = new THREE.LineBasicMaterial({color: color, lineWidth: 1});
+                lineGeometry.vertices.push(p1, p2);
+                line = new THREE.Line(lineGeometry, lineMat);
+                animationUtil.scene.add(line);
+            };       
+
+            var axisLength= 3000;
+            createAxis(v(0, 0, -axisLength), v(0, 0, axisLength), 0x0000FF);
+
+            animationUtil.scene.add( animationUtil.group );
+        }
+        //Track information and update view
+        , onDocumentMouseMove: function( event ) {
+            event.preventDefault();
+            if ( animationUtil.isMouseDown ) {
+                
+	        animationUtil.theta = - ( ( event.clientX - animationUtil.onMouseDownPosition.x ) * 0.5 ) + animationUtil.onMouseDownTheta;
+	        animationUtil.phi = ( ( event.clientY - animationUtil.onMouseDownPosition.y ) * 0.5 ) + animationUtil.onMouseDownPhi;
+                
+	        animationUtil.phi = Math.min( 180, Math.max( 0, animationUtil.phi ) );
+
+	        animationUtil.camera.position.x = animationUtil.radius * Math.sin( animationUtil.theta * Math.PI / 360 ) * Math.cos( animationUtil.phi * Math.PI / 360 );
+	        animationUtil.camera.position.y = animationUtil.radius * Math.sin( animationUtil.phi * Math.PI / 360 );
+	        animationUtil.camera.position.z = animationUtil.radius * Math.cos( animationUtil.theta * Math.PI / 360 ) * Math.cos( animationUtil.phi * Math.PI / 360 );
+	        animationUtil.camera.updateMatrix();
 
-//Track information and update view
-function onDocumentMouseMove( event ) {
-    event.preventDefault();
+            }
+            animationUtil.render();
+        }
+        //Capture the mouse down positon
+        , onDocumentMouseDown: function ( event ) {
+            event.preventDefault();
+            animationUtil.isMouseDown = true;
+            animationUtil.onMouseDownTheta = animationUtil.theta;
+            animationUtil.onMouseDownPhi = animationUtil.phi;
+            animationUtil.onMouseDownPosition.x = event.clientX;
+            animationUtil.onMouseDownPosition.y = event.clientY;
+        }
+        , onDocumentMouseUp: function( event ) {
+            //Stop tracking info
+            event.preventDefault();
+            animationUtil.isMouseDown = false;
+        }
 
-    if ( isMouseDown ) {
-        
-	theta = - ( ( event.clientX - onMouseDownPosition.x ) * 0.5 ) + onMouseDownTheta;
-	phi = ( ( event.clientY - onMouseDownPosition.y ) * 0.5 ) + onMouseDownPhi;
+        ,createAnimationControls: function(){
+            $(document).mousemove( this.onDocumentMouseMove)
+                .mousedown(this.onDocumentMouseDown)
+                .mouseup(this.onDocumentMouseUp);
+ 
+        }
+        ,startup: function(){
+            this.createInterface();
+            this.findRequestAnimationFrame();
+            this.drawAxis();
+            this.createAnimationControls();
+        }
         
-	phi = Math.min( 180, Math.max( 0, phi ) );
 
-	camera.position.x = radious * Math.sin( theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );
-	camera.position.y = radious * Math.sin( phi * Math.PI / 360 );
-	camera.position.z = radious * Math.cos( theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );
-	camera.updateMatrix();
+    };
+    return interfaceUtil;
+})();
 
-    }
-    render();
 
-}
+var model = (function() {
+    
+});
 
-//Stop tracking info
-function onDocumentMouseUp( event ) {
-    event.preventDefault();
-    isMouseDown = false;
-}
+//The particles that need to be quicksorted away 
+var leftovers;
 
+(function(){
+    interfaceUtil.startup();
+    animationUtil.startup();
+    animationUtil.animate();
+    leftovers =[animationUtil.group.children]; 
+})();
 
-function animate() {
-    requestAnimationFrame( animate );
-    render();
-}
 
-function render() {
-    camera.lookAt( scene.position );
-    renderer.render( scene, camera );
-}
 
 
 
@@ -385,9 +325,9 @@ var changeFunction = function(){
         });
     };
 
-    setTimeout(changePivotColor.bind(quicksorted),speed*0.2);    
-    setTimeout(changeMoreColor.bind(quicksorted),speed*0.4);
-    setTimeout(changeLessColor.bind(quicksorted),speed*0.6);
+    setTimeout(changePivotColor.bind(quicksorted),animationUtil.speed*0.2);    
+    setTimeout(changeMoreColor.bind(quicksorted),animationUtil.speed*0.4);
+    setTimeout(changeLessColor.bind(quicksorted),animationUtil.speed*0.6);
 
     var moveLess = function(){
         quicksorted.less.forEach(function(point){
@@ -406,14 +346,14 @@ var changeFunction = function(){
     };
 
     var clear = function(){
-        group.children.forEach(function(point){
+        animationUtil.group.children.forEach(function(point){
             point.material.color.setRGB(0,0,0);
             });
         };
 
-    setTimeout(moveLess.bind(quicksorted,lessZ),0.7*speed);
-    setTimeout(movePivot.bind(quicksorted,pivotZ),0.8*speed);
-    setTimeout(moveMore.bind(quicksorted,moreZ),0.9*speed);
+    setTimeout(moveLess.bind(quicksorted,lessZ),0.7*animationUtil.speed);
+    setTimeout(movePivot.bind(quicksorted,pivotZ),0.8*animationUtil.speed);
+    setTimeout(moveMore.bind(quicksorted,moreZ),0.9*animationUtil.speed);
     setTimeout(clear,950);
     
     
@@ -430,8 +370,8 @@ var changeFunction = function(){
         return quicksortUtil.numericalCompare(a.length,b.length);
     });
 
-    setTimeout(changeFunction,speed);
+    setTimeout(changeFunction,animationUtil.speed);
 };
 
-setTimeout(changeFunction,speed);
+setTimeout(changeFunction,animationUtil.speed);