// Common Controller for the montage view
/* jshint -W041 */
/* jslint browser: true*/
/* global saveAs, cordova,StatusBar,angular,console,ionic, moment, vis , Chart, DJS*/




angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '$rootScope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'carouselUtils', '$ionicPopup', function ($scope, $rootScope, zm, ZMDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup) {

    
    

    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 = ZMDataModel.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("events", {
                    "id": 0
                }, {
                    reload: true
                });
            }
        };
   

    
    //-------------------------------------------------------
    // we use this to reload the connkey if authkey changed
    //------------------------------------------------------
    
    
     $rootScope.$on("auth-success", function () {

            ZMDataModel.zmDebug("EventModalCtrl: Re-login detected, resetting everything & re-generating connkey");
             
            
    });
    
    
     $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.switchType = function()
    {
        
        if ($scope.graphType == "all")
        {
            current_data = onlyalarm_data;
            $scope.graphType = "alarmed";
             ZMDataModel.zmDebug ("Alarm array has " + onlyalarm_data.labels.length+ " frames");
            btype='bar';
            //console.log (JSON.stringify(onlyalarm_data));
            
        }
        else
        {
            current_data = data;
           // tcGraph.data = 
            $scope.graphType = "all";
            btype='line';
        }
        
        ZMDataModel.zmLog ("Switching graph type to "+$scope.graphType);
        
        var ld = ZMDataModel.getLogin();
        ld.timelineModalGraphType = $scope.graphType;
        ZMDataModel.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:'popup80'});
    };
    
    
   
    

    $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;
         ZMDataModel.zmLog ("Setting init graph width to " + $scope.graphWidth);
         $scope.dataReady = false;
         
         ZMDataModel.getKeyConfigParams(0)
            .then(function (data) {
                //console.log ("***GETKEY: " + JSON.stringify(data));
                eventImageDigits = parseInt(data);
                ZMDataModel.zmLog("Image padding digits reported as " + eventImageDigits);
            });

         $scope.eventdetails = "loading...";
         processEvent();
         //$scope.eventdetails = JSON.stringify($scope.event);
     });
        
    
    //-------------------------------------------------------
    // okay, really init drawing here
    //------------------------------------------------------
    
    function processEvent()
    {
        var eid = $scope.event.Event.Id;
        //eid = 22302;
        var ld = ZMDataModel.getLogin();
        var apiurl = ld.apiurl + "/events/"+eid+".json";
        ZMDataModel.zmLog ("Getting " + apiurl);
        $http.get (apiurl)
        .then (function (success)
               {
                    //$scope.eventdetails = JSON.stringify(success);
                    drawGraphTC(success.data);
        },
               function (error)
               {
                    $scope.errorDetails = "there was an error rendering the graph. Please see logs";
                    ZMDataModel.zmLog ("Error in timeline frames " + JSON.stringify(error));
        });
    }
    
    
    //-------------------------------------------------------
    // 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,
          borderJoinStyle: 'miter',
          pointBorderColor: "rgba(220,220,220,1)",
          pointBackgroundColor: "#e74c3c",
          backgroundColor: 'rgba(129, 207, 224, 1.0)',
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "#40d47e",
          pointHoverBorderWidth: 2,
          tension: 0.1,
          borderColor: 'rgba(129, 207, 224, 1.0)',
          hoverBackgroundColor: 'rgba(248, 148, 6,1.0)',
          hoverBorderColor: 'rgba(248, 148, 6,1.0)',
          data: [],
          frames: []
        },
        
      ]
    };*/
        
    
    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;
            
       // ZMDataModel.zmLog ("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,

                            });
            }
            
        }
        
        $scope.dataReady = true;
        
         cv = document.getElementById("tcchart");
         ctx = cv.getContext("2d");
        
        if (ZMDataModel.getLogin().timelineModalGraphType == 'all')
        {
            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});});
            
        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,"+ZMDataModel.getTimeFormatSec()),
                            eid:items.eid});
            });
            
    }
    
   
   
    //--------------------------------------------------------
    // utility function
    //--------------------------------------------------------

    function computeRelativePath(event) {
        var relativePath = "";
        var loginData = ZMDataModel.getLogin();
        var str = event.Event.StartTime;
        var yy = moment(str).format('YY');
        var mm = moment(str).format('MM');
        var dd = moment(str).format('DD');
        var hh = moment(str).format('HH');
        var min = moment(str).format('mm');
        var sec = moment(str).format('ss');
        relativePath = event.Event.MonitorId + "/" +
            yy + "/" +
            mm + "/" +
            dd + "/" +
            hh + "/" +
            min + "/" +
            sec + "/";
        return relativePath;

    }

    //--------------------------------------------------------
    // utility function
    //--------------------------------------------------------

    function computeBasePath(event) {
        var basePath = "";
        var loginData = ZMDataModel.getLogin();
        var str = event.Event.StartTime;
        var yy = moment(str).format('YY');
        var mm = moment(str).format('MM');
        var dd = moment(str).format('DD');
        var hh = moment(str).format('HH');
        var min = moment(str).format('mm');
        var sec = moment(str).format('ss');

        basePath = loginData.url + "/events/" +
            event.Event.MonitorId + "/" +
            yy + "/" +
            mm + "/" +
            dd + "/" +
            hh + "/" +
            min + "/" +
            sec + "/";
        return basePath;
    }



    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;
    }

    

}]);