'use strict';

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


    $rootScope.OpenedTileData = [];
    var DISSECTIBLE_ANATOMY = 'Dissectible Anatomy';
    var ATLAS_ANATOMY = 'Atlas Anatomy';
    var CLINICAL_ILLUSTRATION = 'Clinical Illustrations';
    var CLINICAL_ANIMATION = 'Clinical Animations';
    $rootScope.closeBtnImgPath = "~/../content/images/speeachBubbleClose.png";
    $rootScope.listArray = [];
    //variables to bind Filter by Controls
    $scope.searchAAListViewData = [];
    $scope.SelectedAAthumbImage = [];
    $scope.SelectedAAImage = [];
    $scope.SelectedAASummary = [];
    $scope.SelectedAAId = [];
    $scope.SelectedAATitle = [];
    $scope.selectedAAListViewData = [];
    $scope.filterstring = false;
    $scope.AllBodyRegion = [];
    $scope.AllBodySystem = [];
    $scope.AllOrientation = [];
    $scope.AllImageType = [];
    $rootScope.speechBubbleDimaensions = [];
    $scope.runningSearchWorkers = [];
    $scope.clickedPins = [];
    $scope.sliderPercentValue = 1;
    $scope.query = {
        selectedbodyregion: '',
        selectedbodysystem: '',
        selectedorientation: '',
        selectedimagetype: '',
    };
    $scope.activePinArray = [];
    $scope.showTabButton = true;
    $scope.isListViewDataLoaded = true;
    $scope.setActiveTab = function (tabToSet) {

        $scope.activeTab = tabToSet;
        localStorage.setItem("activeTab", $scope.activeTab);
        if ($scope.activeTab == 1) {
            $('#grid-view').css("display", "block");
            $('#list-view').css("display", "none");
            $("#demoView").remove();
        }
        else {

            $('#grid-view').css("display", "none");
            $('#list-view').css("display", "block");
        }
    };

    $scope.loadForModuleById = function (moduleId) {
        $rootScope.isLoading = true;
        $('#spinner').css('visibility', 'visible');
        $rootScope.openModules.push({ "ModuleId": 2 });
        if ($rootScope.refreshcheck == null) {
            $location.path('/');
        }
        $scope.moduleId = moduleId;
        $scope.activeTab = 1;
        console.log('loadForModuleById is called')
        $rootScope.moduleName = Modules[moduleId].Name;
        $rootScope.currentActiveModuleTitle = $rootScope.moduleName;
        $scope.AllBodyRegion = BodyRegions;
        $scope.AllBodySystem = BodySystems;
        $scope.AllOrientation = ViewOrientations;
        $scope.AllImageType = ImageTypes;
        var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName)
            .then(
              function (result) {

                  $scope.moduleLandingData = result;
                  //   setTimeout(function () { $('#' + $rootScope.highlightid).find('.thumbnail').addClass('hightlightstate'); }, 100);
                  setTimeout(function () {

                      if (localStorage.getItem("CurrentBodyRegion") != '') {
                          $("#region option[value='" + localStorage.getItem('CurrentBodyRegion') + "']").prop('selected', true);
                      }
                      if (localStorage.getItem("CurrentBodySystem") != '') {
                          $("#system option[value='" + localStorage.getItem('CurrentBodySystem') + "']").prop('selected', true);
                      }
                      if (localStorage.getItem("CurrentOrientation") != '') {
                          $("#orientation option[value='" + localStorage.getItem('CurrentOrientation') + "']").prop('selected', true);
                      }
                      if (localStorage.getItem("CurrentImageType") != '') {
                          $("#Type option[value='" + localStorage.getItem('CurrentImageType') + "']").prop('selected', true);
                      }
                      $scope.query.selectedbodyregion = localStorage.getItem('CurrentBodyRegion');
                      $scope.query.selectedbodysystem = localStorage.getItem('CurrentBodySystem');
                      $scope.query.selectedorientation = localStorage.getItem('CurrentOrientation');
                      $scope.query.selectedimagetype = localStorage.getItem('CurrentImageType');

                      $scope.FilterByImage(1, $scope.query);
                      setTimeout(function () {
                          if ($('#grid-view').css("display") == "block") {
                              if ($rootScope.getLocalStorageValue('AAGridViewHighlightThumbnail') !== null) {
                                  $('#' + $rootScope.getLocalStorageValue("AAGridViewHighlightThumbnail")).find('.thumbnail').addClass('HightLightThumbnail');
                              }
                              if ($rootScope.getLocalStorageValue('AAGridViewScroll') !== null && $location.url() == "/tile-view-list") {

                                  $('html, body').animate({ scrollTop: $rootScope.getLocalStorageValue('AAGridViewScroll') }, 'slow');

                              }
                          }
                          if ($('#list-view').css("display") == "block") {

                              var AAListViewScroll = $rootScope.getLocalStorageValue("AAListViewScroll");
                              if (typeof (AAListViewScroll) !== "undefined" && AAListViewScroll !== null && AAListViewScroll !== '' && $location.url() == "/tile-view-list") {
                                  if (typeof InstallTrigger !== 'undefined') {

                                      $('#ListViewDiv').animate({ scrollTop: $rootScope.getLocalStorageValue('AAListViewScroll') }, 'slow');
                                  }
                                  else {

                                      $('#ListViewDiv').animate({ scrollTop: $rootScope.getLocalStorageValue('AAListViewScroll') }, 'slow');
                                  }
                                  $("#list-view table tbody tr").removeClass("active");
                                  $("#list-view table tbody #" + $rootScope.getLocalStorageValue("listViewSelectedID")).addClass("active");
                              }

                          }

                          $rootScope.isLoading = false;
                          $('#spinner').css('visibility', 'hidden');
                      }, 200);


                  }, 100);

                  //console.log(JSON.stringify(result, null, 4));
              },
               function (error) {
                   // handle errors here
                   console.log(' error: ' + error.statusText);
               }
              )
        $('#list-view').css('display', 'none');
    }

    //$scope.$on('$viewContentLoaded', function (event) {

    //    $scope.loadForModuleById();

    //});
    $scope.isOpenBtnClicked = false;
    $scope.openModuleItemView = function (event) {
        $rootScope.MenuModuleName = "AA";
        localStorage.setItem("activeTab", $scope.activeTab);
        //0. Get selected Image Id
        if ($scope.isListViewButtonClicked == true) {
            if ($scope.isOpenBtnClicked == true) {

                var moduleItemDataToBeSaved = $("#demoText").text().trim();
                $scope.isOpenBtnClicked = false;
            }
            else {
                var moduleItemDataToBeSavedID = event.currentTarget.id;
                localStorage.setItem("listViewSelectedID", moduleItemDataToBeSavedID);
                var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text().trim();
            }
        }
        else {
            var moduleItemDataToBeSaved = event.target.id;
            localStorage.setItem("listViewSelectedID", event.currentTarget.id);
            $scope.isListViewButtonClicked = false;
        }

        //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.imageId = $rootScope.OpenedTileData[0];
        $rootScope.imageName = $rootScope.OpenedTileData[3];
        $rootScope.bodySystemName = $rootScope.OpenedTileData[2];
        $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
        $scope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
        //$rootScope.listArray = [];
        $rootScope.listArray.push({ "imageName": $rootScope.OpenItemImagePath, "text": moduleItemDataToBeSaved });
        //3. set opened module item ti
        localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]);
        if ($('#grid-view').css("display") == "block") {
            localStorage.setItem("AAGridViewScroll", $($window).scrollTop());
            localStorage.setItem("AAGridViewHighlightThumbnail", $(event.target).parent().parent().parent().attr('id'));
        }

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


    $scope.openListViewModuleItem = function (event) {
        $("#demoView").remove();
        var moduleItemDataToBeSavedID = event.currentTarget.id;
        $("#list-view table tbody tr").removeClass("active");
        localStorage.setItem("listViewSelectedID", moduleItemDataToBeSavedID);
        $("#list-view table tbody #" + moduleItemDataToBeSavedID).addClass("active");
        localStorage.setItem("AAListViewScroll", $("#list-view table tbody").scrollTop());
        var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text().trim();
        $rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData);
        $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
        //$rootScope.listArray = [];
        $rootScope.listArray.push({ "imageName": $rootScope.OpenItemImagePath, "text": moduleItemDataToBeSaved });
        $("#viewList").append("<div class='col-xs-12 text-center' style='padding-top:15px;padding-bottom:15px;' id='demoView'><div class='col-xs-12' style='padding:15px;background-color:#fff;'><div class='col-xs-2' style='border:1px solid #000;padding:5px;color:#000;font-size:12px;'><div class='thumbnail' style='margin-bottom:10px;'><img style='width:auto;height:95px!important;' src=" + $rootScope.OpenItemImagePath + "></div><div class='col-xs-12' id='demoText' style='padding:0;'>" + moduleItemDataToBeSaved + "</div></div></div><a style='position:absolute;right:30px;bottom:34px;' onclick='openCurrentView(event)' href='javascript:void(0)' class='pull-right btn btn-primary'>Open</a></div>");
    }


    $scope.openModuleItem = function () {
        
     
        if ($rootScope.isCallFromOtherModule == true) {

            var aaOpenInOtherModules = ModuleService.getModuleData("ATLAS_ANATOMY");

            if (aaOpenInOtherModules != undefined && aaOpenInOtherModules.length > 0) {
                var d = aaOpenInOtherModules[0];
                $rootScope.moduleName = aaOpenInOtherModules[0].moduleName;
                $rootScope.MULTI_VIEW_ID += 1;
                $scope.multiViewCounter = $rootScope.MULTI_VIEW_ID;
                ModuleService.loadModuleDataBasedOnModuleName('Atlas Anatomy')
                                    .then(
                                      function (result) {
                                          console.log('got result');

                                          //Now the scope is of AA so we need to assign the values to the scope of AA.

                                          $scope.moduleLandingData = result;

                                          $scope.moduleName = aaOpenInOtherModules[0].moduleName;//'Atlas Anatomy';

                                          $scope.isListViewButtonClicked = false;

                                          $scope.anatomyTitleAA = aaOpenInOtherModules[0].anatomyTitle;
                                          $scope.selectedPinTermIdAA = aaOpenInOtherModules[0].selectedPinTermId;
                                          $scope.selectedPinsAA = aaOpenInOtherModules[0].selectedPins;
                                          $scope.selectedBodysystemIdAA = aaOpenInOtherModules[0].selectedBodysystemId;
                                          $scope.hideAnnotationsAA = aaOpenInOtherModules[0].hideAnnotations;
                                          $scope.horizontalScrollAA = aaOpenInOtherModules[0].horizontalScroll + 'px';
                                          $scope.verticalScrollAA = aaOpenInOtherModules[0].verticalScroll + 'px';
                                          $scope.zoomLevelAA = aaOpenInOtherModules[0].zoomLevel;
                                          $scope.showSelectedPinsAA = aaOpenInOtherModules[0].showSelectedPins;
                                          $scope.hideAllPinsAA = aaOpenInOtherModules[0].hideAllPins;
                                          $scope.selectedCalloutsAA = aaOpenInOtherModules[0].selectedCallouts;
                                          $scope.imageIdAA = aaOpenInOtherModules[0].imageId;

                                          console.log(aaOpenInOtherModules[0].x+", top:"+aaOpenInOtherModules[0].y)
                                          $("atlas-anatomy-directive").css({"position": "absolute","left":aaOpenInOtherModules[0].x,"top":aaOpenInOtherModules[0].y});

                                          var selectedTileData = new jinqJs()
                                                           .from($scope.moduleLandingData.data.root.Item)
                                                           .where("_Title == " + $scope.anatomyTitleAA)
                                                            .select();

                                          if (selectedTileData != undefined && selectedTileData.length > 0) {
                                              //$scope.imageName = selectedTileData[0]._ImageName;
                                              $rootScope.imageId = selectedTileData[0]._ImageId;
                                              $rootScope.imageName = selectedTileData[0]._ImageName;
                                              $rootScope.bodySystemName = selectedTileData[0]._BodySystem;
                                              $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + selectedTileData[0]._ImageName;
                                              //$rootScope.listArray = [];
                                              $scope.listArray.push({ "imageName": $scope.OpenItemImagePath, "text": $scope.anatomyTitle });
                                              //3. set opened module item ti
                                              localStorage.setItem("currentViewTitle", selectedTileData[0]._Title);


                                              //load search data
                                              ModuleService.getTermTextDataForAAImage($rootScope.imageId)
                                                                                       .then(
                                                                                        function (response) {

                                                                                            $scope.AAPinTermData = response.data.PinTermData.TermData;
                                                                                            console.log($scope.isCallFromOtherModule + ', ' + $scope.isListViewButtonClicked + ', ' + $scope.anatomyTitle + ', ' + $scope.imageName)

                                                                                            $scope.isCallFromOtherModule = true;

                                                                                            $scope.loadAAIllustration();



                                                                                        })
                                          }
                                      })

            }
        }
        else {
            $scope.loadAAIllustration();
        }
    }

    $scope.loadAAIllustration = function () {


        if ($rootScope.refreshcheck == null) {
            $location.path('/');
        }
        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

        }
       $scope.jsPanelId = 'ImagePanel'+ $rootScope.MULTI_VIEW_ID
        //1. create a jsPanel and load the module item view
        if ($rootScope.moduleName == ATLAS_ANATOMY) {
            $.jsPanel({
                id: $scope.jsPanelId,
                selector: '.aaBodyView',
                theme: 'success',
                currentController: 'TileViewListController',
                parentSlug: 'tile-view-list',
                ajax: {
                    url: jsContentURL
                },
                title: $rootScope.getLocalStorageValue("currentViewTitle"),

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

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

            });

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

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

            //0.4 for Opening module item, load it into image
            $rootScope.isLoading = true;
            $('#spinner').css('visibility', 'visible');
            var openedImage = new Image();
            openedImage.id = 'modItemImage';
            openedImage.name = $rootScope.OpenItemImagePath;

            openedImage.onload = function () {
                $scope.imageWidth = this.width;
                $scope.imageHeight = this.height;


                $timeout(function () {
                    $compile(aaViewElement.contents())($scope);

                    $scope.canvasDivID = 'canvasDiv';
                    $scope.canvasPaintId = 'canvasPaint';
                    $scope.canvasId = 'canvas';
                    $scope.modItemImageId = 'modItemImage';
                    $scope.aaDetailViewCanvasId = 'aaDetailViewCanvas';

                    $scope.navimgID = 'navimg'
                    $scope.navigatorBtnID = 'navigatorBtn';
                    $scope.navigatorDivID = 'navigatorDiv';

                    $scope.termlistfilterID= 'termlistfilter';
                    $scope.termListID= 'termList';
                    $scope.bodySystemListID = 'bodySystemList';

                    $scope.hidePinBtnID = 'hidePinBtn';
                    $scope.selectedPinBtnID = 'selectedPinBtn';
                    $scope.allPinBtnID = 'allPinBtn';
                    $scope.btnShowHideAnnotationsID = 'btnShowHideAnnotations';
                    $scope.zoomSliderID = 'zoomSlider';
                    $scope.dropdownMenuID = 'dropdownMenuAA';

                    if ($rootScope.isCallFromOtherModule == true) {
                        $scope.setControlsIDs();

                    //    $scope.setScopeVariables();


                    }


                    //if (document.getElementById('aaDetailPageDiv') != null) {
                    if (document.getElementById('aaBodyView') != null) {

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

                        $('#aaBodyView').css("width", $(window).outerWidth() - 15);

                        $rootScope.canvasDivHeight = $('.jsPanel-content').height() - $('.main2 .stickey-area').height();

                        $('.canvasDivClass').css("height", $rootScope.canvasDivHeight);

                        alert($('#' + $scope.canvasDivID).scrollTop());
                      //  $('#' + $scope.canvasDivID).css("overflow", "scroll");
                        $('#' + $scope.canvasDivID).scrollTop($scope.verticalScrollAA);
                        $('#' + $scope.canvasDivID).scrollLeft($scope.horizontalScrollAA);

                      
                        alert($('#' + $scope.canvasDivID).scrollTop());

                        $scope.currentTitleFromJson = $rootScope.getLocalStorageValue("currentViewTitle");
                        $("#"+$scope.modItemImageId ).attr('src', $rootScope.OpenItemImagePath);


                        $rootScope.ViewImageWidth = $("#" + $scope.modItemImageId).width();
                        $scope.ViewImageWidth = $("#" + $scope.modItemImageId).width();
                        $scope.ViewImageHeight = $("#" + $scope.modItemImageId).height();

                        $scope.relativeDimesion = 0;
                        $("#" + $scope.modItemImageId).css("width", $rootScope.ViewImageWidth + "px");
                        //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.id = $scope.aaDetailViewCanvasId;
                        canvas.className = '.aaCanvas'
                        canvas.height = parseInt($scope.imageHeight + 10);
                        canvas.width = parseInt($scope.imageWidth + 10);
                        canvas.style.left = '0px';
                        canvas.style.top = '0px';
                        canvas.style.position = "absolute";
                        $("#"+$scope.canvasDivID).append(canvas);
                        $scope.context = canvas.getContext("2d")
                        //6. Show all pins on AA opened item
                        $scope.showAllPins();
                        //7. Highlight all system body list in left side
                        $scope.highlightBodySystemList();
                    }
                    $(".slider").slider({
                        min: 25,
                        max: 100,
                        value: 100,
                        range: "min",
                        orientation: "vertical",
                        slide: function (event, ui) {
                            var btnName =(event.currentTarget.id);
                            var btnMultiViewID = (btnName).split("_")[1];
                            $scope.modItemImageId = 'modItemImageAA_' + btnMultiViewID;
                            $scope.multiViewCounter = btnMultiViewID;

                            changeAAIllustrationSizeOnZoom(event, ui);

                        },
                        change: function (event, ui) {
                            var btnName = event.currentTarget.id;
                            var btnMultiViewID = (btnName).split("_")[1];
                            $scope.modItemImageId = 'modItemImageAA_' + btnMultiViewID;
                            $scope.multiViewCounter = btnMultiViewID;

                            changeAAIllustrationSizeOnZoom(event, ui);
                        }
                    })
 .slider("pips", {
     rest: "label",
     step: "15"
 });

                    if ($scope.isCallFromOtherModule && $scope.zoomLevelAA != 100) {
                        $('#zoomSliderAA_'+$rootScope.MULTI_VIEW_ID).slider("option", "value", $scope.zoomLevelAA);

                    }
                    else {
                        //6. Show all pins on AA opened item
                        $scope.showAllPins();
                        //7. Highlight all system body list in left side
                        $scope.highlightBodySystemList();
                    }
                }, 500);
            }

            openedImage.onerror = loadFailure;
            openedImage.src = $rootScope.OpenItemImagePath;
        }
    }


    $scope.setControlsIDs = function () {
       // var canvasDivAA = $('body').find('#aaDetailPageDiv').find('#canvasDiv');//.attr("id", 'canvasDiv' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#canvasDiv').attr("id", 'canvasDivAA_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#canvasPaint').attr("id", 'canvasPaintAA_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#canvas').attr("id", 'canvasAA_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#modItemImage').attr("id", 'modItemImageAA_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#aaDetailViewCanvas').attr("id", 'aaDetailViewCanvasAA_' + $rootScope.MULTI_VIEW_ID);
       $('body').find('#aaDetailPageDiv').find('#navimg').attr("id", 'navimgAA_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#navigatorBtn').attr("id", 'navigatorBtnAA_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#navigatorDiv').attr("id", 'navigatorDivAA_' + $rootScope.MULTI_VIEW_ID);
          $('body').find('#aaDetailPageDiv').find('#termlistfilter').attr("id", 'termlistfilterAA_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#termList').attr("id", 'termListAA_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#bodySystemList').attr("id", 'bodySystemListAA_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#bodySystemDiv').attr("id", 'bodySystemDivAA_' + $rootScope.MULTI_VIEW_ID);

        $('body').find('#aaDetailPageDiv').find('#hidePinBtn').attr("id", 'hidePinBtnAA_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#selectedPinBtn').attr("id", 'selectedPinBtnAA_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#allPinBtn').attr("id", 'allPinBtnAA_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#btnShowHideAnnotations').attr("id", 'btnShowHideAnnotations_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#zoomSlider').attr("id", 'zoomSliderAA_' + $rootScope.MULTI_VIEW_ID);
        $('body').find('#aaDetailPageDiv').find('#dropdownMenuAA').attr("id", 'dropdownMenuAA_' + $rootScope.MULTI_VIEW_ID);

 }

    //$scope.setScopeVariables = function () {
    //    $scope.canvasDivID = 'canvasDivAA_' + $scope.multiViewCounter;
    //    $scope.canvasPaintIdId = 'canvasPaintAA_' + $scope.multiViewCounter;
    //    $scope.canvasId = 'canvasAA_' + $scope.multiViewCounter;
    //    $scope.modItemImageId = 'modItemImageAA_' + $scope.multiViewCounter;
    //    $scope.aaDetailViewCanvasId = 'aaDetailViewCanvasAA_' + $scope.multiViewCounter;
    //    moduleItemViewDivId = 'aaDetailPageDivAA_' + $scope.multiViewCounter;
    //    $scope.navimgID = 'navimgAA_' + $scope.multiViewCounter;
    //    $scope.navigatorBtnID = 'navigatorBtnAA_' + $scope.multiViewCounter;
    //    $scope.navigatorDivID = 'navigatorDivAA_' + $scope.multiViewCounter;
    //    $scope.termlistfilterID = 'termlistfilterAA_' + $scope.multiViewCounter;
    //    $scope.termListID = 'termListAA_' + $scope.multiViewCounter;
    //    $scope.bodySystemListID = 'bodySystemListAA_' + $scope.multiViewCounter;


    //    $scope.hidePinBtnID = 'hidePinBtnAA_' + $scope.multiViewCounter;
    //    $scope.selectedPinBtnID = 'selectedPinBtnAA_' + $scope.multiViewCounter;
    //    $scope.allPinBtnID = 'allPinBtnAA_' + $scope.multiViewCounter;
    //    $scope.btnShowHideAnnotationsID = 'btnShowHideAnnotationsAA_' + $scope.multiViewCounter;
    //    $scope.zoomSliderID = 'zoomSliderAA_' + $scope.multiViewCounter
    //    $scope.dropdownMenuID = 'dropdownMenuAA_' + $scope.multiViewCounter;
    //}
    function changeAAIllustrationSizeOnZoom(event, ui) {
        
        //alert('currentTarget=' + currentTarget)
        //alert('ui.value=' + ui.value)
        var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
        scope.$apply(function () {

            scope.multiViewCounter = "";

            if ($rootScope.isCallFromOtherModule) {
                var currentTarget = event.currentTarget.id;
                scope.multiViewCounter = currentTarget.split('_')[1];
                $scope.modItemImageId = "#modItemImageAA_" + scope.multiViewCounter;
            }

            scope.sliderVal = ui.value;
            scope.removeSpeechBubble();
            var relativeWidth = 0;
            var relativeHeight = 0;
            if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
                $("#listManager").css("display", "none");
                $("#optionsListManagerTab").removeClass("active");
          

                if (ui.value == 100) {
                    relativeWidth = scope.ViewImageWidth;
                    relativeHeight = scope.ViewImageHeight
                    scope.sliderPercentValue = 1.0;
                }
                else if (ui.value == 85) {
                    relativeWidth = scope.ViewImageWidth * 0.85;
                    relativeHeight = scope.ViewImageHeight * 0.85;
                    scope.sliderPercentValue = 0.85;

                } else if (ui.value == 70) {
                    relativeWidth = scope.ViewImageWidth * 0.70;
                    relativeHeight = scope.ViewImageHeight * 0.70;
                    scope.sliderPercentValue = 0.70;
                } else if (ui.value == 55) {

                    relativeWidth = scope.ViewImageWidth * 0.55;
                    relativeHeight = scope.ViewImageHeight * 0.55;
                    scope.sliderPercentValue = 0.55;

                } else if (ui.value == 40) {

                    relativeWidth = scope.ViewImageWidth * 0.40;
                    relativeHeight = scope.ViewImageHeight * 0.40;
                    scope.sliderPercentValue = 0.40;

                } else if (ui.value == 25) {

                    relativeWidth = scope.ViewImageWidth * 0.25;
                    relativeHeight = scope.ViewImageHeight * 0.25;
                    scope.sliderPercentValue = 0.25;

                }
            }

            if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
                $($scope.modItemImageId).css("width", relativeWidth + "px");
                $($scope.modItemImageId).css("height", relativeHeight + "px");
                $("#"+scope.aaDetailViewCanvasId).css("width", relativeWidth + "px");
                $($scope.modItemImageId).css("height", relativeHeight + "px");
                var imgSource = $($scope.modItemImageId).attr('src');

                $($scope.modItemImageId).attr('src', '');
                $("#" + scope.aaDetailViewCanvasId).remove();
                //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.id = 'aaDetailViewCanvasAA_' + scope.multiViewCounter;
                canvas.className = 'aaCanvas';
                canvas.height = relativeHeight + 10;
                canvas.width = relativeWidth + 10;
                canvas.style.left = '0px';
                canvas.style.top = '0px';
                canvas.style.position = "absolute";
                $("#canvasDivAA_" + scope.multiViewCounter).append(canvas);
                scope.context = canvas.getContext("2d")
                console.log('src', scope.imgSource)
                $($scope.modItemImageId).attr('src', imgSource);
                scope.isSliderChange = true;
                var btnID = '';
                $("div.tools div:eq(1) div").each(function () {
                    if ($(this).find("button").hasClass("btn-primary")) {
                        btnID = $(this).find("button").attr("id");
                        $('#' + btnID).removeClass("btn-black");
                        $('#' + btnID).addClass("btn-primary");
                    }
                });
                scope.isSelectedPinBtnClickedAftrSliderCange = true;
                console.log('btnID = ' + btnID + ', ' + "hidePinBtnAA_" + scope.multiViewCounter + ', ' + "allPinBtnAA_" + scope.multiViewCounter + ', ' + "selectedPinAA_" + scope.multiViewCounter)
                switch (btnID) {
                    case "hidePinBtnAA_"+scope.multiViewCounter:
                        break;
                    case "allPinBtnAA_"+scope.multiViewCounter:
                        if ($("#" + $scope.bodySystemListID + " li.activeAASystemSelect a").attr("id") != undefined) {
                            console.log("insdie IF")
                            scope.showSelectedSystemPins($("#"+ $scope.bodySystemListID+" li.activeAASystemSelect a").attr("id"))
                            setTimeout(function () {
                                scope.removeSpeechBubble();
                            }, 1000);
                        }
                        else {
                            console.log("insdie ELSE")

                            scope.showAllPins();
                        }
                        break;
                    case "selectedPinAA_"+scope.multiViewCounter:
                        scope.showAllPins();
                        setTimeout(function () {
                            console.log(scope.allPinDataArray);
                            scope.activePinOnSliderChange();
                        }, 1000);
                        break;
                }
            }
        });
    }
    $scope.highlightBodySystemList = function () {
        $rootScope.bodySystemNames = $rootScope.bodySystemName.trim().split(/\s*,\s*/);
        var bodySystemListObj = document.getElementById($scope.bodySystemListID).getElementsByTagName("a");
        var bodySystemListlength = bodySystemListObj.length;
        for (var i = 0; i < bodySystemListlength; i++) {
            //var boldTag = lis[i];
            for (var j = 0; j < $rootScope.bodySystemNames.length; j++) {
                if ((bodySystemListObj[i].innerHTML) == ($rootScope.bodySystemNames[j])) {
                    $("#" + i).parent().removeClass("disabledSelectedSystem");
                }
            }

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


    angular.element(document).ready(function (e) {
        $("#"+$scope.jsPanelId).resize(function () {
            $("#canvasDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
            $("#canvasDiv").scrollTop($rootScope.CanvasDivTopPosition);
        });
        $(document).on("click", "#"+$scope.jsPanelId+" .jsPanel-hdr .jsPanel-hdr-r .jsPanel-btn-close .jsglyph-remove", function () {
            $scope.setActiveTab(parseInt($rootScope.getLocalStorageValue("activeTab")));
            $(".tools").css("z-index", "15000");
            $rootScope.selectedBodySystemName = 'All';
            $rootScope.selectedBodySystemId = 0;
            $rootScope.searchSelectedText = '';

        });

        $(document).on("click", "#dvPrintPreview .jsPanel-hdr .jsPanel-hdr-r .jsPanel-btn-close .jsglyph-remove", function () {

            if ($rootScope.isShowAllPinBtnActiveInPrintPreviewMode == true) {
                $("#allPinBtn").trigger("click");
                $rootScope.isShowAllPinBtnActiveInPrintPreviewMode = false;
            }
            if ($rootScope.isHidePinBtnActiveInPrintPreview == true) {
                $("#hidePinBtn").trigger("click");
                $rootScope.isHidePinBtnActiveInPrintPreview = false;
            }
            if ($rootScope.isShowSelectedPinActiveInPrintPrevMode == true) {
                $("#selectedPin").trigger("click");
                $rootScope.isShowSelectedPinActiveInPrintPrevMode = false;
            }
        });

    })
    $rootScope.aaPinDataArray = [];
    $rootScope.isShowSelectedSystemPinsClicked = false;
    $scope.showAllPins = function () {

        $scope.allPinDataArray = [];
        var promise = ModuleService.getPinDataForImage($rootScope.imageName)
          .then(
            function (result) {
                //load navigator image
                if (result.data.Root._NavigatorImage != undefined) {
                    document.getElementById($scope.navimgID).src = '~/../content/images/aa/images/navigator/' + result.data.Root._NavigatorImage;
                }
                else {
                    document.getElementById($scope.navimgID).style.visibility = 'hidden';
                    document.getElementById($scope.navigatorBtnID).style.visibility = 'hidden';
                    document.getElementById($scope.navigatorDivID).style.visibility = 'hidden';

                }

   
                //draw pins


                $scope.aaPinData = result.data.Root.Item;
                if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
                    $rootScope.aaPinDataArray = $scope.aaPinData
                    angular.forEach($scope.aaPinData, function (value, key) {
                        $scope.allPinDataArray.push(value._PinId);
                        $scope.drawStaticPinsOnImage($scope.aaDetailViewCanvasId, value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
                    })

                    if ($rootScope.isShowSelectedSystemPinsClicked == false) {
                        $rootScope.isShowSelectedSystemPinsClicked = true;
                        //load search/vocab data
                        $rootScope.loadSearchData();
                    }
                    else {
                        $rootScope.isLoading = false;
                        $('#spinner').css('visibility', 'hidden');
                    }
                    debugger;
                    //if open in CB
                    if ($rootScope.isCallFromOtherModule) {


                        var abc = $scope.selectedCalloutsAA;
                        $("#aaBodyView").scrollLeft($scope.horizontalScrollAA);
                        $("#aaBodyView").scrollTop($scope.verticalScrollAA);

                        if ($scope.selectedBodysystemIdAA > 0) {

                            $scope.showSelectedSystemPins();
                            $scope.addFeatures();
                        }

                        else
                            $scope.addFeatures();

                    }
                }
            },
             function (error) {

                 console.log(' error in showAllPins: ' + error.statusText);
             }
            )
        if ($scope.isSliderChange == true) {
            $timeout(function () {
                $scope.activePinOnLayerChange();
            }, 1000);

        }

    }


    $scope.addFeatures = function () {
        if ($scope.selectedPinsAA != undefined && $scope.selectedPinsAA.length > 0) {
            {
                $scope.clickedPins = [];
                $scope.activePinArray = [];
                for (var i = 0; i < $scope.selectedPinsAA.length; i++) {

                    $scope.clickedPins.push({ 'id': $scope.selectedPinsAA[i] });
                    var pinID = "PinArc_" + $scope.selectedPinsAA[i];
                    $scope.activePinArray.push(pinID);
                }

                if ($scope.showSelectedPinsAA) {
                    $scope.selectedSystemName = undefined;
                    $scope.showSelectedPins();
                }

                if ($scope.hideAnnotationsAA)
                    $scope.activePinOnLayerChange();
                //$scope.showSelectedPins();
            }
            // $scope.isCallFromOtherModule = false;
        }

        if ($scope.hideAllPinsAA) {

            $scope.hidePins();
        }
        if (!$scope.hideAnnotationsAA) {
            angular.forEach($scope.selectedPinsAA, function (value, key) {

                var selectedPinData = new jinqJs()
                                    .from($scope.aaPinData)
                                    .where("_PinId == " + value)
                                    .select();
                var pinTermNumber = selectedPinData[0]._TermId;
                var headX = selectedPinData[0]._HeadX;
                var headY = selectedPinData[0]._HeadY;
                var lineX = 0;
                var lineY = 0;
                angular.forEach($scope.selectedCallouts, function (val, key) {
                    if (val.hx == headX && val.hy == headY) {
                        lineX = val.lx;
                        lineY = val.ly;
                    }
                })

                $scope.MultiLanguageAnnationArray = [];
                $scope.GetAnnotationBasedOnActualTermNo(pinTermNumber);

                var verticalScrollPosition = document.getElementById($scope.canvasDivID).scrollTop;
                var horizontlScrollPosition = document.getElementById($scope.canvasDivID).scrollLeft;
                // var lineWidth = lineX - headX;
                // $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value, true, true, false);
                var dy = lineY - headY;
                var dx = lineX - headX;
                var angle = 0;
                if (dx < 0) {
                    angle = Math.atan(dy / dx) * (180 / Math.PI);
                    angle = theta + 180;

                }
                else if (dy < 0) {
                    angle = Math.atan(dy / dx) * (180 / Math.PI);
                    angle = angle + 360;

                }
                else {
                    angle = Math.atan(dy / dx) * (180 / Math.PI);
                }

                var lineWidth = Math.sqrt((lineX - headX) * (lineX - headX) + (lineY - headY) * (lineY - headY));
                var e = headY;
                var f = headX;

                var isLineDownside = 0;
                if (lineY > headY) {
                    isLineDownside = true;
                }
                else {
                    isLineDownside = false;
                }

                $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });


                //  $scope.createSpeechBubbleBasedOnAnnotationLength(parseInt(headX), parseInt(headY), value, lineWidth + 'px', angle);

                $scope.createSpeechBubbleBasedOnAnnotationLength(parseInt(headX), parseInt(headY), value, lineWidth + 'px', angle, isLineDownside);
                //  $scope.angle(headX * $scope.sliderPercentValue, headY * $scope.sliderPercentValue, lineX + horizontlScrollPosition - $('#canvasDiv').offset().left, lineY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
                //  $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 5) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
                $('#speechBubble').draggable(
                {
                    drag: function (evt) {
                        $("#dot").css("visibility", "hidden");
                        var verticalScrollPosition = canvasDiv.scrollTop;
                        var horizontlScrollPosition = canvasDiv.scrollLeft;
                        $scope.angle(x * $scope.sliderPercentValue, y * $scope.sliderPercentValue, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
                    },
                });

            })
        }
        $rootScope.isCallFromOtherModule = false;
    }


    $scope.FilterByImage = function (moduleId, query) {

        console.log(query);
        $scope.moduleId = moduleId;
        $scope.filterstring = true;

        console.log('loadForModuleById is called');

        $rootScope.moduleName = Modules[moduleId].Name;
        while ($scope.searchAAListViewData.length) {
            $scope.searchAAListViewData.pop();
        }

        var filtercount = 0;
        if (typeof (query.selectedbodyregion) !== "undefined" && (query.selectedbodyregion !== null && query.selectedbodyregion !== "")) {
            filtercount = filtercount + 1;
            localStorage.setItem("CurrentBodyRegion", query.selectedbodyregion);
        }
        else {
            localStorage.setItem("CurrentBodyRegion", '');
        }

        if (typeof (query.selectedbodysystem) !== "undefined" && (query.selectedbodysystem !== null && query.selectedbodysystem !== "")) {
            filtercount = filtercount + 1;
            localStorage.setItem("CurrentBodySystem", query.selectedbodysystem);
        }
        else {
            localStorage.setItem("CurrentBodySystem", '');
        }

        if (typeof (query.selectedorientation) !== "undefined" && (query.selectedorientation !== null && query.selectedorientation !== '')) {
            filtercount = filtercount + 1;
            localStorage.setItem("CurrentOrientation", query.selectedorientation);
        }
        else {
            localStorage.setItem("CurrentOrientation", '');
        }

        if (typeof (query.selectedimagetype) !== "undefined" && (query.selectedimagetype !== null && query.selectedimagetype !== '')) {
            filtercount = filtercount + 1;
            localStorage.setItem("CurrentImageType", query.selectedimagetype);
        }
        else {
            localStorage.setItem("CurrentImageType", '');
        }

        var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName)
           .then(
             function (result) {
                 // alert(JSON.stringify($scope.moduleLandingData));
                 $scope.moduleLandingData = result;
                 $scope.selectedAAListViewData = new jinqJs()
                                                     .from($scope.moduleLandingData.data.root.Item)
                                                     .orderBy([{ field: '_Title', sort: 'asc' }])
                                                     .select();

                 $('#grid-view').empty();
                 //alert(JSON.stringify($scope.selectedAAListViewData))
                 angular.forEach($scope.selectedAAListViewData, function (value, key) {

                     var selectimg = true;
                     var count = 0;


                     if (typeof (query.selectedbodyregion) !== "undefined" && (query.selectedbodyregion !== null && query.selectedbodyregion !== "")) {
                         var posbodyregion = value._BodyRegion.indexOf((query.selectedbodyregion.trim()));
                         if (posbodyregion > -1) {
                             selectimg = true;
                             count = count + 1;
                         }
                         else {
                             selectimg = false;
                             count = count - 1;
                         }

                     }

                     if (typeof (query.selectedbodysystem) !== "undefined" && (query.selectedbodysystem !== null && query.selectedbodysystem !== "")) {
                         var posbodysystem = value._BodySystem.indexOf(query.selectedbodysystem);
                         if (posbodysystem > -1) {
                             count = count + 1;
                             selectimg = true;
                         } else {
                             selectimg = false;
                             count = count - 1;
                         }
                     }

                     if (typeof (query.selectedorientation) !== "undefined" && (query.selectedorientation !== null && query.selectedorientation !== "")) {
                         var posorientation = value._ViewOrientation.indexOf(query.selectedorientation);
                         if (posorientation > -1) {
                             count = count + 1;
                             selectimg = true;

                         } else {
                             selectimg = false;
                             count = count - 1;
                         }

                     }

                     if (typeof (query.selectedimagetype) !== "undefined" && (query.selectedimagetype !== null && query.selectedimagetype !== "")) {
                         var posimagetype = value._ImageType.indexOf(query.selectedimagetype);
                         if (posimagetype > -1) {
                             count = count + 1;
                             selectimg = true;

                         } else {
                             selectimg = false;
                             count = count - 1;
                         }

                     }

                     if (selectimg === true && count >= filtercount) {

                         $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName;


                         var $el = $('<div id="' + value._Id + '" class="col-sm-3 col-lg-2" title = "' + value._Title + '" data-ng-click="openModuleItemView($event)">'
                             + '<div class="thumbnail" ><a href="#">'
                                        + '<img class="tinyImg" id="' + value._Title + '" ng-src="' + $scope.imagePath + '" alt="" title="" >'
                                        + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>').appendTo('#grid-view');


                         $compile($el)($scope);

                         $(".sidebar").mCustomScrollbar({
                             autoHideScrollbar: true,
                             //theme:"rounded"
                         });


                         $scope.searchAAListViewData.push(
                         {
                             "_Id": value._Id,
                             "_ImageId": value._ImageId,
                             "_Title": value._Title,
                             "_ImageName": value._contentImage,
                             "_TileImageName": value._ThumbnailImage,
                             "_BodySystem": value._BodySystem,
                             "_BodyRegion": value._BodyRegion,
                             "_ViewOrientation": value._ViewOrientation,
                             "_ImageType": value._ImageType
                             //"$$hashKey": value._Summary

                         });

                         if ($('#searchItem').length > 0)
                             $('#searchItem').remove();
                     }
                 });

                 //Show Error Message in case of gridview/ ListView [if no data is found]
                 if ($scope.searchAAListViewData.length == 0) {
                     var $el = $('<div class="col-sm-12" style="padding-left:25px;padding-top:10px;"><strong style="color:white">No illustration found for the selected search criteria!</strong></div>').appendTo('#grid-view');
                     $compile($el)($scope);
                     $('table > #ListViewDiv > #searchItem').remove();

                     $('#ListViewDiv').append('<tr id="searchItem"><td colspan="6"><strong style="color:black;">No illustration found for the selected search criteria!</strong></td></tr>');
                 }

             },
              function (error) {
                  // handle errors here
                  console.log(' error: ' + error.statusText);
              }
             )
    }

    $scope.Reset = function (moduleId, query) {

        query.selectedbodyregion = "";
        query.selectedbodysystem = "";
        query.selectedorientation = "";
        query.selectedimagetype = "";
        query.selectedspecialty = "";


        //set localstorage values
        localStorage.setItem("CurrentBodyRegion", '');
        localStorage.setItem("CurrentBodySystem", '');
        localStorage.setItem("CurrentOrientation", '');
        localStorage.setItem("CurrentImageType", '');
        //localStorage.setItem("CISelectedRowId", "");
        //localStorage.setItem("CIListViewScroll", '');

        if ($('.selected').hasClass("selected")) { $('.selected').removeClass("selected"); }

        $('#ListViewDiv').scrollTop(0);

        if ($('#demoView').length > 0)
            $('#demoView').remove();
        // $scope.HideListViewDiv();

        $scope.filterstring = false;
        //while ($scope.searchCIListViewData.length) {
        //    $scope.searchCIListViewData.pop();
        //}

        $scope.FilterByImage(1, query);

    }
    $scope.isBodySystemSelected = false;
    $scope.SelectedSystemTitle = "Current Structure";
    $scope.showSelectedSystemPins = function (event) {
        if (typeof event == "object") {
            alert("typeof event == object")
            if (event.currentTarget.title == $("#"+ $scope.bodySystemListID+" li.activeAASystemSelect a").attr("title")) {

            }
            else {
                $scope.typeOfEvent = typeof event;
                $scope.SelectedSystemID = event.currentTarget.id;
                $scope.SelectedSystemTitle = event.currentTarget.title;
                if (event.currentTarget.title == "Current Structure") {

                }
                else {
                    $scope.clickedPins = [];
                    $scope.activePinArray = [];
                }
                $scope.isBodySystemSelected = true;
                $rootScope.isShowSelectedSystemPinsClicked = true;
                var bodySystemListObj = document.getElementById($scope.bodySystemListID).getElementsByTagName("a");
                var bodySystemListlength = bodySystemListObj.length;
                for (var i = 0; i < bodySystemListlength; i++) {

                    $("#" + i).parent().removeClass("activeAASystemSelect");
                }
                $("#" + $scope.SelectedSystemID).parent().addClass("activeAASystemSelect");

                $rootScope.isLoading = true;
                $('#spinner').css('visibility', 'visible');

                $scope.removeSpeechBubble();
                if ($scope.SelectedSystemID == "0") {

                    //In case this module is open from CB module and if $rootscope.isCallFromOtherModule==true  than this function is not called
                    //as we call showSelectedSystemPins() when systemid>0 so, this is called when user select 
                    //from body systm option. in this case we set =false to not execute further functions from below 
                    //functions(line 125 and 1132)
                    $rootScope.isCallFromOtherModule = false;

                    $scope.selectedSystemName = null;
                    if ($scope.isHidePinBtnClicked) {
                        $scope.showAllPinsAfterHide();
                    }
                    else {
                        //#30499 : Atlas Anatomy > All Pins are not appeared on the body system even after selecting the Body System: All
                        $('#'+$scope.aaDetailViewCanvasId).removeLayers();
                        $scope.showAllPins();
                    }
                }
                else {

                    $scope.selectedSystemName = $scope.SelectedSystemTitle;
                    // get termText info
                    var promise = ModuleService.getTermTextDataForPin($scope.moduleName)
                   .then(
                    function (response) {

                        $scope.TermInfo = response.data.Terms.Term;

                        //on gettng all required data, draw pins
                        if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {

                            $scope.selectedSystemPinData = new jinqJs()
                                    .from($scope.aaPinData)
                                    .where("_BodySystemName == " + $scope.selectedSystemName)
                                    .select();
                            if ($scope.isHidePinBtnClicked) {
                                // $scope.showAllPinsAfterHide($scope.selectedSystemPinData);
                                $scope.showAllPinsAfterHide();

                            }
                            else {
                                //remove other system pins
                                if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) {

                                    angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {

                                        if (aaPinDataValue._BodySystemName != $scope.selectedSystemName) {
                                            $scope.removePin($scope.aaDetailViewCanvasId, aaPinDataValue._PinId);
                                        }

                                    })

                                    angular.forEach($scope.selectedSystemPinData, function (value, key) {
                                        $scope.drawStaticPinsOnImage($scope.aaDetailViewCanvasId, value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
                                    });

                                    //  make all pin heads grey
                                    var radial = $('#'+$scope.aaDetailViewCanvasId).createGradient({
                                        x1: 50, y1: 50,
                                        x2: 50, y2: 50,
                                        r1: 10, r2: 30,
                                        c1: 'rgba(100, 50, 0,0)',
                                        c2: 'rgb(216, 216, 216)'
                                    });


                                    $('#'+$scope.aaDetailViewCanvasId).setLayers({
                                        fillStyle: radial,
                                    }).drawLayers();

                                    //show annotation on first pin of the sysyem
                                   // if(!$rootScope.isCallFromOtherModule)
                                    $scope.showAnnotation($scope.selectedSystemPinData, false, false, false);
                                }
                            }
                        }
                    },
                   function (error) {
                       // handle errors here
                       console.log(' error: ' + error.statusText);
                   }
                  )

                }


            }
        }

        else {
            alert("typeof event != object")
            if (event == undefined && $scope.isCallFromOtherModule) {
                // if open from CB
                $scope.SelectedSystemID = $scope.selectedBodysystemIdAA;
                $scope.SelectedSystemTitle = $("#bodySystemListAA_"+$scope.multiViewCounter+" li #" + $scope.selectedBodysystemIdAA).attr("title");
                var aaDetailViewCanvasID = 'aaDetailViewCanvasAA_' + $scope.multiViewCounter;
            }
            else {
                $scope.SelectedSystemID = event;
                $scope.SelectedSystemTitle = $("#bodySystemList li.activeAASystemSelect a").attr("title");
                $scope.typeOfEvent = typeof event;
                var aaDetailViewCanvasID = 'aaDetailViewCanvas';

            } //  $scope.isBodySystemSelected = true;

            $rootScope.isShowSelectedSystemPinsClicked = true;
            var bodySystemListObj = document.getElementById($scope.bodySystemListID).getElementsByTagName("a");
            var bodySystemListlength = bodySystemListObj.length;
            for (var i = 0; i < bodySystemListlength; i++) {

                $("#" + i).parent().removeClass("activeAASystemSelect");
            }
            $("#" + $scope.SelectedSystemID).parent().addClass("activeAASystemSelect");

            $rootScope.isLoading = true;
            $('#spinner').css('visibility', 'visible');

            $scope.removeSpeechBubble();
            if ($scope.SelectedSystemID == "0") {

                $scope.selectedSystemName = null;
                if ($scope.isHidePinBtnClicked) {
                    $scope.showAllPinsAfterHide();
                }
                else {
                    $scope.showAllPins();
                }
            }
            else {

                $scope.selectedSystemName = $scope.SelectedSystemTitle;
                // get termText info
                var promise = ModuleService.getTermTextDataForPin($scope.moduleName)
               .then(
                function (response) {
                    $scope.TermInfo = response.data.Terms.Term;

                    //on gettng all required data, draw pins
                    if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {

                        $scope.selectedSystemPinData = new jinqJs()
                                .from($scope.aaPinData)
                                .where("_BodySystemName == " + $scope.selectedSystemName)
                                .select();
                        if ($scope.isHidePinBtnClicked) {
                            // $scope.showAllPinsAfterHide($scope.selectedSystemPinData);
                            $scope.showAllPinsAfterHide();

                        }
                        else {
                            //remove other system pins
                            if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) {

                                angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {

                                    if (aaPinDataValue._BodySystemName != $scope.selectedSystemName)
                                        $scope.removePin(aaDetailViewCanvasID, aaPinDataValue._PinId);
                                })

                                angular.forEach($scope.selectedSystemPinData, function (value, key) {
                                    $scope.drawStaticPinsOnImage(aaDetailViewCanvasID, value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
                                });
                                //show annotation on first pin of the sysyem
                                $scope.showAnnotation();
                                //if ($scope.selectedPinsAA != undefined) {
                                //    $scope.selectedSystemPinData = $scope.selectedPinsAA;

                                //    if ($scope.hideAnnotations) {
                                //        //only head is green
                                //    }
                                //    else {
                                //        //show annotations
                                //        $scope.showAnnotation($scope.selectedSystemPinData, false, false, false);
                                //    }
                                //}
                                //else {
                                //    $scope.showAnnotation($scope.selectedSystemPinData, false, false, false);

                                //}
                            } 
                        }
                    }
                },
               function (error) {
                   // handle errors here
                   console.log(' error: ' + error.statusText);
               }
              )

            }
        }


    }
    $scope.listMangerID = [];
    $scope.activePinArray = [];
    $scope.isSearchOptionClicked = false;
    $scope.showAnnotation = function (selectedPinData, isCtrlPressed, isPinClicked, isItemSearched) {

        $scope.selectedPin = [];
        var isSameTermWithMultiPin = false;
        var firstPinId = selectedPinData[0]._PinId;
        var pinTermNumber = selectedPinData[0]._TermId;

        //check if other pin have same termNumber
        if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {

            var pinDataWithFirstTermNumber = new jinqJs()
                                             .from($scope.aaPinData)
                                             .where("_TermId == " + pinTermNumber)
                                             .select();

            //if ($scope.isSearchOptionClicked == true) {
            //    $scope.activePinArray = [];
            //    $scope.clickedPins = [];
            //    $scope.isSearchOptionClicked = false;
            //}
            if ($scope.isBodySystemSelected == true) {

                $scope.isSelectedSystemSelectedAftrChange = true;
            }
            for (var i = 0; i <= pinDataWithFirstTermNumber.length - 1; i++) {
                $scope.listMangerID.push('PinArc_' + pinDataWithFirstTermNumber[i]._PinId);
                $scope.activePinArray.push('PinArc_' + pinDataWithFirstTermNumber[i]._PinId);
            }

            $scope.MultiLanguageAnnationArray = [];

            $scope.GetAnnotationBasedOnActualTermNo(pinTermNumber);

            if (isCtrlPressed) {

            }
            else {
                if (isPinClicked || isItemSearched) {
                    var existingSpeechBubble = $("div[id*='speechBubble']");
                    for (var i = 0; i < existingSpeechBubble.length; i++) {
                        existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);

                        //make all pin heads grey
                        var radial = $('#' + $scope.aaDetailViewCanvasId).createGradient({
                            x1: 50, y1: 50,
                            x2: 50, y2: 50,
                            r1: 10, r2: 30,
                            c1: 'rgba(100, 50, 0,0)',
                            c2: 'rgb(216, 216, 216)'
                        });


                        $('#' + $scope.aaDetailViewCanvasId).setLayers({
                            fillStyle: radial,
                        }).drawLayers();
                    }

                    var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
                    for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
                        existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
                    }
                    var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
                    for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
                        speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
                    }
                }
            }
            if (pinDataWithFirstTermNumber.length > 1) {
                isSameTermWithMultiPin = true;
            }
            angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
                $scope.selectedPin.push(value._PinId);
                if ($scope.isBodySystemSelected == true) {
                    $scope.clickedPins.push({ 'id': value._PinId });
                    $scope.isBodySystemSelected = false;
                }
                var headX = (parseInt(value._HeadX));
                var headY = (parseInt(value._HeadY));
                $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
            })

        }

        $rootScope.isLoading = false;
        $('#spinner').css('visibility', 'hidden');

    }

    $scope.removeSpeechBubble = function () {

        //clear speech bubbles
        var speechBubbles = $("div[id*='speechBubble']");
        if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
            for (var j = 0; j < speechBubbles.length; j++) {

                speechBubbles[j].parentNode.removeChild(speechBubbles[j]);
            }
        }
        var speechBubbleLines = $("div[id*='speechBubbleLine']");
        if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
            for (var j = 0; j < speechBubbleLines.length; j++) {

                speechBubbleLines[j].parentNode.removeChild(speechBubbleLines[j]);
            }
        }

        var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']");
        if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) {
            for (var j = 0; j < speechBubbleDraggedLines.length; j++) {

                speechBubbleDraggedLines[j].parentNode.removeChild(speechBubbleDraggedLines[j]);
            }
        }
    };

    $scope.showSpeechBubble = function () {


        //clear speech bubbles
        var speechBubbles = $("div[id*='speechBubble']");
        if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
            for (var j = 0; j < speechBubbles.length; j++) {

                document.getElementById(speechBubbles[j].id).style.visibility = 'visible';
            }
        }
        var speechBubbleLines = $("div[id*='speechBubbleLine']");
        if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
            for (var j = 0; j < speechBubbleLines.length; j++) {

                document.getElementById(speechBubbleLines[j].id).style.visibility = 'visible';
            }
        }

        var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']");
        if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) {
            for (var j = 0; j < speechBubbleDraggedLines.length; j++) {

                document.getElementById(speechBubbleDraggedLines[j].id).style.visibility = 'visible';
            }
        }
    };

    $scope.hideSpeechBubble = function () {
        //clear speech bubbles
        var speechBubbles = $("div[id*='speechBubble']");
        if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
            for (var j = 0; j < speechBubbles.length; j++) {

                document.getElementById(speechBubbles[j].id).style.visibility = 'hidden';
            }
        }
        var speechBubbleLines = $("div[id*='speechBubbleLine']");
        if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
            for (var j = 0; j < speechBubbleLines.length; j++) {

                document.getElementById(speechBubbleLines[j].id).style.visibility = 'hidden';
            }
        }

        var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']");
        if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) {
            for (var j = 0; j < speechBubbleDraggedLines.length; j++) {

                document.getElementById(speechBubbleDraggedLines[j].id).style.visibility = 'hidden';
            }
        }
    };


    $scope.createSpeechBubble = function (x, y, PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin) {

        $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });

        $scope.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId);

        $('#speechBubble').draggable(
        {
            drag: function (evt) {
                $("#dot").css("visibility", "hidden");
                var verticalScrollPosition = canvasDiv.scrollTop;
                var horizontlScrollPosition = canvasDiv.scrollLeft;
                $scope.angle(x * $scope.sliderPercentValue, y * $scope.sliderPercentValue, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
            },
        });

    }
    $scope.sliderVal = 100;
    $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
        x = x * $scope.sliderPercentValue;
        y = y * $scope.sliderPercentValue;
        if ($("#" + $scope.canvasId).find("div").length > 0) {
            $("#" + $scope.canvasId).find("div").each(function () {
                var str = $(this).attr("id");
                if (str.substr(0, 16) == "speechBubbleLine") {
                    var res = str.substr(16);
                    if (res == PinId) {
                        $scope.isAnnotationDivAlreadyPresent = false;
                    }
                    else {
                        $scope.isAnnotationDivAlreadyPresent = true;
                    }
                }
            });
        }
        else {
            $scope.isAnnotationDivAlreadyPresent = true;
        }
        if ($scope.isAnnotationDivAlreadyPresent == true) {
            var speechBubbleHTML = '<div id="speechBubbleLine' + PinId + '" style="position:absolute;height:15px;width:35px;display:none;z-index:13000;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);"></div>'
                      + '<div id="speechBubble' + PinId + '" class="common-drag" style="height:auto!important;z-index:13000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size:12px;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;">'
                      + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
                      + '<img id="closeBtn' + PinId + ' " class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'

                      + '<div style="position:absolute;border:1px solid #000;display:none;z-index:12000;" id="speechBubbleDraggedLine' + PinId + '">'
                     + '</div>';

            //Issue #7286 :Undefined annotation should not appear
            for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
                var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
            }

            if (MultipleLanguage == undefined) {
                console.log("No text is found");
            } else {
                $('#' + $scope.canvasDivID).append(speechBubbleHTML);

                if ($scope.MultiLanguageAnnationArray.length > 0) {
                    for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
                        var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
                        $rootScope.clickedPinAnnotation = $scope.MultiLanguageAnnationArray[0];
                        $("#speechBubble" + PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
                    }
                }
                else {
                    console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length)
                }

                if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) {
                    if ($scope.longestAnnotation.length <= 10) {


                        $("#speechBubble").css("width", "100px");

                    }

                    else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {



                        $("#speechBubble").css("width", "140px");

                    }
                    else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {


                        $("#speechBubble").css("width", "195px");

                    }
                    else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {

                        $("#speechBubble").css("width", "248px");

                    }
                    else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {


                        $("#speechBubble").css("width", "300px");
                    }

                    else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {

                        $("#speechBubble").css("width", "370px");
                    }

                    else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
                        $("#speechBubble").css("width", "450px");
                    }
                    else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
                        $("#speechBubble").css("width", "510px");
                    }
                    else {
                        $("#speechBubble").css("width", ($scope.longestAnnotation.length) + "%");
                    }
                }
            }
            var speechBubbleDims = [];

            $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId });
            speechBubbleDims.push({ currentX: x, currentY: y });
            document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
            document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 12)) + 'px';
            if ($scope.sliderVal == 25) {
                document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY + 5)) + 'px';
            }
            else {
                document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY)) + 'px';
            }
            document.getElementById('speechBubble' + PinId + '').style.display = 'block';
            document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 4) + 'px';
            document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY) + 'px';
        }
        $('.common-drag').draggable(
        {

            drag: function (evt) {

                var verticalScrollPosition = document.getElementById($scope.canvasDivID).scrollTop;
                var horizontlScrollPosition = document.getElementById($scope.canvasDivID).scrollLeft;
                var clickedSpeechBubbleId = $(this).attr("id");

                var clickedPinId = clickedSpeechBubbleId.substring(12, clickedSpeechBubbleId.length);

                $("#speechBubbleLine" + clickedPinId).css("visibility", "hidden");
                $("#speechBubbleLine" + clickedPinId).css("display", "none");

                for (var i = 0; i <= $rootScope.speechBubbleDimaensions.length - 1; i++) {
                    if ($rootScope.speechBubbleDimaensions[i].id == clickedPinId) {
                        $scope.angle(clickedPinId, $rootScope.speechBubbleDimaensions[i].currentX, $rootScope.speechBubbleDimaensions[i].currentY, evt.pageX + horizontlScrollPosition - $('#' + $scope.canvasDivID).offset().left, evt.pageY + verticalScrollPosition - $('#' + $scope.canvasDivID).offset().top, true);
                    }
                }

            },
        });

        $('.crossDiv_temp').on('click', function (evt) {

            var imgId = $(this).attr("id");
            var pinId = imgId.substring(8, imgId.length);
            $('#speechBubble' + pinId).remove();
            $("#speechBubbleDraggedLine" + pinId).remove();
            $("#speechBubbleLine" + pinId).remove();

            //make all pin heads grey
            var pinHeadName = 'PinArc_' + pinId;
            var radial = $('#' + $scope.aaDetailViewCanvasId).createGradient({
                x1: 50, y1: 50,
                x2: 50, y2: 50,
                r1: 10, r2: 30,
                c1: 'rgba(100, 50, 0,0)',
                c2: 'rgb(216, 216, 216)'
            });


            $('#' + $scope.aaDetailViewCanvasId).setLayer(pinHeadName, {
                fillStyle: radial,
            }).drawLayers();
        });

        //make the head green
        var radialAfterClick = $('#' + $scope.aaDetailViewCanvasId).createGradient({
            x1: 50, y1: 50,
            x2: 50, y2: 50,
            r1: 10, r2: 30,
            c1: 'rgba(100, 50, 0,0)',
            c2: 'rgb(126, 187, 83)'
        });
        var pinHeadName = 'PinArc_' + PinId;
        var pin = $('#' + $scope.aaDetailViewCanvasId).getLayer(pinHeadName);
        // pin.fillStyle = radialAfterClick;

        $('#' + $scope.aaDetailViewCanvasId).setLayer(pinHeadName, {
            fillStyle: radialAfterClick,
        }).drawLayers();

        if ($scope.typeOfEvent == "string") {
            for (var i = 0; i <= $scope.clickedPins.length - 1; i++) {
                var pinHeadName = 'PinArc_' + $scope.clickedPins[i].id;
                $('#' + $scope.aaDetailViewCanvasId).setLayer(pinHeadName, {
                    fillStyle: radialAfterClick,
                }).drawLayers();
            }
        }

    }
    $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {

        var dy = ey - cy;
        var dx = ex - cx;
        var theta = 0;
        if (dx < 0) {
            theta = Math.atan(dy / dx) * (180 / Math.PI);
            theta = theta + 180;

        }
        else if (dy < 0) {
            theta = Math.atan(dy / dx) * (180 / Math.PI);
            theta = theta + 360;

        }
        else {
            theta = Math.atan(dy / dx) * (180 / Math.PI);
        }

        var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
        var e = cy;
        var f = cx;

        if (BoolValues == true) {
            if ($scope.sliderVal == 40) {
                $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 5) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
            }
            else if ($scope.sliderVal == 25) {
                $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 2) + 'px', 'left': (f - 2) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
            }
            else {
                $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 10) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
            }

        }
        else {
            $("#bord_annotation").css({ 'display': 'block', 'width': d + 'px', 'top': e + 'px', 'left': f + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
        }

    }


    $scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {

        //if ($scope.isSearchOptionClicked == true) {
        //    $scope.clickedPins = [];
        //    $scope.isSearchOptionClicked = false;
        //}


        var multipliedByValue = 5;
        var $ua = navigator.userAgent;
        if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {
            multipliedByValue = 10;
        }
        // if ($scope.isSliderChange == true) {
        console.log('isSliderrChange')
        var radial = $('#' + canvasId).createGradient({
            x1: 50, y1: 50,
            x2: 50, y2: 50,
            r1: 10, r2: 30,
            c1: 'rgba(100, 50, 0,0)',
            c2: 'rgb(216, 216, 216)'
        });
        $('#' + canvasId).drawLine({
            layer: true,
            name: "Pin_" + PinId,
            groups: ["Pin_" + PinId],
            strokeStyle: '#565656',
            strokeWidth: 2,
            visible: true,
            x1: offsetX1 * $scope.sliderPercentValue, y1: offsetY1 * $scope.sliderPercentValue,
            x2: x * $scope.sliderPercentValue, y2: y * $scope.sliderPercentValue,


        }).drawArc({
            name: "PinArc_" + PinId,
            layer: true,
            groups: ["Pin_" + PinId],
            strokeStyle: 'grey',
            strokeWidth: 2,
            visible: true,
            fillStyle: radial,
            x: x * $scope.sliderPercentValue, y: y * $scope.sliderPercentValue,
            // radius: 5 * $scope.sliderPercentValue,
            radius: 10,

            click: function (clickedPin) {

                if (clickedPin.event.ctrlKey == false) {
                    $scope.clickedPins = [];
                    $scope.listMangerID = [];
                }
                $scope.isSelectedSystemSelectedAftrChange = false;
                var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
                var pinData = new jinqJs()
                              .from($scope.aaPinData)
                              .where("_PinId == " + pinID)
                              .select();


                var pinTermNumber = pinData[0]._TermId;

                var pinWithSameTerm = new jinqJs()

                                     .from($scope.aaPinData)
                                     .where("_TermId == " + pinTermNumber)
                                     .select();
                if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {

                    for (var i = 0; i < pinWithSameTerm.length; i++) {
                        $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
                    }
                }


                $scope.isSelectedPinBtnClickedAftrSliderCange = false;
                var selectedPinData = new jinqJs()
                            .from($scope.aaPinData)
                            .where("_PinId == " + pinID)
                            .select();
                if (clickedPin.event.ctrlKey == true) {

                    $scope.activePinArray.push(clickedPin.name);
                    var radialAfterClick = $('#'+$scope.aaDetailViewCanvasId).createGradient({
                        x1: 50, y1: 50,
                        x2: 50, y2: 50,
                        r1: 10, r2: 30,
                        c1: 'rgba(100, 50, 0,0)',
                        c2: 'rgb(126, 187, 83)'
                    });
                    clickedPin.fillStyle = radialAfterClick;
                    $scope.showAnnotation(selectedPinData, true, true, false);
                }
                else {
                    $scope.activePinArray = [];
                    $scope.activePinArray.push(clickedPin.name);
                    var radial = $('#' + $scope.aaDetailViewCanvasId).createGradient({
                        x1: 50, y1: 50,
                        x2: 50, y2: 50,
                        r1: 10, r2: 30,
                        c1: 'rgba(100, 50, 0,0)',
                        c2: 'rgb(216, 216, 216)'
                    });


                    $('#' + $scope.aaDetailViewCanvasId).setLayers({
                        fillStyle: radial,
                    }).drawLayers();

                    //change the head color to green
                    var radialAfterClick = $('#' + $scope.aaDetailViewCanvasId).createGradient({
                        x1: 50, y1: 50,
                        x2: 50, y2: 50,
                        r1: 10, r2: 30,
                        c1: 'rgba(100, 50, 0,0)',
                        c2: 'rgb(126, 187, 83)'
                    });

                    clickedPin.fillStyle = radialAfterClick;
                    $scope.showAnnotation(selectedPinData, false, true, false);

                }

            }

        }).drawLayers();

    }


    $scope.getMousePos = function (evt) {

        return {
            x: Math.round(evt.pageX - $('#canvasDiv').offset().left),
            y: Math.round(evt.pageY - $('#canvasDiv').offset().top)
        }
    }

    $scope.removePin = function (canvasId, pinId) {

        var pinName = 'Pin_' + pinId;
        var pinArcName = 'PinArc_' + pinId;
        $('#' + canvasId).removeLayer(pinName).drawLayers();
        $('#' + canvasId).removeLayer(pinArcName).drawLayers();

        $scope.removeSpeechBubble();

        //$rootScope.isSliderChanged = true;
        //$('#aaDetailViewCanvas').removeLayers();
    }

    $rootScope.$on('annotationToolEvent', function (event, data) {
        $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(255,255,255)")
        $('#editstylebackgroundcolor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" });
        $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(0,0,0)")
        $('#outlineColor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" });

        $("#canvas").css("display", "block");
        $("#canvasPaint").css("display", "block");
        $rootScope.onDrawingCanvasClick();
        $rootScope.FreeStylePaint();
    });

    $rootScope.loadSearchData = function () {
        //$("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
        var imageId = $rootScope.imageId;
        var promise = ModuleService.getTermTextDataForAAImage(imageId)
                 .then(
                  function (response) {

                      $scope.AAPinTermData = response.data.PinTermData.TermData;

                      $rootScope.isLoading = false;
                      $('#setting-spinner').css('visibility', 'hidden');

                      $scope.pinTermData = [];
                      var primaryLexicon = $rootScope.lexiconLanguageArray[0].id;
                      $scope.matchedLanguageTermData = new jinqJs()
                                     .from($scope.AAPinTermData)
                                     .where('_LanguageId == ' + primaryLexicon)
                                     .select();
                      var sortedTermTextArray = [];
                      for (var i = 0; i < $scope.matchedLanguageTermData.length; i++) {
                          sortedTermTextArray.push($scope.matchedLanguageTermData[i]._TermText);
                          sortedTermTextArray.sort();
                      }

                      for (var i = 0; i <= sortedTermTextArray.length - 1; i++) {
                          for (var j = 0; j <= $scope.matchedLanguageTermData.length - 1; j++) {
                              if ($scope.matchedLanguageTermData[j]._TermText == sortedTermTextArray[i]) {
                                  $scope.pinTermData.push({ "LanguageId": $scope.matchedLanguageTermData[j]._LanguageId, "TermNumber": $scope.matchedLanguageTermData[j]._TermNumber, "TermTxt": $scope.matchedLanguageTermData[j]._TermText });
                                  break;
                              }
                          }
                      }


                      $scope.$watch('$scope.pinTermData', function (newValue, oldValue, scope) {

                          if (($('#'+$scope.termlistfilterID).html() != ""))

                              $('#'+$scope.termlistfilterID).empty();
                          if ($scope.pinTermData.length > 0) {
                              $timeout(function () {
                                  console.log('pinTermData= ' + $scope.pinTermData.length);
                                  $('#'+$scope.termListID).empty();
                                  $('#'+$scope.termlistfilterID).empty();
                                  for (var j = 0; j < $scope.pinTermData.length; j++) {
                                      var $el = $('<li><a id= "' + $scope.pinTermData[j].TermNumber + '" href="" onclick="onSearchItemSelection(this.id)" >' + $scope.pinTermData[j].TermTxt + '</a></li>').appendTo('#'+$scope.termlistfilterID)
                                      //var $el = $('<li><a id= "' + $scope.pinTermData[j].TermNumber + '" href="" >' + $scope.pinTermData[j].TermTxt + '</a></li>').appendTo('#termlistfilter')
                                      $compile($el)($scope);
                                      var $selectedOptions = $('<option title= "' + $scope.pinTermData[j].TermTxt + '" id= "' + $scope.pinTermData[j].TermNumber + '" >' + $scope.pinTermData[j].TermTxt + '</option>').appendTo('#'+$scope.termListID)

                                      $compile($selectedOptions)($scope);

                                      $("#AABodySystems").empty();
                                      $("#bodySystems").css("display", "none");
                                      $("#AABodySystems").css("display", "block");
                                      $("#"+ $scope.bodySystemListID+" li a").each(function (key, value) {
                                          var $systemOptions = $('<option id=' + $(this).attr('id') + ' >' + $(this).text() + '</option>').appendTo("#AABodySystems")
                                          $compile($systemOptions)($scope);
                                      });
                                  }
                              }, 500);
                          }
                      })
                  },
                 function (error) {
                     // handle errors here
                     console.log(' error: ' + error.statusText);
                 }
                )


    }




    $scope.$on('listManagerEvent', function (event, data) {

        $("#viewName").empty();

        var currentView = $rootScope.getLocalStorageValue("currentViewTitle");
        var viewNmeHtml = '<option>' + currentView + '</option>'
        $('#viewName').append(viewNmeHtml);
        //$("#viewName").append("<option>" + $rootScope.listArray[0].text + "</option>");
        $rootScope.isLoading = false;
        $('#spinner').css('visibility', 'hidden');

        if ($rootScope.bodySystemSeletedId == null) {

            $rootScope.loadSearchData();
        }
        else {

            $rootScope.refreshTermListOnAASystemSelection($rootScope.bodySystemSeletedId);
        }
        $timeout(function () {
            $("#totalTerms").empty();
            $("#totalTerms").html("<span class='pull-left marginTop5'>" + $("#termList option").length + " Structures</span>");
        }, 1000);
    });



    $rootScope.refreshTermListOnAASystemSelection = function (bodySystemId) {

        $rootScope.bodySystemSeletedId = bodySystemId;
        $("#AABodySystems").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
        $("#AABodySystems").find("option[id=" + bodySystemId + "]").css({ "background-color": "#3399FF", "color": "#ffffff" });
        $('#termList').empty();
        var bodySystemName = $("#AABodySystems #" + bodySystemId).val();

        if (bodySystemName == "All") {
            for (var j = 0; j <= $scope.pinTermData.length - 1; j++) {
                var $selectedOptions = $('<option title= "' + $scope.pinTermData[j].TermTxt + '" id= "' + $scope.pinTermData[j].TermNumber + '">' + $scope.pinTermData[j].TermTxt + '</option>').appendTo("#termList")

                $compile($selectedOptions)($scope);
            }
            $("#totalTerms").empty();
            $("#totalTerms").html("<span class='pull-left marginTop5'>" + $("#termList option").length + " Structures</span>");
        }
        else {
            var imageId = $rootScope.imageId;
            $scope.pinDataUrl = "aa_dat_pinterm_" + imageId;
            $rootScope.bodySystemTermArray = [];
            $rootScope.sortedListArray = [];
            $rootScope.duplicateListArray = [];
            $.ajax({
                url: '~/../content/data/json/aa/aa_pinterm/' + $scope.pinDataUrl + '.json',
                type: 'GET',
                dataType: "json",
                async: false,
                success: function (result) {
                    $(result.PinTermData.TermData).each(function (key, value) {
                        $rootScope.bodySystemTermArray.push({ "termNumbr": result.PinTermData.TermData[key]._TermNumber, "text": result.PinTermData.TermData[key]._TermText, "language": result.PinTermData.TermData[key]._LanguageId });
                    });


                    for (var i = 0; i <= $scope.aaPinData.length - 1; i++) {

                        if ($scope.aaPinData[i]._BodySystemName.toLowerCase() == bodySystemName.toLowerCase()) {

                            for (var j = 0 ; j <= $rootScope.bodySystemTermArray.length - 1; j++) {
                                if ($scope.aaPinData[i]._TermId == $rootScope.bodySystemTermArray[j].termNumbr) {
                                    if ($rootScope.bodySystemTermArray[j].language == $rootScope.lexiconLanguageArray[0].id) {
                                        $rootScope.duplicateListArray.push({ "title": $rootScope.bodySystemTermArray[j].text, "id": $rootScope.bodySystemTermArray[j].termNumbr });


                                    }
                                }
                            }
                        }
                    }
                    var temp = [];
                    console.log($rootScope.duplicateListArray);
                    for (var i = 0; i <= $rootScope.duplicateListArray.length - 1; i++) {
                        var termID = $rootScope.duplicateListArray[i].id;
                        if ($.inArray(termID, temp) == -1) {
                            temp.push(termID);
                            $rootScope.sortedListArray.push({ "title": $rootScope.duplicateListArray[i].title, "id": termID });

                        }
                    }
                    console.log('2' + $rootScope.sortedListArray);
                    for (var i = 0; i <= $rootScope.sortedListArray.length - 1; i++) {

                        for (j = i + 1; j <= $rootScope.sortedListArray.length - 1; j++) {

                            if ($rootScope.sortedListArray[i].title.substr(0, 1) > $rootScope.sortedListArray[j].title.substr(0, 1)) {

                                var termText = $rootScope.sortedListArray[i].title;
                                var termNumbr = $rootScope.sortedListArray[i].id;
                                var termLanguage = $rootScope.sortedListArray[i].language;

                                $rootScope.sortedListArray[i].title = $rootScope.sortedListArray[j].title;
                                $rootScope.sortedListArray[i].id = $rootScope.sortedListArray[j].id;
                                $rootScope.sortedListArray[i].language = $rootScope.sortedListArray[j].language;

                                $rootScope.sortedListArray[j].title = termText;
                                $rootScope.sortedListArray[j].id = termNumbr;
                                $rootScope.sortedListArray[j].language = termLanguage;
                            }
                        }
                    }

                    for (var j = 0; j <= $rootScope.sortedListArray.length - 1; j++) {
                        var $selectedOptions = $('<option title= "' + $rootScope.sortedListArray[j].title + '"  id= "' + $rootScope.sortedListArray[j].id + '" >' + $rootScope.sortedListArray[j].title + '</option>').appendTo("#termList");


                        $compile($selectedOptions)($scope);
                    }
                }
            });
            $("#totalTerms").empty();
            $("#totalTerms").html("<span class='pull-left marginTop5'>" + $("#termList option").length + " Structures</span>");
        }
    }
    $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {


        var languageArray = $rootScope.lexiconLanguageArray;

        if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) {

            $scope.matchedTermNoData = new jinqJs()
                                       .from($scope.AAPinTermData)
                                       .where('_TermNumber == ' + actualTermNo)
                                       .select();

            if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) {

                for (var j = 0; j <= languageArray.length - 1; j++) {

                    $scope.matchedLanguageTermNoData = new jinqJs()
                                      .from($scope.matchedTermNoData)
                                      .where('_LanguageId == ' + languageArray[j].id)
                                      .select();
                    var termText = $scope.matchedLanguageTermNoData[0]._TermText;
                    $scope.MultiLanguageAnnationArray.push(termText);
                };
            }
        }
    }

    $scope.hidePins = function () {
        $("#"+$scope.dropdownMenuID).addClass("aaSystemDisable");
        $rootScope.isLoading = true;
        $('#spinner').css('visibility', 'visible');
        $scope.hideSpeechBubble();

        $scope.isHidePinBtnClicked = true;
        angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {

            var pinName = 'Pin_' + aaPinDataValue._PinId;
            var pinArcName = 'PinArc_' + aaPinDataValue._PinId;

            $('#' + $scope.aaDetailViewCanvasId).setLayer(pinName, {
                visible: false // set to true instead to show the layer again
            }).drawLayers();

            $('#' + $scope.aaDetailViewCanvasId).setLayer(pinArcName, {
                visible: false // set to true instead to show the layer again
            }).drawLayers();
        })

        $rootScope.isLoading = false;
        $('#spinner').css('visibility', 'hidden');
        $(".tooltip-custom").removeClass("btn-primary");
        $(".tooltip-custom").addClass("btn-black");
        $("#" + $scope.hidePinBtnID).addClass("btn-primary");
        $("#" + $scope.hidePinBtnID).removeClass("btn-black");
    }

    $scope.showAllPinsAfterHide = function (event) {

        if ($("#" + $scope.dropdownMenuID).hasClass("aaSystemDisable")) {
            $("#" + $scope.dropdownMenuID).removeClass("aaSystemDisable");
        }
        $rootScope.isLoading = true;
        $('#spinner').css('visibility', 'visible');
        $scope.isHidePinBtnClicked = false;
        $rootScope.isshowAllPinsBtnAfterHideClicked = true;


        if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) {

            $scope.showPins($scope.selectedSystemPinData, false);

        } else {

            $scope.showPins($scope.aaPinData, false);
        }
        $scope.showSpeechBubble();
        $(".tooltip-custom").removeClass("btn-primary");
        $(".tooltip-custom").addClass("btn-black");
        $("#" + $scope.allPinBtnID).addClass("btn-primary");
        $("#" + $scope.allPinBtnID).removeClass("btn-black");
        if ($("#"+ $scope.bodySystemListID+" li.activeAASystemSelect a").attr("title") == "Current Structure" || $("#"+ $scope.bodySystemListID+" li.activeAASystemSelect a").attr("title") == undefined) {
            if ($scope.isSliderChange == true) {
                $scope.isSliderChange = false;
                $scope.showAllPins();

            }
        }


    };


    $scope.showSelectedPins = function () {

        $("#listManager").css("display", "none");
        $("#optionsListManagerTab").removeClass("active");
        $("#" + $scope.dropdownMenuID).addClass("aaSystemDisable");
        $rootScope.isLoading = true;
        $('#spinner').css('visibility', 'visible');

        $scope.isHidePinBtnClicked = false;

        if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) {

            $scope.showPins($scope.selectedSystemPinData, true);

        }
        else {
            $scope.showPins($scope.aaPinData, true);

        }
        $scope.showSpeechBubble();
        $(".tooltip-custom").removeClass("btn-primary");
        $(".tooltip-custom").addClass("btn-black");
        $("#" + $scope.selectedPinBtnID).addClass("btn-primary");
        $("#" + $scope.selectedPinBtnID).removeClass("btn-black");

        if ($scope.isSelectedPinBtnClickedAftrSliderCange == true) {

            for (var i = 0; i <= $scope.activePinArray.length - 1; i++) {
                var pinName = $scope.activePinArray[i].split("_");
                var activePinName = 'Pin_' + pinName[1];
                var pinArcName = 'PinArc_' + pinName[1];
                $('#' + $scope.aaDetailViewCanvasId).setLayer(activePinName, {
                    visible: true // set to true instead to show the layer again
                }).drawLayers();
                $('#' + $scope.aaDetailViewCanvasId).setLayer(pinArcName, {
                    visible: true // set to true instead to show the layer again
                }).drawLayers();
            }

        }

    };


    $scope.showPins = function (seletedSystemPinData, isShowSelectedPins) {

        if (isShowSelectedPins) {

            angular.forEach($scope.clickedPins, function (value, key) {

                seletedSystemPinData = new jinqJs()
                                     .from(seletedSystemPinData)
                                     .where('_PinId != ' + value.id)
                                     .select();
            });

            angular.forEach($scope.clickedPins, function (value1, key1) {

                // if (aaPinDataValue._PinId != value.id) {
                var pinName = 'Pin_' + value1.id;
                var pinArcName = 'PinArc_' + value1.id;

                $('#' + $scope.aaDetailViewCanvasId).setLayer(pinName, {
                    visible: true // set to true instead to show the layer again
                }).drawLayers();

                $('#' + $scope.aaDetailViewCanvasId).setLayer(pinArcName, {
                    visible: true // set to true instead to show the layer again
                }).drawLayers();
                // }
            })

            angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {

                var pinName = 'Pin_' + aaPinDataValue._PinId;
                var pinArcName = 'PinArc_' + aaPinDataValue._PinId;

                $('#' + $scope.aaDetailViewCanvasId).setLayer(pinName, {
                    visible: false // set to true instead to show the layer again
                }).drawLayers();

                $('#' + $scope.aaDetailViewCanvasId).setLayer(pinArcName, {
                    visible: false // set to true instead to show the layer again
                }).drawLayers();
            })

        }

        else {
            angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {

                var pinName = 'Pin_' + aaPinDataValue._PinId;
                var pinArcName = 'PinArc_' + aaPinDataValue._PinId;

                $('#' + $scope.aaDetailViewCanvasId).setLayer(pinName, {
                    visible: true // set to true instead to show the layer again
                }).drawLayers();

                $('#' + $scope.aaDetailViewCanvasId).setLayer(pinArcName, {
                    visible: true // set to true instead to show the layer again
                }).drawLayers();
            })
        }

        $rootScope.isLoading = false;
        $('#spinner').css('visibility', 'hidden');


    }
    $rootScope.isshowAllPinsBtnAfterHideClicked = true;
    $scope.showItemsForSearch = function () {

        if ($rootScope.isshowAllPinsBtnAfterHideClicked == true) {
            console.log('showItemsForSearch is called');
            //this check is for log only because we are writing length so need to check if its not null or undefined


            $timeout(function () {
                if (($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) && ($scope.AAPinTermData.length > 0)) {

                    $scope.IsSearchVisible = true;
                    document.getElementById($scope.termlistfilterID).style.display = "block";

                    $("#backdrop > #searchListDivAA > #"+$scope.termlistfilterID+" > li").each(function (key, value) {

                        if ($(this).find("a").html() == document.getElementById("selectedTermName").value) {
                            $("#"+$scope.termlistfilterID+" li a").css({ "background-color": "#ffffff", "color": "#000000" });
                            $(this).find("a").css({ "background-color": "#3399FF", "color": "#ffffff" });
                        }
                    });

                }
                else {
                    $rootScope.loadSearchData();
                    if ($scope.AAPinTermData.length > 0) {
                        $scope.showItemsForSearch();
                    }
                }

                if ($rootScope.isSearchInputClicked == true) {
                    $rootScope.isSearchInputClicked = false;
                    $rootScope.searchListArray = [];
                    $("#backdrop > #searchListDivAA > #"+$scope.termlistfilterID+" > li").each(function (key, value) {
                        $rootScope.searchListArray.push({ "name": $(this).find("a").html(), "id": $(this).find("a").attr("id") });
                    });

                }

            }, 500);
        }
    }


    $scope.HideSearchList = function () {

        $timeout(function () {

            $("#termlistfilter").css("display", "none");


        }, 1000);

    }

    $scope.highlightPinBasedOnSerachItem = function (id) {

        $scope.isSelectedSystemSelectedAftrChange = false;
        $scope.isSearchOptionClicked = true;
        $scope.listMangerID = [];
        $scope.searchItemId = id;

        $scope.searchItemText = $("#" + id).val();
        $rootScope.searchSelectedText = $("#" + id).val();
        $('#termList option[selected="selected"]').prop("selected", false);
        $('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true);
        $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
        $('#termList option[value="' + $rootScope.searchSelectedText + '"]').css({ "background-color": "#3399FF", "color": "#ffffff" });

        $("#termlistfilter li a").css({ "background-color": "#ffffff", "color": "#000000" });
        $("#termlistfilter li #" + $scope.searchItemId).css({ "background-color": "#3399FF", "color": "#ffffff" });
        $scope.searchFilter = $("#" + id).val();
        //selectedTermName.placeholder = $("#" + id).text();
        selectedTermName.value = $("#" + id).val();
        selectedTermName.placeholder = "search... ";

        //get data from pindata for this trem

        var pinDataForTerm = new jinqJs()
                                         .from($scope.aaPinData)
                                         .where("_TermId == " + $scope.searchItemId)
                                         .select();
        //make all pin heads grey
        var radial = $('#aaDetailViewCanvas').createGradient({
            x1: 50, y1: 50,
            x2: 50, y2: 50,
            r1: 10, r2: 30,
            c1: 'rgba(100, 50, 0,0)',
            c2: 'rgb(216, 216, 216)'
        });


        $('#aaDetailViewCanvas').setLayers({
            fillStyle: radial,
        }).drawLayers();
        console.log(pinDataForTerm[0]._PinId);
        $scope.clickedPins = [];
        $scope.clickedPins.push({ 'id': pinDataForTerm[0]._PinId });
        $scope.activePinArray = [];
        var pinID = "PinArc_" + pinDataForTerm[0]._PinId;
        $scope.activePinArray.push({ 'id': pinID });
        $scope.showAnnotation(pinDataForTerm, false, false, true);
        // maintaing scroll position on selection of options in list manager.
        var annotationTopPos = $(".common-drag").css("top").split("p");
        $("#canvasDiv").scrollTop(annotationTopPos[0]);
        $scope.IsSearchVisible = false;
    }

    $rootScope.isShowHideButtonClicked = true;
    $scope.ShowHideAnnotation = function () {
        if ($rootScope.isShowHideButtonClicked == true) {
            $rootScope.annotationArray = [];
            $("#canvasDiv").find(".common-drag").each(function () {
                var speechBubbleID = $(this).attr("id");
                var sppechBubbleId = $(this).attr("id").substring(12);
                var b = $("#speechBubbleDraggedLine" + sppechBubbleId).css("display");
                var speechBubbleLineDispProp = $("#speechBubbleLine" + sppechBubbleId).css("display");
                var speechBubbleLineID = "speechBubbleLine" + sppechBubbleId;
                var speechBubbleDraggedLineID = "speechBubbleDraggedLine" + sppechBubbleId;
                $("#comment-box").addClass("btn-primary");
                $("#comment-box").removeClass("btn-black");

                if (speechBubbleLineDispProp == "block") {
                    $rootScope.annotationArray.push({ "speechBuubleId": speechBubbleID, "speechBubbleLineId": speechBubbleLineID });
                }
                else {
                    $rootScope.annotationArray.push({ "speechBuubleId": speechBubbleID, "speechBubbleLineId": speechBubbleDraggedLineID });
                }
            });
            $rootScope.isShowHideButtonClicked = false;
            for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) {
                $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "none");
                $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none");
            }
        }
        else {
            $rootScope.isShowHideButtonClicked = true;
            for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) {
                $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block");
                $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "block");
            }

            $("#comment-box").removeClass("btn-primary");
            $("#comment-box").addClass("btn-black");

        }
    }
    $scope.activePinOnLayerChange = function () {

        for (var i = 0; i <= $scope.activePinArray.length - 1; i++) {
            var radialAfterClick = $('#'+$scope.aaDetailViewCanvasId).createGradient({
                x1: 50, y1: 50,
                x2: 50, y2: 50,
                r1: 10, r2: 30,
                c1: 'rgba(100, 50, 0,0)',
                c2: 'rgb(126, 187, 83)'
            });
            var clickedPin = $scope.activePinArray[i];
            $('#' + $scope.aaDetailViewCanvasId).setLayer(clickedPin, {
                fillStyle: radialAfterClick
            }).drawLayers();

        }
    }
    angular.element(document).click(function () {
        $("#"+ $scope.bodySystemListID).css("display", "none");
        var $ua = navigator.userAgent;
        if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {
            $(".custom-tooltip").css("display", "none");
        }
    });

    $scope.activePinOnSliderChange = function () {

        if ($scope.activePinArray.length == 1) {
            for (var i = 0; i <= $scope.allPinDataArray.length - 1; i++) {
                var activeArc = $scope.activePinArray[0].split("_");
                if ($scope.allPinDataArray[i] == activeArc[1]) {
                    var pinName = 'Pin_' + $scope.allPinDataArray[i];
                    var pinArcName = 'PinArc_' + $scope.allPinDataArray[i];
                    $('#aaDetailViewCanvas').setLayer(pinName, {
                        visible: true // set to true instead to show the layer again
                    }).drawLayers();
                    $('#aaDetailViewCanvas').setLayer(pinArcName, {
                        visible: true // set to true instead to show the layer again
                    }).drawLayers();
                }
                else {
                    var pinName = 'Pin_' + $scope.allPinDataArray[i];
                    var pinArcName = 'PinArc_' + $scope.allPinDataArray[i];
                    $('#aaDetailViewCanvas').setLayer(pinName, {
                        visible: false // set to true instead to show the layer again
                    }).drawLayers();
                    $('#aaDetailViewCanvas').setLayer(pinArcName, {
                        visible: false // set to true instead to show the layer again
                    }).drawLayers();
                }
            }
        }
        else {
            var seletedSystemPinData;
            angular.forEach($scope.activePinArray, function (value, key) {
                var pinID = value.split("_");
                seletedSystemPinData = new jinqJs()
                                     .from($scope.allPinDataArray)
                                     .where('_PinId != ' + pinID[1])
                                     .select();
            })

            angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {

                var pinName = 'Pin_' + aaPinDataValue;
                var pinArcName = 'PinArc_' + aaPinDataValue;

                $('#aaDetailViewCanvas').setLayer(pinName, {
                    visible: false // set to true instead to show the layer again
                }).drawLayers();

                $('#aaDetailViewCanvas').setLayer(pinArcName, {
                    visible: false // set to true instead to show the layer again
                }).drawLayers();

            })
            for (var i = 0; i <= $scope.activePinArray.length - 1; i++) {
                var pinName = $scope.activePinArray[i].split("_");
                var activePinName = 'Pin_' + pinName[1];
                var pinArcName = 'PinArc_' + pinName[1];
                $('#aaDetailViewCanvas').setLayer(activePinName, {
                    visible: true // set to true instead to show the layer again
                }).drawLayers();
                $('#aaDetailViewCanvas').setLayer(pinArcName, {
                    visible: true // set to true instead to show the layer again
                }).drawLayers();
            }
        }
    }
    $(document).ready(function () {
        var $ua = navigator.userAgent;
        if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {

            var jspanelContainerWidth = $(".jsPanel-content").css("width");
            $(".jsPanel-content").css({ "width": "100%", "min-width": jspanelContainerWidth });
            $("#" + $scope.jsPanelId).css("width", "100%");

            //hide pin button clicked
            $("#hidePinBtn").removeAttr("onclick");
            $("#hidePinBtn").on("touchstart", function () {
                var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
                scope.$apply(function () {
                    scope.hidePins(event);
                });
            });
            //selected pin button clicked
            $("#selectedPin").removeAttr("onclick");
            $("#selectedPin").on("touchstart", function () {
                console.log('showSelectedPins is called')
                var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
                scope.$apply(function () {
                    scope.showSelectedPins(event);
                });
            });
            //all pin button clicked
            $("#allPinBtn").removeAttr("onclick");
            $("#allPinBtn").on("touchstart", function () {
                var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
                scope.$apply(function () {
                    scope.showAllPinsAfterHide(event);
                });
            });
            //comment-box button clicked
            $("#comment-box").removeAttr("onclick");
            $("#comment-box").on("touchstart", function () {
                var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
                scope.$apply(function () {
                    scope.ShowHideAnnotation(event);
                });
            });

        }

    });
}]);


