various updates to lazy to document why

Former-commit-id: 21224eb61a2b5e060b38cca3bfd5e0ccb85f95d7

16 files changed, 159 insertions, 133 deletions

diff --git a/www/css/style.css b/www/css/style.css
index 0366ed84..19d08643 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -891,7 +891,7 @@ body { font-family: sans-serif; }
 
 .zmPullup
 {
-    background-color:#EB9532;
+    background-color:#E3BE1C;
 }
 
 #flyoutmenu {
diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index 4ce8bfbc..7d446bdc 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -50,6 +50,7 @@ angular.module('zmApp.controllers')
          'eventServerMonitors':'', // list of monitors to notify from ES
         'eventServerInterval':'', // list of intervals for all monitors
         'refreshSec':'2', // timer value for frame change in sec
+        'enableLogs':true,
         'enableDebug':false, // if enabled with log messages with "debug"
         'usePin':false,
         'pinCode':'',
@@ -116,7 +117,8 @@ angular.module('zmApp.controllers')
     //--------------------------------------------------------------------------
     function zmLog(val,logtype)
     {
-        $fileLogger.log(logtype, val);
+        if (loginData.enableLogs)
+            $fileLogger.log(logtype, val);
     }
      
     
@@ -134,7 +136,7 @@ angular.module('zmApp.controllers')
     // separate out a debug so we don't do this if comparison for normal logs
     function zmDebug(val)
     {
-        if (loginData.enableDebug)
+     if (loginData.enableDebug && loginData.enableLogs)
             $fileLogger.debug(val);
     }
     
@@ -425,12 +427,18 @@ angular.module('zmApp.controllers')
                     loginData.packMontage  = false;
                 }
                 
-                 if (typeof loginData.forceNetworkStop == 'undefined')
+                if (typeof loginData.forceNetworkStop == 'undefined')
                 {
                     zmDebug ("forceNetwork does not exist. Setting to false");
                     loginData.forceNetworkStop  = false;
                 }
                 
+                if (typeof loginData.enableLogs == 'undefined')
+                {
+                    zmDebug ("enableLogs does not exist. Setting to true");
+                    loginData.enableLogs  = true;
+                }
+                
                 
                 
                  if (typeof loginData.defaultPushSound == 'undefined')
diff --git a/www/js/LogCtrl.js b/www/js/LogCtrl.js
index e9684ff8..2fde7129 100644
--- a/www/js/LogCtrl.js
+++ b/www/js/LogCtrl.js
@@ -2,7 +2,7 @@
 /* jslint browser: true*/
 /* global saveAs, cordova,StatusBar,angular,console,moment */
 
