Merge pull request #349 from pliablepixels/montage-jazz

Montage jazz

Former-commit-id: ba1be6c70c55a7274d980d9b418b8bc385704ba2

26 files changed, 703 insertions, 973 deletions

diff --git a/www/css/style.css b/www/css/style.css
index 96dd7aee..2d2a6d35 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -866,6 +866,10 @@ body {
     background: rgba(108, 122, 137, 0.7);
     z-index: -1;
 }
+
+#flyoutmenu li:active {
+    background:#3498db;
+}
 #flyoutmenu a {
     text-decoration: none;
     color: white;
@@ -890,6 +894,19 @@ body {
     opacity: 1;
     z-index: 99;
 }
+
+#history_canvas_video {
+    position: absolute;
+    width: 95%;
+    top:10%;
+    height: 20px;
+    
+    opacity: 1;
+    z-index: 998;
+}
+
+
+
 #event_slider {
     position: absolute;
     width: 80%;
diff --git a/www/external/ion-pullup.js b/www/external/ion-pullup.js
index 9bd5ab56..ae9109a8 100755
--- a/www/external/ion-pullup.js
+++ b/www/external/ion-pullup.js
@@ -45,10 +45,18 @@ angular.module('ionic-pullup', [])
                   header = document.querySelector('.bar-header');
                   tabsHeight = tabs ? tabs.offsetHeight : 0;
                   headerHeight = header ? header.offsetHeight : 0;
+
+                  /*if ($rootScope.platformOS == 'ios')
+                  {
+                          tabsHeight +=40;
+                          headerHeight +=40;
+                  }*/
               }
 
               function computeHeights() {
                   footer.height = footer.maxHeight > 0 ? footer.maxHeight : $window.innerHeight - headerHeight - handleHeight - tabsHeight;
+                  if ($rootScope.platformOS == 'ios') footer.height -=60;
+                  if ($rootScope.platformOS == 'android') footer.height -=40;
                   $element.css({'height': footer.height + 'px'});
 
                   if (footer.initialState == FooterState.MINIMIZED) {
@@ -69,6 +77,8 @@ angular.module('ionic-pullup', [])
               function recomputeAllHeights() {
                   computeDefaultHeights();
                   footer.height = footer.maxHeight > 0 ? footer.maxHeight : $window.innerHeight - headerHeight - handleHeight - tabsHeight;
+                  if ($rootScope.platformOS == 'ios') footer.height -=60;
+                  if ($rootScope.platformOS == 'android') footer.height -=40;
                 }
 
               function expand() {
diff --git a/www/external/packery.pkgd.js b/www/external/packery.pkgd.js
index 86cb6932..7576576b 100644
--- a/www/external/packery.pkgd.js
+++ b/www/external/packery.pkgd.js
@@ -285,7 +285,8 @@ function setup() {
   body.appendChild( div );
   var style = getStyle( div );
 
-  getSize.isBoxSizeOuter = isBoxSizeOuter = getStyleSize( style.width ) == 200;
+  //PP https://github.com/metafizzy/packery/pull/382/commits/ea595864bfc161e992bcb28cbce132df9eac57b9
+  getSize.isBoxSizeOuter = isBoxSizeOuter = Math.round(getStyleSize( style.width )) == 200;
   body.removeChild( div );
 
 }
@@ -2797,8 +2798,8 @@ Packery.prototype.initShiftLayout = function( positions, attr ) {
     var selector = '[' + attr + '="' + itemPosition.attr  + '"]'
     var itemElem = this.element.querySelector( selector );
     var item = this.getItem( itemElem );
-    //item.rect.x = itemPosition.x * this.packer.width;
-    item.rect.x = Math.ceil(itemPosition.x * this.packer.width);
+    item.rect.x = itemPosition.x * this.packer.width;
+    //item.rect.x = Math.ceil(itemPosition.x * this.packer.width);
     item.rect.y = itemPosition.y * this.packer.height;
     //console.log ("X computed as " + item.rect.x);
     return item;
diff --git a/www/index.html b/www/index.html
index df6cdf13..a6a9ae8f 100644
--- a/www/index.html
+++ b/www/index.html
@@ -69,6 +69,7 @@
     <script src="external/draggabilly.pkgd.js"></script>
     <script src="external/ionic.scroll.sista.js"></script>
     <script src="external/angular-circular-navigation.js"></script>
+    <script src="external/Chart2.min.js"></script>
     
     
 
@@ -140,7 +141,7 @@
 
             </ion-header-bar>
             <ion-content has-header="true" mouse-wheel-scroll>
-                <ion-scroll scrollbar-y="false" style="height:100%" >
+               <!-- <ion-scroll scrollbar-y="false" style="height:100%" >-->
                     <ion-list>
 
                         <ion-item href="#/montage" menu-close>
@@ -164,7 +165,7 @@
                         </span>{{'kMenuTimeline'|translate}}
                         </ion-item>
 
-                        <ion-item href="#/events/0" menu-close>
+                        <ion-item href="#/events/0/false" menu-close>
                             <span class=" item-icon-left">
                             <i class="icon ion-ios-calendar-outline"></i>
                         </span>{{'kMenuEvents'|translate}}
@@ -260,7 +261,7 @@
 
 
                     </ion-list>
-                </ion-scroll>
+                <!--</ion-scroll>-->
             </ion-content>
         </ion-side-menu>
     </ion-side-menus>
diff --git a/www/js/DevOptionsCtrl.js b/www/js/DevOptionsCtrl.js
index 7ca09068..5e75df04 100644
--- a/www/js/DevOptionsCtrl.js
+++ b/www/js/DevOptionsCtrl.js
@@ -22,7 +22,8 @@ angular.module('zmApp.controllers').controller('zmApp.DevOptionsCtrl', ['$scope'
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent":false
             }, {
                 reload: true
             });
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 627b8fff..3aa4b6a2 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -84,6 +84,13 @@ angular.module('zmApp.controllers')
         document.addEventListener("pause", onPause, false);
         //console.log("I got STATE PARAM " + $stateParams.id);
         $scope.id = parseInt($stateParams.id, 10);
+        $scope.showEvent = $stateParams.playEvent || false;
+        
+        console.log (">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>");
+        
+       
+         NVRDataModel.log  ("EventCtrl called with: EID=" + $scope.id + " playEvent =  "+$scope.showEvent);
+        
         // This is the only view that hardcodes row size due to
         // collection repeat, so lets re-get the text size if it has changed
         // note that there may be a delay as its a callback - so might involve
@@ -154,6 +161,34 @@ angular.module('zmApp.controllers')
 
 
 
+    function getEventObject(eid)
+    {
+        
+        var apiurl = NVRDataModel.getLogin().apiurl + '/events/'+eid+'.json';
+        
+        $http.get (apiurl)
+        .success (function (data) {
+        })
+        .error (function (err) {
+        });
+        /*
+        myevents[i].Event.humanizeTime = humanizeTime(myevents[i].Event.StartTime);
+        myevents[i].Event.MonitorName = NVRDataModel.getMonitorName(myevents[i].Event.MonitorId);
+        // now construct base path
+
+        myevents[i].Event.streamingURL = NVRDataModel.getStreamingURL(myevents[i].Event.MonitorId);
+        myevents[i].Event.baseURL = NVRDataModel.getBaseURL(myevents[i].Event.MonitorId);
+        myevents[i].Event.imageMode = NVRDataModel.getImageMode(myevents[i].Event.MonitorId);
+        // console.log ("***** MULTISERVER STREAMING URL FOR EVENTS " + myevents[i].Event.streamingURL);
+
+        //  console.log ("***** MULTISERVER BASE URL FOR EVENTS " + myevents[i].Event.baseURL);
+
+        myevents[i].Event.ShowScrub = false;
+        myevents[i].Event.BasePath = computeBasePath(myevents[i]);
+        myevents[i].Event.relativePath = computeRelativePath(myevents[i]);
+        */
+    }
+    
 
     function getTextZoomCallback(tz)
     {
@@ -667,7 +702,8 @@ angular.module('zmApp.controllers')
         // reloading - may solve https://github.com/pliablepixels/zmNinja/issues/36
         // if you are in the same mid event page $state.go won't work
         $state.go("events", {
-            "id": monitorId
+            "id": monitorId,
+            "playEvent":false
         }, {
             reload: true
         });
@@ -684,7 +720,8 @@ angular.module('zmApp.controllers')
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent":false
             }, {
                 reload: true
             });
@@ -754,7 +791,8 @@ angular.module('zmApp.controllers')
                     disableBack: true
                 });
                 $state.go("events", {
-                    "id": 0
+                    "id": 0,
+                    "playEvent":false
                 });
             } else {
                 NVRDataModel.log("Filter reset cancelled in popup");
diff --git a/www/js/EventDateTimeFilterCtrl.js b/www/js/EventDateTimeFilterCtrl.js
index f9e982f5..4047fa1e 100644
--- a/www/js/EventDateTimeFilterCtrl.js
+++ b/www/js/EventDateTimeFilterCtrl.js
@@ -18,7 +18,8 @@ angular.module('zmApp.controllers')
                         disableBack: true
                     });
                     $state.go("events", {
-                        "id": 0
+                        "id": 0,
+                        "playEvent":false
                     }, {
                         reload: true
                     });
@@ -50,7 +51,8 @@ angular.module('zmApp.controllers')
                     disableBack: true
                 });
                 $state.go("events", {
-                    "id": 0
+                    "id": 0,
+                    "playEvent":false
                 });
 
                 //$ionicHistory.goBack();
diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js
index ce745716..d91986aa 100644
--- a/www/js/EventModalCtrl.js
+++ b/www/js/EventModalCtrl.js
@@ -389,14 +389,10 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
 
         //console.log("YOU changed " + $scope.sliderProgress.progress);
         $scope.currentProgress.progress = $scope.sliderProgress.progress;
-        $timeout(function () {
-            sendCommand('14', $scope.connKey, '&offset=' + $scope.currentProgress.progress);
-        }, 500);
-        // give this command some time to complete
-        $timeout(function () {
-            $scope.blockSlider = false;
-        }, 1500);
-
+        sendCommand('14', $scope.connKey, '&offset=' + $scope.currentProgress.progress)
+        .then (function (s) { $scope.blockSlider = false; }, function (e) {$scope.blockSlider = false;});
+    
+       
     };
 
 
diff --git a/www/js/EventServerSettingsCtrl.js b/www/js/EventServerSettingsCtrl.js
index 298d9aa4..48417420 100644
--- a/www/js/EventServerSettingsCtrl.js
+++ b/www/js/EventServerSettingsCtrl.js
@@ -26,7 +26,8 @@
 
 
              $state.go("events", {
-                 "id": 0
+                 "id": 0,
+                 "playEvent":false
              }, {
                  reload: true
              });
diff --git a/www/js/EventsGraphsCtrl.js b/www/js/EventsGraphsCtrl.js
index 98859649..2273598e 100644
--- a/www/js/EventsGraphsCtrl.js
+++ b/www/js/EventsGraphsCtrl.js
@@ -30,7 +30,8 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent":false
             }, {
                 reload: true
             });
diff --git a/www/js/HelpCtrl.js b/www/js/HelpCtrl.js
index 53dc91b0..328fbfda 100644
--- a/www/js/HelpCtrl.js
+++ b/www/js/HelpCtrl.js
@@ -19,7 +19,8 @@ angular.module('zmApp.controllers').controller('zmApp.HelpCtrl', ['$scope', '$ro
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent":false
             }, {
                 reload: true
             });
diff --git a/www/js/LogCtrl.js b/www/js/LogCtrl.js
index 67f2d185..388af6a7 100644
--- a/www/js/LogCtrl.js
+++ b/www/js/LogCtrl.js
@@ -63,7 +63,8 @@ angular.module('zmApp.controllers').controller('zmApp.LogCtrl', ['$scope', '$roo
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent":false
             }, {
                 reload: true
             });
diff --git a/www/js/LoginCtrl.js b/www/js/LoginCtrl.js
index a13941c6..e076cc18 100644
--- a/www/js/LoginCtrl.js
+++ b/www/js/LoginCtrl.js
@@ -51,7 +51,8 @@ angular.module('zmApp.controllers').controller('zmApp.LoginCtrl', ['$scope', '$r
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent":false
             }, {
                 reload: true
             });
diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js
index fd0c2780..865e0e3a 100644
--- a/www/js/MonitorCtrl.js
+++ b/www/js/MonitorCtrl.js
@@ -66,7 +66,8 @@ angular.module('zmApp.controllers')
 
 
                     $state.go("events", {
-                        "id": 0
+                        "id": 0,
+                        "playEvent":false
                     }, {
                         reload: true
                     });
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 6910f148..1e13dd80 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -162,14 +162,16 @@ angular.module('zmApp.controllers')
         imagesLoaded(elem).on('progress', function (instance, img) {
 
             progressCalled = true;
+            
 
             // if (layouttype) $timeout (function(){layout(pckry);},100);
         });
 
         imagesLoaded(elem).on('always', function () {
             //console.log ("******** ALL IMAGES LOADED");
+           // $scope.$digest();
             NVRDataModel.debug("All images loaded");
-            
+            $scope.areImagesLoading = false;
 
             $ionicLoading.hide();
 
@@ -182,15 +184,13 @@ angular.module('zmApp.controllers')
 
             });
             if (!progressCalled) {
-                NVRDataModel.log("*** BUG PROGRESS WAS NOT CALLED");
+                NVRDataModel.log("***  PROGRESS WAS NOT CALLED");
+                pckry.reloadItems();
             }
