'use strict';

AIA.controller("TileViewListController", ["$scope", "$rootScope", "$compile", "$http", "$log", "$location", "$timeout", "DA", "Modules", "$routeParams", "DataService", "ModuleService",
function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Modules, $routeParam, DataService, ModuleService) {


    $rootScope.OpenedTileData = [];
    var ATLAS_ANATOMY = 'Atlas Anatomy';
    var CLINICAL_ILLUSTRATION = 'Clinical Illustrations';
    var CLINICAL_ANIMATION = 'Clinical Animations';

    $scope.loadForModuleById = function (moduleId) {

        $scope.moduleId = moduleId;

        console.log('loadForModuleById is called')
        $rootScope.moduleName = Modules[moduleId].Name;
        
        var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName)

            .then(
              function (result) {
                  $scope.moduleLandingData = result;

                  console.log(JSON.stringify(result, null, 4));
              },
               function (error) {
                   // handle errors here
                   console.log(' error: ' + error.statusText);
               }
              )
    }

    $scope.openModuleItemView = function (event) {

        debugger;

        //0. Get selected Image Id
        var moduleItemDataToBeSaved = event.target.id;

        //1.Filter selected module ietem data and get the pushed opened moduile array object
        $rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData);

        //2. Pick the image name to create a source to open
        $rootScope.imageName = $rootScope.OpenedTileData[3];
        $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];

        //3. set opened module item title
        localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]);

        //3. Navigate to the Module-item-view
        var u = $location.url();
        $location.url('/module-item-view');
    }


    $scope.openModuleItem = function ()
    {
        debugger;
        var jsContentURL;
        var moduleItemViewDivId;

        //1. create a jsPanel and load the module item view
        if ($rootScope.moduleName == ATLAS_ANATOMY) {

            jsContentURL = 'app/views/aa/atlas-anatomy-detail.html';
            moduleItemViewDivId = 'aaDetailPageDiv';           
        }
        else if ($rootScope.moduleName == CLINICAL_ANIMATION) {
            //to do, in next phase of project 

        }
        else if ($rootScope.moduleName == CLINICAL_ILLUSTRATION) {
            //to do, in next phase of project

        }

        $.jsPanel({
            id: 'ImagePanel',
            selector: '.aaBodyView',
            theme: 'success',
            currentController: 'TileViewListController',
            parentSlug: 'tile-view',
            ajax: {
                url: jsContentURL
            },
            title: localStorage.getItem("currentViewTitle"),

            position: {
                top: 70,
                left: 1,
            },

            size: { width: $(window).outerWidth() - 10, height: $(window).outerHeight() - 110 },

        });

        console.log('jsPanel loaded ImagePanel exist= ' + document.getElementById('ImagePanel'))

        //0.3
        var aaViewElement = angular.element(document.getElementById(moduleItemViewDivId));

        //0.4 for Opening module item, load it into image
        var openedImage = new Image();
        openedImage.name = $rootScope.OpenItemImagePath;
        openedImage.onload = getImageHeightWidth;
        openedImage.onerror = loadFailure;
        openedImage.src = $rootScope.OpenItemImagePath;

        $timeout(function () {
            $compile(aaViewElement.contents())($scope);
           
            if (document.getElementById('aaDetailPageDiv') != null) {

                //0.4 added some stylesheets
                $('#aaBodyView').css("height", $(window).outerHeight());
                $('#aaBodyView').css("width", $(window).outerWidth());

                $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");
                $("#modItemImage").attr('src', $rootScope.OpenItemImagePath);

                //0.5 create canvas on the top of image so that I can draw a line over the canvas.
                var canvas = document.createElement('canvas');
                canvas.height = parseInt(($scope.imageHeight));
                canvas.width = parseInt($scope.imageWidth);
                canvas.style.left = '0px';
                canvas.style.top = '0px';              
                canvas.style.position = "absolute";

                $("#imageDiv").append(canvas);
                $scope.context = canvas.getContext("2d")
               
                //6. Show all pins on AA opened item
                $scope.showAllPins();
            }
        }, 1050);
    }

    function loadFailure() {
        console.log('unable to load opened module ietem');
       return true;
    }

    function getImageHeightWidth()
    {
           $scope.imageWidth = this.width;
           $scope.imageHeight = this.height;
    }

    angular.element(document).ready(function (e) {
        $("#ImagePanel").resize(function () {
            $("#imageDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
            $("#imageDiv").scrollTop($rootScope.CanvasDivTopPosition);
        });

    })

    $scope.showAllPins = function () {

        var promise = ModuleService.getPinDataForImage($rootScope.imageName)

          .then(
            function (result) {
                $scope.aaPinData = result.data.Root.Item;
                debugger;
                angular.forEach($scope.aaPinData, function (value, key)
                {
                            
                    $scope.context.beginPath();
                    $scope.context.moveTo(value._PinX, value._PinY);
                    $scope.context.lineTo(value._HeadX, value._HeadY);
                    $scope.context.stroke();

                    var headX = (parseInt(value._HeadX)) - 20;
                    var headY = (parseInt(value._HeadY)) - 15;

                        var img = new Image();                  
                        img.src = "~/../../../content/images/noraml-pin.png";
                        img.onload = function () {
                        $scope.context.drawImage(img, headX, headY);
                    }

                })
             
                console.log(JSON.stringify(result, null, 4));
            },
             function (error) {
                 // handle errors here
                 console.log(' error: ' + error.statusText);
             }
            )
    }



}]);