UI refactor to less gloabl

src/git.js

@@ -22,8 +22,6 @@ function GitEngine(options) {
   this.generalArgs = [];
 
   events.on('processCommand', _.bind(this.dispatch, this));
-
-  this.init();
 }
 
 GitEngine.prototype.init = function() {

src/index.html

@@ -128,8 +128,6 @@
   </script>
 
   <!-- My files! -->
-  <script src="main.js"></script>
-
   <script src="async.js"></script>
   <script src="constants.js"></script>
   <script src="errors.js"></script>
@@ -152,5 +150,7 @@
   <!-- levels -->
   <script src="levels.js"></script>
 
+  <!-- on ready -->
+  <script src="main.js"></script>
 </body>
 </html>

src/main.js

@@ -3,18 +3,14 @@
  */
 var events = _.clone(Backbone.Events);
 
-var gitEngine = null;
+var ui = null;
-var gitVisuals = null;
+var animationFactory = new AnimationFactory();
-
-var commandCollection = null;
-var commandBuffer = null;
-var animationFactory = null;
 
 var paper = null;
 
 $(document).ready(function(){
-  initUI();
+  ui = new UI();
-  var mainVis = new Visualization({
+  mainVis = new Visualization({
     el: $('#canvasWrapper')[0]  
   });
 
@@ -25,22 +21,21 @@ $(document).ready(function(){
   }
 });
 
-function initUI() {
+function UI() {
   // static classes
-  animationFactory = new AnimationFactory();
+  this.commandCollection = new CommandCollection();
-  commandCollection = new CommandCollection();
 
-  commandBuffer = new CommandBuffer({
+  this.commandBuffer = new CommandBuffer({
-    collection: commandCollection
+    collection: this.commandCollection
   });
 
-  commandPromptView = new CommandPromptView({
+  this.commandPromptView = new CommandPromptView({
     el: $('#commandLineBar'),
-    collection: commandCollection
+    collection: this.commandCollection
   });
-  commandLineHistoryView = new CommandLineHistoryView({
+  this.commandLineHistoryView = new CommandLineHistoryView({
     el: $('#commandLineHistory'),
-    collection: commandCollection
+    collection: this.commandCollection
   });
 
   $('#commandTextField').focus();

src/visuals.js

@@ -25,15 +25,18 @@ var Visualization = Backbone.View.extend({
       branches: this.branchCollection,
       gitVisuals: this.gitVisuals
     });
+    this.gitEngine.init();
     this.gitVisuals.assignGitEngine(this.gitEngine);
 
     // needs to be called before raphael ready
     this.myResize();
+    $(window).on('resize', _.bind(this.myResize, this));
+
     this.gitVisuals.drawTreeFirstTime();
   },
 
   myResize: function() {
-    var smaller = 10;
+    var smaller = 1;
     var el = this.el;
 
     var left = el.offsetLeft;