'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) {

        //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. Navigate to the Module-item-view
        var u = $location.url();
        $location.url('/module-item-view');
    }


    $scope.openModuleItem = function () {
        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));

        $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);

                $scope.getAllPinData();
            }
        }, 550);
    }



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

    })

    $scope.getAllPinData = function () {

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

          .then(
            function (result) {
                $scope.aaPinData = result.data.Root.Item;
                debugger;
                angular.forEach($scope.aaPinData, function (value, key)
                {
                 
                  var pinLength1 = Math.sqrt((value._PinX - value._HeadX) * (value._PinX - value._HeadX) + (value._PinY - value._HeadY) * (value._PinY - value._HeadY));
                    var pinLength = pinLength1.toPrecision(2);

                    var pinData = '<div class="pin" style="border:1px dashed #000;position:absolute;left:604px;top:120px;width:' + pinLength + 'px;"><div style="border:1px dashed #000;position:absolute;left:604px;"><img src="~/content/images/img181.png"/></div></div>';

                   //   <div class="pin" style="border:1px dashed #000;position:absolute;left:604px;top:120px;width:50px;"><div style="/* border:1px dashed #000; */position:absolute;left: -22px;/* width: 0px; */top: -11px;"><img src="~/content/images/img181.png"></div></div>


                      //var divReference = document.getElementById("imageDiv");
                    
                    $("#imageDiv").append(pinData);
                })
               // $scope.showAllPins();

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

    }

    $scope.showAllPins = function ()
    {
        //debugger;
        //alert('showAllPins is called');

        if ($scope.aaPinData = null || $scope.aaPinData != (undefined))
        {
        
            angular.forEach($scope.aaPinData, function (value, key)
            {
                debugger;

               // alert('NO null pin data');
               // var pinLength1 = Math.sqrt((638 - 604) * (638 - 604) + (83 - 120) * (83 - 120));
                var pinLength1 = Math.sqrt((value._PinX - value[key]._HeadX) * (value._PinX - value._HeadX) + (value._PinY - value._HeadY) * (value._PinY - value._HeadY));
                var pinLength = pinLength1.toPrecision(2);

                var pinData = '<div class="pin" style="border:1px dashed #000;position:absolute;left:604px;top:120px;width:' + pinLength + 'px;"><div style="border:1px dashed #000;position:absolute;left:604px;"><img src="~/content/images/img181.png"/></div></div>';

                //  <div class="pin" style="border:1px dashed #000;position:absolute;left:604px;top:120px;width:50px;"><div style="/* border:1px dashed #000; */position:absolute;left: -22px;/* width: 0px; */top: -11px;"><img src="~/content/images/img181.png"></div></div>


                //  var divReference = document.getElementById("imageDiv");
                // divReference.appendChild(pinData);
               // alert(pinData);
                $("#imageDiv").append(pinData);
            })
        }
        else
        {
           // alert('null pin data');
        }

        }


}]);