made the motion a model [issue #2]

Author: LeoMcA

index.html

@@ -11,7 +11,7 @@
     <div id="fullscreen-container">
       <div class="container">
 
-        <div id="motion"></div>
+        <div id="motion">{{ main.motion }}</div>
 
         <div ng-class="{ negative: main.timer.now <= 0 }" id="timer">
           <span id="minutes" class="digits">{{ main.timer.now | minutes }}</span><span class="unit">m</span><span id="seconds" class="digits">{{ main.timer.now | seconds }}</span><span class="unit">s</span>
@@ -56,7 +56,7 @@ <h4 class="modal-title">Settings</h4>
                 <div class="form-group">
                   <label for="motion-input" class="col-sm-2 control-label">Motion</label>
                   <div class="col-sm-10">
-                    <input type="text" class="form-control" id="motion-input" placeholder="Motion">
+                    <input ng-model="main.motion" ng-change="main.centre()" type="text" class="form-control" id="motion-input" placeholder="Motion">
                   </div>
                 </div>
 

script.js

@@ -50,6 +50,10 @@ app.controller('MainController', ['$interval', function($interval){
   }
 
   this.timer = new this.Timer(5 * 60 * 1000, [4 * 60 * 1000, 1 * 60 * 1000, 0, -15 * 1000]);
+  
+  this.centre = function(){
+    centre();
+  }
 }]);
 
 app.filter('minutes', function(){
@@ -130,7 +134,6 @@ app.controller('ButtonsController', function(){
 
 app.controller("SettingsController", function(){
   this.set = function(main){
-    $('#motion').text($('#motion-input').val());
     centre();
     var duration = Math.floor(parseInt($('#timer-minutes-input').val(), 10) * 60 + parseInt($('#timer-seconds-input').val() ,10)) * 1000;
     var protectedLength = Math.floor(parseInt($('#protected-minutes-input').val(), 10) * 60 + parseInt($('#protected-seconds-input').val() ,10)) * 1000;
@@ -202,6 +205,7 @@ app.controller("DebatersController", function(){
 
 function centre(){
   var margin = ($(window).height() - $('.progress').outerHeight())/2 + $('.container').offset().top - $('.progress').offset().top;
+  console.log(margin, $('.container').offset().top);
   if(margin < 0) margin = 0;
   $('.container').css('margin-top', margin);
   $('#minutes').css('padding-left', $('.unit:last').outerWidth() + 20);