-             NVRDataModel.debug("All images loaded, doing image layout");
-            $scope.areImagesLoading = false; // outside timeout so images show before next line
-            $timeout(function () {
-            pckry.initShiftLayout(positions, 'data-item-id');
-             //pckry.reloadItems();
+             
             
-                
+            $timeout(function () {
+
                 pckry.getItemElements().forEach(function (itemElem) {
                     draggie = new Draggabilly(itemElem);
                     pckry.bindDraggabillyEvents(draggie);
@@ -218,20 +218,25 @@ angular.module('zmApp.controllers')
                     }
 
 
-                  
+                    NVRDataModel.debug("All images loaded, doing image layout");
+                    $timeout(function () {
+                        pckry.initShiftLayout(positions, 'data-item-id');
+                        //$scope.$digest();
+                    }, 0);
                 }
-               
-                
-                
-                $timeout (function () {
-                    pckry.layout();},300);
-
+                $timeout(function () {
+                    NVRDataModel.log("Force calling resize");
+                    pckry.shiftLayout();
+                }, zm.packeryTimer); // don't ask
 
+                pckry.onresize();
 
             }, zm.packeryTimer);
 
         });
 
+
+
         function itemDragged(item) {
             NVRDataModel.debug("drag complete");
 
@@ -512,7 +517,8 @@ angular.module('zmApp.controllers')
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent":false
             }, {
                 reload: true
             });
@@ -535,7 +541,8 @@ angular.module('zmApp.controllers')
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent":false
             }, {
                 reload: true
             });
diff --git a/www/js/MontageHistoryCtrl.js b/www/js/MontageHistoryCtrl.js
index c0188d2d..3800157a 100644
--- a/www/js/MontageHistoryCtrl.js
+++ b/www/js/MontageHistoryCtrl.js
@@ -1,35 +1,22 @@
 // Controller for the montage view
-/* jshint -W041 */
+/* jshint -W041, -W093, -W083 */
 /* jslint browser: true*/
-/* global cordova,StatusBar,angular,console,ionic,Masonry,moment,Packery, Draggabilly, imagesLoaded */
-
-
+/* global cordova,StatusBar,angular,console,ionic,Masonry,moment,Packery, Draggabilly, imagesLoaded, Chart */
 // FIXME: This is a copy of montageCtrl - needs a lot of code cleanup
-
-angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$scope', '$rootScope', 'NVRDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window', '$translate', function ($scope, $rootScope, NVRDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window, $translate) {
-
-
-
-
+angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$scope', '$rootScope', 'NVRDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window', '$translate', 'qHttp', '$q', function ($scope, $rootScope, NVRDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window, $translate, qHttp, $q) {
     //--------------------------------------------------------------------------------------
     // Handles bandwidth change, if required
     //
     //--------------------------------------------------------------------------------------
-
     $rootScope.$on("bandwidth-change", function (e, data) {
         // nothing to do for now
         // eventUrl will use lower BW in next query cycle
     });
-
-
-
     //--------------------------------------
     // formats events dates in a nice way
     //---------------------------------------
-
     $scope.prettifyDateTimeFirst = function (str) {
         return moment(str).format(NVRDataModel.getTimeFormat() + '/MMM Do');
-
     };
     $scope.prettifyDate = function (str) {
         return moment(str).format('MMM Do, YYYY ' + NVRDataModel.getTimeFormat());
@@ -38,31 +25,24 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
     function prettifyDate(str) {
         return moment(str).format('MMM Do');
     }
-
     $scope.prettifyTime = function (str) {
-
         return moment(str).format('h:mm a');
     };
-
-
     $scope.prettify = function (str) {
         return moment(str).format(NVRDataModel.getTimeFormat() + ' on MMMM Do YYYY');
     };
-
-    $scope.dateChanged = function()
-    {
-        console.log ("DATE CHANGED");
+    $scope.humanizeTime = function (str) {
+        return moment(str).fromNow();
+    };
+    // if you change date in footer, change hrs
+    $scope.dateChanged = function () {
         $scope.datetimeValueFrom.hrs = Math.round(moment.duration(moment().diff(moment($scope.datetimeValueFrom.value))).asHours());
     };
-
-
-    $scope.hrsChanged = function()
-    {
-         $scope.datetimeValueFrom.value = moment().subtract($scope.datetimeValueFrom.hrs,'hours').toDate();
+    // if you change hrs in footer, change date 
+    $scope.hrsChanged = function () {
+        $scope.datetimeValueFrom.value = moment().subtract($scope.datetimeValueFrom.hrs, 'hours').toDate();
         timefrom.toDate();
-         
     };
-    
 
     function orientationChanged() {
         NVRDataModel.debug("Detected orientation change, redoing packery resize");
@@ -70,15 +50,6 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
             pckry.onresize();
         });
     }
-
-    $scope.toggleSizeButtons = function () {
-
-        $scope.showSizeButtons = !$scope.showSizeButtons;
-
-        NVRDataModel.debug("toggling size buttons:" + $scope.showSizeButtons);
-        if ($scope.showSizeButtons) $ionicScrollDelegate.$getByHandle("montage-delegate").scrollTop();
-    };
-
     //--------------------------------------
     // pause/unpause nph-zms
     //---------------------------------------
@@ -86,255 +57,287 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         //console.log ("TOGGLE PAUSE " + mid);
         var m = -1;
         for (var i = 0; i < $scope.MontageMonitors.length; i++) {
-
             if ($scope.MontageMonitors[i].Monitor.Id == mid) {
                 m = i;
                 break;
             }
         }
         if (m != -1) {
-            $scope.MontageMonitors[m].Monitor.isPaused = !$scope.MontageMonitors[m].Monitor.isPaused;
-
-            var cmd = $scope.MontageMonitors[m].Monitor.isPaused ? 1 : 2;
-
+            
+            $scope.MontageMonitors[m].Monitor.isPaused = !$scope.MontageMonitors[m].Monitor.isPaused; 
+            var cmd = 1;
             NVRDataModel.debug("Sending CMD:" + cmd + " for monitor " + $scope.MontageMonitors[m].Monitor.Name);
             controlEventStream(cmd, "", $scope.MontageMonitors[m].Monitor.connKey, -1);
         }
     };
 