function refreshTermListOnSystemSel(bodySystemId) {

    var rootScope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
    rootScope.$apply(function () {
        rootScope.refreshTermListOnAASystemSelection(bodySystemId);
    });
}


function showSelectedSystemPins(event) {
    console.log('OnBodySystem chnaged is called outside ');
    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
    scope.$apply(function () {
        var btnParent = ($(event.target).parent())[0].id;
        //if (btnParent.indexOf('_') != -1) {
        //    var parentIdMultiViewID = (btnParent).split("_")[1];
        //    $("#bodySystemListAA_" + parentIdMultiViewID).toggle();
        //}
        $scope.multiViewCounter=;
        scope.showSelectedSystemPins(event);
    });
}

function hidePins(event) {

    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
    scope.$apply(function () {
        scope.hidePins(event);
    });
}

function showAllPins(event) {

    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
    scope.$apply(function () {
        scope.showAllPinsAfterHide(event);
    });
}

function onSearchAA(event) {
    console.log('AA search is called')
    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
    scope.$apply(function () {
        scope.showItemsForSearch();
    });
}

function hideSearchList(event) {
    console.log('AA hide search is called')
    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
    scope.$apply(function () {
        scope.HideSearchList();
    });
}

function onSearchItemSelection(id) {

    console.log('AA hide search is called');
    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
    scope.$apply(function () {
        scope.highlightPinBasedOnSerachItem(id);
    });
}