-angular.module('zmApp.controllers').controller('zmApp.LogCtrl', ['$scope', '$rootScope','zm', '$ionicModal', 'ZMDataModel', '$ionicSideMenuDelegate', '$fileLogger', '$cordovaEmailComposer', '$ionicPopup', '$timeout', '$ionicHistory', '$state', '$interval', function ($scope, $rootScope,zm, $ionicModal, ZMDataModel, $ionicSideMenuDelegate, $fileLogger, $cordovaEmailComposer, $ionicPopup, $timeout, $ionicHistory, $state, $interval) {
+angular.module('zmApp.controllers').controller('zmApp.LogCtrl', ['$scope', '$rootScope','zm', '$ionicModal', 'ZMDataModel', '$ionicSideMenuDelegate', '$fileLogger', '$cordovaEmailComposer', '$ionicPopup', '$timeout', '$ionicHistory', '$state', '$interval', '$ionicLoading', function ($scope, $rootScope,zm, $ionicModal, ZMDataModel, $ionicSideMenuDelegate, $fileLogger, $cordovaEmailComposer, $ionicPopup, $timeout, $ionicHistory, $state, $interval, $ionicLoading) {
     $scope.openMenu = function () {
         $ionicSideMenuDelegate.toggleLeft();
     };
@@ -152,17 +152,21 @@ saveAs(blob, fname);
     {
         //console.log ("GETTING LOGS");
         
+         $ionicLoading.show({
+                    template: "retrieving logs...",
+                    noBackdrop: true,
+                    duration: zm.loadingTimeout
+                });
         
         $fileLogger.getLogfile().then(function (l) {
 
                 
                 $scope.zmLog.logString = l.split('\n').reverse().join('\n');
-                //$scope.zmLog.logString = Math.random() + $scope.zmLog.logString;
-           // console.log ("UPDATING LOGS");
-                //console.log ("LOGS" + logstring);
+                $ionicLoading.hide();
             },
             function (error) {
                 $scope.zmLog.logString = "Error getting log: " + JSON.stringify(error);
+                $ionicLoading.hide();
             });
     }
 
diff --git a/www/js/LoginCtrl.js b/www/js/LoginCtrl.js
index 100398ad..72fca590 100644
--- a/www/js/LoginCtrl.js
+++ b/www/js/LoginCtrl.js
@@ -632,7 +632,7 @@ angular.module('zmApp.controllers').controller('zmApp.LoginCtrl', ['$scope', '$r
             .finally ( function (ans) 
             {
             
-                zmAutoLogin.doLogin("<button class='button button-clear' style='line-height: normal; min-height: 0; min-width: 0;' ng-click='$root.cancelAuth()'><i class='ion-close-circled'></i>&nbsp;authenticating...</button>")
+                zmAutoLogin.doLogin("<button class='button button-clear' style='line-height: normal; min-height: 0; min-width: 0;  color:#fff;' ng-click='$root.cancelAuth()'><i class='ion-close-circled'></i>&nbsp;authenticating...</button>")
                     // Do the happy menu only if authentication works
                     // if it does not work, there is an emitter for auth
                     // fail in app.js that will be called to show an error
diff --git a/www/js/MonitorModalCtrl.js b/www/js/MonitorModalCtrl.js
index ead42af3..c1ce8532 100644
--- a/www/js/MonitorModalCtrl.js
+++ b/www/js/MonitorModalCtrl.js
@@ -261,7 +261,7 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$
         }
 
         var status = ["idle", "pre-alarm","alarmed","alert","record"];
-        console.log ("Inside Modal timer...");
+        //console.log ("Inside Modal timer...");
         var apiurl = ZMDataModel.getLogin().apiurl;
         var alarmurl = apiurl+"/monitors/alarm/id:"+$scope.monitorId+"/command:status.json";
             ZMDataModel.zmLog ("Invoking " + alarmurl);
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 2f80e57d..494e68a3 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -272,6 +272,12 @@ function initPackery()
     
     function loadAlarmStatus()
     {
+        
+        if (ZMDataModel.versionCompare($rootScope.apiVersion,"1.30")==-1)
+        {
+            
+            //return;
+        }
        
         for (var i=0; i < $scope.MontageMonitors.length; i++)
         {
@@ -281,7 +287,7 @@ function initPackery()
             {
                 continue;
             }
-          //  getAlarmStatus($scope.MontageMonitors[i]);
+            getAlarmStatus($scope.MontageMonitors[i]);
                 
         }
         
@@ -397,7 +403,7 @@ function initPackery()
         
     };
 
-    /*
+    
     $scope.toggleDelete = function (i)
     {
         
@@ -407,7 +413,7 @@ function initPackery()
             $scope.copyMontage[i].Monitor.listDisplay = 'show';
             
         ZMDataModel.zmDebug ("index " + i + " is now " +  $scope.copyMontage[i].Monitor.listDisplay);
-    };*/
+    };
     
     $scope.hideUnhide = function()
     {
@@ -772,29 +778,7 @@ function initPackery()
       //  console.log("**VIEW ** Montage Ctrl Loaded");
     });
 
-    $scope.$on('$ionicView.enter', function () {
-      
-        //$scope.areImagesLoading = true;
-        var ld = ZMDataModel.getLogin();
-        //console.log("Setting Awake to " + ZMDataModel.getKeepAwake());
-        ZMDataModel.setAwake(ZMDataModel.getKeepAwake());
-
-        $interval.cancel(intervalHandleMontage);
-        $interval.cancel(intervalHandleAlarmStatus);
-        
-        intervalHandleMontage = $interval(function () {
-            loadNotifications();
-            //  console.log ("Refreshing Image...");
-        }.bind(this), ld.refreshSec * 1000);
-        
-        intervalHandleAlarmStatus = $interval(function () {
-            loadAlarmStatus();
-            //  console.log ("Refreshing Image...");
-        }.bind(this), 5000);
-        
-
-        loadNotifications();
-    });
+ 
 
     $scope.$on('$ionicView.leave', function () {
        // console.log("**VIEW ** Montage Ctrl Left, force removing modal");
@@ -802,14 +786,6 @@ function initPackery()
     });
     
     
-     $scope.$on('$ionicView.afterEnter', function () {
-        console.log("**VIEW ** Montage Ctrl AFTER ENTER");
-        window.addEventListener("resize", orientationChanged, false);
-        $timeout ( function () {initPackery(); },500);
-        document.addEventListener("pause", onPause, false);
-        document.addEventListener("resume", onResume, false);
-        
-    });
     
     function orientationChanged() {
     ZMDataModel.zmDebug("Detected orientation change, redoing packery resize");
@@ -817,8 +793,23 @@ function initPackery()
         pckry.onresize();
     });
 }
+    
+$scope.toggleSizeButtons = function()
+{
+    
+    $scope.showSizeButtons = !$scope.showSizeButtons;
+    ZMDataModel.zmDebug ("toggling size buttons:"+$scope.showSizeButtons);
+};
 
-$scope.$on('$ionicView.enter', function () {
+// minimal has to be beforeEnter or header won't hide
+$scope.$on ('$ionicView.beforeEnter', function() {
+    $scope.minimal = $stateParams.minimal;
+    //console.log ("**************** MINIMAL ENTER " + $scope.minimal);
+    $scope.zmMarginTop = $scope.minimal ? 0 : 15;
+});
+    
+
+$scope.$on('$ionicView.afterEnter', function () {
     ZMDataModel.zmDebug("Setting image mode to snapshot, will change to image when packery is all done");
     $scope.allImagesLoaded = false;
     $scope.isDragabillyOn = false;
@@ -826,8 +817,8 @@ $scope.$on('$ionicView.enter', function () {
     $scope.gridScale = "grid-item-50";
     $scope.LoginData = ZMDataModel.getLogin();
     $scope.monLimit = $scope.LoginData.maxMontage;
-    $scope.minimal = $stateParams.minimal;
-    $scope.zmMarginTop = $scope.minimal ? 0 : 15;
+    $scope.showSizeButtons = false;
+    
 
     $scope.monitors = message;
     $scope.MontageMonitors = angular.copy(message);
@@ -842,7 +833,28 @@ $scope.$on('$ionicView.enter', function () {
     $scope.isReorder = false;
 
     $ionicSideMenuDelegate.canDragContent($scope.minimal ? true : true);
+    
+    
+     //$scope.areImagesLoading = true;
+        var ld = ZMDataModel.getLogin();
+        //console.log("Setting Awake to " + ZMDataModel.getKeepAwake());
+        ZMDataModel.setAwake(ZMDataModel.getKeepAwake());
 
+        $interval.cancel(intervalHandleMontage);
+        $interval.cancel(intervalHandleAlarmStatus);
+        
+        intervalHandleMontage = $interval(function () {
+            loadNotifications();
+            //  console.log ("Refreshing Image...");
+        }.bind(this), ld.refreshSec * 1000);
+        
+        intervalHandleAlarmStatus = $interval(function () {
+            loadAlarmStatus();
+            //  console.log ("Refreshing Image...");
+        }.bind(this), 5000);
+        
+
+        loadNotifications();
 
     if ($scope.MontageMonitors.length == 0) {
         $rootScope.zmPopup = $ionicPopup.alert({
@@ -899,7 +911,11 @@ $scope.$on('$ionicView.enter', function () {
                 ZMDataModel.zmLog("MontageCtrl: Error returned Stream authentication construction. Retaining old value of: " + $rootScope.authSession);
             });
 
-
+ console.log("**VIEW ** Montage Ctrl AFTER ENTER");
+        window.addEventListener("resize", orientationChanged, false);
+        $timeout ( function () {initPackery(); },500);
+        document.addEventListener("pause", onPause, false);
+        document.addEventListener("resume", onResume, false);
 
 });
     
diff --git a/www/js/TimelineModalCtrl.js b/www/js/TimelineModalCtrl.js
index 1cb49561..68512f7a 100644
--- a/www/js/TimelineModalCtrl.js
+++ b/www/js/TimelineModalCtrl.js
@@ -249,7 +249,7 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
         {
           label: 'Score',
           fill:true,
-          backgroundColor: 'rgba(52, 152, 219, 1.0)',
+          backgroundColor: 'rgba(89, 171, 227, 1.0)',
           borderColor: 'rgba(52, 152, 219, 1.0)',
           borderCapStyle: 'butt',
           borderJoinStyle: 'miter',
diff --git a/www/js/WizardCtrl.js b/www/js/WizardCtrl.js
index c09270db..b64d5ff9 100644
--- a/www/js/WizardCtrl.js
+++ b/www/js/WizardCtrl.js
@@ -45,13 +45,13 @@ angular.module('zmApp.controllers').controller('zmApp.WizardCtrl', ['$scope', '$
                 if (data.indexOf(zm.loginScreenString) == -1) {
                     
                     $scope.wizard.loginURL = $scope.wizard.fqportal;
-                    $scope.wizard.portalValidText = "Portal login was successful: "+$scope.wizard.loginURL;
+                    $scope.wizard.portalValidText = "Portal: "+$scope.wizard.loginURL;
                     $scope.wizard.portalColor = "#16a085";
                     d.resolve(true);
                     return d.promise;
                 } else {
                     console.log("************ERROR");
-                    $scope.wizard.portalValidText = "Portal login was unsuccessful";
+                    $scope.wizard.portalValidText = "Portal: detection failed";
                     $scope.wizard.portalColor = "#e74c3c";
                     d.reject(false);
                     return d.promise;
@@ -59,7 +59,7 @@ angular.module('zmApp.controllers').controller('zmApp.WizardCtrl', ['$scope', '$
             })
             .error (function (error) {
             console.log("************ERROR");
-                    $scope.wizard.portalValidText = "Portal login was unsuccessful";
+                    $scope.wizard.portalValidText = "Portal: detection failed";
                     $scope.wizard.portalColor = "#e74c3c";
                     d.reject(false);
                     return d.promise;
@@ -212,7 +212,7 @@ angular.module('zmApp.controllers').controller('zmApp.WizardCtrl', ['$scope', '$
                     $ionicLoading.hide();
                     ZMDataModel.zmLog ("Valid cgi-bin found with: " + success);
                     $scope.wizard.streamingURL = success;
-                    $scope.wizard.streamingValidText = "cgi-bin detection succeeded: "+$scope.wizard.streamingURL;
+                    $scope.wizard.streamingValidText = "cgi-bin: "+$scope.wizard.streamingURL;
                     $scope.wizard.streamingColor = "#16a085";
                     d.resolve(true);
                     return d.promise;
@@ -275,7 +275,7 @@ angular.module('zmApp.controllers').controller('zmApp.WizardCtrl', ['$scope', '$
             
             
             
-            $scope.wizard.apiValidText = "API detection succeeded: "+$scope.wizard.apiURL;
+            $scope.wizard.apiValidText = "API: "+$scope.wizard.apiURL;
             $scope.wizard.apiColor = "#16a085";
             d.resolve(true);
             return d.promise;
diff --git a/www/js/app.js b/www/js/app.js
index d5821cd3..b327ddac 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -1369,9 +1369,11 @@ angular.module('zmApp', [
 //------------------------------------------------------------------
 
 // My route map connecting menu options to their respective templates and controllers
-.config(function ($stateProvider, $urlRouterProvider, $httpProvider, $ionicConfigProvider, $provide,$compileProvider, $ionicNativeTransitionsProvider) {
-
+.config(function ($stateProvider, $urlRouterProvider, $httpProvider, $ionicConfigProvider, $provide,$compileProvider, $ionicNativeTransitionsProvider, $logProvider) {
 
+    //$logProvider.debugEnabled(false);
+    //$compileProvider.debugInfoEnabled(false);
+    
     // This is an exception interceptor so it can show up in app logs 
     // if they occur. I suspect digest and other errors will be useful
     // for me to see
diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html
index 7cc087d0..15ff0d1d 100644
--- a/www/templates/devoptions.html
+++ b/www/templates/devoptions.html
@@ -1,11 +1,11 @@
 <ion-view view-title="Dev. Settings">
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
-        
+
         <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
-        
+
     </ion-nav-buttons>
-    
+
     <ion-nav-buttons side="right">
         <button class="button button-clear" ng-click="saveDevOptions()">Save</button>
     </ion-nav-buttons>
@@ -17,28 +17,24 @@
                 <i class="ion-android-settings" style="font-size:150%"></i> Developer Options for {{loginData.serverName}}
             </span>
 
-             <div class="item item-input-inset">
+            <div class="item item-input-inset">
                 Frame update (sec.)&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="min is 1s" ng-model="loginData.refreshSec">
                 </label>
             </div>
-            
-            
+
+
             <label>
-                <ion-toggle ng-model="loginData.use24hr"
-                            ng-checked="{{loginData.use24hr}}"
-                            toggle-class="toggle-calm">enable 24hr time format</ion-toggle>
+                <ion-toggle ng-model="loginData.use24hr" ng-checked="{{loginData.use24hr}}" toggle-class="toggle-calm">enable 24hr time format</ion-toggle>
             </label>
-            
+
             <div ng-if="$root.platformOS=='android'">
                 <label>
-                    <ion-toggle ng-model="loginData.exitOnSleep"
-                                ng-checked="{{loginData.exitOnSleep}}"
-                                toggle-class="toggle-calm">exit app in background</ion-toggle>
+                    <ion-toggle ng-model="loginData.exitOnSleep" ng-checked="{{loginData.exitOnSleep}}" toggle-class="toggle-calm">exit app in background</ion-toggle>
                 </label>
             </div>
-            
+
             <!--
             <label>
                 <ion-toggle ng-model="loginData.useNphZms"
@@ -52,7 +48,7 @@
                             toggle-class="toggle-calm">use ZMS for events footage</ion-toggle>
             </label>
             -->
-            
+
             <div class="item item-input-inset">
                 Max monitors in montage&nbsp;
                 <label class="item-input-wrapper">
@@ -75,81 +71,77 @@
                     <input type="tel" placeholder="max is 70" ng-model="loginData.montageQuality">
                 </label>
             </div>
-            
+
             <div class="item item-input-inset">
-                 Event single image scale(%)&nbsp;
+                Event single image scale(%)&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="" ng-model="loginData.singleImageQuality">
                 </label>
             </div>
-            
+
             <div class="item item-input-inset">
-                 resume delay(ms)&nbsp;
+                resume delay(ms)&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="" ng-model="loginData.resumeDelay">
-                
+
                 </label>
-                
+
             </div>
-            
+
             <div class="item item-input-inset">
-                 Event Montage image scale(%)&nbsp;
+                Event Montage image scale(%)&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="" ng-model="loginData.montageHistoryQuality">
                 </label>
             </div>
-            
+
             <div class="item item-input-inset">
-                 Max. items for Timeline&nbsp;
+                Max. items for Timeline&nbsp;
                 <label class="item-input-wrapper">
                     <input type="tel" placeholder="" ng-model="loginData.graphSize">
                     <br/>
-            
+
                 </label>
                 <br/>
-        
+
             </div>
-            
+
             <div class="item" style="background-color:#C8F7C5" ng-if="loginData.graphSize > 5000">
-                <label class="animated fadeInDown item-text-wrap" >
-                    
-                A large value can affect timeline performance. If you find timeline performance slow, try reducing the value to 200 and work your way up from there.
-                    
+                <label class="animated fadeInDown item-text-wrap">
+
+                    A large value can affect timeline performance. If you find timeline performance slow, try reducing the value to 200 and work your way up from there.
+
                 </label>
             </div>
-            
+
             <label>
-            <ion-toggle ng-model="loginData.enableDebug"
-                        ng-checked="{{loginData.enableDebug}}"
-                        toggle-class="toggle-calm">Enable debug logs</ion-toggle>
+
+                <ion-toggle ng-model="loginData.enableLogs" ng-checked="{{loginData.enableLogs}}" toggle-class="toggle-calm">Enable logs</ion-toggle>
             </label>
-            
+
             <label>
-            <ion-toggle ng-model="loginData.canSwipeMonitors"
-                        ng-checked="{{loginData.canSwipeMonitors}}"
-                        toggle-class="toggle-calm">Swipe to change monitors</ion-toggle>
+
+                <ion-toggle ng-if="loginData.enableLogs" ng-model="loginData.enableDebug" ng-checked="{{loginData.enableDebug}}" toggle-class="toggle-calm">Enable debug logs</ion-toggle>
             </label>
-            
+
             <label>
-            <ion-toggle ng-model="loginData.persistMontageOrder"
-                        ng-checked="{{loginData.persistMontageOrder}}"
-                        toggle-class="toggle-calm">Persist hidden monitors</ion-toggle>
+                <ion-toggle ng-model="loginData.canSwipeMonitors" ng-checked="{{loginData.canSwipeMonitors}}" toggle-class="toggle-calm">Swipe to change monitors</ion-toggle>
             </label>
-            
-            
+
             <label>
-                <ion-toggle ng-model="loginData.enableh264"
-                        ng-checked="{{loginData.enableh264}}"
-                        toggle-class="toggle-calm"> H264 Video support</ion-toggle>
+                <ion-toggle ng-model="loginData.persistMontageOrder" ng-checked="{{loginData.persistMontageOrder}}" toggle-class="toggle-calm">Persist hidden monitors</ion-toggle>
             </label>
-            
+
+
             <label>
-                <ion-toggle ng-model="loginData.enableBlog"
-                        ng-checked="{{loginData.enableBlog}}"
-                        toggle-class="toggle-calm"> enable news updates</ion-toggle>
+                <ion-toggle ng-model="loginData.enableh264" ng-checked="{{loginData.enableh264}}" toggle-class="toggle-calm"> H264 Video support</ion-toggle>
             </label>
 
-            
+            <label>
+                <ion-toggle ng-model="loginData.enableBlog" ng-checked="{{loginData.enableBlog}}" toggle-class="toggle-calm"> enable news updates</ion-toggle>
+            </label>
+
+
         </div>
     </ion-content>
-</ion-view>
+</ion-view>
\ No newline at end of file
diff --git a/www/templates/events.html b/www/templates/events.html
index e85c4d03..88dab016 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -47,7 +47,7 @@
                 <ion-item collection-repeat="event in events| filter:search.text" item-height="event.Event.height" id="item-{{$index}}"  >
                     
                     
-                    <span style="float:right;margin-top:-18px;background-color:#6d0909;color:#fff;font-size:11px;opacity:0.7;width:90px;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;<i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyTime(event.Event.StartTime)}}</span>
+                    <span style="float:right;margin-top:-18px;background-color:#96281B;color:#fff;font-size:11px;opacity:0.7;width:90px;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;<i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyTime(event.Event.StartTime)}}</span>
 
                     <span style="float:left;margin-top:-18px;background-color:#444444;color:#fff;font-size:11px;opacity:0.7;width:90px;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;<i class="ion-calendar"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}}</span>
 
@@ -114,20 +114,20 @@
                     <span style="float:right">
                                 <div ng-if="event.Event.EndTime">
                                     
-                                    <button class="button button-small icon icon-left ion-stats-bars"
+                                    <button class="button button-small button-outline icon icon-left ion-stats-bars"
                                             ng-click="closeIfOpen(event);analyzeEvent(event)" >  Analyze
                                     </button>
                                     
-                                    <button class="button button-small icon icon-left ion-ios-eye"
+                                    <button class="button button-outline button-small icon icon-left ion-ios-eye"
                                             ng-click="toggleGroupScrub(event,$index,event.Event.Frames)" >  Scrub
                                     </button>
                                     
-                                    <button ng-if="event.Event.AlarmFrames > 0" class="button button-small icon icon-left ion-ios-bell"
+                                    <button  ng-if="event.Event.AlarmFrames > 0" class="button button-outline button-small icon icon-left ion-ios-bell"
                                             ng-click="toggleGroupAlarms(event,$index,event.Event.Frames)" >  alarms
                                     </button>
 
 
-                                    <button class="button button-small icon icon-left ion-ios-eye"
+                                    <button class="button button-outline button-small icon icon-left ion-ios-eye"
                                             ng-click="closeIfOpen(event);openModal(event)" > Footage
                                     </button>
                                 </div>
@@ -265,7 +265,7 @@
     </ion-content>
     <div class="events-float-filter" ng-if="isEventFilterOn" on-tap="filterTapped();">Filter On</div>
 
-    <ion-pull-up-footer class="bar-energized" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand">
+    <ion-pull-up-footer class="zmPullup" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand">
 
         <ion-pull-up-handle width="100" height="25" toggle="ion-chevron-up ion-chevron-down" style="border-radius: 25px 25px 0 0">
             <i class="icon ion-chevron-up"></i>
diff --git a/www/templates/important_message.html b/www/templates/important_message.html
index 5ad922e5..a97f1ada 100644
--- a/www/templates/important_message.html
+++ b/www/templates/important_message.html
@@ -19,7 +19,7 @@
                     <br/>
                     <h4 style="color:white">I'd appreciate if you upgraded ZoneMinder</h4>
                     <br/>
-                    You are running v{{currentVersion}}.<br/> v{{recommendedVersion}} has an important fix that eliminates a bug related to network data consumption build up of zmNinja. While your version will work, I'd recommend you upgrade ZoneMinder. Till you do, please make sure you don't keep zmNinja running in the background (for Android). Thank you. 
+                    You are running v{{currentVersion}}.<br/> v{{recommendedVersion}} has some important fixes that enhance the API amongst other things. This is required to avail of the new alarm APIs and other new features.
                     <br/>
                     Reported Version: <b>v{{currentVersion}}</b><br/>
                      Recommended Version:<b>v{{recommendedVersion}}</b><br/><br/>
diff --git a/www/templates/lowversion.html b/www/templates/lowversion.html
index 4e976846..3b50683b 100644
--- a/www/templates/lowversion.html
+++ b/www/templates/lowversion.html
@@ -1,6 +1,6 @@
 <ion-view view-title="zmNinja" hide-nav-bar="true" hide-back-button="true" cache-view="false">
     <!--<ion-view view-title="zmNinja" hide-nav-bar="false" hide-back-button="true" cache-view="false">-->
-    <ion-content class="pin-background" >
+    <ion-content class="pin-background">
         <div style="margin-left:20px; margin-right:20px">
             <center>
                 <br/>
@@ -9,8 +9,8 @@
                     <img src="img/authlogo.png">
                 </div>
 
-                    
-                    <br/> 
+
+                <br/>
                 <span style="color:white">
                     <h2 style="color:white" class="animated bounce">ZoneMinder upgrade needed</h2>
                     <br/>
@@ -18,12 +18,12 @@
                     <br/>
                     Reported Version: <b>{{currentVersion}}</b><br/>
                     Minimum Required Version:<b>{{requiredVersion}}</b><br/>
-                    </p>
                     
-                    </span>
-                    <br/>
                     
-                </div>
+                    </span>
+                <br/>
+
+
             </center>
         </div>
 
diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html
index b91b3e16..392f390c 100644
--- a/www/templates/montage-history.html
+++ b/www/templates/montage-history.html
@@ -36,7 +36,7 @@
 
 
 
-        <div class="range range-positive">
+        <div class="range">
             <i style="color:#bbbbbb" class="icon ion-grid"></i>
             <input type="range" ng-model="slider.monsize" min="1" max="9" ng-change="sliderChanged(slider.monsize)">
             <i style="color:#bbbbbb" class="icon ion-image"></i>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 8f6b6adc..50944b3c 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -3,6 +3,11 @@
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
          <button class="button button-icon button-clear ion-eye" ng-click="hideUnhide();">&nbsp;
         </button>
+        
+        
+        <button class="button button-icon button-clear ion-arrow-resize" ng-click="toggleSizeButtons();">&nbsp;
+        </button>
+        
         <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
         
     </ion-nav-buttons>
@@ -24,14 +29,13 @@
 
     <ion-content ng-cloak has-bouncing="false" style="background-color:#444444" delegate-handle="montage-delegate"  >
     
-    
 
-        <span ng-show="!minimal">
+        <span ng-show="!minimal && showSizeButtons">
             <!-- this is header -->
             
-            <span ng-click="sliderChanged(1)" style="float:right;margin-top:0px;padding-top:8px;background-color:#6d0909;color:#fff;font-size:25px;opacity:1;width:40px;height:36px;border-radius: 0px 0px 0px 5px;">&nbsp;<i class="ion-plus-circled">&nbsp;</i></span>
+            <span ng-click="sliderChanged(1)" style="float:right;margin-top:0px;padding-top:8px;background-color:#5c6767;color:#fff;font-size:25px;opacity:1;width:40px;height:36px;border-radius: 0px 0px 0px 5px;">&nbsp;<i class="ion-plus-circled">&nbsp;</i></span>
             
-            <span ng-click="sliderChanged(-1)" style="float:left;margin-top:0px;padding-top:8px;background-color:#6d0909;color:#fff;font-size:22px;opacity:1;width:40px;height:36px;border-radius: 0px 0px 5px 0px;">&nbsp;<i class="ion-minus-circled">&nbsp;</i></span>
+            <span ng-click="sliderChanged(-1)" style="float:left;margin-top:0px;padding-top:8px;background-color:#5c6767;color:#fff;font-size:22px;opacity:1;width:40px;height:36px;border-radius: 0px 0px 5px 0px;">&nbsp;<i class="ion-minus-circled">&nbsp;</i></span>
             <br/><br/>
         </span>
         
@@ -115,7 +119,7 @@
             </button>
             <button mfb-button icon="ion-arrow-shrink" label="decrease size" ng-click="sliderChanged(-1)">
             </button>
-            <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView();">
+            <button mfb-button icon="ion-refresh" label="refresh" ng-click="resetSizes();">
             </button>
             <button mfb-button icon="ion-close" label="exit full screen" ng-click="switchMinimal()">
             </button>
diff --git a/www/templates/timeline-modal.html b/www/templates/timeline-modal.html
index 1584b961..89753f72 100644
--- a/www/templates/timeline-modal.html
+++ b/www/templates/timeline-modal.html
@@ -35,9 +35,9 @@
                                 
                             <figure style="display:inline-block">
                                 <figcaption><small>f:{{alarm.fid}} scr:{{alarm.score}} @ {{alarm.time}}</small></figcaption>       
-                                <img ng-if="event.Event.imageMode=='path'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380"    style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id)"/>
+                                <img ng-if="event.Event.imageMode=='path'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380"    style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.fid, event.Event.Id, event.Event.imageMode, alarm.id)"/>
                                                 
-                                <img ng-if="event.Event.imageMode=='fid'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}"    style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id)"/>
+                                <img ng-if="event.Event.imageMode=='fid'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}"    style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.fid, event.Event.Id, event.Event.imageMode, alarm.id)"/>