-
-    $scope.humanizeTime = function (str) {
-        return moment(str).fromNow();
-
+    function sendCmd(mid, cmd, extra) {
+        
+       
+        
+        var m = -1;
+        for (var i = 0; i < $scope.MontageMonitors.length; i++) {
+            if ($scope.MontageMonitors[i].Monitor.Id == mid) {
+                m = i;
+                break;
+            }
+        }
+        if (m != -1) {
+            NVRDataModel.debug("Sending CMD:" + cmd + " for monitor " + $scope.MontageMonitors[m].Monitor.Name);
+            return controlEventStream(cmd, "", $scope.MontageMonitors[m].Monitor.connKey, -1, extra);
+        }
+        
+    }
+    $scope.seek = function (mid, p) {
+        console.log("SLIDER CALLED WITH MID=" + mid + " progress=" + p);
+        
+        var m = -1;
+        for (var i = 0; i < $scope.MontageMonitors.length; i++) {
+            if ($scope.MontageMonitors[i].Monitor.Id == mid) {
+                m = i;
+                break;
+            }
+        }
+        if (m!= -1)
+        {
+            $scope.MontageMonitors[i].Monitor.seek = true;
+        }
+        
+        sendCmd(mid, '14', "&offset=" + p)
+        .then (function(success)
+        {
+            console.log ("Removing seek status from "  + $scope.MontageMonitors[i].Monitor.Name);
+            $scope.MontageMonitors[i].Monitor.seek = false;
+            
+        },
+        function (err)
+        {
+            console.log ("Removing seek status from "  + $scope.MontageMonitors[i].Monitor.Name);
+             $scope.MontageMonitors[i].Monitor.seek = false;
+        });
+        
+    };
+    $scope.moveFaster = function (mid) {
+        sendCmd(mid, 4);
+    };
+    $scope.moveSlower = function (mid) {
+        sendCmd(mid, 5);
+    };
+    $scope.movePlay = function (mid) {
+        
+        var m = -1;
+        for (var i = 0; i < $scope.MontageMonitors.length; i++) {
+            if ($scope.MontageMonitors[i].Monitor.Id == mid) {
+                m = i;
+                break;
+            }
+        }
+        if (m != -1) {
+            $scope.MontageMonitors[m].Monitor.isPaused = false; 
+            var cmd = 2;
+            NVRDataModel.debug("Sending CMD:" + cmd + " for monitor " + $scope.MontageMonitors[m].Monitor.Name);
+            controlEventStream(cmd, "", $scope.MontageMonitors[m].Monitor.connKey, -1);
+        }
     };
-
     //--------------------------------------
     // Called when ion-footer collapses
     // note that on init it is also called
     //---------------------------------------
-
     $scope.footerExpand = function () {
         // console.log ("**************** EXPAND CALLED ***************");
         $ionicSideMenuDelegate.canDragContent(false);
     };
-
     $scope.footerCollapse = function () {
-
-
         footerCollapse();
-
-
     };
-
-
     /* Note this is also called when the view is first loaded */
     function footerCollapse() {
-        // console.log ("**************** COLLAPSE CALLED ***************");
         if (readyToRun == false) {
             NVRDataModel.debug("fake call to footerCollapse - ignoring");
             return;
         }
-
-
-
+        
+        $interval.cancel($rootScope.eventQueryInterval);
+        $ionicLoading.show({
+                    template: $translate.instant('kPleaseWait'),
+                    noBackdrop: true,
+                    duration: zm.httpTimeout
+                });
+        
         $scope.dragBorder = "";
         $scope.isDragabillyOn = false;
-        $ionicSideMenuDelegate.canDragContent(true);
-
+        $ionicSideMenuDelegate.canDragContent(false);
         NVRDataModel.stopNetwork("MontageHistory-footerCollapse");
         var ld = NVRDataModel.getLogin();
-
         $scope.sliderVal.realRate = $scope.sliderVal.rate * 100;
-        //NVRDataModel.debug ("Playback rate is:"  + $scope.sliderVal.realRate);
-
         var TimeObjectFrom = moment($scope.datetimeValueFrom.value).format("YYYY-MM-DD HH:mm");
-        
-        //var TimeObjectTo = moment($scope.datetimeValueTo.value).format('YYYY-MM-DD HH:mm');
         var TimeObjectTo = moment().format('YYYY-MM-DD HH:mm');
-
-        // console.log ("TIME START: " + TimeObjectFrom + " " + TimeObjectTo);
-        //console.log ("TIME START: " + TimeObjectFrom + " " + TimeObjectTo);
-
-
         var apiurl;
-
+        
         // release all active streams
         for (var i = 0; i < $scope.MontageMonitors.length; i++) {
             $scope.MontageMonitors[i].Monitor.selectStyle = "";
+            $scope.MontageMonitors[i].Monitor.eid = "-1";
             // generate new connKeys if timeline changes
             if ($scope.MontageMonitors[i].Monitor.eventUrl != 'img/noevent.png') {
                 // this means this mid was showing a message, now we need to change it
                 // so kill prev. stream first
-                NVRDataModel.log("footerCollapse: Calling kill with " + $scope.MontageMonitors[i].Monitor.connKey + " for Monitor:"+$scope.MontageMonitors[i].Monitor.Name);
-                var tmpCK = angular.copy($scope.MontageMonitors[i].Monitor.connKey);
-                timedControlEventStream(2500, 17, "", tmpCK, -1);
+                NVRDataModel.log("footerCollapse: Calling kill with " + $scope.MontageMonitors[i].Monitor.connKey + " for Monitor:" + $scope.MontageMonitors[i].Monitor.Name);
+                //var tmpCK = angular.copy($scope.MontageMonitors[i].Monitor.connKey);
+                //timedControlEventStream(2500, 17, "", tmpCK, -1);
+                controlEventStream(17, "", $scope.MontageMonitors[i].Monitor.connKey, -1);
                 $scope.MontageMonitors[i].Monitor.eventUrl = "img/noevent.png";
+                $scope.MontageMonitors[i].Monitor.eid = "-1";
                 $scope.MontageMonitors[i].Monitor.connKey = (Math.floor((Math.random() * 999999) + 1)).toString();
+                $scope.MontageMonitors[i].Monitor.noGraph = true;
                 //console.log ("Generating connkey: " +$scope.MontageMonitors[i].Monitor.connKey);
-            } else {
-                //console.log ("footerCollapse: Skipped kill: connkey:"+$scope.MontageMonitors[i].Monitor.connKey + " function " + $scope.MontageMonitors[i].Monitor.Function + " listDisplay " + $scope.MontageMonitors[i].Monitor.lisDisplay + " enabled " + $scope.MontageMonitors[i].Monitor.Enabled + " eventURL " + $scope.MontageMonitors[i].Monitor.eventUrl);
             }
-
         }
-        
-        // grab events that start on or before the time and end on or after the time
-        // this should only bring up events that span that time
-        //apiurl = ld.apiurl + "/events/index/StartTime >=:" + TimeObjectFrom + "/EndTime <=:" + TimeObjectTo + ".json";
-        apiurl = ld.apiurl + "/events/index/StartTime >=:" + TimeObjectFrom + "/AlarmFrames >=:" + (ld.enableAlarmCount ? ld.minAlarmCount : 0)+  ".json";
-
-        
+        // grab events that start on or after the time 
+        apiurl = ld.apiurl + "/events/index/StartTime >=:" + TimeObjectFrom + "/AlarmFrames >=:" + (ld.enableAlarmCount ? ld.minAlarmCount : 0) + ".json";
         NVRDataModel.log("Event timeline API is " + apiurl);
-
         // make sure there are no more than 5 active streams (noevent is ok)
         $scope.currentLimit = $scope.monLimit;
-        $http.get(apiurl)
-            .success(function (data) {
-
-                var ld = NVRDataModel.getLogin();
-                NVRDataModel.debug("Got " + data.events.length + "new history events...");
-                var eid, mid, stime;
-                for (i = 0; i < data.events.length; i++) {
-                    mid = data.events[i].Event.MonitorId;
-                    eid = data.events[i].Event.Id;
-                    stime = data.events[i].Event.StartTime;
-
-                    // only take the first one for each monitor
-                    for (var j = 0; j < $scope.MontageMonitors.length; j++) {
-                        $scope.MontageMonitors[j].Monitor.isPaused = false;
-                        // that's the earliest match and play gapless from there
-                        if ($scope.MontageMonitors[j].Monitor.Id == mid) {
-
-                            if ($scope.MontageMonitors[j].Monitor.eventUrl == 'img/noevent.png') {
-
-                                // console.log ("Old value of event url " + $scope.MontageMonitors[j].eventUrl);
-                                //console.log ("ldurl is " + ld.streamingurl);
-
-                                var bw = NVRDataModel.getBandwidth() == "lowbw" ? zm.eventMontageQualityLowBW : ld.montageHistoryQuality;
-                                $scope.MontageMonitors[j].Monitor.eventUrl = ld.streamingurl + "/nph-zms?source=event&mode=jpeg&event=" + eid + "&frame=1&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[j].Monitor.connKey + "&scale=" + bw + "&rand=" + $rootScope.rand;
-                                
-                                //console.log ("Setting event URL to " +$scope.MontageMonitors[j].Monitor.eventUrl);
-
-                                //   console.log ("SWITCHING TO " + $scope.MontageMonitors[j].eventUrl);
-
-
-                                $scope.MontageMonitors[j].Monitor.eventUrlTime = stime;
-                            }
-                    
-                        }
+        //qHttp.get(apiurl)
+        $http({
+            method: 'get',
+            url: apiurl
+        }).then(function (succ) {
+            var data = succ.data;
+            var ld = NVRDataModel.getLogin();
+            NVRDataModel.debug("Got " + data.events.length + "new history events...");
+            var eid, mid, stime;
+            for (i = 0; i < data.events.length; i++) {
+                mid = data.events[i].Event.MonitorId;
+                eid = data.events[i].Event.Id;
+                stime = data.events[i].Event.StartTime;
+                // only take the first one for each monitor
+                for (var j = 0; j < $scope.MontageMonitors.length; j++) {
+                    $scope.MontageMonitors[j].Monitor.isPaused = false;
+                    // that's the earliest match and play gapless from there
+                    if ($scope.MontageMonitors[j].Monitor.Id == mid) {
+                        if ($scope.MontageMonitors[j].Monitor.eventUrl == 'img/noevent.png') {
+                            // console.log ("Old value of event url " + $scope.MontageMonitors[j].eventUrl);
+                            //console.log ("ldurl is " + ld.streamingurl);
+                            var bw = NVRDataModel.getBandwidth() == "lowbw" ? zm.eventMontageQualityLowBW : ld.montageHistoryQuality;
+                            $scope.MontageMonitors[j].Monitor.eventUrl = ld.streamingurl + "/nph-zms?source=event&mode=jpeg&event=" + eid + "&frame=1&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[j].Monitor.connKey + "&scale=" + bw + "&rand=" + $rootScope.rand;
+                            //console.log ("Setting event URL to " +$scope.MontageMonitors[j].Monitor.eventUrl);
+                            //   console.log ("SWITCHING TO " + $scope.MontageMonitors[j].eventUrl);
+                            $scope.MontageMonitors[j].Monitor.eventUrlTime = stime;
+                            $scope.MontageMonitors[j].Monitor.eid = eid;
+                            $scope.MontageMonitors[j].Monitor.eventDuration = data.events[i].Event.Length;
+                            $scope.MontageMonitors[j].Monitor.sliderProgress = {
+                                progress: 0
+                            };
+                            //console.log(">>> Setting Event for " + $scope.MontageMonitors[j].Monitor.Name + " to " + eid);
+                            // now lets get the API for that event for graphing
+                             $scope.MontageMonitors[j].Monitor.noGraph = true;
+                            
+                   
+                        } 
                     }
                 }
-
-                // make sure we do our best to get that duration for all monitors
-                // in the above call, is possible some did not make the cut in the first page
-
-                NVRDataModel.log("Making sure all monitors have a fair chance...");
-                for (i = 0; i < $scope.MontageMonitors.length; i++) {
-                    
-                    console.log ("Fair chance check for " + $scope.MontageMonitors[i].Monitor.Name);
+            }
+            // make sure we do our best to get that duration for all monitors
+            // in the above call, is possible some did not make the cut in the first page
+            NVRDataModel.log("Making sure all monitors have a fair chance...");
+            var promises = [];
+            for (i = 0; i < $scope.MontageMonitors.length; i++) {
+                console.log("Fair chance check for " + $scope.MontageMonitors[i].Monitor.Name);
+                if ($scope.MontageMonitors[i].Monitor.eventUrl == 'img/noevent.png') {
+                    var indivGrab = ld.apiurl + "/events/index/MonitorId:" + $scope.MontageMonitors[i].Monitor.Id + "/StartTime >=:" + TimeObjectFrom + "/AlarmFrames >=:" + (ld.enableAlarmCount ? ld.minAlarmCount : 0) + ".json";
+                    NVRDataModel.debug("Monitor " + $scope.MontageMonitors[i].Monitor.Id + ":" + $scope.MontageMonitors[i].Monitor.Name + " does not have events, trying " + indivGrab);
+                    var p = getExpandedEvents(i, indivGrab);
+                    promises.push(p);
                     
-                    if ($scope.MontageMonitors[i].Monitor.eventUrl == 'img/noevent.png') {
-
-
-                        var indivGrab = ld.apiurl + "/events/index/MonitorId:" + $scope.MontageMonitors[i].Monitor.Id + "/StartTime >=:" + TimeObjectFrom   + "/AlarmFrames >=:" + (ld.enableAlarmCount ? ld.minAlarmCount : 0) + ".json";
-
-                        NVRDataModel.debug("Monitor " + $scope.MontageMonitors[i].Monitor.Id + ":" + $scope.MontageMonitors[i].Monitor.Name + " does not have events, trying " + indivGrab);
-
-                        getExpandedEvents(i, indivGrab);
-
-                    }
                 }
+                
+            }
+            $q.all(promises).then( doPackery );
+            
+            // At this stage, we have both a general events grab, and specific event grabs for MIDS that were empty
+            
+            function doPackery()
+            {
+               // $ionicLoading.hide();
                 console.log("REDOING PACKERY & DRAG");
-                if (pckry !== undefined)
-                {
-                       
-                        // remove current draggies
-                        draggies.forEach(function (drag) {
-                            drag.destroy();
-                        });
-                       
-                        draggies = [];
-                        // destroy existing packery object
-                        pckry.destroy();
-                        
-                        initPackery();
-                        
-                        
-                        
-                        
-                        
-
+                if (pckry !== undefined) {
+                    // remove current draggies
+                    draggies.forEach(function (drag) {
+                        drag.destroy();
+                    });
+                    draggies = [];
+                    // destroy existing packery object
+                    pckry.destroy();
+                    initPackery();
+                    
+                    $rootScope.eventQueryInterval = $interval(function () {
+            checkAllEvents();
+        }.bind(this), zm.eventHistoryTimer);
                 }
-
-
-            })
-            .error(function (data) {
-                NVRDataModel.debug("history  ERROR:" + JSON.stringify(data));
-
-            });
-
+            }
+        }, function (err) {
+            NVRDataModel.debug("history  ERROR:" + JSON.stringify(err));
+        });
 
         function getExpandedEvents(i, indivGrab) {
+            var d  = $q.defer();
             var ld = NVRDataModel.getLogin();
-            // console.log ("EXPANDED EVENT " + i + " " + indivGrab);
-            $http.get(indivGrab)
-                .success(function (data) {
-                    // console.log ("EXPANDED DATA FOR MONITOR " + i + JSON.stringify(data));
-                    if (data.events.length > 0) {
-
-                        if (!NVRDataModel.isBackground()) {
-
-                            var bw = NVRDataModel.getBandwidth() == "lowbw" ? zm.eventMontageQualityLowBW : ld.montageHistoryQuality;
-
-                            $scope.MontageMonitors[i].Monitor.eventUrl = ld.streamingurl + "/nph-zms?source=event&mode=jpeg&event=" + data.events[0].Event.Id + "&frame=1&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[i].Monitor.connKey + "&scale=" + bw + "&rand=" + $rootScope.rand;
-
-
-
-                            //console.log ("SWITCHING TO " + $scope.MontageMonitors[i].eventUrl);
-
-                            $scope.MontageMonitors[i].Monitor.eventUrlTime = data.events[0].Event.StartTime;
-
-                            NVRDataModel.log("Found expanded event " + data.events[0].Event.Id + " for monitor " + $scope.MontageMonitors[i].Monitor.Id);
-                        } else {
-                            // $scope.MontageMonitors[i].eventUrl="img/noevent.png";
-                            //    $scope.MontageMonitors[i].eventUrlTime = "";
-                            //    NVRDataModel.log ("Setting img src to null as data received in background");
-                        }
+            console.log ("Expanded API: " + indivGrab);
+            $http({
+                method: 'get',
+                url: indivGrab
+            }).then(function (succ) {
+                var data = succ.data;
+                // console.log ("EXPANDED DATA FOR MONITOR " + i + JSON.stringify(data));
+                if (data.events.length > 0) {
+                    if (!NVRDataModel.isBackground()) {
+                        var bw = NVRDataModel.getBandwidth() == "lowbw" ? zm.eventMontageQualityLowBW : ld.montageHistoryQuality;
+                        $scope.MontageMonitors[i].Monitor.eventUrl = ld.streamingurl + "/nph-zms?source=event&mode=jpeg&event=" + data.events[0].Event.Id + "&frame=1&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[i].Monitor.connKey + "&scale=" + bw + "&rand=" + $rootScope.rand;
+                        //console.log ("SWITCHING TO " + $scope.MontageMonitors[i].eventUrl);
+                        $scope.MontageMonitors[i].Monitor.eventUrlTime = data.events[0].Event.StartTime;
+                        $scope.MontageMonitors[i].Monitor.eid = data.events[0].Event.Id;
+                        $scope.MontageMonitors[i].Monitor.noGraph = true;
+                        $scope.MontageMonitors[i].Monitor.sliderProgress = {
+                            progress: 0
+                        };
+                        $scope.MontageMonitors[i].Monitor.eventDuration = data.events[0].Event.Length;
+                        console.log(">>> Setting Event for " + $scope.MontageMonitors[i].Monitor.Name + " to " + data.events[0].Event.Id);
+                        NVRDataModel.log("Found expanded event " + data.events[0].Event.Id + " for monitor " + $scope.MontageMonitors[i].Monitor.Id);
+                    } else {
+                        // $scope.MontageMonitors[i].eventUrl="img/noevent.png";
+                        //    $scope.MontageMonitors[i].eventUrlTime = "";
+                        //    NVRDataModel.log ("Setting img src to null as data received in background");
                     }
-
-                })
-                .error(function (data) {});
+                }
+                d.resolve(true);
+                return d.promise;
+            },
+                    function (err) { d.resolve(true);return d.promise; }
+                   
+                   );
+            return d.promise;
         }
     }
-
     //---------------------------------------------------------
     // This is periodically called to get the current playing 
     // event by zms. I use this to display a timestamp
     // Its a 2 step process - get event Id then go a Event
     // API call to get time stamp. Sucks
     //---------------------------------------------------------
-
     function checkAllEvents() {
-
-        //console.log ("Events are checked....");
-
+        console.log("Timer:Events are checked....");
         for (var i = 0; i < $scope.MontageMonitors.length; i++) {
             // don't check for monitors that are not shown
             // because nph connkey won't exist and the response
             // will fail
-            if ($scope.MontageMonitors[i].Monitor.eventUrl != "" && $scope.MontageMonitors[i].Monitor.eventUrl != 'img/noevent.png' && $scope.MontageMonitors[i].Monitor.connKey != '' &&
-                $scope.MontageMonitors[i].Monitor.Function != 'None' &&
-                $scope.MontageMonitors[i].Monitor.listDisplay != 'noshow' &&
-                $scope.MontageMonitors[i].Monitor.Enabled != '0') {
-                NVRDataModel.debug("Checking event status for " + $scope.MontageMonitors[i].Monitor.Name + ":" + $scope.MontageMonitors[i].Monitor.eventUrl + ":" + $scope.MontageMonitors[i].Monitor.Function + ":" + $scope.MontageMonitors[i].Monitor.listDisplay);
+            if ($scope.MontageMonitors[i].Monitor.eventUrl != "" && $scope.MontageMonitors[i].Monitor.eventUrl != 'img/noevent.png' && $scope.MontageMonitors[i].Monitor.connKey != '' && $scope.MontageMonitors[i].Monitor.Function != 'None' && $scope.MontageMonitors[i].Monitor.listDisplay != 'noshow' && $scope.MontageMonitors[i].Monitor.Enabled != '0') {
+                // NVRDataModel.debug("Checking event status for " + $scope.MontageMonitors[i].Monitor.Name + ":" + $scope.MontageMonitors[i].Monitor.eventUrl + ":" + $scope.MontageMonitors[i].Monitor.Function + ":" + $scope.MontageMonitors[i].Monitor.listDisplay);
+                // console.log ("Sending query 99 for " + $scope.MontageMonitors[i].Monitor.Name + " with ck="+$scope.MontageMonitors[i].Monitor.connKey);
                 controlEventStream('99', '', $scope.MontageMonitors[i].Monitor.connKey, i);
-
             }
         }
     }
-
-
-   
-
     //--------------------------------------------------------------
     //  Used to control zms for a connkey. If ndx is not -1,
     // then it also calls an event API for the returned eid
@@ -349,7 +352,6 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         NVRDataModel.debug("Deferring control " + cmd + " by " + mMtime);
         $timeout(function () {
             subControlStream(cmd, connkey);
-
         }, mMtime);
     }
 
@@ -357,49 +359,40 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         var loginData = NVRDataModel.getLogin();
         var myauthtoken = $rootScope.authSession.replace("&auth=", "");
         //&auth=
-        var req = $http({
+        var req = qHttp({
             method: 'POST',
             /*timeout: 15000,*/
             url: loginData.url + '/index.php',
             headers: {
-                'Content-Type': 'application/x-www-form-urlencoded',
-                //'Accept': '*/*',
+                'Content-Type': 'application/x-www-form-urlencoded', //'Accept': '*/*',
             },
             transformRequest: function (obj) {
                 var str = [];
-                for (var p in obj)
-                    str.push(encodeURIComponent(p) + "=" +
-                        encodeURIComponent(obj[p]));
+                for (var p in obj) str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                 var foo = str.join("&");
                 //console.log("****SUB RETURNING " + foo);
                 return foo;
             },
-
             data: {
                 view: "request",
                 request: "stream",
                 connkey: connkey,
                 command: cmd,
-                auth: myauthtoken,
-                // user: loginData.username,
+                auth: myauthtoken, // user: loginData.username,
                 // pass: loginData.password
             }
         });
-
-        req.success(function (resp) {
-            NVRDataModel.debug("subControl success:" + JSON.stringify(resp));
-        });
-
-
-        req.error(function (resp) {
-            NVRDataModel.debug("subControl error:" + JSON.stringify(resp));
+        req.then(function (succ) {
+            NVRDataModel.debug("subControl success:" + JSON.stringify(succ));
+        }, function (err) {
+            NVRDataModel.debug("subControl error:" + JSON.stringify(err));
         });
     }
 
-
-    function controlEventStream(cmd, disp, connkey, ndx) {
+    function controlEventStream(cmd, disp, connkey, ndx, extras) {
         // console.log("Command value " + cmd);
-
+        
+        var d = $q.defer();
         if (disp) {
             $ionicLoading.hide();
             $ionicLoading.show({
@@ -409,7 +402,6 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
             });
         }
         var loginData = NVRDataModel.getLogin();
-
         /*
         var CMD_NONE = 0;
         var CMD_PAUSE = 1;
@@ -428,104 +420,129 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         var CMD_SEEK = 14;
         var CMD_QUERY = 99;
         */
-
-
-
         // You need to POST commands to control zms
         // Note that I am url encoding the parameters into the URL
         // If I leave it as JSON, it gets converted to OPTONS due
         // to CORS behaviour and ZM/Apache don't seem to handle it
-
         //console.log("POST: " + loginData.url + '/index.php');
-
         //console.log ("AUTH IS " + $rootScope.authSession);
-
         var myauthtoken = $rootScope.authSession.replace("&auth=", "");
         //&auth=
-        var req = $http({
+        var req = qHttp({
             method: 'POST',
             /*timeout: 15000,*/
             url: loginData.url + '/index.php',
             headers: {
-                'Content-Type': 'application/x-www-form-urlencoded',
-                //'Accept': '*/*',
+                'Content-Type': 'application/x-www-form-urlencoded', //'Accept': '*/*',
             },
             transformRequest: function (obj) {
                 var str = [];
-                for (var p in obj)
-                    str.push(encodeURIComponent(p) + "=" +
-                        encodeURIComponent(obj[p]));
+                for (var p in obj) str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                 var foo = str.join("&");
-                // console.log("****RETURNING " + foo);
+                if (extras) foo = foo + extras;
+                //console.log("****RETURNING " + foo);
                 return foo;
             },
-
             data: {
                 view: "request",
                 request: "stream",
                 connkey: connkey,
                 command: cmd,
-                auth: myauthtoken,
-                // user: loginData.username,
+                auth: myauthtoken, // user: loginData.username,
                 // pass: loginData.password
             }
         });
-        req.success(function (resp) {
-
-            // console.log("SUCCESS FOR: " + JSON.stringify(resp));
-
-            if (resp.result == "Ok" && ndx != -1) {
+        req.then(function (succ) {
+            var resp = succ.data;
+            
+            console.log ("zms response: " + JSON.stringify(resp));
+            
+            // move progress bar if event id is the same
+            if (resp.result == "Ok" && ndx != -1 && (resp.status.event == $scope.MontageMonitors[ndx].Monitor.eid)) 
+            {
+                if (!$scope.MontageMonitors[ndx].Monitor.seek)
+                {
+                    $scope.MontageMonitors[ndx].Monitor.sliderProgress.progress = resp.status.progress;
+                }
+                else
+                {
+                    NVRDataModel.debug ("Skipping progress as seek is active for " + $scope.MontageMonitors[ndx].Monitor.Name);
+                }
+            }
+            
+            if (resp.result == "Ok" && ndx != -1 && ((resp.status.event != $scope.MontageMonitors[ndx].Monitor.eid) || $scope.MontageMonitors[ndx].Monitor.noGraph == true)) {
+                $scope.MontageMonitors[ndx].Monitor.noGraph = false;
+                // $scope.MontageMonitors[ndx].Monitor.sliderProgress.progress = 0;
+                NVRDataModel.debug("Fetching details, as event changed for " + $scope.MontageMonitors[ndx].Monitor.Name + " from " + $scope.MontageMonitors[ndx].Monitor.eid + " to " + resp.status.event);
                 var ld = NVRDataModel.getLogin();
                 var apiurl = ld.apiurl + "/events/" + resp.status.event + ".json";
                 //console.log ("API " + apiurl);
-                $http.get(apiurl)
-                    .success(function (data) {
-                        var currentEventTime = moment(data.event.Event.StartTime);
-                        var maxTime = moment();
-                        //NVRDataModel.debug ("Monitor: " + $scope.MontageMonitors[ndx].Monitor.Id + " max time="+maxTime + "("+$scope.datetimeValueTo.value+")"+ " current="+currentEventTime + "("+data.event.Event.StartTime+")");
-                        if ($scope.MontageMonitors[ndx].Monitor.eventUrlTime != data.event.Event.StartTime && currentEventTime.diff(maxTime) <= 0) {
-
-                            var ld = NVRDataModel.getLogin();
-                            var element = angular.element(document.getElementById($scope.MontageMonitors[ndx].Monitor.Id + "-timeline"));
-                            element.removeClass('animated flipInX');
-                            element.addClass('animated flipOutX');
-                            $timeout(function () {
-                                element.removeClass('animated flipOutX');
-                                element.addClass('animated flipInX');
-                                $scope.MontageMonitors[ndx].Monitor.eventUrlTime = data.event.Event.StartTime;
-
-                                var bw = NVRDataModel.getBandwidth() == "lowbw" ? zm.eventMontageQualityLowBW : ld.montageHistoryQuality;
-                                $scope.MontageMonitors[ndx].Monitor.eventUrl = ld.streamingurl + "/nph-zms?source=event&mode=jpeg&event=" + data.event.Event.Id + "&frame=1&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[ndx].Monitor.connKey + "&scale=" + bw + "&rand=" + $rootScope.rand;
-                            }, 700);
-
-                        } else if (currentEventTime.diff(maxTime) > 0) {
-                            NVRDataModel.debug(">>>>>>>>Monitor " + $scope.MontageMonitors[ndx].Monitor.Id + " event time of " + data.event.Event.StartTime + " exceeds " + $scope.datetimeValueTo.value + " stopping...");
-                            subControlStream(17, connkey);
-
-
+                qHttp({
+                    method: 'get',
+                    url: apiurl
+                }).then(function (succ) {
+                    var data = succ.data;
+                    var currentEventTime = moment(data.event.Event.StartTime);
+                    var maxTime = moment();
+                    //NVRDataModel.debug ("Monitor: " + $scope.MontageMonitors[ndx].Monitor.Id + " max time="+maxTime + "("+$scope.datetimeValueTo.value+")"+ " current="+currentEventTime + "("+data.event.Event.StartTime+")");
+                    
+                        var framearray = {
+                            labels: [],
+                            datasets: [{
+                                backgroundColor: 'rgba(242, 12, 12, 0.5)',
+                                borderColor: 'rgba(242, 12, 12, 0.5)',
+                                data: [],
+                            }]
+                        };
+                        framearray.labels = [];
+                        var ld = NVRDataModel.getLogin();
+                        console.log(">>>>> GRAPH");
+                        for (i = 0; i < data.event.Frame.length; i++) {
+                            var ts = moment(data.event.Frame[i].TimeStamp).format(timeFormat);
+                            //console.log ("pushing s:" + event.Frame[i].Score+" t:"+ts);
+                            framearray.datasets[0].data.push({
+                                x: ts,
+                                y: data.event.Frame[i].Score
+                            });
+                            framearray.labels.push("");
                         }
-
-                    })
-                    .error(function (data) {
-                        $scope.MontageMonitors[ndx].Monitor.eventUrlTime = "-";
-                    });
-
+                        $timeout(function () {
+                            drawGraph(framearray, $scope.MontageMonitors[ndx].Monitor.Id);
+                        }, 100);
+                        var element = angular.element(document.getElementById($scope.MontageMonitors[ndx].Monitor.Id + "-timeline"));
+                        element.removeClass('animated flipInX');
+                        element.addClass('animated flipOutX');
+                        $timeout(function () {
+                            element.removeClass('animated flipOutX');
+                            element.addClass('animated flipInX');
+                            $scope.MontageMonitors[ndx].Monitor.eventUrlTime = data.event.Event.StartTime;
+                            var bw = NVRDataModel.getBandwidth() == "lowbw" ? zm.eventMontageQualityLowBW : ld.montageHistoryQuality;
+                            $scope.MontageMonitors[ndx].Monitor.eventUrl = ld.streamingurl + "/nph-zms?source=event&mode=jpeg&event=" + data.event.Event.Id + "&frame=1&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[ndx].Monitor.connKey + "&scale=" + bw + "&rand=" + $rootScope.rand;
+                            $scope.MontageMonitors[ndx].Monitor.eid = data.event.Event.Id;
+                            $scope.MontageMonitors[ndx].Monitor.sliderProgress = {
+                                progress: 0
+                            };
+                            $scope.MontageMonitors[ndx].Monitor.eventDuration = data.event.Event.Length;
+                            console.log(">>> Setting Event for " + $scope.MontageMonitors[ndx].Monitor.Name + " to " + data.event.Event.Id);
+                        }, 700);
+                   
+                    
+                }, function (err) {
+                    $scope.MontageMonitors[ndx].Monitor.eventUrlTime = "-";
+                });
             }
+            d.resolve(true);
+            return d.promise;
+        }, function (err) {
+            d.reject(false);
+            NVRDataModel.log("Error sending event command " + JSON.stringify(err), "error");
+            return d.promise;
         });
-
-        req.error(function (resp) {
-            //console.log("ERROR: " + JSON.stringify(resp));
-            NVRDataModel.log("Error sending event command " + JSON.stringify(resp), "error");
-        });
+        return d.promise;
     }
-
-
-    
     $scope.isBackground = function () {
         return NVRDataModel.isBackground();
     };
-
-
     //----------------------------------------------------------------
     // Alarm notification handling
     //----------------------------------------------------------------
@@ -537,75 +554,47 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent": false
             }, {
                 reload: true
             });
         }
     };
-
     $scope.handleAlarmsWhileMinimized = function () {
         $rootScope.isAlarm = !$rootScope.isAlarm;
-
         $scope.minimal = !$scope.minimal;
         NVRDataModel.debug("MontageHistoryCtrl: switch minimal is " + $scope.minimal);
         ionic.Platform.fullScreen($scope.minimal, !$scope.minimal);
         $interval.cancel(intervalHandle);
         $interval.cancel($rootScope.eventQueryInterval);
-
         if (!$rootScope.isAlarm) {
             $rootScope.alarmCount = "0";
             $ionicHistory.nextViewOptions({
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent": false,
             }, {
                 reload: true
             });
         }
     };
-
-
     //-------------------------------------------------------------
     // this is checked to make sure we are not pulling images
     // when app is in background. This is a problem with Android,
     // for example
     //-------------------------------------------------------------
-
     $scope.isBackground = function () {
         //console.log ("Is background called from Montage and returned " +    
         //NVRDataModel.isBackground());
         return NVRDataModel.isBackground();
     };
-
-    
-
-
-
-    //---------------------------------------------------------------------
-    // Triggered when you enter/exit full screen
-    //---------------------------------------------------------------------
-    $scope.switchMinimal = function () {
-        $scope.minimal = !$scope.minimal;
-        NVRDataModel.debug("MontageHistoryCtrl: switch minimal is " + $scope.minimal);
-        //console.log("Hide Statusbar");
-        ionic.Platform.fullScreen($scope.minimal, !$scope.minimal);
-        $interval.cancel(intervalHandle); //we will renew on reload
-        // We are reloading this view, so we don't want entry animations
-        $ionicHistory.nextViewOptions({
-            disableAnimate: true,
-            disableBack: true
-        });
-        $state.go("montage", {
-            minimal: $scope.minimal,
-            isRefresh: true
-        });
+    $scope.toggleControls = function () {
+        $scope.showControls = !$scope.showControls;
     };
-
-
     $scope.toggleSelectItem = function (ndx) {
-
         if ($scope.MontageMonitors[ndx].Monitor.selectStyle !== "undefined" && $scope.MontageMonitors[ndx].Monitor.selectStyle == "dragborder-selected") {
             $scope.MontageMonitors[ndx].Monitor.selectStyle = "";
         } else {
@@ -616,31 +605,24 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
     //---------------------------------------------------------------------
     // Called when you enable/disable dragging
     //---------------------------------------------------------------------
-
     $scope.dragToggle = function () {
         dragToggle();
-
-
     };
 
     function dragToggle() {
         var i;
         $scope.isDragabillyOn = !$scope.isDragabillyOn;
-
         $ionicSideMenuDelegate.canDragContent($scope.isDragabillyOn ? false : true);
-
         //$timeout(function(){pckry.reloadItems();},10);
         NVRDataModel.debug("setting dragabilly to " + $scope.isDragabillyOn);
         if ($scope.isDragabillyOn) {
             $scope.showSizeButtons = true;
-
             $scope.dragBorder = "dragborder";
             NVRDataModel.debug("Enabling drag for " + draggies.length + " items");
             for (i = 0; i < draggies.length; i++) {
                 draggies[i].enable();
                 draggies[i].bindHandles();
             }
-
             // reflow and reload as some may be hidden
             //  $timeout(function(){pckry.reloadItems();$timeout(function(){pckry.layout();},300);},100);
         } else {
@@ -664,7 +646,6 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                     NVRDataModel.setLogin(ld);*/
                 }, 300);
             }, 100);
-
         }
     }
     //---------------------------------------------------------------------
@@ -673,146 +654,76 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
     $scope.togglePTZ = function () {
         $scope.showPTZ = !$scope.showPTZ;
     };
-
     $scope.callback = function () {
         // console.log("dragging");
     };
-
-
     $scope.onDropComplete = function (index, obj, event) {
         //console.log("dragged");
-        var otherObj = $scope.monitors[index];
-        var otherIndex = $scope.monitors.indexOf(obj);
-        $scope.monitors[index] = obj;
-        $scope.monitors[otherIndex] = otherObj;
+        var otherObj = $scope.MontageMonitors[index];
+        var otherIndex = $scope.MontageMonitors.indexOf(obj);
+        $scope.MontageMonitors[index] = obj;
+        $scope.MontageMonitors[otherIndex] = otherObj;
     };
-
-
-
-
     //---------------------------------------------------------------------
     // changes order of montage display
     //---------------------------------------------------------------------
-
     $scope.toggleMontageDisplayOrder = function () {
         $scope.packMontage = !$scope.packMontage;
         loginData.packMontage = $scope.packMontage;
         NVRDataModel.setLogin(loginData);
         //console.log ("Switching orientation");
     };
-
-
     //---------------------------------------------------------------------
     // In Android, the app runs full steam while in background mode
     // while in iOS it gets suspended unless you ask for specific resources
     // So while this view, we DON'T want Android to keep sending 1 second
     // refreshes to the server for images we are not seeing
     //---------------------------------------------------------------------
-
     function onPause() {
         NVRDataModel.debug("MontageHistoryCtrl: onpause called");
         $interval.cancel($rootScope.eventQueryInterval);
         $interval.cancel(intervalHandle);
-
         // $interval.cancel(modalIntervalHandle);
-
         // FIXME: Do I need to  setAwake(false) here?
     }
 
-
-    function onResume() {
-
-        // FIXME: Do we need to resume timers? when you resume, you go to portal and then here
-        /*
-          if (!$scope.isModalActive) {
-              var ld = NVRDataModel.getLogin();
-              
-              
-              NVRDataModel.debug("MontageHistoryCtrl: onresume called");
-              NVRDataModel.log("Restarting eventQuery timer on resume");
-              
-              console.log ("************** TIMER STARTED INSIDE RESUME ***************");
-              
-              //$rootScope.rand = Math.floor((Math.random() * 100000) + 1);
-              $interval.cancel($rootScope.eventQueryInterval);
-              $rootScope.eventQueryInterval = $interval(function () {
-                  checkAllEvents();
-                  //  console.log ("Refreshing Image...");
-              }.bind(this),zm.eventHistoryTimer);
-          } else // modal is active
-          {
-              // $rootScope.modalRand = Math.floor((Math.random() * 100000) + 1);
-          }*/
-
-
-
-
-    }
-
+    function onResume() {}
     $scope.openMenu = function () {
         $timeout(function () {
             $rootScope.stateofSlide = $ionicSideMenuDelegate.isOpen();
         }, 500);
-
         $ionicSideMenuDelegate.toggleLeft();
     };
-
     $scope.$on('$destroy', function () {
         NVRDataModel.debug("Cancelling eventQueryInterval");
         $interval.cancel($rootScope.eventQueryInterval);
-
-
-
-
     });
-
-
     $scope.$on('$ionicView.loaded', function () {
         //console.log("**VIEW ** MontageHistoryCtrl Loaded");
     });
-
     $scope.$on('$ionicView.enter', function () {
         NVRDataModel.debug("**VIEW ** MontageHistory Ctrl Entered");
         var ld = NVRDataModel.getLogin();
         //console.log("Setting Awake to " + NVRDataModel.getKeepAwake());
         NVRDataModel.setAwake(NVRDataModel.getKeepAwake());
-
+        NVRDataModel.debug("query timer started");
         $interval.cancel($rootScope.eventQueryInterval);
         //console.log ("****************** TIMER STARTED INSIDE ENTER");
         $rootScope.eventQueryInterval = $interval(function () {
             checkAllEvents();
-            //  console.log ("Refreshing Image...");
         }.bind(this), zm.eventHistoryTimer);
-
-
-
-
-
     });
-
     /*$scope.$on ('$ionicView.unloaded', function() {
         console.log ("******** HISTORY UNLOADED KILLING WINDOW ************");
         window.stop();
     });*/
-
-
     $scope.$on('$ionicView.beforeEnter', function () {
-
         //  NVRDataModel.log ("Before Enter History: initing connkeys");
-
-
-
-
-
     });
-
     $scope.$on('$ionicView.beforeLeave', function () {
         //console.log("**VIEW ** Event History Ctrl Left, force removing modal");
         if ($scope.modal) $scope.modal.remove();
-
-
         NVRDataModel.log("BeforeLeave: Nullifying the streams...");
-
         for (i = 0; i < $scope.MontageMonitors.length; i++) {
             var element = document.getElementById("img-" + i);
             /*if (element)
@@ -824,46 +735,25 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                 //$scope.$apply(nullify(element));
                 //element.src="";
             }*/
-
         }
-
-
-
         NVRDataModel.log("Cancelling event query timer");
         $interval.cancel($rootScope.eventQueryInterval);
-
         NVRDataModel.log("MontageHistory:Stopping network pull...");
         // make sure this is applied in scope digest to stop network pull
         // thats why we are doing it beforeLeave
-
         for (i = 0; i < $scope.MontageMonitors.length; i++) {
-            if ($scope.MontageMonitors[i].Monitor.connKey != '' &&
-                $scope.MontageMonitors[i].Monitor.eventUrl != 'img/noevent.png' &&
-                $scope.MontageMonitors[i].Monitor.Function != 'None' &&
-                $scope.MontageMonitors[i].Monitor.lisDisplay != 'noshow' &&
-                $scope.MontageMonitors[i].Monitor.Enabled != '0') {
+            if ($scope.MontageMonitors[i].Monitor.connKey != '' && $scope.MontageMonitors[i].Monitor.eventUrl != 'img/noevent.png' && $scope.MontageMonitors[i].Monitor.Function != 'None' && $scope.MontageMonitors[i].Monitor.lisDisplay != 'noshow' && $scope.MontageMonitors[i].Monitor.Enabled != '0') {
                 NVRDataModel.log("Before leave: Calling kill with " + $scope.MontageMonitors[i].Monitor.connKey);
                 var tmpCK = angular.copy($scope.MontageMonitors[i].Monitor.connKey);
                 timedControlEventStream(2500, 17, "", tmpCK, -1);
             }
         }
-
         pckry.destroy();
         window.removeEventListener("resize", orientationChanged, false);
-
         NVRDataModel.log("Forcing a window.stop() here");
         NVRDataModel.stopNetwork("MontageHistory-beforeLeave");
-
-
-
-
-    });
-
-    $scope.$on('$ionicView.unloaded', function () {
-
     });
-
-
+    $scope.$on('$ionicView.unloaded', function () {});
     $scope.sliderChanged = function (dirn) {
         console.log("SLIDER CHANGED");
         if ($scope.sliderChanging) {
@@ -871,35 +761,26 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
             //$scope.slider.monsize = oldSliderVal;
             // return;
         }
-
         $scope.sliderChanging = true;
-
         var somethingReset = false;
-
         // this only changes items that are selected
         for (var i = 0; i < $scope.MontageMonitors.length; i++) {
-
             var curVal = parseInt($scope.MontageMonitors[i].Monitor.gridScale);
             curVal = curVal + (10 * dirn);
             if (curVal < 10) curVal = 10;
             if (curVal > 100) curVal = 100;
             //console.log ("For Index: " + i + " From: " + $scope.MontageMonitors[i].Monitor.gridScale + " To: " + curVal);
-
             if ($scope.isDragabillyOn) {
                 // only do this for selected monitors
                 if ($scope.MontageMonitors[i].Monitor.selectStyle == "dragborder-selected") {
-
                     $scope.MontageMonitors[i].Monitor.gridScale = curVal;
                     somethingReset = true;
                 }
             } else {
                 $scope.MontageMonitors[i].Monitor.gridScale = curVal;
                 //somethingReset = true;
-
             }
-
         }
-
         // this changes all items if none were selected
         if (!somethingReset && $scope.isDragabillyOn) // nothing was selected
         {
@@ -911,10 +792,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                 $scope.MontageMonitors[i].Monitor.gridScale = cv;
             }
         }
-
-
         //pckry.reloadItems();
-
         pckry.once('layoutComplete', function () {
             /* $timeout(function () {
                  var positions = pckry.EHgetShiftPositions('eh-data-item-id');
@@ -926,33 +804,22 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                  $scope.sliderChanging = false;
              }, zm.packeryTimer);*/
         });
-
-
-
         if (!somethingReset) {
             //console.log (">>>SOMETHING NOT RESET");
             $timeout(function () {
                 pckry.layout();
             }, zm.packeryTimer);
         } else {
-
             //console.log (">>>SOMETHING  RESET");
             $timeout(function () {
                 layout(pckry);
             }, zm.packeryTimer);
         }
-
-
-
-
     };
 
     function layout(pckry) {
         pckry.shiftLayout();
     }
-
-
-
     $scope.resetSizes = function () {
         var somethingReset = false;
         for (var i = 0; i < $scope.MontageMonitors.length; i++) {
@@ -972,132 +839,45 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                 $scope.MontageMonitors[i].Monitor.gridScale = "50";
             }
         }
-
         $timeout(function () {
             pckry.reloadItems();
-
-
             $timeout(function () {
                 pckry.layout();
             }, zm.packeryTimer); // force here - no shiftlayout
-
-
         }, 100);
-
     };
 
-
-    //---------------------------------------------------------
-    // This function readjusts  montage size
-    //  and stores current size to persistent memory
-    //---------------------------------------------------------
-
-    function processSliderChanged(val) {
-        if (sizeInProgress) return;
-
-        sizeInProgress = true;
-        //console.log('Size has changed');
-        NVRDataModel.setMontageSize(val);
-        //console.log("ZMData Montage is " + NVRDataModel.getMontageSize() +
-        //   " and slider montage is " + $scope.slider.monsize);
-        // Now go ahead and reset sizes of entire monitor array
-        var monsizestring = "";
-        var i;
-        for (i = 0; i < $scope.monitors.length; i++) {
-
-            $scope.monitorSize[i] = parseInt(NVRDataModel.getMontageSize());
-            //console.log("Resetting Monitor " + i + " size to " + $scope.monitorSize[i]);
-            $scope.scaleDirection[i] = 1;
-            monsizestring = monsizestring + $scope.monitorSize[i] + ':';
-        }
-        monsizestring = monsizestring.slice(0, -1); // kill last :
-        //console.log("Setting monsize string:" + monsizestring);
-        loginData.montageArraySize = monsizestring;
-        NVRDataModel.setLogin(loginData);
-        //window.localStorage.setItem("montageArraySize", monsizestring);
-        sizeInProgress = false;
-    }
-
     function isEmpty(obj) {
         for (var prop in obj) {
             return false;
         }
         return true;
     }
-
     // called by afterEnter to load Packery
     function initPackery() {
-
-        console.log(">>>>>>>>>>>>>>>>> HIT INIT");
         $ionicLoading.show({
             template: $translate.instant('kArrangingImages'),
             noBackdrop: true,
             duration: zm.loadingTimeout
         });
-
         var progressCalled = false;
         draggies = [];
         var layouttype = true;
         var ld = NVRDataModel.getLogin();
-
-
-        var positionsStr = ld.packeryPositions;
-        var positions = {};
-
-        // if (positionsStr == '') {
-        if (1) {
-
-            NVRDataModel.log("Did NOT find a EHpackery layout");
-            layouttype = true;
-        } else {
-
-            //console.log ("POSITION STR IS " + positionsStr);
-            positions = JSON.parse(positionsStr);
-            NVRDataModel.log("found a EHpackery layout");
-            console.log(positionsStr);
-            layouttype = false;
-        }
-
-
-        var cnt = 0;
-        $scope.MontageMonitors.forEach(function (elem) {
-
-            if ((elem.Monitor.Enabled != '0') && (elem.Monitor.Function != 'None'))
-                cnt++;
-        });
-
-        NVRDataModel.log("Monitors that are active and not DOM hidden: " + cnt + " while grid has " + positions.length);
-
-        if (cnt > NVRDataModel.getLogin().maxMontage) {
-            cnt = NVRDataModel.getLogin().maxMontage;
-            NVRDataModel.log("restricting monitor count to " + cnt + " due to max-montage setting");
-        }
-
-        /*if (cnt != positions.length) {
-
-            NVRDataModel.log("Whoops!! Monitors have changed. I'm resetting layouts, sorry!");
-            layouttype = true;
-            positions = {};
-        }*/
-
+        
         var elem = angular.element(document.getElementById("mygrid"));
-
         //console.log ("**** mygrid is " + JSON.stringify(elem));
-
         imagesLoaded(elem).on('progress', function (instance, img) {
-
             progressCalled = true;
-
             // if (layouttype) $timeout (function(){layout(pckry);},100);
         });
-
         imagesLoaded(elem).once('always', function () {
-            console.log("******** ALL IMAGES LOADED");
+            //console.log("******** ALL IMAGES LOADED");
+            $scope.$digest();
             NVRDataModel.debug("All images loaded");
-            
-
             $ionicLoading.hide();
-
+            
+            layouttype = true;
             pckry = new Packery('.grid', {
                 itemSelector: '.grid-item',
                 percentPosition: true,
@@ -1106,17 +886,16 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                 initLayout: layouttype
 
             });
+            pckry.reloadItems();
             if (!progressCalled) {
-                NVRDataModel.log("*** BUG PROGRESS WAS NOT CALLED");
-                pckry.reloadItems();
-
+                NVRDataModel.log("***  PROGRESS WAS NOT CALLED");
+                
             }
-
+             
+            
             $timeout(function () {
-                var cnt = 0;
-                pckry.getItemElements().forEach(function (itemElem) {
 
-                    console.log("DRAG ADD " + cnt++);
+                pckry.getItemElements().forEach(function (itemElem) {
                     draggie = new Draggabilly(itemElem);
                     pckry.bindDraggabillyEvents(draggie);
                     draggies.push(draggie);
@@ -1128,7 +907,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
 
 
 
-                if (!isEmpty(positions)) {
+                /*if (!isEmpty(positions)) {
                     NVRDataModel.log("Arranging as per packery grid");
 
                     for (var i = 0; i < $scope.MontageMonitors.length; i++) {
@@ -1144,146 +923,149 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
 
 
                     NVRDataModel.debug("All images loaded, doing image layout");
-                    /* $timeout(function () {
-                         pckry.initShiftLayout(positions, 'eh-data-item-id');
-                     }, 0);*/
-                }
-                $scope.allImagesLoaded = true;
+                    $timeout(function () {
+                        pckry.initShiftLayout(positions, 'data-item-id');
+                    }, 0);
+                }*/
+                
+                
+                
                 $timeout(function () {
                     NVRDataModel.log("Force calling resize");
                     pckry.layout();
-                    
                 }, zm.packeryTimer); // don't ask
 
 
 
             }, zm.packeryTimer);
 
+           
         });
 
         function itemDragged(item) {
             NVRDataModel.debug("drag complete");
-
-            //pckry.getItemElements().forEach(function (itemElem) {
-
-            //console.log (itemElem.attributes['data-item-id'].value+" size  "+itemElem.attributes['data-item-size'].value );
-            //  });
-
-            /*  var positions = pckry.EHgetShiftPositions('eh-data-item-id');
-              //console.log ("POSITIONS MAP " + JSON.stringify(positions));
-              var ld = NVRDataModel.getLogin();
-              ld.EHpackeryPositions = JSON.stringify(positions);
-              NVRDataModel.setLogin(ld);*/
         }
-
-
     }
-
-
     $scope.$on('$ionicView.afterEnter', function () {
         // This rand is really used to reload the monitor image in img-src so it is not cached
         // I am making sure the image in montage view is always fresh
         // I don't think I am using this anymore FIXME: check and delete if needed
         // $rootScope.rand = Math.floor((Math.random() * 100000) + 1);
-
+        $scope.showControls = true;
+        readyToRun = false;
         $timeout(function () {
+            
             initPackery();
+            readyToRun = true;
+            footerCollapse();
+            
         }, zm.packeryTimer);
     });
-
     $scope.reloadView = function () {
         $rootScope.rand = Math.floor((Math.random() * 100000) + 1);
         NVRDataModel.log("User action: image reload " + $rootScope.rand);
     };
-
     $scope.doRefresh = function () {
-
-
-
         //console.log("***Pull to Refresh, recomputing Rand");
         NVRDataModel.log("Reloading view for montage view, recomputing rand");
         $rootScope.rand = Math.floor((Math.random() * 100000) + 1);
-        $scope.monitors = [];
+        $scope.MontageMonitors = [];
         imageLoadingDataShare.set(0);
-        
-
         var refresh = NVRDataModel.getMonitors(1);
-
         refresh.then(function (data) {
-            $scope.monitors = data;
+            $scope.MontageMonitors = data.data;
             $scope.$broadcast('scroll.refreshComplete');
         });
     };
 
+    function drawGraph(f, mid) {
+        console.log("Graphing on " + "eventchart-" + mid);
+        var cv = document.getElementById("eventchart-" + mid);
+        var ctx = cv.getContext("2d");
+        frameoptions = {
+            responsive: true,
+            legend: false,
+            title: {
+                display: false,
+                text: ""
+            },
+            scales: {
+                yAxes: [{
+                    display: false,
+                    scaleLabel: {
+                        display: false,
+                        labelString: 'value',
+                    }
+            }],
+                xAxes: [{
+                    type: 'time',
+                    display: false,
+                    time: {
+                        format: timeFormat,
+                        tooltipFormat: 'll HH:mm',
+                        min: f.datasets[0].data[0].x,
+                        max: f.datasets[0].data[f.datasets[0].data.length - 1].x,
+                        displayFormats: {}
+                    },
+                    scaleLabel: {
+                        display: false,
+                        labelString: ''
+                    }
+                }]
+            }
+        };
+        $timeout(function () {
+            var myChart = new Chart(ctx, {
+                type: 'line',
+                data: f,
+                options: frameoptions,
+            });
+        });
+    }
     //---------------------------------------------------------------------
     // Controller main
     //---------------------------------------------------------------------
-
-
-
     var intervalHandle;
     $scope.isModalActive = false;
     var modalIntervalHandle;
     $scope.hrsAgo = 4;
-
     window.addEventListener("resize", orientationChanged, false);
-
     document.addEventListener("pause", onPause, false);
     document.addEventListener("resume", onResume, false);
-
     $scope.timeFormat = "yyyy-MM-dd " + NVRDataModel.getTimeFormat();
     $scope.displayDateTimeSliders = true;
     $scope.showtimers = true;
     $scope.loginData = NVRDataModel.getLogin();
-
+    var timeFormat = 'MM/DD/YYYY HH:mm:ss';
     var curYear = new Date().getFullYear();
-
     var readyToRun = false;
     var i;
-
     $scope.sliderVal = {
-
-        rate: 1,
-        realRate: 100,
+        rate: 2,
+        realRate: 200,
         hideNoEvents: false,
         enableGapless: true,
         exactMatch: false,
         showTimeline: true
-
     };
-
-
-
+    var frameoptions = [];
     // default = start of day
     var timeto = moment();
     var timefrom = moment().startOf('day');
-
-    $scope.sliderVal.rate = 1;
+    $scope.sliderVal.rate = 2;
     $scope.sliderVal.realRate = $scope.sliderVal.rate * 100;
-
-
-
-    //var tdatetimeValueFrom = new Date();
-    //tdatetimeValueFrom.setDate(tdatetimeValueFrom.getDate()-1);
-
     $scope.datetimeValueFrom = {
         value: "",
-        hrs:""
+        hrs: ""
     };
     $scope.datetimeValueTo = {
         value: ""
     };
-
     $scope.datetimeValueFrom.value = timefrom.toDate();
     $scope.datetimeValueFrom.hrs = Math.round(moment.duration(moment().diff(moment($scope.datetimeValueFrom.value))).asHours());
-    
     $scope.datetimeValueTo.value = timeto.toDate();
-
     $rootScope.eventQueryInterval = "";
-
-
     var commonCss = {
-
         background: {
             "background-color": "silver"
         },
@@ -1303,53 +1085,29 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
             "background-color": "red"
         } // use it if double value
     };
-
-
     $scope.slider_modal_options_rate = {
         from: 1,
         to: 10,
         realtime: true,
         step: 1,
-        className: "mySliderClass",
-        //modelLabels:function(val) {return "";},
+        className: "mySliderClass", //modelLabels:function(val) {return "";},
         smooth: false,
         css: commonCss,
         dimension: 'X'
-
     };
-
-
-
-    var isLongPressActive = false;
-    $scope.isReorder = false;
-    var intervalHandleMontage; // will hold image resize timer on long press
-    var montageIndex = 0; // will hold monitor ID to scale in timer
-
     var gridcontainer, pckry, draggie, draggies;
-
     $scope.monitorSize = []; // array with montage sizes per monitor
     $scope.scaleDirection = []; // 1 = increase -1 = decrease
-
-    $scope.slider = {};
-
-    //console.log ("************ HISTORY " + NVRDataModel.getMontageSize());
-    $scope.slider.monsize = NVRDataModel.getMontageSize();
-    $scope.revMonSize = 11 - parseInt($scope.slider.monsize);
-
     // The difference between old and original is this:
     // old will have a copy of the last re-arranged monitor list
     // while original will have a copy of the order returned by ZM
-
     var oldMonitors = []; // To keep old order if user cancels after sort;
-
     // Montage display order may be different so don't
     // mangle monitors as it will affect other screens
     // in Montage screen we will work with this local copy
     //$scope.MontageMonitors = angular.copy ($scope.monitors);
-
     var montageOrder = []; // This array will keep the ordering in montage view
     var hiddenOrder = []; // 1 = hide, 0 = don't hide
-
     var tempMonitors = message;
     if (tempMonitors.length == 0) {
         $rootScope.zmPopup = $ionicPopup.alert({
@@ -1362,45 +1120,32 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         $state.go("login");
         return;
     }
-
-    // console.log ("TEMP MONITORS IS " + JSON.stringify(tempMonitors));
-    
-    $scope.monitors = tempMonitors;
-    
-    NVRDataModel.log("Inside MontageHistoryCtrl:We found " + $scope.monitors.length + " monitors");
-
-   // $scope.MontageMonitors = NVRDataModel.applyMontageMonitorPrefs(message, 1)[0];
-
     $scope.MontageMonitors = message;
+    NVRDataModel.log("Inside MontageHistoryCtrl:We found " + $scope.MontageMonitors.length + " monitors");
+    // $scope.MontageMonitors = NVRDataModel.applyMontageMonitorPrefs(message, 1)[0];
     var loginData = NVRDataModel.getLogin();
-
-    $scope.packMontage = loginData.packMontage;
-
-
     // init monitors
     NVRDataModel.debug(">>Initializing connkeys and images...");
     for (i = 0; i < $scope.MontageMonitors.length; i++) {
         //$scope.MontageMonitors[i].Monitor.connKey='';
-
-
+        $scope.MontageMonitors[i].Monitor.eid = "-1";
         $scope.MontageMonitors[i].Monitor.connKey = (Math.floor((Math.random() * 999999) + 1)).toString();
         $scope.MontageMonitors[i].Monitor.eventUrl = 'img/noevent.png';
+        $scope.MontageMonitors[i].Monitor.eid = "-1";
         $scope.MontageMonitors[i].Monitor.eventUrlTime = "";
         $scope.MontageMonitors[i].Monitor.isPaused = false;
         $scope.MontageMonitors[i].Monitor.gridScale = "50";
         $scope.MontageMonitors[i].Monitor.selectStyle = "";
         $scope.MontageMonitors[i].Monitor.alarmState = 'color:rgba(0,0,0,0);';
-
+        $scope.MontageMonitors[i].Monitor.sliderProgress = {
+            progress: 0
+        };
     }
-    readyToRun = true;
-
-
-
+ 
     // --------------------------------------------------------
     // Handling of back button in case modal is open should
     // close the modal
     // --------------------------------------------------------                               
-
     $ionicPlatform.registerBackButtonAction(function (e) {
         e.preventDefault();
         if ($scope.modal && $scope.modal.isShown()) {
@@ -1413,78 +1158,22 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
             NVRDataModel.debug("Modal is closed, so toggling or exiting");
             if (!$ionicSideMenuDelegate.isOpenLeft()) {
                 $ionicSideMenuDelegate.toggleLeft();
-
             } else {
                 navigator.app.exitApp();
             }
-
         }
-
     }, 1000);
-
-
-
-
-    $scope.showSizeButtons = false;
-    $ionicPopover.fromTemplateUrl('templates/help/montage-help.html', {
-        scope: $scope,
-    }).then(function (popover) {
-        $scope.popover = popover;
-    });
-
-    var timestamp = new Date().getUTCMilliseconds();
-    $scope.minimal = $stateParams.minimal;
-    $scope.zmMarginTop = $scope.minimal ? 0 : 15;
-    //console.log ("********* MARGIN IS " + $scope.zmMarginTop);
-
     $scope.isRefresh = $stateParams.isRefresh;
     var sizeInProgress = false;
-    $scope.imageStyle = true;
-
-    $ionicSideMenuDelegate.canDragContent(true);
-
-
-
-    // Do we have a saved montage array size? No?
-    // if (window.localStorage.getItem("montageArraySize") == undefined) {
-    if (loginData.montageArraySize == '0') {
-
-        for (i = 0; i < $scope.monitors.length; i++) {
-            $scope.monitorSize.push(NVRDataModel.getMontageSize());
-            $scope.scaleDirection.push(1);
-        }
-    } else // recover previous settings
-    {
-        var msize = loginData.montageArraySize;
-        //console.log("MontageArrayString is=>" + msize);
-        $scope.monitorSize = msize.split(":");
-        var j;
-
-        for (j = 0; j < $scope.monitorSize.length; j++) {
-            // convert to number other wise adding to it concatenates :-)
-            $scope.monitorSize[j] = parseInt($scope.monitorSize[j]);
-            $scope.scaleDirection.push(1);
-            //console.log("Montage size for monitor " + j + " is " + $scope.monitorSize[j]);
-
-        }
-
-    }
-    // $scope.monitorSize = monitorSize;
-    // $scope.scaleDirection = scaleDirection;
-
+    $ionicSideMenuDelegate.canDragContent(false);
     $scope.LoginData = NVRDataModel.getLogin();
     $scope.monLimit = $scope.LoginData.maxMontage;
     $scope.currentLimit = $scope.LoginData.maxMontage;
-
     if ($rootScope.platformOS != 'ios') {
         NVRDataModel.log("Limiting montage to 5, thanks to Chrome's stupid connection limit");
-        $scope.monLimit = 5;
         $scope.currentLimit = 5;
+        $scope.monLimit = 5;
     }
-
-    //console.log("********* Inside MontageHistoryCtrl, MAX LIMIT=" + $scope.monLimit);
-
-
     $rootScope.authSession = "undefined";
     $ionicLoading.show({
         template: $translate.instant('kNegotiatingStreamAuth'),
@@ -1494,33 +1183,18 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         maxWidth: 300,
         showDelay: 0
     });
-
-
     var ld = NVRDataModel.getLogin();
-
     //console.log ("MONITORS " + JSON.stringify($scope.monitors));
-    $rootScope.validMonitorId = $scope.monitors[0].Monitor.Id;
-    NVRDataModel.getAuthKey($rootScope.validMonitorId)
-        .then(function (success) {
-                $ionicLoading.hide();
-                //console.log(success);
-                $rootScope.authSession = success;
-                NVRDataModel.log("Stream authentication construction: " +
-                    $rootScope.authSession);
-
-            },
-            function (error) {
-
-                $ionicLoading.hide();
-                NVRDataModel.debug("MontageHistoryCtrl: Error in authkey retrieval " + error);
-                //$rootScope.authSession="";
-                NVRDataModel.log("MontageHistoryCtrl: Error returned Stream authentication construction. Retaining old value of: " + $rootScope.authSession);
-            });
-
-
-
-
-
-
-
+    $rootScope.validMonitorId = $scope.MontageMonitors[0].Monitor.Id;
+    NVRDataModel.getAuthKey($rootScope.validMonitorId).then(function (success) {
+        $ionicLoading.hide();
+        //console.log(success);
+        $rootScope.authSession = success;
+        NVRDataModel.log("Stream authentication construction: " + $rootScope.authSession);
+    }, function (error) {
+        $ionicLoading.hide();
+        NVRDataModel.debug("MontageHistoryCtrl: Error in authkey retrieval " + error);
+        //$rootScope.authSession="";
+        NVRDataModel.log("MontageHistoryCtrl: Error returned Stream authentication construction. Retaining old value of: " + $rootScope.authSession);
+    });
 }]);
\ No newline at end of file
diff --git a/www/js/NewsCtrl.js b/www/js/NewsCtrl.js
index c8bf78b4..8305fa6b 100644
--- a/www/js/NewsCtrl.js
+++ b/www/js/NewsCtrl.js
@@ -19,7 +19,8 @@ angular.module('zmApp.controllers').controller('zmApp.NewsCtrl', ['$scope', '$ro
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent":false
             }, {
                 reload: true
             });
diff --git a/www/js/PortalLoginCtrl.js b/www/js/PortalLoginCtrl.js
index 7e874fa4..541af937 100644
--- a/www/js/PortalLoginCtrl.js
+++ b/www/js/PortalLoginCtrl.js
@@ -281,7 +281,8 @@ angular.module('zmApp.controllers').controller('zmApp.PortalLoginCtrl', ['$ionic
                             } else if (ld.onTapScreen == $translate.instant('kTapEvents')) {
                                 NVRDataModel.debug("Going to events");
                                 $state.go("events", {
-                                    "id": 0
+                                    "id": 0,
+                                    "playEvent":false
                                 }, {
                                     reload: true
                                 });
diff --git a/www/js/StateCtrl.js b/www/js/StateCtrl.js
index 76c11543..58f13c4b 100644
--- a/www/js/StateCtrl.js
+++ b/www/js/StateCtrl.js
@@ -112,7 +112,8 @@ angular.module('zmApp.controllers').controller('zmApp.StateCtrl', ['$ionicPopup'
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent":false
             }, {
                 reload: true
             });
diff --git a/www/js/TimelineCtrl.js b/www/js/TimelineCtrl.js
index 1bbd6dee..90ecf37e 100644
--- a/www/js/TimelineCtrl.js
+++ b/www/js/TimelineCtrl.js
@@ -31,7 +31,8 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent":false
             }, {
                 reload: true
             });
diff --git a/www/js/TimelineModalCtrl.js b/www/js/TimelineModalCtrl.js
index f92aff26..4c3b7ea7 100644
--- a/www/js/TimelineModalCtrl.js
+++ b/www/js/TimelineModalCtrl.js
@@ -42,7 +42,8 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
                 disableBack: true
             });
             $state.go("events", {
-                "id": 0
+                "id": 0,
+                "playEvent":false
             }, {
                 reload: true
             });
diff --git a/www/js/WizardCtrl.js b/www/js/WizardCtrl.js
index 0b39b431..bb283460 100644
--- a/www/js/WizardCtrl.js
+++ b/www/js/WizardCtrl.js
@@ -178,13 +178,14 @@ angular.module('zmApp.controllers').controller('zmApp.WizardCtrl', ['$scope', '$
 
         NVRDataModel.log("zmWizard CGI: baseURL is " + baseUri);
 
+        var a5 = baseUri + "/zmcgi"; // mageia
         var a4 = baseUri + "/cgi-bin/zm"; // another one I found with a CentOS 6 guy
         var a3 = baseUri + "/zm/cgi-bin"; // ubuntu/debian
         var a2 = baseUri + "/cgi-bin-zm"; //fedora/centos/rhel
         var a1 = baseUri + "/cgi-bin"; // doofus
 
 
-        var urls = [a1, a2, a3, a4];
+        var urls = [a1, a2, a3, a4,a5];
 
 
         NVRDataModel.getPathZms() // what does ZM have stored in PATH_ZMS?
diff --git a/www/js/app.js b/www/js/app.js
index 99b635b9..6badb37f 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -1,4 +1,4 @@
-/* jshint -W041 */
+/* jshint -W041, -W093 */
 /* jslint browser: true*/
 /* global cordova,StatusBar,angular,console,alert,PushNotification, moment ,ionic, URI,Packery, ConnectSDK, CryptoJS, ContactFindOptions, localforage,$, Connection, MobileAccessibility */
 
@@ -83,7 +83,7 @@ angular.module('zmApp', [
     latestRelease: "https://api.github.com/repos/pliablepixels/zmNinja/releases/latest",
     blogUrl: "http://pliablepixels.github.io/feed.json",
     nphSwitchTimer: 3000,
-    eventHistoryTimer: 10000,
+    eventHistoryTimer: 5000,
     eventPlaybackQuery: 3000,
     
     packeryTimer: 500,
@@ -257,6 +257,52 @@ angular.module('zmApp', [
 })
 
 
+/*.factory('qHttp', function($q, $http) {
+    //credit: http://stackoverflow.com/a/29719693
+      var queue = $q.when();
+
+      return function queuedHttp(httpConf) {
+        var f = function(data) {
+          return $http(httpConf);
+        };
+        return queue = queue.then(f, f);
+      };
+})*/
+
+
+//credit: http://stackoverflow.com/a/14468276
+.factory('qHttp', function($q,$http) {
+
+  var queue=[];
+  var execNext = function() {
+    var task = queue[0];
+    //console.log ("qHTTP>>> Executing:"+JSON.stringify(task.c)+">>> pending:"+queue.length);
+      
+    $http(task.c).then(function(data) {
+      queue.shift();
+      task.d.resolve(data);
+      if (queue.length>0) execNext();
+    }, function(err) {
+      queue.shift();
+      task.d.reject(err);
+      if (queue.length>0) execNext();
+    })
+    ;
+  }; 
+  return function(config) {
+    var d = $q.defer();
+    //config.headers.push({'X-qHttp':'enabled'});
+    queue.push({c:config,d:d});
+    if (queue.length===1) 
+    {
+        execNext();
+    }
+    //else
+        //console.log ("qHTTP>>> Queuing:"+JSON.stringify(config));
+    return d.promise;
+  };
+})
+
 //credit: https://github.com/driftyco/ionic/issues/3131
 .factory('SecuredPopups', [
     '$ionicPopup',
@@ -461,7 +507,11 @@ angular.module('zmApp', [
 
         'request': function (config) {
 
-
+            // NOTE ON TIMEOUTS: As of Oct 10 2016, it seems
+            // the Http queue often gets messed up when there is a timeout
+            // and the # of requests are plentiful. I'm going to disable it and see
+            
+            
             // console.log (">>>>"+config.url);
             // handle basic auth properly
             if (config.url.indexOf("@") > -1) {
@@ -476,6 +526,7 @@ angular.module('zmApp', [
 
             }
 
+            //console.log (">>>>>>>>>>>>> INTERCEPT OBJECT " + JSON.stringify(config));
 
             if ($rootScope.zmCookie) {
                 config.headers.Cookie = "ZMSESSID=" + $rootScope.zmCookie;
@@ -486,18 +537,21 @@ angular.module('zmApp', [
             if ((config.url.indexOf("/api/states/change/") > -1) ||
                 (config.url.indexOf("getDiskPercent.json") > -1) ||
                 (config.url.indexOf("daemonCheck.json") > -1) ||
-                (config.url.indexOf("getLoad.json") > -1))
+                (config.url.indexOf("getLoad.json") > -1) )
 
 
             {
+               
                 // these can take time, so lets bump up timeout
                 config.timeout = zm.largeHttpTimeout;
 
             } else if ((config.url.indexOf("view=view_video") > -1) ||
                 config.url.indexOf(".mp4") > -1) {
                 // console.log(">>> skipping timers for MP4");
-            } else {
-                config.timeout = zm.httpTimeout;
+            // put a timeout for zms urls
+            } else  if (config.url.indexOf("zms?") > -1) {
+               // config.timeout = zm.httpTimeout;
+               
             }
             return config;
         },
@@ -1629,7 +1683,7 @@ angular.module('zmApp', [
                 return NVRDataModel.getMonitors(0);
             }
         },
-        url: "/events/:id",
+        url: "/events/:id/:playEvent",
         templateUrl: "templates/events.html",
         controller: 'zmApp.EventCtrl',
 
diff --git a/www/lang/locale-en.json b/www/lang/locale-en.json
index 8557256c..fe43f7b2 100644
--- a/www/lang/locale-en.json
+++ b/www/lang/locale-en.json
@@ -357,6 +357,10 @@
     "kZMUndetermined"            :"undetermined",
     "kZMUpgradeNeeded"           :"ZoneMinder upgrade needed",
     "kEventHistShowFrom"         :"Show from",
-    "kEventHistHrs"              :"hours ago"
+    "kEventHistHrs"              :"hours ago",
+    "kEventHistSlower"           : "slower",
+    "kEventHistFaster"           : "faster",
+    "kEventHistPlay"            : "play",
+    "kEventHistPause"           : "pause"
     
 }
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index e6211aab..b71cf751 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -78,7 +78,7 @@
             <div ng-if="( (defaultVideo=='') || (loginData.enableh264==false)) && (loginData.useNphZmsForEvents==true)">
                 <div id="event_canvas">
                     <canvas style="padding-left:23px;
-                        padding-right:23px;" id="eventchart" width="auto" height="20px"></canvas>
+                        padding-right:23px;" id="eventchart" width="auto" height="20"></canvas>
                 </div>
                 <div ng-if="checkEventOn" id="event_slider" data-tap-disabled="false">
                     <div class="range">
@@ -113,6 +113,9 @@
         <a mfb-button icon="ion-skip-backward" label="{{'kFastRewind'|translate}}" ng-click="adjustSpeed('fr');"></a>
         <a mfb-button icon="ion-skip-forward" label="{{'kFastForward'|translate}}" ng-click="adjustSpeed('ff');"></a>
         <a mfb-button icon="ion-play" label="{{'kNormalPlay'|translate}}" ng-click="adjustSpeed('np');"></a>
+        
+        
+        
 
         <a mfb-button icon="ion-pause" label="{{'kPause'|translate}}" ng-click="adjustSpeed('p');"> </a>
 
diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html
index 3a4cbd86..ff7ab175 100644
--- a/www/templates/montage-history.html
+++ b/www/templates/montage-history.html
@@ -1,172 +1,105 @@
 <ion-view view-title="{{'kEventMontage' | translate}}" cache-view="false" hide-nav-bar="{{minimal}}">
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
-
-        <button class="button button-icon button-clear ion-arrow-move" ng-click="dragToggle();">&nbsp;
-        </button>
-
+        <button class="button button-icon button-clear ion-arrow-move" ng-click="dragToggle();">&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>
 
-
-
     <ion-nav-buttons side="right">
-
-        <button class="button button-icon button-clear ion-loop" ng-click="resetSizes();">&nbsp;
-        </button>
-
-        <button class="button button-icon button-clear ion-plus-round" ng-click="sliderChanged(1);">&nbsp;
-        </button>
-
-        <button class="button button-icon button-clear ion-minus-round" ng-click="sliderChanged(-1);">&nbsp;
-        </button>
-
+        <button class="button button-icon button-clear ion-loop" ng-click="resetSizes();">&nbsp; </button>
+        <button class="button button-icon button-clear ion-plus-round" ng-click="sliderChanged(1);">&nbsp; </button>
+        <button class="button button-icon button-clear ion-minus-round" ng-click="sliderChanged(-1);">&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>
 
     <ion-content scroll-sista has-bouncing="false" style="background-color:#444444" delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll>
-
-
-
-        <!--<div class="timeline_text" ion-datetime-picker title="From" am-pm={{!loginData.use24hr}} ng-model="datetimeValueFrom.value" ng-change="dateChanged()">
-            <b>{{'kFrom' | translate}} : </b>{{datetimeValueFrom.value | date: timeFormat}}
-        </div>-->
-
-        <!--<div class="timeline_text" ion-datetime-picker am-pm={{!loginData.use24hr}} ng-model="datetimeValueTo.value" ng-change="dateChanged()">
-            <b>{{'kTo' | translate}}: </b>{{datetimeValueTo.value | date: timeFormat}} @ {{sliderVal.rate}}x
-            <div ng-if="$root.platformOS != 'ios'">({{'kChromeMax' | translate}})</div>
-        </div>-->
-
-        <div class="timeline_text">
-            {{'kFrom' | translate}}:{{prettifyDateTimeFirst(datetimeValueFrom.value)}} ({{humanizeTime(datetimeValueFrom.value)}})
-            <!-- - {{'kTo' | translate}}:{{prettifyDateTimeFirst(datetimeValueTo.value)}} -->
+        <div class="timeline_text"> {{'kFrom' | translate}}:{{prettifyDateTimeFirst(datetimeValueFrom.value)}} ({{humanizeTime(datetimeValueFrom.value)}})
             <div ng-if="$root.platformOS != 'ios'">({{'kChromeMax' | translate}})</div>
         </div>
-
-
         <div class="grid" id="mygrid">
             <div class="grid-sizer grid-item-10"></div>
-
-
-
-
             <!-- <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng- -->
             <span ng-repeat="monitor in MontageMonitors | onlyEnabledAndEventHas |limitTo: currentLimit">
-                
-                
-                
-                     
-                    <div ng-if="$root.authSession!='undefined'">
-                        <div ng-if = "monitor.Monitor.eventUrl == 'img/noevent.png' && !sliderVal.hideNoEvents">
-                           
-                            <!-- make sure we don't use id here
+				<div ng-if="$root.authSession!='undefined'">
+					<div ng-if = "monitor.Monitor.eventUrl == 'img/noevent.png' ">
+						<!-- make sure we don't use id here
                             -- or we lose the handle for cleanup forever!-->
-                            <div  class="grid-item grid-item-{{monitor.Monitor.gridScale}} " data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}}" >
-                                <figure height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-show=" monitor.Monitor.listDisplay!='noshow'">
-
-                                <img class="{{monitor.Monitor.selectStyle}}" image-spinner-src="{{monitor.Monitor.eventUrl}}"  image-spinner-loader="lines" on-tap="!isDragabillyOn?noop():toggleSelectItem($index)" />
+						<div  class="grid-item grid-item-{{monitor.Monitor.gridScale}} " data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}}" >
+							<figure height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-show=" monitor.Monitor.listDisplay!='noshow'">
+								<img class="{{monitor.Monitor.selectStyle}}" image-spinner-src="{{monitor.Monitor.eventUrl}}"  image-spinner-loader="lines" on-tap="!isDragabillyOn?noop():toggleSelectItem($index)" >
+									<figcaption class="normal-figcaption" >
 
-
-                                <figcaption class="normal-figcaption" >
-
-                                        &nbsp;<i class="ion-ios-videocam"></i>
+                                        &nbsp;
+										<i class="ion-ios-videocam"></i>
                                        {{monitor.Monitor.Name}}&nbsp;
 
-                                </figcaption>
-
-                                 
-
-                                </figure>
-                            </div>
-                        </div>
-
-                        <div  ng-if = "monitor.Monitor.eventUrl != 'img/noevent.png' && monitor.Monitor.connKey !=''">
-
-                            <div  class="grid-item grid-item-{{monitor.Monitor.gridScale}} " data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}}" >
-                                <figure height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-show=" monitor.Monitor.listDisplay!='noshow'">
-
-                                <img class="{{monitor.Monitor.selectStyle}}" image-spinner-src="{{monitor.Monitor.eventUrl}}{{$root.authSession}}"  image-spinner-loader="lines" on-tap="!isDragabillyOn?togglePause(monitor.Monitor.Id):toggleSelectItem($index)" />
-
-
-                                <figcaption class="normal-figcaption" >
-
-                                        &nbsp;<i class="ion-ios-videocam"></i> <span style="background-color:red;color:#fff" ng-if="monitor.Monitor.isPaused">&nbsp;<i class="ion-pause"></i>&nbsp;</span> {{monitor.Monitor.Name}}&nbsp;
-
-            <div ng-if="sliderVal.showTimeline && $root.runMode!='lowbw'" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px" class="header-event-id" id="{{monitor.Monitor.Id}}-timeline">
+                                
+									</figcaption>
+								</figure>
+							</div>
+						</div>
+						<div  ng-if = "monitor.Monitor.eventUrl != 'img/noevent.png' && monitor.Monitor.connKey !=''">
+							<div  class="grid-item grid-item-{{monitor.Monitor.gridScale}} " data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}}" >
+								<figure height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-show=" monitor.Monitor.listDisplay!='noshow'">
+									<img class="{{monitor.Monitor.selectStyle}}" image-spinner-src="{{monitor.Monitor.eventUrl}}{{$root.authSession}}"  image-spinner-loader="lines" on-tap="!isDragabillyOn?togglePause(monitor.Monitor.Id):toggleSelectItem($index)"  on-swipe-left="toggleControls()" on-swipe-right="toggleControls()" />
+									<figcaption class="normal-figcaption" >
+
+                                        &nbsp;
+										<i class="ion-ios-videocam"></i>
+										<span style="background-color:red;color:#fff" ng-if="monitor.Monitor.isPaused">&nbsp;
+											<i class="ion-pause"></i>&nbsp;
+										</span> {{monitor.Monitor.Name}}&nbsp;
+
+            <div ng-if="sliderVal.showTimeline && $root.runMode!='lowbw'" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px" class="header-event-id" id="{{monitor.Monitor.Id}}-timeline">[{{monitor.Monitor.eid}}]
                 <i class="ion-clock"></i> {{prettifyDateTimeFirst(monitor.Monitor.eventUrlTime)}} ({{humanizeTime(monitor.Monitor.eventUrlTime)}})&nbsp;
             </div>
-
             </figcaption>
-
-
-
             </figure>
-        </div>
-
+            <div ng-show="showControls">
 
 
 
+                <div class="range" style="position:absolute;top:5%;width:95%;z-index:999">
+                    <input on-release="seek(monitor.Monitor.Id,monitor.Monitor.sliderProgress.progress )" type="range" min="0" max="{{monitor.Monitor.eventDuration}}" ng-model="monitor.Monitor.sliderProgress.progress">
+                </div>
+                <div id="history_canvas_video">
 
-        <!--
-                             <div  ng-if="sliderVal.showTimeline && $root.runMode!='lowbw'" style=" position:absolute; bottom:15px; right:0%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" 
-                             class="header-event-id" id="{{monitor.Monitor.Id}}-timeline">
-                            &nbsp;<i class="ion-clock"></i>
-                               {{prettifyDate(monitor.Monitor.eventUrlTime)}}&nbsp;
-                            </div>
-                            -->
+                    <canvas style="padding-left:23px;
+                        padding-right:23px;z-index:998" id="eventchart-{{monitor.Monitor.Id}}" width="auto" height="20"></canvas>
 
 
-        <!--<div ng-if="!monitor.isPaused"
-                                style="position:absolute; bottom:35px; right:0%;white-space:nowrap;overflow:hidden;" class="header-event-id">paused
-                            </div>-->
+                </div>
 
+                
+            </div>
 
         </div>
         </div>
+        </div>
         <!-- valid auth session &!background -->
-
         <div ng-if="!$root.authSession=='undefined' || isBackground()">
             <img image-spinner-src="img/pausevideo.png" />
-
         </div>
         </span>
+            
+            
+            
         </div>
-
-        <ion-item ng-show="!MontageMonitors.length">
-            {{'kNoMonitors' | translate }}
-        </ion-item>
-
-
-
+        <ion-item ng-show="!MontageMonitors.length"> {{'kNoMonitors' | translate }} </ion-item>
     </ion-content>
-
-    <div class="bwmode" ng-if="$root.runMode=='lowbw'">
-        {{ 'kLowBWDisplay' | translate }}
-    </div>
-
+    <div class="bwmode" ng-if="$root.runMode=='lowbw'"> {{ 'kLowBWDisplay' | translate }} </div>
     <div ng-show="minimal">
         <nav mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
-
-            <button mfb-button icon="ion-arrow-expand" label="increase size" ng-click="changeSize(-1)">
-            </button>
-            <button mfb-button icon="ion-arrow-shrink" label="decrease size" ng-click="changeSize(1)">
-            </button>
-            <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView();">
-            </button>
-            <button mfb-button icon="ion-close" label="exit full screen" ng-click="switchMinimal()">
-            </button>
+            <button mfb-button icon="ion-arrow-expand" label="increase size" ng-click="changeSize(-1)"></button>
+            <button mfb-button icon="ion-arrow-shrink" label="decrease size" ng-click="changeSize(1)"></button>
+            <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView();"></button>
+            <button mfb-button icon="ion-close" label="exit full screen" ng-click="switchMinimal()"></button>
         </nav>
-
         <span class="modal-alarm-badge">
-            <a data-badge="{{$root.alarmCount}}" class="animated infinite tada button icon  ion-ios-bell notification-badge button-assertive" 
+					<a data-badge="{{$root.alarmCount}}" class="animated infinite tada button icon  ion-ios-bell notification-badge button-assertive" 
                     ng-click="handleAlarmsWhileMinimized();" ng-if="$root.isAlarm"></a>
-        </span>
-
+				</span>
     </div>
-
     <ion-pull-up-footer class="zmPullup" on-expand="footerExpand()" on-minimize="footerCollapse()" 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>
@@ -175,42 +108,30 @@
             <h1 class="title" ion-pull-up-trigger>{{'kEventMontage' | translate}}</h1>
         </ion-pull-up-bar>
         <ion-pull-up-content scroll="true">
-
-
             <div class="list list-inset">
-
-
-                <!--<ion-toggle ng-model="sliderVal.hideNoEvents" ng-checked="{{sliderVal.hideNoEvents}}" toggle-class="toggle-dark"><span class="item-text-wrap">{{'kHideMonsWithoutEvents' | translate}}</span></ion-toggle>-->
-
-
-
-
-                <!--<div  class="item item-divider" ion-datetime-picker ng-model="datetimeValueFrom.value">
-                    Tap to change: {{datetimeValueFrom.value| date: "yyyy-MMM-dd hh:mma"}}
-                </div>-->
-
-
-
-
-
-
-
+              
                 <div class="item item-divider">{{'kTimeline' | translate}}</div>
-
-                <div class="item item-input-inset">
-                    {{'kEventHistShowFrom'|translate}}:&nbsp;
-                    <label class="item-input-wrapper">
-                        <input ng-change="hrsChanged()" type="tel" placeholder="hours" ng-model="datetimeValueFrom.hrs">
-                    </label>
-                    &nbsp;{{'kEventHistHrs' | translate}}
-                </div>
                 
+                
+                <div class="item item-input-inset"> {{'kFrom'|translate}}:&nbsp;
+                    <div class="row">
+                       <div class="col col-50">
+                            <label class="item-input-wrapper">
+                                <input ng-change="hrsChanged()" type="tel" placeholder="hours" ng-model="datetimeValueFrom.hrs">
+                            </label>
+                        </div>
+                        <div class="col col-50">
+                            &nbsp;{{'kEventHistHrs' | translate}}
+                        </div>
+                    </div>
+                    
+                </div>
+
                 <ion-item>
                     <div ion-datetime-picker title="From" am-pm={{!loginData.use24hr}} ng-model="datetimeValueFrom.value" ng-change="dateChanged()">
                         <b>{{'kFrom' | translate }}: </b>{{datetimeValueFrom.value | date: timeFormat}}
                     </div> ({{humanizeTime(datetimeValueFrom.value)}})
                 </ion-item>
-
                 <div class="row">
                     <div class="col col-75">
                         <br/>
@@ -219,22 +140,11 @@
                         </div>
                         <br/>
                     </div>
-                    <div class="col col-25" style="background-color:#AEA8D3;text-align:center">
-                        {{'kSpeed' | translate }}
-                    </div>
+                    <div class="col col-25" style="background-color:#AEA8D3;text-align:center"> {{'kSpeed' | translate }} </div>
                 </div>
-                <!--<ion-item>
-                    <div ion-datetime-picker am-pm={{!loginData.use24hr}} ng-model="datetimeValueTo.value">
-                        <b>{{'kTo' | translate}}: </b>{{datetimeValueTo.value | date: timeFormat}}
-                    </div>
-                </ion-item>-->
-
+                <!--<ion-item><div ion-datetime-picker am-pm={{!loginData.use24hr}} ng-model="datetimeValueTo.value"><b>{{'kTo' | translate}}: </b>{{datetimeValueTo.value | date: timeFormat}}
+                    </div></ion-item>-->
             </div>
         </ion-pull-up-content>
     </ion-pull-up-footer>
-
-
-
-
-
 </ion-view>
\ No newline at end of file