file formatting

1 files changed, 407 insertions, 460 deletions

diff --git a/www/js/TimelineModalCtrl.js b/www/js/TimelineModalCtrl.js
index fb1e480f..238d271a 100644
--- a/www/js/TimelineModalCtrl.js
+++ b/www/js/TimelineModalCtrl.js
@@ -3,504 +3,451 @@
 /* jslint browser: true*/
 /* global saveAs, cordova,StatusBar,angular,console,ionic, moment, vis , Chart, DJS*/
 
-angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '$rootScope', 'zm', 'NVRDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'carouselUtils', '$ionicPopup', '$translate', function($scope, $rootScope, zm, NVRDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup, $translate)
-{
-
-    var Graph2d;
-    var tcGraph;
-    var items;
-    var groups;
-    var eventImageDigits = 5;
-    var cv;
-    var ctx;
-    var options;
-    var data;
-    var onlyalarm_data;
-    var current_data;
-    var current_options;
-    var btype;
-
-    $scope.graphType = NVRDataModel.getLogin().timelineModalGraphType;
-    //$scope.graphType = "all";
-    $scope.errorDetails = "";
-
-    //----------------------------------------------------------------
-    // Alarm notification handling
-    //----------------------------------------------------------------
-    $scope.handleAlarms = function()
-    {
-        $rootScope.isAlarm = !$rootScope.isAlarm;
-        if (!$rootScope.isAlarm)
-        {
-            $rootScope.alarmCount = "0";
-            $ionicHistory.nextViewOptions(
-            {
-                disableBack: true
-            });
-            $state.go("app.events",
-            {
-                "id": 0,
-                "playEvent": false
-            },
-            {
-                reload: true
-            });
-            return;
-        }
-    };
+angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '$rootScope', 'zm', 'NVRDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'carouselUtils', '$ionicPopup', '$translate', function ($scope, $rootScope, zm, NVRDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup, $translate) {
+
+  var Graph2d;
+  var tcGraph;
+  var items;
+  var groups;
+  var eventImageDigits = 5;
+  var cv;
+  var ctx;
+  var options;
+  var data;
+  var onlyalarm_data;
+  var current_data;
+  var current_options;
+  var btype;
+
+  $scope.graphType = NVRDataModel.getLogin().timelineModalGraphType;
+  //$scope.graphType = "all";
+  $scope.errorDetails = "";
+
+  //----------------------------------------------------------------
+  // Alarm notification handling
+  //----------------------------------------------------------------
+  $scope.handleAlarms = function () {
+    $rootScope.isAlarm = !$rootScope.isAlarm;
+    if (!$rootScope.isAlarm) {
+      $rootScope.alarmCount = "0";
+      $ionicHistory.nextViewOptions({
+        disableBack: true
+      });
+      $state.go("app.events", {
+        "id": 0,
+        "playEvent": false
+      }, {
+        reload: true
+      });
+      return;
+    }
+  };
 
 
-    $scope.constructFrames = function (event,alarm) {
+  $scope.constructFrames = function (event, alarm) {
 
-        var stream = "";
-        if (event.Event.imageMode=='path') {
-            stream = event.Event.baseURL + "/index.php?view=image" +
-                    "&path="+event.Event.relativePath+alarm.fname +
-                    "&height=380";
-        }
-        else if (event.Event.imageMode == 'fid') {
-            stream = event.Event.baseURL + "/index.php?view=image" +
-                    "&fid="+alarm.id;
+    var stream = "";
+    if (event.Event.imageMode == 'path') {
+      stream = event.Event.baseURL + "/index.php?view=image" +
+        "&path=" + event.Event.relativePath + alarm.fname +
+        "&height=380";
+    } else if (event.Event.imageMode == 'fid') {
+      stream = event.Event.baseURL + "/index.php?view=image" +
+        "&fid=" + alarm.id;
 
-        }
-        if ($rootScope.authSession !='undefined') stream+=$rootScope.authSession;
+    }
+    if ($rootScope.authSession != 'undefined') stream += $rootScope.authSession;
 
-       stream+=  NVRDataModel.insertBasicAuthToken();
-        return stream;
-    };
+    stream += NVRDataModel.insertBasicAuthToken();
+    return stream;
+  };
 
-    //-------------------------------------------------------
-    // we use this to reload the connkey if authkey changed
-    //------------------------------------------------------
+  //-------------------------------------------------------
+  // we use this to reload the connkey if authkey changed
+  //------------------------------------------------------
 
-  
-    $scope.scrollUp = function()
-    {
-        //console.log ("SWIPE UP");
-        $ionicScrollDelegate.$getByHandle("timeline-modal-delegate").scrollTop(true);
-    };
 
-    $scope.scrollDown = function()
-    {
-        //console.log ("SWIPE DOWN");
-        $ionicScrollDelegate.$getByHandle("timeline-modal-delegate").scrollBottom(true);
-    };
+  $scope.scrollUp = function () {
+    //console.log ("SWIPE UP");
+    $ionicScrollDelegate.$getByHandle("timeline-modal-delegate").scrollTop(true);
+  };
 
-    $scope.switchType = function()
-    {
+  $scope.scrollDown = function () {
+    //console.log ("SWIPE DOWN");
+    $ionicScrollDelegate.$getByHandle("timeline-modal-delegate").scrollBottom(true);
+  };
 
-        if ($scope.graphType == $translate.instant('kGraphAll'))
-        {
-            current_data = onlyalarm_data;
-            $scope.graphType = $translate.instant('kGraphAlarmed');
-            NVRDataModel.debug("Alarm array has " + onlyalarm_data.labels.length + " frames");
-            btype = 'bar';
-            //console.log (JSON.stringify(onlyalarm_data));
+  $scope.switchType = function () {
 
-        }
-        else
-        {
-            current_data = data;
-            // tcGraph.data = 
-            $scope.graphType = $translate.instant('kGraphAll');
-            btype = 'line';
-        }
+    if ($scope.graphType == $translate.instant('kGraphAll')) {
+      current_data = onlyalarm_data;
+      $scope.graphType = $translate.instant('kGraphAlarmed');
+      NVRDataModel.debug("Alarm array has " + onlyalarm_data.labels.length + " frames");
+      btype = 'bar';
+      //console.log (JSON.stringify(onlyalarm_data));
 
-        NVRDataModel.log("Switching graph type to " + $scope.graphType);
-
-        var ld = NVRDataModel.getLogin();
-        ld.timelineModalGraphType = $scope.graphType;
-        NVRDataModel.setLogin(ld);
-
-        $timeout(function()
-        {
-
-            /*
-            if ($scope.graphType == 'alarmed')
-                    tcGraph.data = data;
-            else
-                    tcGraph.data = onlyalarm_data;
-            tcGraph.update();*/
-            tcGraph.destroy();
-           // console.log("GRAPH TYPE IS " + btype);
-            tcGraph = new Chart(ctx,
-            {
-                type: btype,
-                data: current_data,
-                options: options
-            });
-        });
+    } else {
+      current_data = data;
+      // tcGraph.data = 
+      $scope.graphType = $translate.instant('kGraphAll');
+      btype = 'line';
+    }
 
-    };
+    NVRDataModel.log("Switching graph type to " + $scope.graphType);
+
+    var ld = NVRDataModel.getLogin();
+    ld.timelineModalGraphType = $scope.graphType;
+    NVRDataModel.setLogin(ld);
+
+    $timeout(function () {
+
+      /*
+      if ($scope.graphType == 'alarmed')
+              tcGraph.data = data;
+      else
+              tcGraph.data = onlyalarm_data;
+      tcGraph.update();*/
+      tcGraph.destroy();
+      // console.log("GRAPH TYPE IS " + btype);
+      tcGraph = new Chart(ctx, {
+        type: btype,
+        data: current_data,
+        options: options
+      });
+    });
 
-    //-------------------------------------------------------
-    // Tapping on a frame shows this image
-    //------------------------------------------------------
-
-    $scope.showImage = function(p, r, f, fid, e, imode, id)
-    {
-        var img;
-        //console.log("Image Mode " + imode);
-        if (imode == 'path')
-
-            img = "<img width='100%' ng-src='" + p + "/index.php?view=image&path=" + r + f + "'>";
-        else
-        {
-            img = "<img width='100%' ng-src='" + p + "/index.php?view=image&fid=" + id + "'>";
-            // console.log ("IS MULTISERVER SO IMAGE IS " + img);
-        }
-        $rootScope.zmPopup = $ionicPopup.alert(
-        {
-            title: 'frame:' + fid + '/Event:' + e,
-            template: img,
-            cssClass: 'popup95',
-            okText: $translate.instant('kButtonOk'),
-            cancelText: $translate.instant('kButtonCancel'),
-        });
-    };
+  };
 
-    $scope.$on('modal.removed', function(e, m)
-    {
+  //-------------------------------------------------------
+  // Tapping on a frame shows this image
+  //------------------------------------------------------
 
-        if (m.id != 'analyze')
-            return;
-        //Graph2d.destroy();
-        tcGraph.destroy();
-        // Execute action
-    });
+  $scope.showImage = function (p, r, f, fid, e, imode, id) {
+    var img;
+    //console.log("Image Mode " + imode);
+    if (imode == 'path')
 
-    //-------------------------------------------------------
-    // init drawing here
-    //------------------------------------------------------
-
-    $scope.$on('modal.shown', function(e, m)
-    {
-
-        if (m.id != 'analyze')
-            return;
-
-        $scope.alarm_images = [];
-        $scope.graphWidth = $rootScope.devWidth - 30;
-        NVRDataModel.log("Setting init graph width to " + $scope.graphWidth);
-        $scope.dataReady = false;
-
-        NVRDataModel.getKeyConfigParams(0)
-            .then(function(data)
-            {
-                //console.log ("***GETKEY: " + JSON.stringify(data));
-                eventImageDigits = parseInt(data);
-                NVRDataModel.log("Image padding digits reported as " + eventImageDigits);
-            });
-
-        $scope.eventdetails = $translate.instant('kLoading') + "...";
-        $scope.mName = NVRDataModel.getMonitorName($scope.event.Event.MonitorId);
-        $scope.humanizeTime = humanizeTime($scope.event.Event.StartTime);
-        processEvent();
-        //$scope.eventdetails = JSON.stringify($scope.event);
+      img = "<img width='100%' ng-src='" + p + "/index.php?view=image&path=" + r + f + "'>";
+    else {
+      img = "<img width='100%' ng-src='" + p + "/index.php?view=image&fid=" + id + "'>";
+      // console.log ("IS MULTISERVER SO IMAGE IS " + img);
+    }
+    $rootScope.zmPopup = $ionicPopup.alert({
+      title: 'frame:' + fid + '/Event:' + e,
+      template: img,
+      cssClass: 'popup95',
+      okText: $translate.instant('kButtonOk'),
+      cancelText: $translate.instant('kButtonCancel'),
     });
+  };
+
+  $scope.$on('modal.removed', function (e, m) {
+
+    if (m.id != 'analyze')
+      return;
+    //Graph2d.destroy();
+    tcGraph.destroy();
+    // Execute action
+  });
+
+  //-------------------------------------------------------
+  // init drawing here
+  //------------------------------------------------------
+
+  $scope.$on('modal.shown', function (e, m) {
+
+    if (m.id != 'analyze')
+      return;
+
+    $scope.alarm_images = [];
+    $scope.graphWidth = $rootScope.devWidth - 30;
+    NVRDataModel.log("Setting init graph width to " + $scope.graphWidth);
+    $scope.dataReady = false;
+
+    NVRDataModel.getKeyConfigParams(0)
+      .then(function (data) {
+        //console.log ("***GETKEY: " + JSON.stringify(data));
+        eventImageDigits = parseInt(data);
+        NVRDataModel.log("Image padding digits reported as " + eventImageDigits);
+      });
+
+    $scope.eventdetails = $translate.instant('kLoading') + "...";
+    $scope.mName = NVRDataModel.getMonitorName($scope.event.Event.MonitorId);
+    $scope.humanizeTime = humanizeTime($scope.event.Event.StartTime);
+    processEvent();
+    //$scope.eventdetails = JSON.stringify($scope.event);
+  });
+
+  //-------------------------------------------------------
+  // okay, really init drawing here
+  //------------------------------------------------------
+
+  function processEvent() {
+    var eid = $scope.event.Event.Id;
+    //eid = 22302;
+    var ld = NVRDataModel.getLogin();
+    var apiurl = ld.apiurl + "/events/" + eid + ".json";
+    NVRDataModel.log("Getting " + apiurl);
+    $http.get(apiurl)
+      .then(function (success) {
+          //$scope.eventdetails = JSON.stringify(success);
+          drawGraphTC(success.data);
+        },
+        function (error) {
+          $scope.errorDetails = $translate.instant('kGraphError');
+          NVRDataModel.log("Error in timeline frames " + JSON.stringify(error));
+        });
+  }
 
-    //-------------------------------------------------------
-    // okay, really init drawing here
-    //------------------------------------------------------
-
-    function processEvent()
-    {
-        var eid = $scope.event.Event.Id;
-        //eid = 22302;
-        var ld = NVRDataModel.getLogin();
-        var apiurl = ld.apiurl + "/events/" + eid + ".json";
-        NVRDataModel.log("Getting " + apiurl);
-        $http.get(apiurl)
-            .then(function(success)
-                {
-                    //$scope.eventdetails = JSON.stringify(success);
-                    drawGraphTC(success.data);
-                },
-                function(error)
-                {
-                    $scope.errorDetails = $translate.instant('kGraphError');
-                    NVRDataModel.log("Error in timeline frames " + JSON.stringify(error));
-                });
-    }
+  //-------------------------------------------------------
+  // I was kidding, this is where it really is drawn
+  // scout's promise
+  //------------------------------------------------------
 
-    //-------------------------------------------------------
-    // I was kidding, this is where it really is drawn
-    // scout's promise
-    //------------------------------------------------------
-
-    function drawGraphTC(event)
-    {
-
-        $scope.eid = event.event.Event.Id;
-
-        $scope.alarm_images = [];
-
-        data = {
-            labels: [],
-            datasets: [
-                {
-                    label: 'Score',
-                    fill: true,
-                    backgroundColor: 'rgba(89, 171, 227, 1.0)',
-                    borderColor: 'rgba(52, 152, 219, 1.0)',
-                    borderCapStyle: 'butt',
-                    borderJoinStyle: 'miter',
-                    pointBorderColor: "#e74c3c",
-                    pointBackgroundColor: "#e74c3c",
-
-                    pointHoverRadius: 10,
-                    pointHoverBackgroundColor: "rgba(249, 105, 14,1.0)",
-                    pointHoverBorderWidth: 1,
-                    tension: 0.1,
-
-                    data: [],
-                    frames: []
-                },
-
-            ]
-        };
-
-        onlyalarm_data = {
-            labels: [],
-            datasets: [
-                {
-                    label: 'Score',
-                    backgroundColor: 'rgba(52, 152, 219, 1.0)',
-                    borderColor: 'rgba(52, 152, 219, 1.0)',
-                    hoverBackgroundColor: 'rgba(249, 105, 14,1.0)',
-                    hoverBorderColor: 'rgba(249, 105, 14,1.0)',
-                    data: [],
-                    frames: []
-                },
-
-            ]
-        };
-
-        // Chart.js Options
-        options = {
-            legend: false,
-            scales:
-            {
-                yAxes: [
-                {
-                    ticks:
-                    {
-                        // beginAtZero:true,
-                        min: -1,
-                    },
-                }],
-                xAxes: [
-                {
-                    display: false
-                }]
-            },
-
-            responsive: true,
-            scaleBeginAtZero: true,
-            scaleShowGridLines: true,
-            scaleGridLineColor: "rgba(0,0,0,.05)",
-            scaleGridLineWidth: 1,
-
-            hover:
-            {
-                mode: 'single',
-                onHover: function(obj)
-                {
-                    if (obj.length > 0)
-                        tapOrHover(obj[0]._index);
-                }
-            },
-
-            //String - A legend template
-            legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
-        };
-
-        $scope.graphWidth = event.event.Frame.length * 10;
-        if ($scope.graphWidth < $rootScope.devWidth)
-            $scope.graphWidth = $rootScope.devWidth;
-
-        // NVRDataModel.log ("Changing graph width to " + $scope.graphWidth);
-
-        for (var i = 0; i < event.event.Frame.length; i++)
-        {
-
-            data.labels.push(event.event.Frame[i].TimeStamp);
-            //data.labels.push(' ');
-            data.datasets[0].data.push(event.event.Frame[i].Score);
-            data.datasets[0].frames.push(
-            {
-                x: event.event.Frame[i].TimeStamp,
-                y: event.event.Frame[i].Score,
-                eid: event.event.Event.Id,
-                fid: event.event.Frame[i].FrameId,
-                id: event.event.Frame[i].Id,
-                //group:i,
-                relativePath: computeRelativePath(event.event),
-                score: event.event.Frame[i].Score,
-                fname: padToN(event.event.Frame[i].FrameId, eventImageDigits) + "-capture.jpg",
-
-            });
-
-            if (event.event.Frame[i].Type == "Alarm")
-            {
-
-                onlyalarm_data.labels.push(event.event.Frame[i].TimeStamp);
-                //data.labels.push(' ');
-                onlyalarm_data.datasets[0].data.push(event.event.Frame[i].Score);
-                onlyalarm_data.datasets[0].frames.push(
-                {
-                    x: event.event.Frame[i].TimeStamp,
-                    y: event.event.Frame[i].Score,
-                    eid: event.event.Event.Id,
-                    fid: event.event.Frame[i].FrameId,
-                    //group:i,
-                    relativePath: computeRelativePath(event.event),
-                    score: event.event.Frame[i].Score,
-                    fname: padToN(event.event.Frame[i].FrameId, eventImageDigits) + "-capture.jpg",
-                    id: event.event.Frame[i].Id,
-
-                });
-            }
+  function drawGraphTC(event) {
 
-        }
+    $scope.eid = event.event.Event.Id;
 
-        $scope.dataReady = true;
+    $scope.alarm_images = [];
 
-        cv = document.getElementById("tcchart");
-        ctx = cv.getContext("2d");
+    data = {
+      labels: [],
+      datasets: [{
+          label: 'Score',
+          fill: true,
+          backgroundColor: 'rgba(89, 171, 227, 1.0)',
+          borderColor: 'rgba(52, 152, 219, 1.0)',
+          borderCapStyle: 'butt',
+          borderJoinStyle: 'miter',
+          pointBorderColor: "#e74c3c",
+          pointBackgroundColor: "#e74c3c",
 
-        if (NVRDataModel.getLogin().timelineModalGraphType == $translate.instant('kGraphAll'))
-        {
-            btype = 'line';
-            current_data = data;
-        }
-        else
-        {
-            btype = 'bar';
-            current_data = onlyalarm_data;
+          pointHoverRadius: 10,
+          pointHoverBackgroundColor: "rgba(249, 105, 14,1.0)",
+          pointHoverBorderWidth: 1,
+          tension: 0.1,
+
+          data: [],
+          frames: []
+        },
+
+      ]
+    };
+
+    onlyalarm_data = {
+      labels: [],
+      datasets: [{
+          label: 'Score',
+          backgroundColor: 'rgba(52, 152, 219, 1.0)',
+          borderColor: 'rgba(52, 152, 219, 1.0)',
+          hoverBackgroundColor: 'rgba(249, 105, 14,1.0)',
+          hoverBorderColor: 'rgba(249, 105, 14,1.0)',
+          data: [],
+          frames: []
+        },
+
+      ]
+    };
+
+    // Chart.js Options
+    options = {
+      legend: false,
+      scales: {
+        yAxes: [{
+          ticks: {
+            // beginAtZero:true,
+            min: -1,
+          },
+        }],
+        xAxes: [{
+          display: false
+        }]
+      },
+
+      responsive: true,
+      scaleBeginAtZero: true,
+      scaleShowGridLines: true,
+      scaleGridLineColor: "rgba(0,0,0,.05)",
+      scaleGridLineWidth: 1,
+
+      hover: {
+        mode: 'single',
+        onHover: function (obj) {
+          if (obj.length > 0)
+            tapOrHover(obj[0]._index);
         }
-        $timeout(function()
-        {
-            tcGraph = new Chart(ctx,
-            {
-                type: btype,
-                data: current_data,
-                options: options
-            });
-        });
+      },
 
-        cv.onclick = function(e)
-        {
-            var b = tcGraph.getElementAtEvent(e);
-            if (b.length > 0)
-            {
-                tapOrHover(b[0]._index);
-            }
-        };
-    }
+      //String - A legend template
+      legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
+    };
+
+    $scope.graphWidth = event.event.Frame.length * 10;
+    if ($scope.graphWidth < $rootScope.devWidth)
+      $scope.graphWidth = $rootScope.devWidth;
+
+    // NVRDataModel.log ("Changing graph width to " + $scope.graphWidth);
+
+    for (var i = 0; i < event.event.Frame.length; i++) {
+
+      data.labels.push(event.event.Frame[i].TimeStamp);
+      //data.labels.push(' ');
+      data.datasets[0].data.push(event.event.Frame[i].Score);
+      data.datasets[0].frames.push({
+        x: event.event.Frame[i].TimeStamp,
+        y: event.event.Frame[i].Score,
+        eid: event.event.Event.Id,
+        fid: event.event.Frame[i].FrameId,
+        id: event.event.Frame[i].Id,
+        //group:i,
+        relativePath: computeRelativePath(event.event),
+        score: event.event.Frame[i].Score,
+        fname: padToN(event.event.Frame[i].FrameId, eventImageDigits) + "-capture.jpg",
+
+      });
+
+      if (event.event.Frame[i].Type == "Alarm") {
+
+        onlyalarm_data.labels.push(event.event.Frame[i].TimeStamp);
+        //data.labels.push(' ');
+        onlyalarm_data.datasets[0].data.push(event.event.Frame[i].Score);
+        onlyalarm_data.datasets[0].frames.push({
+          x: event.event.Frame[i].TimeStamp,
+          y: event.event.Frame[i].Score,
+          eid: event.event.Event.Id,
+          fid: event.event.Frame[i].FrameId,
+          //group:i,
+          relativePath: computeRelativePath(event.event),
+          score: event.event.Frame[i].Score,
+          fname: padToN(event.event.Frame[i].FrameId, eventImageDigits) + "-capture.jpg",
+          id: event.event.Frame[i].Id,
 
-    function tapOrHover(ndx)
-    {
-
-        $timeout(function()
-        {
-
-            //console.log ("You tapped " + ndx);
-            $scope.alarm_images = [];
-            $scope.playbackURL = $scope.event.Event.baseURL;
-            var items = current_data.datasets[0].frames[ndx];
-            $scope.alarm_images.push(
-            {
-                relativePath: items.relativePath,
-                fid: items.fid,
-                id: items.id,
-                fname: items.fname,
-                score: items.score,
-                time: moment(items.x).format("MMM D," + NVRDataModel.getTimeFormatSec()),
-                eid: items.eid
-            });
         });
+      }
 
     }
 
-    //--------------------------------------------------------
-    // utility function
-    //--------------------------------------------------------
-
-    function computeRelativePath(event)
-    {
-        var relativePath = "";
-        var loginData = NVRDataModel.getLogin();
-        var str = event.Event.StartTime;
-        var yy = moment(str).locale('en').format('YY');
-        var mm = moment(str).locale('en').format('MM');
-        var dd = moment(str).locale('en').format('DD');
-        var hh = moment(str).locale('en').format('HH');
-        var min = moment(str).locale('en').format('mm');
-        var sec = moment(str).locale('en').format('ss');
-        relativePath = event.Event.MonitorId + "/" +
-            yy + "/" +
-            mm + "/" +
-            dd + "/" +
-            hh + "/" +
-            min + "/" +
-            sec + "/";
-        return relativePath;
+    $scope.dataReady = true;
 
-    }
+    cv = document.getElementById("tcchart");
+    ctx = cv.getContext("2d");
 
-    //--------------------------------------------------------
-    // utility function
-    //--------------------------------------------------------
-
-    function computeBasePath(event)
-    {
-        var basePath = "";
-        var loginData = NVRDataModel.getLogin();
-        var str = event.Event.StartTime;
-        var yy = moment(str).locale('en').format('YY');
-        var mm = moment(str).locale('en').format('MM');
-        var dd = moment(str).locale('en').format('DD');
-        var hh = moment(str).locale('en').format('HH');
-        var min = moment(str).locale('en').format('mm');
-        var sec = moment(str).locale('en').format('ss');
-
-        basePath = loginData.url + "/events/" +
-            event.Event.MonitorId + "/" +
-            yy + "/" +
-            mm + "/" +
-            dd + "/" +
-            hh + "/" +
-            min + "/" +
-            sec + "/";
-        return basePath;
+    if (NVRDataModel.getLogin().timelineModalGraphType == $translate.instant('kGraphAll')) {
+      btype = 'line';
+      current_data = data;
+    } else {
+      btype = 'bar';
+      current_data = onlyalarm_data;
     }
+    $timeout(function () {
+      tcGraph = new Chart(ctx, {
+        type: btype,
+        data: current_data,
+        options: options
+      });
+    });
 
-    function humanizeTime(str)
-    {
-        return moment.tz(str, NVRDataModel.getTimeZoneNow()).fromNow();
+    cv.onclick = function (e) {
+      var b = tcGraph.getElementAtEvent(e);
+      if (b.length > 0) {
+        tapOrHover(b[0]._index);
+      }
+    };
+  }
+
+  function tapOrHover(ndx) {
+
+    $timeout(function () {
+
+      //console.log ("You tapped " + ndx);
+      $scope.alarm_images = [];
+      $scope.playbackURL = $scope.event.Event.baseURL;
+      var items = current_data.datasets[0].frames[ndx];
+      $scope.alarm_images.push({
+        relativePath: items.relativePath,
+        fid: items.fid,
+        id: items.id,
+        fname: items.fname,
+        score: items.score,
+        time: moment(items.x).format("MMM D," + NVRDataModel.getTimeFormatSec()),
+        eid: items.eid
+      });
+    });
 
+  }
+
+  //--------------------------------------------------------
+  // utility function
+  //--------------------------------------------------------
+
+  function computeRelativePath(event) {
+    var relativePath = "";
+    var loginData = NVRDataModel.getLogin();
+    var str = event.Event.StartTime;
+    var yy = moment(str).locale('en').format('YY');
+    var mm = moment(str).locale('en').format('MM');
+    var dd = moment(str).locale('en').format('DD');
+    var hh = moment(str).locale('en').format('HH');
+    var min = moment(str).locale('en').format('mm');
+    var sec = moment(str).locale('en').format('ss');
+    relativePath = event.Event.MonitorId + "/" +
+      yy + "/" +
+      mm + "/" +
+      dd + "/" +
+      hh + "/" +
+      min + "/" +
+      sec + "/";
+    return relativePath;
+
+  }
+
+  //--------------------------------------------------------
+  // utility function
+  //--------------------------------------------------------
+
+  function computeBasePath(event) {
+    var basePath = "";
+    var loginData = NVRDataModel.getLogin();
+    var str = event.Event.StartTime;
+    var yy = moment(str).locale('en').format('YY');
+    var mm = moment(str).locale('en').format('MM');
+    var dd = moment(str).locale('en').format('DD');
+    var hh = moment(str).locale('en').format('HH');
+    var min = moment(str).locale('en').format('mm');
+    var sec = moment(str).locale('en').format('ss');
+
+    basePath = loginData.url + "/events/" +
+      event.Event.MonitorId + "/" +
+      yy + "/" +
+      mm + "/" +
+      dd + "/" +
+      hh + "/" +
+      min + "/" +
+      sec + "/";
+    return basePath;
+  }
+
+  function humanizeTime(str) {
+    return moment.tz(str, NVRDataModel.getTimeZoneNow()).fromNow();
+
+  }
+
+  function padToN(number, digits) {
+
+    var i;
+    var stringMax = "";
+    var stringLeading = "";
+    for (i = 1; i <= digits; i++) {
+      stringMax = stringMax + "9";
+      if (i != digits) stringLeading = stringLeading + "0";
     }
+    var numMax = parseInt(stringMax);
 
-    function padToN(number, digits)
-    {
-
-        var i;
-        var stringMax = "";
-        var stringLeading = "";
-        for (i = 1; i <= digits; i++)
-        {
-            stringMax = stringMax + "9";
-            if (i != digits) stringLeading = stringLeading + "0";
-        }
-        var numMax = parseInt(stringMax);
-
-        if (number <= numMax)
-        {
-            number = (stringLeading + number).slice(-digits);
-        }
-        //console.log ("PADTON: returning " + number);
-        return number;
+    if (number <= numMax) {
+      number = (stringLeading + number).slice(-digits);
     }
+    //console.log ("PADTON: returning " + number);
+    return number;
+  }
 
 }]);