/// <reference path="../views/atlas-anatomy-detail.html" />
/// <reference path="../views/atlas-anatomy-detail.html" />
'use strict';

AIA.controller("TileViewListController", ["$scope", "$rootScope", "$compile", "$http", "$log", "$location", "BodyRegions", "BodySystems", "ViewOrientations", "ImageTypes", "$timeout", "Modules", "$routeParams", "DataService","ModuleService" ,
function ($scope, $rootScope, $compile, $http, $log, $location, BodyRegions, BodySystems, ViewOrientations, ImageTypes, $timeout, Modules, $routeParam, DataService,ModuleService)
{
    var ATLAS_ANATOMY = 'Atlas Anatomy';
    var CLINICAL_ILLUSTRATION ='Clinical Illustrations';
    var CLINICAL_ANIMATION='Clinical Animations';

    var moduleData = [];

    $scope.AllBodyRegion = [];
    $scope.AllBodySystem = [];
    $scope.AllOrientation = [];
    $scope.AllImageType = [];
    $scope.moduleData = [];
    $rootScope.moduleName;
    $rootScope.OpenItemImageName;
    $rootScope.OpenItemImagePath;

    $scope.test;

    $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.scroll = function () {
        $("html,body").scrollTop(0);
    }
    
    $scope.openModuleItem11 = function (event) {

        alert('hi');
       //// debugger;
        var moduleItemDataToBeSaved = event.target.id;
            
        var OpendTileData = [];

        OpendTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData);
       
     
        $location.url('/atlas-anatomy-detail');

    }

    $scope.openModuleItemView = function(event)
    {
        //alert('openModuleItemView is called')
        var moduleItemDataToBeSaved = event.target.id;

        var OpendTileData = [];

        OpendTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData);

        $rootScope.imageName = OpendTileData[3];

        $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + OpendTileData[3];
        //alert('img Name: ' +$scope.OpenItemImageName);

        var u = $location.url();
        $location.url('/module-item-view');
    }

    

    $scope.getImgUrl = function () {

        alert('called...')
       // $scope.myImgUrl = $rootScope.OpenItemImageName;
        //alert('getImgurl: ' + $scope.myImgUrl);


    }

    $scope.openModuleItem = function (elSelector)
    {
        debugger;

        alert($rootScope.OpenItemImageName);

        var OpendTileData = [];

        var url;



        if ($rootScope.moduleName == ATLAS_ANATOMY)
        {

            url = 'app/views/aa/atlas-anatomy-detail.html';
            $scope.test = url;

            $scope.showAllPins();
        }
        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: '.JsPannelContainer',
            theme: 'success',
            currentController: 'TileViewListController',
            parentSlug: 'tile-view-list',
            ajax: {
                url: url
            },

            title: "AA page view",

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

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

        });


        var jsElement = angular.element(document.getElementById("JsPannelContainer"));


        $timeout(function () {
            $compile(jsElement.contents())($scope);
            if ($rootScope.moduleName == ATLAS_ANATOMY) {
                $scope.addPinDataCanvas();
            }

          

        }, 250);

           
       
      

        //document.getElementById('aaDetailPageDiv').appendChild(imgCanvas);

    }

    
    $scope.addPinDataCanvas = function()
    {
        //var pinDataCanvas = document.createElement('addPinDataCanvas');
        //pinDataCanvas.id = "addPinDataCanvas";
        //pinDataCanvas.height = 216;
        //pinDataCanvas.width = 216;
        //pinDataCanvas.style.position = "absolute";
        //pinDataCanvas.style.left = 0 + "px";
        //pinDataCanvas.style.top = 0 + "px";
        ////pinDataCanvas.style.background = "red";
        ////pinDataCanvas.style.border = "black 10px solid";

        //var divReference = document.getElementById("imageDiv");
        //divReference.appendChild(pinDataCanvas);

        debugger;
        var pinLength1 = Math.sqrt((638 - 604) * (638 - 604) + (83 - 120) * (83 - 120));
        var pinLength = pinLength1.toPrecision(2);

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

    }

    $scope.showAllPins = function ()
    {
        
        var promise = ModuleService.getPinDataForImage($rootScope.imageName)

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

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

    }
   
   
}]);