//function onListManagerTermSelection(event) {
//    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
//    scope.isTermListOptionClicked = true;
//    scope.$apply(function () {
//        scope.highlightPinBasedOnSerachItem1(event);
//    });

//}


function showHideAnnotation(event) {

    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
    scope.$apply(function () {
        scope.ShowHideAnnotation(event);
    });
}

function showSelectedPins(event) {

    console.log('showSelectedPins is called')
    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
    scope.$apply(function () {
        scope.showSelectedPins(event);
    });
}


function openModuleItemView(event) {
    var scope = angular.element(document.getElementById("list-view")).scope();
    scope.isListViewButtonClicked = true;
    scope.$apply(function () {
        scope.openModuleItemView(event);
    });
}

function openListViewModuleItem(event) {

    var scope = angular.element(document.getElementById("list-view")).scope();
    scope.isListViewButtonClicked = true;
    scope.$apply(function () {
        scope.openListViewModuleItem(event);
    });
}

function openCurrentView(event) {
    var scope = angular.element(document.getElementById("list-view")).scope();
    scope.isListViewButtonClicked = true;
    scope.isOpenBtnClicked = true;
    scope.$apply(function () {
        scope.openModuleItemView(event);
    });

}

function onZoom(scope) {

    //$(".common-drag").remove();
    //$(".commonDot").remove();
    //$(".commonDraggedLine").remove();
    //var radial = $('#aaDetailViewCanvas').createGradient({
    //    x1: 50, y1: 50,
    //    x2: 50, y2: 50,
    //    r1: 10, r2: 30,
    //    c1: 'rgba(100, 50, 0,0)',
    //    c2: 'rgb(216, 216, 216)'
    //});
    //$('#aaDetailViewCanvas').setLayers({
    //    fillStyle: radial,
    //}).drawLayers();
    //  scope.removePin();
    //    scope.showAllPins();


    //6. Show all pins on AA opened item
}


function systemChange(event) {
    event.stopPropagation();

    var btnParent = ($(event.target).parent())[0].id;
    if (btnParent.indexOf('_') != -1) {
        var parentIdMultiViewID = (btnParent).split("_")[1];
        $("#bodySystemListAA_" + parentIdMultiViewID).toggle();
    }
    else {
        $("#bodySystemList").toggle();
    }
    var $ua = navigator.userAgent;
    if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {
        $(".custom-tooltip").toggle();
    }
}