'use strict';

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

       $scope.AllBodyRegion = [];
       $scope.AllBodySystem = [];
       $scope.AllOrientation = [];
       $scope.AllImageType = [];
       $scope.searchAAListViewData = [];
       $scope.filterstring = false;
       $scope.isOpenBtnClicked = false;

       var ATLAS_ANATOMY = 'ATLAS_ANATOMY';
       var CLINICAL_ILLUSTRATION = 'Clinical Illustrations';
       var CLINICAL_ANIMATION = 'Clinical Animations';
       $rootScope.closeBtnImgPath = "~/../content/images/speeachBubbleClose.png";

        //************************************
        $rootScope.listArray = [];
        $scope.SelectedAAthumbImage = [];
        $scope.SelectedAASummary = [];
        $scope.SelectedAAId = [];
        $scope.SelectedAATitle = [];
       // $rootScope.aaPinDataArray = []; // using at home

        $scope.query = {
            selectedbodyregion: '',
            selectedbodysystem: '',
            selectedorientation: '',
            selectedimagetype: '',
        };
        $scope.showTabButton = true;
        $scope.isListViewDataLoaded = true;

    $scope.setActiveTab = function (tabToSet) {
        if(tabToSet=="" ||tabToSet==undefined)
        {
            $scope.activeTab=1;
        }
        else
        {
            $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.ObjectAttribute=function(windowviewid)
    {
        var windata={
                    'multiwinid' : windowviewid,
                    'moduleName':'',
                    'currentViewTitle':'',
                    'parentSlugName':'',
                    'sliderPercentValue':1,
                    'imageId':'',
                    'imageName':'',
                    'bodySystemName':'',
                    'OpenItemImagePath':'',
                    'isBodySystemSelected':false,
                    'isSelectedPinBtnClickedAftrSliderCange':false,
                    'isHidePinBtnClicked':false,
                    'isSliderChange':false,
                    'clickedPins':[],
                    'activePinArray':[],
                    'typeOfEvent':'',
                    'selectedSystemName':null,
                    'SelectedSystemID':0,
                    'aaPinData':[],
                    'allPinDataArray':[],
                    'selectedSystemPinData':[],
                    'AAPinTermData':[],
                    'pinTermData':[],
                    'sliderVal':100,
                    'speechBubbleDimaensions':[],
                    'isShowBodyWithCBPinData':false,
                    'CBselectedpinCordinate': [],
                    'verticalScroll': 0,
                    'horizontalScroll':0,
                    'y': 0,
                    'x': 0,
                    'width': 0,
                    'height': 0,
                    'minimised': false,
                    'maximised': true,
                    'minmaxAutoEvent':true,
                    'id': 0,
                    'selectedPins': [],
                    'isShowSelectedPins': false,
                    'selectedSearchId': 0,
                    'isShowAllPins': false,
                    'canvasImageWidth': 0,
                    'canvasImageHeight': 0,
                    'navigatorImage':"",
                    'showHideAnnotations': 'showAnnotationText',
                    'annotationData':{shapeStates:[],paintCanvasState:[]},
                    'totalstructure': 0,
                    'totalstructureLm': 0,
                    'intervalObject': null,
                    'SearchTimeStampValue': 0,
                    'keyctrl': false,

            };
            return windata;
    }

    $scope.initializeAAWindowData = function(windowviewid,isOpenWithExistsModule,openPanelNo){
        if (isOpenWithExistsModule || openPanelNo == 0)
        {
            if ($rootScope.AAWindowData != undefined) {
                $rootScope.AAWindowData.length = 0;
            }
            else {
                $rootScope.AAWindowData = [];
            }

            $rootScope.AAWindowData.push($scope.ObjectAttribute(windowviewid));
        }
        else
        {
            var isNewWindow=true;
            for (var k = 0; k < $rootScope.AAWindowData.length; k++) {
                if ($rootScope.AAWindowData[k].multiwinid == windowviewid) {
                    isNewWindow=false;
                    break;
                }
            }

            if(isNewWindow)
            {
                $rootScope.AAWindowData.push($scope.ObjectAttribute(windowviewid));
            }
        }
    }

    $scope.GetAAwindowStoreData=function(windowviewid,keyname){
        for(var x=0 ;x < $rootScope.AAWindowData.length;x++){

            if($rootScope.AAWindowData[x].multiwinid==windowviewid)
            {
                return $rootScope.AAWindowData[x][keyname];
            }
        }
    }

    $scope.SetAAwindowStoreData=function(windowviewid,keyname,value){
        for(var x=0 ;x < $rootScope.AAWindowData.length;x++){

            if($rootScope.AAWindowData[x].multiwinid==windowviewid)
            {
                    $rootScope.AAWindowData[x][keyname]=value;
            }
        }
    }

    // access from home controller
    //get data of AA module
    $rootScope.GetAAwindowData=function(windowviewid,keyname)
    {
        for(var x=0 ;x < $rootScope.AAWindowData.length;x++){

            if($rootScope.AAWindowData[x].multiwinid==windowviewid)
            {
                return $rootScope.AAWindowData[x][keyname];
            }
        }
    }
    // access from home controller
    $rootScope.SetAAwindowData=function(windowviewid,keyname,data) {
        for(var x=0 ;x < $rootScope.AAWindowData.length;x++){

            if($rootScope.AAWindowData[x].multiwinid==windowviewid)
            {
                    $rootScope.AAWindowData[x][keyname]=data;
            }
        }
    }

    $scope.DisableAAUI = function (windowviewid) {

        var modulePanel = $("#AAImagePanel_"+windowviewid).find(" .jsPanel-content");
        if(modulePanel.length>0)
        {
            modulePanel[0].style.pointerEvents="none";
            modulePanel[0].style.opacity="0.7";
        }

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

        // CB module disable all
        $('#HomeContainerDiv').css('pointer-events', 'none');
        $('#HomeContainerDiv').css('opacity', '0.7');
       
    }

    $scope.EnableAAUI = function (windowviewid) {

        var modulePanel = $("#AAImagePanel_"+windowviewid).find(" .jsPanel-content");
        if(modulePanel.length>0)
        {
            modulePanel[0].style.pointerEvents="auto";
            modulePanel[0].style.opacity="1";
        }
    
        $rootScope.isLoading = false;
        $('#spinner').css('visibility', 'hidden');
        // CB module enable all
        $('#HomeContainerDiv').css('pointer-events', 'auto');
        $('#HomeContainerDiv').css('opacity', '1');
    }

    $scope.loadForModuleById = function (moduleId) {        
        $rootScope.isCallFromOtherModule = undefined;
         $rootScope.MULTI_VIEW_ID += 1
         $scope.DisableAAUI($rootScope.MULTI_VIEW_ID);

        // store exist module in module service
         var ExistData = ModuleService.getModuleData("ATLAS_ANATOMY");

         if (ExistData != undefined && ExistData.length > 0) {
             // clear all module data before open new module in cb
             ModuleService.ClearWinDataByModule(ExistData.mType);
         }
         var newWindowData = {
             "mType": 'ATLAS_ANATOMY',
         };
         ModuleService.setModuleData(newWindowData, 0);

        // close/remove prev panel when in minimised mode
        if($rootScope.AAWindowData!=undefined)
            {
                if($rootScope.AAWindowData.length>0)
                {
                    for(var x=0 ;x < $rootScope.AAWindowData.length;x++){
                        var winid=$rootScope.AAWindowData[x].multiwinid;
                        if ($('#AAImagePanel_' + winid).html() != undefined) {
                            $('#AAImagePanel_' + winid).remove();  
                        }                        
                    }
                    $rootScope.AAWindowData=[];
                }
            }
        
        $scope.initializeAAWindowData($rootScope.MULTI_VIEW_ID,true,undefined);

        $rootScope.openModules.push({ "ModuleId": 2 });
        if ($rootScope.refreshcheck == null) {
            $location.path('/');
        }
        var curtab = $rootScope.getLocalStorageValue("activeTab");
        $scope.setActiveTab(curtab)

        console.log('loadForModuleById is called')
        $scope.SetAAwindowStoreData($rootScope.MULTI_VIEW_ID,'moduleName',"ATLAS_ANATOMY");

        $rootScope.currentActiveModuleTitle = "ATLAS_ANATOMY";
        $scope.AllBodyRegion = BodyRegions;
        $scope.AllBodySystem = BodySystems;
        $scope.AllOrientation = ViewOrientations;
        $scope.AllImageType = ImageTypes;

            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,$rootScope.MULTI_VIEW_ID);
            
            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") {

                        $("#grid-view").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");
                    }

                }

            }, 100);
         
    }

    $scope.openModuleItemView = function ($event) {

        var windowviewid = $rootScope.MULTI_VIEW_ID;
        $rootScope.MenuModuleName = "AA";
        
        //0. Get selected Image Id
        if ($scope.isListViewButtonClicked == true) {
            if ($scope.isOpenBtnClicked == true) {

                var moduleItemDataToBeSaved = $("#demoText").text().trim();
                var moduleItemDataToBeSavedID = $event.target.id;
                $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 moduleItemDataToBeSavedID = $event.currentTarget.id;
            localStorage.setItem("listViewSelectedID", moduleItemDataToBeSavedID);
            var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text().trim();

            $scope.isListViewButtonClicked = false;
        }

        //  open module bu openresource
        var isopenResourceRequest = sessionStorage.getItem('isModuleOpenByOpenResource');
        if (isopenResourceRequest == "true") {

            //set default module data
            var AAopenData = {
                "id": moduleItemDataToBeSavedID,
                "mType": 'ATLAS_ANATOMY',
                "showAllPins":true,
                "windowTitle": moduleItemDataToBeSaved,
                "scaleIndex":100,
                "size": { height: 600, width: 900 },
                "position": { x: 1, y: 30 }
            };

            window.parent.AIAModuleOpenResourceInfo(AAopenData);

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

            //2. Pick the image name to create a source to open

            $scope.SetAAwindowStoreData(windowviewid, 'imageId', OpenedTileData[0]);

            $scope.SetAAwindowStoreData(windowviewid, 'imageName', OpenedTileData[3]);
            var imageName = OpenedTileData[3];

            $scope.SetAAwindowStoreData(windowviewid, 'bodySystemName', OpenedTileData[2]);

            var OpenItemImagePath = "../../../content/images/aa/images/" + OpenedTileData[3];
            $scope.SetAAwindowStoreData(windowviewid, 'OpenItemImagePath', OpenItemImagePath);

            $rootScope.listArray.push({ "imageName": OpenItemImagePath, "text": moduleItemDataToBeSaved });
            //3. set opened module item ti
            localStorage.setItem("currentViewTitle", OpenedTileData[6]);
            if ($('#grid-view').css("display") == "block") {
                localStorage.setItem("AAGridViewScroll", $("#grid-view").scrollTop());
                localStorage.setItem("AAGridViewHighlightThumbnail", $(event.target).parent().parent().parent().attr('id'));
            }

            $scope.SetAAwindowStoreData(windowviewid, 'currentViewTitle', OpenedTileData[6]);
            // store image for export
            var tittle = $rootScope.getLocalStorageValue("currentViewTitle");
            $rootScope.StoreTitleName(tittle);
            $rootScope.StoreOrgImageName(imageName);

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

        }

    }


    $scope.openListViewModuleItem = function (event) {
        var windowviewid= $rootScope.MULTI_VIEW_ID;
        $("#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();
        var OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData);
        var OpenItemImagePath = "../../../content/images/aa/images/" +OpenedTileData[3];
        $scope.SetAAwindowStoreData(windowviewid,'OpenItemImagePath',OpenItemImagePath);
        $rootScope.listArray.push({ "imageName": OpenItemImagePath, "text": moduleItemDataToBeSaved });
        $("#viewList").append("<div class='col-sm-12 text-center' style='padding: 0px 5px 0px 10px;' id='demoView'><div class='col-xs-12' style='padding:1px;background-color:#fff;height:178px'><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:115px!important;' src=" + OpenItemImagePath + "></div><div class='col-xs-12' id='demoText' style='padding:0;'>" + moduleItemDataToBeSaved + "</div></div></div><a id=" + moduleItemDataToBeSavedID + " style='position:absolute;right:20px;bottom:10px;' onclick='openCurrentView(event)' href='javascript:void(0)' class='pull-right btn btn-primary'>Open</a></div>");
    }

    $rootScope.openAAModuleItemMain = function () {
        if ($rootScope.isCallFromOtherModule) {
            $scope.AAModuleData = ModuleService.getModuleData("ATLAS_ANATOMY");
            if($scope.AAModuleData.length<1) return;
            $scope.DisableAAUI();
             $scope.readyToLoad=true;
             $rootScope.AAWindowLoadComplete = false;
             $scope.wincount=1;
              var winlen=$scope.AAModuleData.length;
              var timeint = null;
              timeint = $interval(function() {

                if($scope.readyToLoad==true)
                {
                    var windata = $scope.AAModuleData[$scope.wincount - 1];
                    $scope.openModuleItem(windata);

                }
                $scope.readyToLoad=false;
                if($scope.wincount<winlen && $rootScope.AAWindowLoadComplete==true)
                {
                    $scope.wincount=$scope.wincount+1;
                    $rootScope.AAWindowLoadComplete=false;
                    $scope.readyToLoad=true;
                }

                if($scope.wincount==winlen && $rootScope.AAWindowLoadComplete==true)
                {
                    $scope.stopInterval();
                    $scope.$emit("LoadModuleComplete", "ATLAS_ANATOMY");
                }


              }, 100);

            $scope.stopInterval = function() {
                if (angular.isDefined(timeint)) {
                  $interval.cancel(timeint);
                  timeint = undefined;
                }

              };

        }
        else {
            $scope.DisableAAUI();
            $scope.openModuleItem(null);
        }
    }

    $scope.openModuleItem = function (aaModuleData) {

        if ($rootScope.isCallFromOtherModule == true) {
            $scope.aaOpenInOtherModules = aaModuleData;
            $rootScope.MULTI_VIEW_ID += 1;
            var windowviewid=  $rootScope.MULTI_VIEW_ID;

            $scope.initializeAAWindowData(windowviewid,false, $scope.aaOpenInOtherModules.currentWindowId);

                var moduleName = $scope.aaOpenInOtherModules.mType;
                $scope.SetAAwindowStoreData(windowviewid,'moduleName',moduleName);

                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.isListViewButtonClicked = false;


                                          var anatomyTitle =  $scope.aaOpenInOtherModules.anatomyTitle;
                                          $scope.SetAAwindowStoreData(windowviewid,'currentViewTitle',anatomyTitle);
                                          localStorage.setItem("currentViewTitle", anatomyTitle);

                                          if ($scope.aaOpenInOtherModules.selectedBodysystemId != undefined)
                                          {
                                              var systemId = $scope.aaOpenInOtherModules.selectedBodysystemId;
                                              $scope.SetAAwindowStoreData(windowviewid, 'SelectedSystemID', systemId);
                                          }


                                          // set zoom level And SelectedPins
                                            $scope.SetAAwindowStoreData(windowviewid, 'sliderVal', $scope.aaOpenInOtherModules.zoomLevel);

                                            $scope.SetAAwindowStoreData(windowviewid, 'isShowAllPins', $scope.aaOpenInOtherModules.showAllPins);
                                            $scope.SetAAwindowStoreData(windowviewid, 'isHidePinBtnClicked', $scope.aaOpenInOtherModules.hideAllPins);
                                            $scope.SetAAwindowStoreData(windowviewid, 'isShowSelectedPins', $scope.aaOpenInOtherModules.showSelectedPins);
                                            if ($scope.aaOpenInOtherModules.showHideAnnotations != undefined && $scope.aaOpenInOtherModules.showHideAnnotations != "") {
                                                $scope.SetAAwindowStoreData(windowviewid, 'showHideAnnotations', $scope.aaOpenInOtherModules.showHideAnnotations);
                                              }  

                                            var isMaximize = $scope.aaOpenInOtherModules.maximised!=undefined?$scope.aaOpenInOtherModules.maximised:false;
                                            var isMinimize = $scope.aaOpenInOtherModules.minimised!=undefined?$scope.aaOpenInOtherModules.minimised:false;
 
                                            $scope.SetAAwindowStoreData(windowviewid, 'maximised', isMaximize);
                                            $scope.SetAAwindowStoreData(windowviewid, 'minimised', isMinimize);
                                          
                                          // note:: in few json like "articulation" imageId as same id
                                          // get wrong detail by imageId
                                          //solution: use id to get imageid from js list

                                         // var imageID =  $scope.aaOpenInOtherModules.imageId;

                                         // serial no of imageid
                                         var sId =  $scope.aaOpenInOtherModules.id;

                                         $scope.SetAAwindowStoreData(windowviewid, 'id', sId);
                                        
                                        if($location.url()== "/curriculum-builder-detail") {
                                            $scope.SetAAwindowStoreData(windowviewid,'parentSlugName',($location.url()).replace('/', ''));
                                        }
                                        else
                                        {
                                            $scope.SetAAwindowStoreData(windowviewid,'parentSlugName','tile-view-list');
                                        }

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

                                          if (selectedTileData != undefined && selectedTileData.length > 0) {
                                            $scope.SetAAwindowStoreData(windowviewid,'imageId',selectedTileData[0]._ImageId);

                                            var imageName = selectedTileData[0]._ImageName;

                                              $scope.SetAAwindowStoreData(windowviewid, 'imageName', imageName);

                                              $scope.SetAAwindowStoreData(windowviewid,'bodySystemName',selectedTileData[0]._BodySystem);

                                              var OpenItemImagePath = "../../../content/images/aa/images/" + imageName;
                                              $scope.SetAAwindowStoreData(windowviewid,'OpenItemImagePath',OpenItemImagePath);

                                              $scope.listArray.push({ "imageName": OpenItemImagePath, "text": anatomyTitle });

                                              // store image for export
                                              var tittle = $rootScope.getLocalStorageValue("currentViewTitle");
                                              $rootScope.StoreTitleName(tittle);
                                              $rootScope.StoreOrgImageName(imageName);

                                              //3. set opened module item ti

                                              $scope.loadAAIllustration(windowviewid);

                                          }
                                      })

        }
        else {
            $scope.SetAAwindowStoreData($rootScope.MULTI_VIEW_ID,'parentSlugName','tile-view-list');
            $scope.loadAAIllustration($rootScope.MULTI_VIEW_ID);         
        }
    }

    $scope.loadAAIllustration = function (windowviewid) {   
        //0.4 for Opening module item, load it into image
        $scope.DisableAAUI(windowviewid);
             
        if ($rootScope.refreshcheck == null) {
            $location.path('/');
        }
        var jsContentURL;
      //  var moduleItemViewDivId;
        var moduleName=  $scope.GetAAwindowStoreData(windowviewid,'moduleName');
        //1. create a jsPanel and load the module item view
        if (moduleName == ATLAS_ANATOMY) {

            jsContentURL = 'app/views/aa/atlas-anatomy-detail.html';
            $scope.jsPanelID = 'AAImagePanel' + '_' + windowviewid;
        }
        else if (moduleName == CLINICAL_ANIMATION) {
            //to do, in next phase of project

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

        }
        var currentViewTitle = $scope.GetAAwindowStoreData(windowviewid,'currentViewTitle');

        if ($rootScope.isCallFromOtherModule) {
            // open JS panel for curriculum with define cornonate in CB jason
            $scope.jsPanelWidth = $scope.aaOpenInOtherModules.size.width;//1000;
            $scope.jsPanelHeight = $scope.aaOpenInOtherModules.size.height;
            if($scope.aaOpenInOtherModules.size.height<420)
            $scope.jsPanelHeight = 420;
  
            $scope.jsPanelLeft = $scope.aaOpenInOtherModules.position.x;
            if ($scope.aaOpenInOtherModules.position.x <= 1)           
            $scope.jsPanelLeft = 0;
            $scope.jsPanelTop = $scope.aaOpenInOtherModules.position.y;
            if ($scope.aaOpenInOtherModules.position.y < 30)           
            $scope.jsPanelTop = 30;
            
            if($location.url()!= "/curriculum-builder-detail") {
                    $scope.jsPanelLeft = 1;
                    $scope.jsPanelTop = 85;
            }

        }
        else {
            $scope.jsPanelWidth = $(window).outerWidth() - 20;
            $scope.jsPanelHeight = $(window).outerHeight() - 140;
            $scope.jsPanelLeft = 1;
            $scope.jsPanelTop = 55;
        }

        //1. create a jsPanel and load the module item view
        if (moduleName == ATLAS_ANATOMY) {
            $scope.jsPanelAA = $.jsPanel({
                id: $scope.jsPanelID,
                selector: '.aaBodyView',
                theme: 'success',
                currentController: 'TileViewListController',
                parentSlug: $scope.GetAAwindowStoreData(windowviewid,'parentSlugName'),
                ajax: {
                    url: jsContentURL
                },
                title: currentViewTitle,

                position: {
                    top: $scope.jsPanelTop,
                    left: $scope.jsPanelLeft,
                },

                size: {
                    width: $scope.jsPanelWidth,
                    height: $scope.jsPanelHeight
                 },
                 onminimized:function (panel) {
                    var pnlName=panel[0].id;
                    var len = (pnlName).split("_").length;
                    var windowviewid = (pnlName).split("_")[len - 1];
                    var isAutoCalled = $scope.GetAAwindowStoreData(windowviewid, 'minmaxAutoEvent');
                    if(!isAutoCalled)
                    {
                        $rootScope.UnsaveCurriculum = true;
                    }
                    $scope.SetAAwindowStoreData(windowviewid, 'minimised',true);
                    $scope.SetAAwindowStoreData(windowviewid, 'maximised',false);
                 },
                onmaximized:function (panel) {
                    var pnlName=panel[0].id;
                    var len = (pnlName).split("_").length;
                    var windowviewid = (pnlName).split("_")[len - 1];
                   
                     $scope.SetAAwindowStoreData(windowviewid, 'maximised',true);
                     $scope.SetAAwindowStoreData(windowviewid, 'minimised',false);
                    
                     var extraheight=$('#aastickeyarea').height()+5;
                     var extrawidth=$('.tools').width()+15;
                     var canvasDIvHeight = $('#AAImagePanel_' + windowviewid+ " .jsPanel-content").height()-extraheight;
                     var canvasDIvWidth = $('#AAImagePanel_' + windowviewid+ " .jsPanel-content").width()-extrawidth;
                     var canvasDiv='canvasAADiv_' + windowviewid;
                     var canvasDraw='canvasAA_' + windowviewid;
                     var canvasPaint='canvasPaintAA_' + windowviewid;
                    
                     var isAutoCalled = $scope.GetAAwindowStoreData(windowviewid, 'minmaxAutoEvent');
                     if(!isAutoCalled)
                     {
                        $rootScope.UnsaveCurriculum = true; 
                        var annotationData=$rootScope.GetAAwindowData(windowviewid,'annotationData');                  
                        $rootScope.setAADAPanelCordinate(windowviewid,0,pnlName,canvasDiv,canvasDraw,canvasPaint,canvasDIvHeight,canvasDIvWidth,annotationData); 
                     }
                 },
                onnormalized:function (panel) {
                    var pnlName=panel[0].id;
                    var len = (pnlName).split("_").length;
                    var windowviewid = (pnlName).split("_")[len - 1];
                   
                    $scope.SetAAwindowStoreData(windowviewid, 'minimised',false);
                    $scope.SetAAwindowStoreData(windowviewid, 'maximised',false);

                    var extraheight=$('#aastickeyarea').height()+5;
                    var extrawidth=$('.tools').width()+15;
                    var canvasDIvHeight = $('#AAImagePanel_' + windowviewid+ " .jsPanel-content").height()-extraheight;
                    var canvasDIvWidth = $('#AAImagePanel_' + windowviewid+ " .jsPanel-content").width()-extrawidth;
                   
                    var canvasDiv='canvasAADiv_' + windowviewid;
                    var canvasDraw='canvasAA_' + windowviewid;
                    var canvasPaint='canvasPaintAA_' + windowviewid;
                   
                    var isAutoCalled = $scope.GetAAwindowStoreData(windowviewid, 'minmaxAutoEvent');
                    if(!isAutoCalled)
                    {
                       $rootScope.UnsaveCurriculum = true; 
                       var annotationData=$rootScope.GetAAwindowData(windowviewid,'annotationData');                  
                       $rootScope.setAADAPanelCordinate(windowviewid,0,pnlName,canvasDiv,canvasDraw,canvasPaint,canvasDIvHeight,canvasDIvWidth,annotationData);
                    }
                },
                resizable: {
                    minWidth: 600,
                    minHeight: 500,
                    stop: function (event, ui) {
                        var pnlName=event.currentTarget.id;
                        var len = (pnlName).split("_").length;
                        var windowviewid = (pnlName).split("_")[len - 1];
                    
                        var extraheight=$('#aastickeyarea').height()+5;
                        var extrawidth=$('.tools').width()+15;
                        var canvasDIvHeight = $('#AAImagePanel_' + windowviewid+ " .jsPanel-content").height();
                        var canvasDIvWidth = $('#AAImagePanel_' + windowviewid+ " .jsPanel-content").width()-extrawidth;

                        $scope.SetAAwindowStoreData(windowviewid, 'width', ui.size.width);
                        $scope.SetAAwindowStoreData(windowviewid, 'height', canvasDIvHeight);
                        $scope.SetAAwindowStoreData(windowviewid, 'y', ui.position.top);
                        $scope.SetAAwindowStoreData(windowviewid, 'x', ui.position.left);
                        $rootScope.UnsaveCurriculum = true;
                      
                        var canvasDiv='canvasAADiv_' + windowviewid;
                        var canvasDraw='canvasAA_' + windowviewid;
                        var canvasPaint='canvasPaintAA_' + windowviewid;
   
                        var annotationData=$rootScope.GetAAwindowData(windowviewid,'annotationData');                  
                        $rootScope.setAADAPanelCordinate(windowviewid,0,pnlName,canvasDiv,canvasDraw,canvasPaint,canvasDIvHeight-extraheight,canvasDIvWidth,annotationData);
                    }                  
                },
                draggable: {
                    stop: function( event, ui ) {
                        var pnlName=event.currentTarget.id;
                        var len = (pnlName).split("_").length;
                        var windowviewid = (pnlName).split("_")[len - 1];
                        $scope.SetAAwindowStoreData(windowviewid, 'y', ui.position.top);
                        $scope.SetAAwindowStoreData(windowviewid, 'x', ui.position.left);
                        $rootScope.UnsaveCurriculum = true;
                        $rootScope.resetMenuOptionOnClick(pnlName);
                    }
                },

            });

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

            //Perform Activity as per SaveCb JSPanel
            var isMaximize = $scope.GetAAwindowStoreData(windowviewid, 'maximised');
            var isMinimize = $scope.GetAAwindowStoreData(windowviewid, 'minimised');
            if (isMaximize) {
                $scope.jsPanelAA.maximize('auto');
            }
            else if (isMinimize) {
                $scope.jsPanelAA.minimize('auto');
            }
            else {
                $scope.jsPanelAA.normalize('auto');
            }

            $rootScope.AllPanelObject(windowviewid,$scope.jsPanelAA);

            $("#AAImagePanel_"+windowviewid).css('overflow','hidden');

            // set false after initial call of min,max or normal
            $scope.SetAAwindowStoreData(windowviewid, 'minmaxAutoEvent', false);
            $scope.SetAAwindowStoreData(windowviewid, 'y', $scope.jsPanelTop);
            $scope.SetAAwindowStoreData(windowviewid, 'x', $scope.jsPanelLeft);
            $scope.SetAAwindowStoreData(windowviewid, 'width', $scope.jsPanelWidth);
            $scope.SetAAwindowStoreData(windowviewid, 'height', $scope.jsPanelHeight);
                          
            $timeout(function () {
				$scope.setControlsIDs(windowviewid);
                if (document.getElementById('aaBodyView') != null) {
                    $compile(aaViewElement.contents())($scope);   
                     				 
                     var timeintval = null;
                    timeintval = $interval(function () {                                                                                     
                        var bodySystemListObj = document.getElementById("bodySystemList_" + windowviewid); 
                        var len = bodySystemListObj!=null?(bodySystemListObj.id).split("_").length:0;                                          
                        if (len>1) {                                                               
                            $scope.stopIntervalLoader(); 
                            //wait until DOM element load of AA
                            // set search for language input
					        $scope.langSearchLoad(windowviewid);
                            $scope.loadAAModule(windowviewid);                             
                        }
                        else
                        {
                            $scope.setControlsIDs(windowviewid);
                            console.log("waiting for loading module");                       
                        }
                    },100);  
                    $scope.stopIntervalLoader = function () {
                        if (angular.isDefined(timeintval)) {
                            $interval.cancel(timeintval);
                            timeintval = undefined;
                        }
                    };            
                       
                }
              
            }, 1000);
           
        }

    }

    $scope.loadAAModule = function (windowviewid) {

            var extraheight=$('#aastickeyarea').height()+5;
            var extrawidth=$('.tools').width()+15;
            var canvasDIvHeight = $('#AAImagePanel_' + windowviewid+ " .jsPanel-content").height()-extraheight;
            var canvasDIvWidth = $('#AAImagePanel_' + windowviewid+ " .jsPanel-content").width()-extrawidth;                   

            $scope.convertToZoomValue(windowviewid);

            var OpenItemImagePath=  $scope.GetAAwindowStoreData(windowviewid,'OpenItemImagePath');
            var openedImage = document.getElementById("modItemImage_"+windowviewid);  
            openedImage.src = OpenItemImagePath;                    
            openedImage.onload = function () {
                $scope.SetAAwindowStoreData(windowviewid, 'canvasImageWidth', this.width);
                $scope.SetAAwindowStoreData(windowviewid, 'canvasImageHeight', this.height);

               var zoomValue = $scope.GetAAwindowStoreData(windowviewid, 'sliderVal');                                                           
               var relativeWidth = ( this.width)*(zoomValue/100);
               var relativeHeight = (this.height)*(zoomValue/100);
           
                $scope.SetAAwindowStoreData(windowviewid,'sliderPercentValue',(zoomValue/100));

                $("#modItemImage_"+windowviewid).css("width", relativeWidth + "px");
                $("#modItemImage_"+windowviewid).css("height", relativeHeight + "px");                          
               
                //0.5 create canvas on the top of image.
                var canvas = document.createElement('canvas');
                canvas.id = 'aaDetailViewCanvas_'+windowviewid;
                canvas.className = '.aaCanvas';
                canvas.height =parseInt(relativeHeight)+20;
                canvas.width =parseInt(relativeWidth)+50;
                canvas.style.left = '0px';
                canvas.style.top = '0px';
                canvas.style.position = "absolute";
                canvas.style.zIndex = 12002;
                $("#canvasAADiv_" + windowviewid).append(canvas);

                var pnlName='AAImagePanel_' + windowviewid;
                var canvasDiv='canvasAADiv_' + windowviewid;
                var canvasDraw='canvasAA_' + windowviewid;
                var canvasPaint='canvasPaintAA_' + windowviewid;
               
                var demoData= {shapeStates:[],paintCanvasState:[]};
                $rootScope.setAADAPanelCordinate(windowviewid,0,pnlName,canvasDiv,canvasDraw,canvasPaint,canvasDIvHeight,canvasDIvWidth,demoData);
                $scope.JsPanelclick(windowviewid);
                                   
                $timeout(function () {  
                                                             
                    $scope.loadAllPinFirstTime(windowviewid);
                    //call time interval function until load pin data    
                     //load search/vocab data
                     $rootScope.aaloadSearchData(windowviewid);          
                    var timeintval = null;
                    timeintval = $interval(function () {                                                                                     
                        var aaPinData = $scope.GetAAwindowStoreData(windowviewid,'aaPinData');
                        var AAPinTermData = $scope.GetAAwindowStoreData(windowviewid,'AAPinTermData');      
                                     
                        if (aaPinData.length>0 && AAPinTermData.length>0) {   
                            $scope.stopIntervalAA();                                   
                            $scope.showAllPins(windowviewid);                           
                            $scope.Setslider(windowviewid);
                            //7. Highlight all system body list in left side
                            $scope.highlightBodySystemList(windowviewid);                                           
                            $scope.loadbtnNavigator(windowviewid);                                          
                           
                            if ($rootScope.isCallFromOtherModule) {
                                $scope.loadAAonCBData(windowviewid);
                            
                                var annotationData= $scope.aaOpenInOtherModules.annotationData; 
                                // load annotation  
                                if(annotationData!="" && annotationData!=undefined) 
                                {
                                    if(annotationData.shapeStates.length>0||annotationData.paintCanvasState.length>0)
                                    {
                                        //first draw shape and then store in object
                                        $rootScope.LoadCBSavedAnnotation(canvasDraw,canvasPaint,annotationData);                                 
                                    }               
                                }
                            }                          
                        }
                        else
                        {
                            console.log("waiting for pin Data");                       
                        }
                    }, 100);

                    $scope.stopIntervalAA = function () {
                        if (angular.isDefined(timeintval)) {
                            $interval.cancel(timeintval);
                            timeintval = undefined;
                        }
                    };
                                                                                                
                },500);
            }
            openedImage.onerror = loadFailure;
           // openedImage.src = OpenItemImagePath;
         
     //Calling methode for save Js Panel Activity for SaveCB
     $scope.PanelActivity();
        
    }

    $scope.convertToZoomValue = function (windowviewid) {
        var zoomValue = $scope.GetAAwindowStoreData(windowviewid, 'sliderVal');
        switch (zoomValue) {
            case 0:
                //$scope.zoomLevel = 100;
                $scope.SetAAwindowStoreData(windowviewid,'sliderVal',100);
                break;
            case 1:
                //$scope.zoomLevel = 85;
                $scope.SetAAwindowStoreData(windowviewid,'sliderVal',85);
                break;
            case 2:
                 //    $scope.zoomLevel = ;
                $scope.SetAAwindowStoreData(windowviewid,'sliderVal',70);
                break;
            case 3:
                //$scope.zoomLevel = 55;
                $scope.SetAAwindowStoreData(windowviewid,'sliderVal',55);
                break;
            case 4:
                //$scope.zoomLevel = 55;
                $scope.SetAAwindowStoreData(windowviewid,'sliderVal',55);
                break;
            case 5:
                 // $scope.zoomLevel = 40;
                $scope.SetAAwindowStoreData(windowviewid,'sliderVal',40);
                break;
            case 6:
                 //$scope.zoomLevel = 25;
                 $scope.SetAAwindowStoreData(windowviewid,'sliderVal',25);
                   break;
            default:
                 // $scope.zoomLevel = zoomValue;
                 $scope.SetAAwindowStoreData(windowviewid,'sliderVal',zoomValue);
        }
    }

    $scope.Setslider = function (windowviewid) {
        var zoomLevel = $scope.GetAAwindowStoreData(windowviewid, 'sliderVal');
        $("#Vslider_" + windowviewid).slider({
            min: 25,
            max: 100,
            value: zoomLevel,
            range: "min",
            orientation: "vertical",
            slide: function (event, ui) {
                // work on touch screen device
                var $ua = navigator.userAgent;
                if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {
                    var targetid = event.target.id;
                    var len=  (targetid).split("_").length;
                    var windviewid = (targetid).split("_")[len-1];
                    changeThumbnailSize(event, ui.value, windviewid);
                }              
            } ,
            change: function (event, ui) {
                var targetid = event.target.id;
                var len=  (targetid).split("_").length;
                var windviewid = (targetid).split("_")[len-1];
                changeThumbnailSize(event, ui.value, windviewid);
            }
            //  ,
            //  stop: function (event, ui) {
            //      //work on click when slide no is not in below case
            //     if (ui.value != 25 || ui.value != 40 || ui.value != 55 || ui.value != 70 || ui.value != 85 || ui.value != 100) {
            //         var targetid = event.target.id;
            //         var len=  (targetid).split("_").length;
            //         var windviewid = (targetid).split("_")[len-1];
            //         changeThumbnailSize(event, ui.value, windviewid);
            //     }

            //  }
        })
        .slider("pips", {
        rest: "label",
        step: "15"
        });
    }

    $scope.setControlsIDs = function (windowviewid) {
        
        $("#aaDetailPageDiv").attr("id", "aaDetailPageDiv_" + windowviewid);
        $("#canvasDiv").attr("id", "canvasAADiv_" + windowviewid);
        $("#canvas").attr("id", "canvasAA_" + windowviewid);
        $("#canvasPaint").attr("id", "canvasPaintAA_" + windowviewid);

        $("#Vslider").attr("id", "Vslider_" + windowviewid);
        $("#selectedPin").attr("id", "selectedPin_" + windowviewid);
        $("#hidePinBtn").attr("id", "hidePinBtn_" + windowviewid);
        $("#allPinBtn").attr("id", "allPinBtn_" + windowviewid);
        $("#bodySystemList").attr("id", "bodySystemList_" + windowviewid);
        $("#dropdownMenu221").attr("id", "dropdownMenu221_" + windowviewid);
        $("#sideBarToggle").attr("id", "sideBarToggle_" + windowviewid);

        $("#navimg").attr("id", "navimg_" + windowviewid);
        $("#navigatorBtn").attr("id", "navigatorBtn_" + windowviewid);
        $("#navigatorDiv").attr("id", "navigatorDiv_" + windowviewid);
        $("#comment-box").attr("id", "comment-box_" + windowviewid);
        $("#multiannotation").attr("id", "multiannotation_" + windowviewid);
        $("#selectedTermName").attr("id", "selectedTermName_" + windowviewid);
        $("#searchListDivAA").attr("id", "searchListDivAA_" + windowviewid);
        $("#searchlangaugeDiv").attr("id", "searchlangaugeDiv_" + windowviewid);
        $("#termlistfilter").attr("id", "termlistfilter_" + windowviewid);
        $("#btnSearchAA").attr("id", "btnSearchAA_" + windowviewid);
        
        $("#modItemImage").attr("id", "modItemImage_" + windowviewid);

    }

    $scope.loadbtnNavigator = function (windowviewid) {
        var navigatorimage = $scope.GetAAwindowStoreData(windowviewid,'navigatorImage');
        if (navigatorimage != undefined && navigatorimage != "") {
            document.getElementById("navimg_" + windowviewid).src = '~/../content/images/aa/images/navigator/' + navigatorimage;
        }
        else {
            $('#navimg_' + windowviewid).css('visibility', 'hidden');
            $('#navigatorBtn_' + windowviewid).css('visibility', 'hidden');
            $('#navigatorDiv_' + windowviewid).css('visibility', 'hidden');
        }

        $("#navigatorBtn_" + windowviewid).on('click', function () {
            $("#navigatorDiv_" + windowviewid).toggle();
        });
    }

    $scope.JsPanelclick = function (windowviewid) {
        //reset option list manager and annotation
        //call when module loaded 
        $rootScope.resetMenuOption();   
        //remove pre event
       // $("#AAImagePanel_" + windowviewid).off("click");

        $("#AAImagePanel_" + windowviewid).on('click', function (event) {
            $timeout(function () {
                $scope.IsSearchVisible=false;       
               
            }, 200);

             var pnlName=event.currentTarget.id;
             $rootScope.resetMenuOptionOnClick(pnlName);
            
             // store image for export while click on panel
             var currentViewTitle = $scope.GetAAwindowStoreData(windowviewid, 'currentViewTitle');
             var imageName = $scope.GetAAwindowStoreData(windowviewid, 'imageName');
             $rootScope.StoreTitleName(currentViewTitle);
             $rootScope.StoreOrgImageName(imageName);
        });

         //hide search data
         $("#topMenuBar .dropdown-toggle").on('click', function (event) {
                
            $timeout(function () {
                $scope.IsSearchVisible=false;       
               
            }, 200);
        });

         //hide search data
        $("#termlistfilter_"+windowviewid).scroll(function (event) {

            $("#termlistfilter_"+windowviewid).focus();
            $scope.IsSearchVisible=true;
        });
        // register event for search list manager
        $(document).on("mouseover", "#termlistfilter_"+windowviewid+ " option", function (e) {
            $('#termlistfilter_'+windowviewid+ ' option[selected="selected"]').removeAttr("style");
            $('#termlistfilter_'+windowviewid+ ' option[selected="selected"]').attr("selected", false);
            $(this).css("background-color", "#3399FF");
            
            $(this).attr("selected", true);
            $scope.IsSearchVisible=true;
            
        });

        $('#termlistfilter_'+windowviewid).unbind('keyup');
        $('#termlistfilter_'+windowviewid).on('keyup', function (event) {
            $('#termlistfilter_'+windowviewid+ ' option[selected="selected"]').removeAttr("style");
            $('#termlistfilter_'+windowviewid+ ' option[selected="selected"]').attr("selected", false);
            $(this.selectedOptions[0]).attr("selected", true);
            $scope.IsSearchVisible=true;
        });     

        $('#termlistfilter_'+windowviewid).unbind('keypress');
        $('#termlistfilter_'+windowviewid).on('keypress', function (e) {
            if ($('#termlistfilter_'+windowviewid+ ' option[selected="selected"]').attr("id") == "undefined") {
                return false;
            }
            else {
                if ($('#termlistfilter_'+windowviewid+ ' option[selected="selected"]').attr("id")) {
                    if (e.keyCode == 13) {
                        onSearchItemSelection($('#termlistfilter_'+windowviewid+ ' option[selected="selected"]').attr("id"),false);                         
                    }
                }
            }
        });
        
    }
    
    $scope.langSearchLoad= function(windowviewid)
    {
        $('#searchlangaugeDiv_'+windowviewid).empty();
        $('#searchlangaugeDiv_'+windowviewid).css("display","none");
        var languageArray = $rootScope.lexiconLanguageArray;

        $("#btnSearchAA_"+windowviewid).parent().css("margin-right", "10px");
         
        if(languageArray.length>1)
        {
            $("#btnSearchAA_"+windowviewid).parent().css("margin-right", "-10px");
            $('#searchlangaugeDiv_'+windowviewid).css("display","block");
           var option='';
           for (var i = 0; i <= languageArray.length - 1; i++) {
               option=option+'<option value="' + languageArray[i].id + '">' + languageArray[i].language + '</option>';                 
           }
           var $all = $('#searchlangaugeDiv_'+windowviewid).append(               
               '<div class="btn-group col-sm-3 col-xs-3 col-md-2" style="margin-right:-10px;padding-left:0px;">'+
               '<select class="form-control"  id="searchLanguageLm_'+windowviewid+'" onblur="hideSearchList(event)" onchange="changeaaSearchLanguage(event)" style="height:30px;padding:4px 12px">'+
                option+
                '</select>'+
               '</div>'
               )           
               $compile($all)($scope); 
            
        }

        $scope.changeSearchText(windowviewid)
    }

    $scope.setPreClickBtnCss = function (windowviewid) {
        if ($scope.aaOpenInOtherModules.showAllPins != undefined && $scope.aaOpenInOtherModules.showAllPins) {
            $scope.ToolBoxStyle("ShowAllPin", windowviewid);
        }
        else if ($scope.aaOpenInOtherModules.showSelectedPins != undefined && $scope.aaOpenInOtherModules.showSelectedPins) {
            $scope.ToolBoxStyle("ShowSelectedPin", windowviewid);
        }
        else if ($scope.aaOpenInOtherModules.hideAllPins != undefined && $scope.aaOpenInOtherModules.hideAllPins) {
            $scope.ToolBoxStyle("HidePin", windowviewid);
        }
    }

    
    function changeThumbnailSize(event, value,windowviewid) {
        var scope = angular.element(document.getElementById("aaBodyView")).scope();
        scope.$apply(function () {
            $scope.SetAAwindowStoreData(windowviewid,'sliderVal',value)
            scope.removeSpeechBubble(windowviewid);
            var relativeWidth = 0;
            var relativeHeight = 0;
          //  if (value == 25 || value == 40 || value == 55 || value == 70 || value == 85 || value == 100) {
                $("#listManager").css("display", "none");
                $("#optionsListManagerTab").removeClass("active");
                $rootScope.UnsaveCurriculum = true;

                var ViewImageWidth = $scope.GetAAwindowStoreData(windowviewid, 'canvasImageWidth');
                var ViewImageHeight = $scope.GetAAwindowStoreData(windowviewid, 'canvasImageHeight');

                relativeWidth = (ViewImageWidth)*(value/100);
                relativeHeight = (ViewImageHeight)*(value/100);
                $scope.SetAAwindowStoreData(windowviewid,'sliderPercentValue',(value/100));

                $("#modItemImage_"+windowviewid).css("width", relativeWidth + "px");
                $("#modItemImage_"+windowviewid).css("height", relativeHeight + "px");
                                    
                //get last zindex
                var zindex= $("#aaDetailViewCanvas_"+windowviewid).css("z-index");
                $("#aaDetailViewCanvas_"+windowviewid).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 = "aaDetailViewCanvas_"+windowviewid;
                canvas.className = 'aaCanvas';
                canvas.height =parseInt(relativeHeight)+20;
                canvas.width =parseInt(relativeWidth)+50;
                canvas.style.left = '0px';
                canvas.style.top = '0px';
                canvas.style.position = "absolute";
                canvas.style.zIndex = zindex;

                $("#canvasAADiv_" + windowviewid).append(canvas);
                
                var pnlName='AAImagePanel_' + windowviewid;
                var canvasDiv='canvasAADiv_' + windowviewid;
                var canvasDraw='canvasAA_' + windowviewid;
                var canvasPaint='canvasPaintAA_' + windowviewid;
                $scope.SetAAwindowStoreData(windowviewid, 'annotationData', {shapeStates:[],paintCanvasState:[]});
               
                $('#' + canvasDraw).removeLayers();//remove all old shape                     
                $("#" + canvasPaint).sketch().actions = [];//remove old paint data 

                var extraheight=$('#aastickeyarea').height()+5;
                var extrawidth=$('.tools').width()+15;
                var canvasDIvHeight = $('#AAImagePanel_' + windowviewid+ " .jsPanel-content").height()-extraheight;
                var canvasDIvWidth = $('#AAImagePanel_' + windowviewid+ " .jsPanel-content").width()-extrawidth;
                            
                var demoData= {shapeStates:[],paintCanvasState:[]};        
                $rootScope.setAADAPanelCordinate(windowviewid,0,pnlName,canvasDiv,canvasDraw,canvasPaint,canvasDIvHeight,canvasDIvWidth,demoData);
                              
                $scope.SetAAwindowStoreData(windowviewid,'isSliderChange',true);
                var toolbtnID = '';

                if ($("#allPinBtn_" + windowviewid).hasClass("btn-primary")) {
                    toolbtnID="allPinBtn_"+windowviewid;
                }
                else if ($("#selectedPin_" + windowviewid).hasClass("btn-primary")) {
                    toolbtnID="selectedPin_"+windowviewid;
                }
                else if ($("#hidePinBtn_" + windowviewid).hasClass("btn-primary")) {
                    toolbtnID="hidePinBtn_"+windowviewid;
                }


                $scope.SetAAwindowStoreData(windowviewid,'isSelectedPinBtnClickedAftrSliderCange',true);

                switch (toolbtnID) {
                    case "hidePinBtn_"+windowviewid:
                        break;
                    case "allPinBtn_"+windowviewid:
                        if ($("#bodySystemList_" + windowviewid + " li.activeAASystemSelect a").attr("id") != undefined) {
                            if ($rootScope.isCallFromOtherModule != undefined && $rootScope.isCallFromOtherModule == true) {
                                var SelectedSystemID = $scope.GetAAwindowStoreData(windowviewid, 'SelectedSystemID');
                                if (SelectedSystemID != undefined) {
                                    scope.showSelectedSystemPins(SelectedSystemID, windowviewid);
                                }
                                else {
                                    scope.showSelectedSystemPins($("#bodySystemList_" + windowviewid + " li.activeAASystemSelect a").attr("id"), windowviewid);
                                }
                            }
                            else {
                                scope.showSelectedSystemPins($("#bodySystemList_" + windowviewid + " li.activeAASystemSelect a").attr("id"), windowviewid);
                            }

                        }
                        else {
                            scope.showAllPins(windowviewid);
                        }
                        break;
                    case "selectedPin_"+windowviewid:
                        scope.showAllPins(windowviewid,true);                      
                        break;
                }

                //redraw annotation
                $scope.SetAAwindowStoreData(windowviewid,'isShowBodyWithCBPinData',true);
                $scope.ShowCBAnnotation(windowviewid);
           // }
        });
    }

    $scope.highlightBodySystemList = function (windowviewid) {

        var SelectedSystemID=  $scope.GetAAwindowStoreData(windowviewid,'SelectedSystemID');
        var bodySystemName=  $scope.GetAAwindowStoreData(windowviewid,'bodySystemName');
        var bodySystemNames = bodySystemName.trim().split(/\s*,\s*/);

            var bodySystemListObj = document.getElementById("bodySystemList_" + windowviewid).getElementsByTagName("a");
            var bodySystemListlength = bodySystemListObj.length;
            for (var i = 0; i < bodySystemListlength; i++) {
                //var boldTag = lis[i];
                for (var j = 0; j < bodySystemNames.length; j++) {
                    if ((bodySystemListObj[i].innerHTML) == (bodySystemNames[j])) {
                        $(bodySystemListObj[i].parentElement).removeClass("disabledSelectedSystem");

                    }
                    $(bodySystemListObj[i].parentElement).removeClass("activeAASystemSelect");
                    //add class for selected element
                    if (i == SelectedSystemID) {
                        $(bodySystemListObj[i].parentElement).addClass("activeAASystemSelect");
                    }
                }

            }
    }

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

   
    // curriculum function to load data
    $scope.loadAAonCBData = function (windowviewid) {
            
            $scope.SetAAwindowStoreData(windowviewid,'isShowBodyWithCBPinData',true);

            var CBselectedpinCordinate=$scope.GetAAwindowStoreData(windowviewid,'CBselectedpinCordinate');

            var clickedPins=$scope.GetAAwindowStoreData(windowviewid,'clickedPins');
            var activePinArray=$scope.GetAAwindowStoreData(windowviewid,'activePinArray');
            var selectedPins=[];
            if ($scope.aaOpenInOtherModules.selectedPins != undefined) {
                for (var i = 0; i < $scope.aaOpenInOtherModules.selectedPins.length; i++) {

                    selectedPins = $scope.GetAAwindowStoreData(windowviewid, 'selectedPins');

                    var pinid = $scope.aaOpenInOtherModules.selectedPins[i];
            
                    var pinvalue = 'PinArc_' + pinid;
                    var isFound = jQuery.inArray(pinvalue, activePinArray)
                    if (isFound == -1) {
                        activePinArray.push(pinvalue);
                        clickedPins.push({ 'id': pinid });
                       
                        if (selectedPins != undefined) {
                            selectedPins.push(pinid);
                            $scope.SetAAwindowStoreData(windowviewid, 'selectedPins', selectedPins);
                        }
                    }
                }
                
            }

            if ($scope.aaOpenInOtherModules.selectedCallouts != undefined) {
                for (var i = 0; i < $scope.aaOpenInOtherModules.selectedCallouts.length; i++) {
                    var pinId = $scope.aaOpenInOtherModules.selectedCallouts[i].pinId;
                    if (pinId == undefined) {
                        CBselectedpinCordinate.push(
                               {
                                   "hy": $scope.aaOpenInOtherModules.selectedCallouts[i].hy,
                                   "ly": $scope.aaOpenInOtherModules.selectedCallouts[i].ly,
                                   "hx": $scope.aaOpenInOtherModules.selectedCallouts[i].hx,
                                   "lx": $scope.aaOpenInOtherModules.selectedCallouts[i].lx,
                                   "pinId": undefined
                               });

                    }
                    else {
                        CBselectedpinCordinate.push(
                                   {
                                       "hy": $scope.aaOpenInOtherModules.selectedCallouts[i].hy,
                                       "ly": $scope.aaOpenInOtherModules.selectedCallouts[i].ly,
                                       "hx": $scope.aaOpenInOtherModules.selectedCallouts[i].hx,
                                       "lx": $scope.aaOpenInOtherModules.selectedCallouts[i].lx,
                                       "pinId": $scope.aaOpenInOtherModules.selectedCallouts[i].pinId
                                   });

                    }

                }
            }


         if ($scope.aaOpenInOtherModules.showSelectedPins != undefined && $scope.aaOpenInOtherModules.showSelectedPins)
           {
            //show selected pin

            $scope.activePinOnLayerChange(windowviewid);
            $scope.showSelectedPins(windowviewid);
                $timeout(function () {

                    $scope.ShowCBAnnotation(windowviewid);

                }, 1000);

        }
        else if ($scope.aaOpenInOtherModules.showAllPins != undefined && $scope.aaOpenInOtherModules.showAllPins)
        {
            //Show all pins

            $scope.activePinOnLayerChange(windowviewid);
            $scope.showAllPinsAfterHide(windowviewid);

                $timeout(function () {

                $scope.ShowCBAnnotation(windowviewid);

                }, 500);
        }
        else if ($scope.aaOpenInOtherModules.hideAllPins != undefined && $scope.aaOpenInOtherModules.hideAllPins)
        {
            //hide all pins

            $rootScope.hidePins(windowviewid);
             $timeout(function () {

                 $scope.ShowCBAnnotation(windowviewid);
                 $scope.hideSpeechBubble(windowviewid);

                }, 500);
        }
    }

    $scope.ShowCBAnnotation=function(windowviewid)
    {

        var clickedPins=$scope.GetAAwindowStoreData(windowviewid,'clickedPins');
        var aaPinData =  $scope.GetAAwindowStoreData(windowviewid,'aaPinData');
        var CBselectedpinCordinate = $scope.GetAAwindowStoreData(windowviewid, 'CBselectedpinCordinate');

        if (CBselectedpinCordinate.length >0)
        {
            var pinId = CBselectedpinCordinate[0].pinId;

            if (pinId == undefined)
            {
                angular.forEach(clickedPins, function (value, key) {

                    if (aaPinData != null && aaPinData.length > 0) {

                        var pinData = new jinqJs()
                                            .from(aaPinData)
                                            .where("_PinId == " + value.id)
                                            .select();


                        var headX = (parseInt(pinData[0]._HeadX));
                        var headY = (parseInt(pinData[0]._HeadY));
                        var pinId = (parseInt(pinData[0]._PinId));

                        // match pin data by hx and hy CB cordinate to show annotation
                        var matchdata = new jinqJs()
                                                 .from(CBselectedpinCordinate)
                                                 .where("hx == " + headX, "hy == " + headY)
                                                 .select();

                        if (matchdata.length > 0) {

                            var updatedata = new jinqJs()
                                                 .from(CBselectedpinCordinate)
                                                  .update(function (coll, index) { coll[index].pinId = pinId; })
                                                   .at("hx == " + headX, "hy == " + headY);

                            $scope.MultiLanguageAnnationArray = [];

                            $scope.GetAnnotationBasedOnActualTermNo(pinData[0]._TermId, windowviewid);

                            $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, matchdata[0].lx, matchdata[0].ly, pinId, false, false, false, windowviewid);
                        }
                    }

                });
            }
            else {

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

                    if (aaPinData != null && aaPinData.length > 0) {

                        var pinData = new jinqJs()
                                            .from(aaPinData)
                                            .where("_PinId == " + value.id)
                                            .select();


                        var headX = (parseInt(pinData[0]._HeadX));
                        var headY = (parseInt(pinData[0]._HeadY));
                        var pinId = (parseInt(pinData[0]._PinId));

                        // match pin data by hx and hy CB cordinate to show annotation
                        var matchdata = new jinqJs()
                                                 .from(CBselectedpinCordinate)
                                                 .where("pinId == " + pinId)
                                                 .select();

                        if (matchdata.length > 0) {
                            $scope.MultiLanguageAnnationArray = [];

                            $scope.GetAnnotationBasedOnActualTermNo(pinData[0]._TermId, windowviewid);

                            $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, matchdata[0].lx, matchdata[0].ly, pinId, false, false, false, windowviewid);
                        }
                    }

                });
            }

        }

       $scope.SetAAwindowStoreData(windowviewid,'isShowBodyWithCBPinData',false);
       $rootScope.AAWindowLoadComplete=true;

    }

    $scope.ToolBoxStyle=function(Notification,windowviewid)
    {

        if(Notification=="ShowSelectedPin")
        {

            $("#selectedPin_" + windowviewid).removeClass("btn-black");
            $("#selectedPin_" + windowviewid).addClass("btn-primary");

            if (!$("#hidePinBtn_" + windowviewid).hasClass("btn-black")) {
                $("#hidePinBtn_" + windowviewid).addClass("btn-black");
            }
            if ($("#hidePinBtn_" + windowviewid).hasClass("btn-primary")) {
                $("#hidePinBtn_" + windowviewid).removeClass("btn-primary");
            }

            if (!$("#allPinBtn_" + windowviewid).hasClass("btn-black")) {
                $("#allPinBtn_" + windowviewid).addClass("btn-black");
            }

            if ($("#allPinBtn_" + windowviewid).hasClass("btn-primary")) {
                $("#allPinBtn_" + windowviewid).removeClass("btn-primary");
            }

            if (!$("#dropdownMenu221_" + windowviewid).hasClass("aaSystemDisable")) {
                $("#dropdownMenu221_" + windowviewid).addClass("aaSystemDisable");
            }


        }
        else if(Notification=="ShowAllPin")
        {
            $("#allPinBtn_" + windowviewid).removeClass("btn-black");
            $("#allPinBtn_" + windowviewid).addClass("btn-primary");

            if (!$("#hidePinBtn_" + windowviewid).hasClass("btn-black")) {
                $("#hidePinBtn_" + windowviewid).addClass("btn-black");
            }
            if ($("#hidePinBtn_" + windowviewid).hasClass("btn-primary")) {
                $("#hidePinBtn_" + windowviewid).removeClass("btn-primary");
            }

            if (!$("#selectedPin_" + windowviewid).hasClass("btn-black")) {
                $("#selectedPin_" + windowviewid).addClass("btn-black");
            }

            if ($("#selectedPin_" + windowviewid).hasClass("btn-primary")) {
                $("#selectedPin_" + windowviewid).removeClass("btn-primary");
            }

            $("#dropdownMenu221_" + windowviewid).removeClass("aaSystemDisable");

        }
        else if(Notification=="HidePin")
        {

            $("#hidePinBtn_" + windowviewid).removeClass("btn-black");
            $("#hidePinBtn_" + windowviewid).addClass("btn-primary");

            if (!$("#allPinBtn_" + windowviewid).hasClass("btn-black")) {
                $("#allPinBtn_" + windowviewid).addClass("btn-black");
            }
            if ($("#allPinBtn_" + windowviewid).hasClass("btn-primary")) {
                $("#allPinBtn_" + windowviewid).removeClass("btn-primary");
            }

            if (!$("#selectedPin_" + windowviewid).hasClass("btn-black")) {
                $("#selectedPin_" + windowviewid).addClass("btn-black");
            }

            if ($("#selectedPin_" + windowviewid).hasClass("btn-primary")) {
                $("#selectedPin_" + windowviewid).removeClass("btn-primary");
            }

            if (!$("#dropdownMenu221_" + windowviewid).hasClass("aaSystemDisable")) {
                $("#dropdownMenu221_" + windowviewid).addClass("aaSystemDisable");
            }

        }

    }

    $scope.showAllPins = function (windowviewid,islayerChange) {      
        $scope.SetAAwindowStoreData(windowviewid,'allPinDataArray',[]);
        var isSliderChange=$scope.GetAAwindowStoreData(windowviewid,'isSliderChange');
        var aaPinData = $scope.GetAAwindowStoreData(windowviewid,'aaPinData');

        if (aaPinData != null && aaPinData.length > 0) { 
            var allPinDataArray=$scope.GetAAwindowStoreData(windowviewid,'allPinDataArray');  
            var selectedSystemName=$scope.GetAAwindowStoreData(windowviewid,'selectedSystemName');  
            var SelectedSystemID=  $scope.GetAAwindowStoreData(windowviewid,'SelectedSystemID');             
            angular.forEach(aaPinData, function (value, key) {
                if(SelectedSystemID=="0")
                {
                    allPinDataArray.push(value._PinId);
                    $scope.drawStaticPinsOnImage('aaDetailViewCanvas_'+windowviewid, value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY,windowviewid)
                }
                else
                {
                    if (value._BodySystemId == SelectedSystemID) {
                        allPinDataArray.push(value._PinId);
                        $scope.drawStaticPinsOnImage('aaDetailViewCanvas_'+windowviewid, value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY,windowviewid)
                    }
                }
               
               
            })
            
            if (isSliderChange == true) {
                $scope.activePinOnLayerChange(windowviewid);              
            }
            // true only for slider change
            if (islayerChange == true) {
                $scope.activePinOnSliderChange(windowviewid);              
            }

            $scope.EnableAAUI(windowviewid);
        }
       
    }

    $scope.loadAllPinFirstTime=function(windowviewid)
    {
        var imageName =  $scope.GetAAwindowStoreData(windowviewid,'imageName');
        var promise = ModuleService.getPinDataForImage(imageName)
        .then(
          function (result) {
              //load navigator image
              var navigatorimage= result.data.Root._NavigatorImage;
              if (navigatorimage != undefined && navigatorimage!="") {
                  $scope.SetAAwindowStoreData(windowviewid,'navigatorImage',navigatorimage);                   
              }              
              var aaPinData=result.data.Root.Item;
             
              if (aaPinData != null && aaPinData.length > 0) {                                   
                  $scope.SetAAwindowStoreData(windowviewid,'aaPinData',aaPinData);
              }
          },
           function (error) {
            $scope.EnableAAUI(windowviewid);
            console.log(' error in showAllPins: ' + error.statusText);             
           })
    }

    $scope.FilterByImage = function (moduleId, query,windowviewid) {       
        $scope.DisableAAUI(windowviewid);
        if (windowviewid == undefined) {
            windowviewid = $rootScope.MULTI_VIEW_ID;
        }

        setTimeout(function(){
            $scope.FilterSearch(moduleId, query,windowviewid);
        },200)
       
    }

    $scope.FilterSearch = function (moduleId, query,windowviewid) {
        $scope.filterstring = true;

        $scope.SetAAwindowStoreData(windowviewid,'moduleName',"ATLAS_ANATOMY");
        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(Modules[moduleId].Name)
           .then(
             function (result) {
                 $scope.moduleLandingData = result;
                 $scope.selectedAAListViewData = new jinqJs()
                                                     .from($scope.moduleLandingData.data.root.Item)
                                                     .orderBy([{ field: '_Title', sort: 'asc' }])
                                                     .select();

                 $('#grid-view').empty();
                
                 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>');
                 }

                 $timeout(function () {
                    $scope.EnableAAUI(windowviewid);
                      $rootScope.ResetGridListLength();
                     }, 500);
             },
              function (error) {
                  $timeout(function () { $scope.EnableAAUI(windowviewid); }, 500);
                  console.log(' error: ' + error.statusText);
              }
             )
    }

    $rootScope.ResetGridListLength=function()
    {
        var innerheight =$(window).innerHeight();

        var srchHeight=$('.breadcrumb').height();
        var gridheight=innerheight-srchHeight-135;
        var listheight=innerheight-srchHeight-358;
        $('#grid-view').css({"height":gridheight,"overflow":"auto","min-height":"160px"});
        $('#ListViewDiv').css({"height":listheight,"overflow":"auto","min-height":"100px"});
      
    }

    $scope.Reset = function (moduleId, query,windowviewid) {
        $scope.DisableAAUI(windowviewid);
        if(windowviewid==undefined) // call from also home controller list manager
        windowviewid= $rootScope.MULTI_VIEW_ID;

        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", '');

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

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

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

        $scope.filterstring = false;

        setTimeout(function(){
            $scope.FilterSearch(1, query,windowviewid)
        },200)
       
    }

    $scope.showSelectedSystemPins = function (event,windowviewid) {

        if (typeof event == "object") {
            var len=  (event.target.parentElement.parentElement.id).split("_").length;
            var windowviewid = (event.target.parentElement.parentElement.id).split("_")[len-1];
            
            $('#selectedTermName_' + windowviewid).val('');
            $("#selectedTermName_" + windowviewid).attr("name", '0');
            if (event.currentTarget.title == $("#bodySystemList_" + windowviewid + " li.activeAASystemSelect a").attr("title")) {

            }
            else {
                $rootScope.UnsaveCurriculum =true;
                var id = event.currentTarget.id;
                $scope.SetAAwindowStoreData(windowviewid,'typeOfEvent',typeof event);
                var SelectedSystemID = event.currentTarget.id;
                var SelectedSystemTitle = event.currentTarget.title;
                if (event.currentTarget.title == "Current Structure") {
                    $scope.SetAAwindowStoreData(windowviewid, 'SelectedSystemID', 0);
                }
                else {
                    $scope.SetAAwindowStoreData(windowviewid,'clickedPins',[]);
                    $scope.SetAAwindowStoreData(windowviewid, 'activePinArray', []);
                    $scope.SetAAwindowStoreData(windowviewid, 'selectedPins', []);
                    $scope.SetAAwindowStoreData(windowviewid, 'SelectedSystemID', id);
                    $scope.SetAAwindowStoreData(windowviewid, 'CBselectedpinCordinate', []);
                }

                var isHidePinBtnClicked=$scope.GetAAwindowStoreData(windowviewid,'isHidePinBtnClicked');

                $scope.SetAAwindowStoreData(windowviewid,'isBodySystemSelected',true);

                var bodySystemListObj = document.getElementById("bodySystemList_" + windowviewid ).getElementsByTagName("a");
                var bodySystemListlength = bodySystemListObj.length;
                for (var i = 0; i < bodySystemListlength; i++) {

                    $(bodySystemListObj[i].parentElement).removeClass("activeAASystemSelect");

                   //add class for selected element
                   if(i==SelectedSystemID)
                   {
                    $(bodySystemListObj[i].parentElement).addClass("activeAASystemSelect");
                   }
                }
                $scope.DisableAAUI(windowviewid);
               
                $scope.removeSpeechBubble(windowviewid);
                if (SelectedSystemID == "0") {

                    $scope.SetAAwindowStoreData(windowviewid,'selectedSystemName',null);

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

                    var selectedSystemName = SelectedSystemTitle;
                    $scope.SetAAwindowStoreData(windowviewid,'selectedSystemName',selectedSystemName);
                        //on gettng all required data, draw pins
                        var aaPinData =  $scope.GetAAwindowStoreData(windowviewid,'aaPinData');

                        if (aaPinData != null && aaPinData.length > 0) {

                            var selectedSystemPinData = new jinqJs()
                                    .from(aaPinData)
                                    .where("_BodySystemName == " + selectedSystemName)
                                    .select();
                            $scope.SetAAwindowStoreData(windowviewid,'selectedSystemPinData',selectedSystemPinData);

                            if (isHidePinBtnClicked) {
                                $scope.showAllPinsAfterHide(windowviewid);

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

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

                                        if (aaPinDataValue._BodySystemName != selectedSystemName) {
                                            $scope.removePin('aaDetailViewCanvas_'+windowviewid, aaPinDataValue._PinId,windowviewid);
                                        }

                                    })

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

                                    //  make all pin heads grey
                                    var radial = $('#aaDetailViewCanvas_'+windowviewid).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_'+windowviewid).setLayers({
                                        fillStyle: radial,
                                    }).drawLayers();

                                    //show annotation on first pin of the sysyem
                                    $scope.showAnnotation(selectedSystemPinData, false, false, false,false,windowviewid);
                                    var annotationTopPos = $(".common-drag").css("top").split("p");
                                    $("#canvasAADiv_" + windowviewid).scrollTop(annotationTopPos[0]);
                                }
                            }
                        }

                }


            }
        }

        else {
            var SelectedSystemID = event;
            $scope.SetAAwindowStoreData(windowviewid,'typeOfEvent',typeof event);
            var bodySystemListObj = document.getElementById("bodySystemList_" + windowviewid ).getElementsByTagName("a");
            var bodySystemListlength = bodySystemListObj.length;
            for (var i = 0; i < bodySystemListlength; i++) {

                $(bodySystemListObj[i].parentElement).removeClass("activeAASystemSelect");

                //add class for selected element
                if(i==SelectedSystemID)
                {
                 $(bodySystemListObj[i].parentElement).addClass("activeAASystemSelect");
                }
            }

            var SelectedSystemTitle = $("#bodySystemList_" + windowviewid + " li.activeAASystemSelect a").attr("title");

            $scope.DisableAAUI(windowviewid);
           
            var isHidePinBtnClicked=$scope.GetAAwindowStoreData(windowviewid,'isHidePinBtnClicked');
            $scope.removeSpeechBubble(windowviewid);
            if (SelectedSystemID == "0") {

                $scope.SetAAwindowStoreData(windowviewid,'selectedSystemName',null);
                if (isHidePinBtnClicked) {
                    $scope.showAllPinsAfterHide(windowviewid);
                }
                else {
                    $scope.showAllPins(windowviewid);
                }
            }
            else {
                var selectedSystemName = SelectedSystemTitle;
                $scope.SetAAwindowStoreData(windowviewid,'selectedSystemName',selectedSystemName);
                    //on gettng all required data, draw pins
                    var aaPinData =  $scope.GetAAwindowStoreData(windowviewid,'aaPinData');
                    if (aaPinData != null && aaPinData.length > 0) {

                        var selectedSystemPinData = new jinqJs()
                            .from(aaPinData)
                            .where("_BodySystemName == " + selectedSystemName)
                            .select();
                    
                    var oldSelectedSystemId = $scope.GetAAwindowStoreData(windowviewid, 'SelectedSystemID');
                    if(oldSelectedSystemId!=SelectedSystemID)
                    {
                        $scope.SetAAwindowStoreData(windowviewid,'clickedPins',[]);
                        $scope.SetAAwindowStoreData(windowviewid, 'activePinArray', []);
                        $scope.SetAAwindowStoreData(windowviewid, 'selectedPins', []);
                        $scope.SetAAwindowStoreData(windowviewid, 'SelectedSystemID', SelectedSystemID);
                        $scope.SetAAwindowStoreData(windowviewid, 'CBselectedpinCordinate', []);
                    }
                        var clickedPins=$scope.GetAAwindowStoreData(windowviewid,'clickedPins');
                        if(clickedPins.length>0)
                        {
                          
                            var pintToshowSelected = new jinqJs()
                            .from(selectedSystemPinData)
                            .where("_PinId == " + clickedPins[0].id)
                            .select();
                        }
                        else{
                            var pintToshowSelected=selectedSystemPinData;
                        }
                        
                        
                        $scope.SetAAwindowStoreData(windowviewid,'selectedSystemPinData',selectedSystemPinData);

                        if (isHidePinBtnClicked) {
                            $scope.showAllPinsAfterHide(windowviewid);

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

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

                                    if (aaPinDataValue._BodySystemName != selectedSystemName)
                                        $scope.removePin('aaDetailViewCanvas_'+windowviewid, aaPinDataValue._PinId,windowviewid);
                                })

                                angular.forEach(selectedSystemPinData, function (value, key) {
                                    $scope.drawStaticPinsOnImage('aaDetailViewCanvas_'+windowviewid, value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY,windowviewid)
                                });
                                 //  make all pin heads grey
                                 var radial = $('#aaDetailViewCanvas_'+windowviewid).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_'+windowviewid).setLayers({
                                    fillStyle: radial,
                                }).drawLayers();
                                //show annotation on first pin of the sysyem
                                $scope.showAnnotation(pintToshowSelected, false, false, false,true,windowviewid);
                            }
                        }
                    }

            }


        }


    }

    $scope.showAnnotation = function (selectedPinData, isCtrlPressed, isPinClicked, isItemSearched,isResize,windowviewid) {

        var isSameTermWithMultiPin = false;
        var firstPinId = selectedPinData[0]._PinId;
        var pinTermNumber = selectedPinData[0]._TermId;
        var isBodySystemSelected=  $scope.GetAAwindowStoreData(windowviewid,'isBodySystemSelected');

        //check if other pin have same termNumber
        var aaPinData =  $scope.GetAAwindowStoreData(windowviewid,'aaPinData');
        if (aaPinData != null && aaPinData.length > 0) {

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


            $scope.MultiLanguageAnnationArray = [];

            $scope.GetAnnotationBasedOnActualTermNo(pinTermNumber,windowviewid);

            if (isCtrlPressed) {

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

                        var len=  (existingSpeechBubble[i].id).split("_").length;
                        var winid = (existingSpeechBubble[i].id).split("_")[len-1];
                        if(winid==windowviewid)
                        {
                            existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
                                //make all pin heads grey
                            var radial = $('#aaDetailViewCanvas_'+windowviewid).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_'+windowviewid).setLayers({
                                fillStyle: radial,
                            }).drawLayers();
                        }

                    }

                    var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
                    for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
                        var len=  (existingSpeechBubbleLine[i].id).split("_").length;
                        var winid = (existingSpeechBubbleLine[i].id).split("_")[len-1];
                        if(winid==windowviewid)
                        {
                        existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
                        }
                    }
                    var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
                    for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
                        var len=  (speechBubbleDraggedLine[i].id).split("_").length;
                        var winid = (speechBubbleDraggedLine[i].id).split("_")[len-1];
                        if(winid==windowviewid)
                        {
                        speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
                        }
                    }
                }
            }
            if (pinDataWithFirstTermNumber.length > 1) {
                isSameTermWithMultiPin = true;
            }
            var clickedPins=$scope.GetAAwindowStoreData(windowviewid,'clickedPins');
            var activePinArray=$scope.GetAAwindowStoreData(windowviewid,'activePinArray');
            var selectedPins=$scope.GetAAwindowStoreData(windowviewid,'selectedPins');
          
            angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
                if (isBodySystemSelected == true) {                 
                    $scope.SetAAwindowStoreData(windowviewid,'isBodySystemSelected',false);
                }
                var headX = (parseInt(value._HeadX));
                var headY = (parseInt(value._HeadY));
    
                var pinvalue='PinArc_' +  value._PinId;
                var isFound = jQuery.inArray(pinvalue, activePinArray)
                if (isFound == -1) {
                    activePinArray.push(pinvalue);
                    clickedPins.push({ 'id': value._PinId });  
                    selectedPins.push(value._PinId);
                    
                    //Save Cordinate for show annotation as per Pin
                    var CBselectedpinCordinate = $scope.GetAAwindowStoreData(windowviewid, 'CBselectedpinCordinate');
                    CBselectedpinCordinate.push(
                                            {
                                                "hy": headY,
                                                "ly": headY+10,
                                                "hx": headX,
                                                "lx": headX+30,
                                                "pinId": value._PinId
                                            });

                }
             
                // remove annotation/speechBubble while resize
                if(isResize)
                {
                    $scope.removeSpeechBubble(windowviewid);
                }
                else
                {
                    $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10,0,0, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin,windowviewid);

                }          

            })

        }
        $scope.EnableAAUI(windowviewid);
        
    }

    $scope.removeSpeechBubble = function (windowviewid) {

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

                var len=  (speechBubbles[j].id).split("_").length;
                var winid = (speechBubbles[j].id).split("_")[len-1];
                if(winid==windowviewid)
                {
                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++) {
                var len=  (speechBubbleLines[j].id).split("_").length;
                var winid = (speechBubbleLines[j].id).split("_")[len-1];
                if(winid==windowviewid)
                {
                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++) {
                var len=  (speechBubbleDraggedLines[j].id).split("_").length;
                var winid = (speechBubbleDraggedLines[j].id).split("_")[len-1];
                if(winid==windowviewid)
                {
                    speechBubbleDraggedLines[j].parentNode.removeChild(speechBubbleDraggedLines[j]);
                }


            }
        }
    };

    $scope.showSpeechBubble = function (windowviewid) {

        //clear speech bubbles
        var speechBubbles = $("div[id*='speechBubble']");
        if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
            for (var j = 0; j < speechBubbles.length; j++) {
                var len=  (speechBubbles[j].id).split("_").length;
                var winid = (speechBubbles[j].id).split("_")[len-1];
                if(winid==windowviewid)
                {
                  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++) {
                var len=  (speechBubbleLines[j].id).split("_").length;
                var winid = (speechBubbleLines[j].id).split("_")[len-1];
                if(winid==windowviewid)
                {
                    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++) {
                var len=  (speechBubbleDraggedLines[j].id).split("_").length;
                var winid = (speechBubbleDraggedLines[j].id).split("_")[len-1];
                if(winid==windowviewid)
                {
                    document.getElementById(speechBubbleDraggedLines[j].id).style.visibility = 'visible';
                }


            }
        }
    };

    $scope.hideSpeechBubble = function (windowviewid) {
        //clear speech bubbles
        var speechBubbles = $("div[id*='speechBubble']");
        if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
            for (var j = 0; j < speechBubbles.length; j++) {
                var len=  (speechBubbles[j].id).split("_").length;
                var winid = (speechBubbles[j].id).split("_")[len-1];
                if(winid==windowviewid)
                {
                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++) {
                var len=  (speechBubbleLines[j].id).split("_").length;
                var winid = (speechBubbleLines[j].id).split("_")[len-1];
                if(winid==windowviewid)
                {
                    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++) {
                var len=  (speechBubbleDraggedLines[j].id).split("_").length;
                var winid = (speechBubbleDraggedLines[j].id).split("_")[len-1];
                if(winid==windowviewid)
                {
                    document.getElementById(speechBubbleDraggedLines[j].id).style.visibility = 'hidden';
                }

            }
        }
    };


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

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

        $scope.createSpeechBubbleBasedOnAnnotationLength(x, y,lx,ly, PinId,windowviewid);

        // birendra
        //
        $scope.ShowHideAnnotationText(windowviewid);

        if ($("#hidePinBtn_" + windowviewid).hasClass("btn-primary")) {

            $scope.hideSpeechBubble(windowviewid);           
        }

    }

    $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, lx, ly, PinId, windowviewid) {

       var prctValue = $scope.GetAAwindowStoreData(windowviewid,'sliderPercentValue');
        x = x * prctValue;
        y = y * prctValue;
        if ($("#canvasAADiv_" + windowviewid).find("div").length > 0) {
            $("#canvasAADiv_" + windowviewid).find("div").each(function () {
                var str = $(this).attr("id");
                if (str.substr(0, 16) == "speechBubbleLine") {
                    str = (str).split("_")[0];

                    var res = str.substr(16);
                    if (res == PinId) {
                        $scope.isAnnotationDivAlreadyPresent = false;
                    }
                    else {
                        $scope.isAnnotationDivAlreadyPresent = true;
                    }
                }
            });
        }
        else {
            $scope.isAnnotationDivAlreadyPresent = true;
        }
        if ($scope.isAnnotationDivAlreadyPresent == true) {

            var isShowBodyWithCBPinData=$scope.GetAAwindowStoreData(windowviewid,'isShowBodyWithCBPinData');

            var speechBubbleHTML = '<div id="speechBubbleLine' + PinId +'_'+windowviewid+ '" class="singleLineAnnotation" style="z-index:13000"></div>'
                + '<div id="speechBubble' + PinId +'_'+windowviewid+ '" class="common-drag" style="height:auto!important;z-index:13000;margin-left:0px;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 +'_'+windowviewid+ '" 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 +'_'+windowviewid+'">'
               + '</div>';


            //Issue #7286 :Undefined annotation should not appear
            var speechbubbleDivId="speechBubble" + PinId +'_'+windowviewid;
            var speechBubbleLineDivId="speechBubbleLine" + PinId +'_'+windowviewid ;
            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 {
                $("#canvasAADiv_" + windowviewid).append(speechBubbleHTML);

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

                if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) {
                    $("#"+speechbubbleDivId).css("min-width", "auto");
                    $("#"+speechbubbleDivId).css("white-space", "nowrap");
                }
            }
            var speechBubbleDims = [];

            var speechBubbleDimaensions=$scope.GetAAwindowStoreData(windowviewid,'speechBubbleDimaensions');

            if(speechBubbleDimaensions.length>0)
            {
                var ismatch=false;
                for (var i = 0; i <= speechBubbleDimaensions.length - 1; i++) {
                    if (speechBubbleDimaensions[i].speechBuubleId == speechbubbleDivId) {

                        speechBubbleDimaensions[i].speechBubbleLineId =speechBubbleLineDivId;
                        speechBubbleDimaensions[i].currentX =x;
                        speechBubbleDimaensions[i].currentY =y;

                        ismatch=true;
                    }
                }
                    if(ismatch==false)
                    {
                        speechBubbleDimaensions.push(
                            {
                              "speechBuubleId": speechbubbleDivId,
                              "speechBubbleLineId": speechBubbleLineDivId,
                              "currentX": x,
                              "currentY": y,
                              "pinId": PinId
                             });
                    }

            }
            else
            {
                speechBubbleDimaensions.push(
                    {
                        "speechBuubleId": speechbubbleDivId,
                        "speechBubbleLineId": speechBubbleLineDivId,
                        "currentX": x,
                        "currentY": y,
                        "pinId": PinId
                     });
            }

            speechBubbleDims.push({ currentX: x, currentY: y });
            document.getElementById(speechBubbleLineDivId).style.display = 'block';
            document.getElementById(speechBubbleLineDivId).style.left = ((speechBubbleDims[0].currentX - 12)) + 'px';
            var sliderVal=$scope.GetAAwindowStoreData(windowviewid,'sliderVal');
            if (sliderVal == 25) {
                document.getElementById(speechBubbleLineDivId).style.top = ((speechBubbleDims[0].currentY + 5)) + 'px';
            }
            else {
                document.getElementById(speechBubbleLineDivId).style.top = ((speechBubbleDims[0].currentY)) + 'px';
            }
            document.getElementById(speechbubbleDivId).style.display = 'block';
            document.getElementById(speechbubbleDivId).style.left = (speechBubbleDims[0].currentX +20) + 'px';
            document.getElementById(speechbubbleDivId).style.top = (speechBubbleDims[0].currentY) + 'px';

            if (isShowBodyWithCBPinData == true) {

                document.getElementById(speechbubbleDivId).style.left = (lx) + 'px';
                document.getElementById(speechbubbleDivId).style.top = (ly) + 'px';

                var bubble = document.getElementById(speechbubbleDivId);
                var bulleleft=bubble.offsetLeft;
                var bulletop=bubble.offsetTop;

                var sppechBubbleId =  PinId +'_'+windowviewid;
                var speechBubbleDraggedLineID = "speechBubbleDraggedLine" + sppechBubbleId;

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


                for (var i = 0; i <= speechBubbleDimaensions.length - 1; i++) {
                    if (speechBubbleDimaensions[i].speechBuubleId == speechbubbleDivId) {
                        speechBubbleDimaensions[i].speechBubbleLineId =speechBubbleDraggedLineID;

                        $scope.angle(speechBubbleDraggedLineID, speechBubbleDimaensions[i].currentX, speechBubbleDimaensions[i].currentY, bulleleft + 20, bulletop + 20, true,windowviewid);
                    }
                }

            }


        }
        $('.common-drag').draggable(
        {
            containment: '#canvasAADiv_' + windowviewid,
            drag: function (evt) {
            //stop: function (evt) {
                var clickedSpeechBubbleId = $(this).attr("id");
                var len=  (clickedSpeechBubbleId).split("_").length;
                var windowviewid = (clickedSpeechBubbleId).split("_")[len-1];

                var verticalScrollPosition = document.getElementById('canvasAADiv_'+windowviewid).scrollTop;
                var horizontlScrollPosition = document.getElementById('canvasAADiv_' + windowviewid).scrollLeft;
                var leftpos=evt.pageX + horizontlScrollPosition - $('#canvasAADiv_' + windowviewid).offset().left;
                var toptpos=evt.pageY + verticalScrollPosition - $('#canvasAADiv_' + windowviewid).offset().top;
                
                if(leftpos<5 || toptpos<5)
                {
                    evt.preventDefault();
                }

                //Calling Method to save ScrollPosition for Save CB
                $scope.SetAAwindowStoreData(windowviewid, 'verticalScroll', verticalScrollPosition);
                $scope.SetAAwindowStoreData(windowviewid, 'horizontalScroll', horizontlScrollPosition);
                var sppechBubbleId = $(this).attr("id").substring(12);
                var speechBubbleDraggedLineID = "speechBubbleDraggedLine" + sppechBubbleId;

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

                var speechBubbleDimaensions=$scope.GetAAwindowStoreData(windowviewid,'speechBubbleDimaensions');

                for (var i = 0; i <= speechBubbleDimaensions.length - 1; i++) {
                    if (speechBubbleDimaensions[i].speechBuubleId == clickedSpeechBubbleId) {
                        speechBubbleDimaensions[i].speechBubbleLineId =speechBubbleDraggedLineID;

                        $scope.angle(speechBubbleDraggedLineID, speechBubbleDimaensions[i].currentX, speechBubbleDimaensions[i].currentY, leftpos,toptpos, true, windowviewid);
                    }
                }

            },
            stop: function (evt) {

                var clickedSpeechBubbleId = $(this).attr("id");
                var len = (clickedSpeechBubbleId).split("_").length;
                var windowviewid = (clickedSpeechBubbleId).split("_")[len - 1];
                var sppechBubbleId = $(this).attr("id").substring(12);
                var PinId = sppechBubbleId.split("_")[0];
                $rootScope.UnsaveCurriculum = true;
                $timeout(function () {
                    var CBselectedpinCordinate = $scope.GetAAwindowStoreData(windowviewid, 'CBselectedpinCordinate');
                    var BubleObj = document.getElementById(clickedSpeechBubbleId);
                    var CBselectedpinCordinate = new jinqJs()
                                        .from(CBselectedpinCordinate)
                                            .update(function (coll, index) { coll[index].lx = BubleObj.offsetLeft; coll[index].ly = BubleObj.offsetTop; })
                                            .at("pinId == " + PinId);

                }, 100);

            }

        });

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

            var imgId = $(this).attr("id");
            var len=  (imgId).split("_").length;
            var windowviewid = (imgId).split("_")[len-1];
            var imgDivId=(imgId).split("_")[0];

            var pinId = imgDivId.substring(8, imgDivId.length);
            $('#speechBubble' + pinId+'_'+windowviewid).remove();
            $("#speechBubbleDraggedLine" + pinId+'_'+windowviewid).remove();
            $("#speechBubbleLine" + pinId + '_' + windowviewid).remove();
            var CBselectedpinCordinate = [];
            CBselectedpinCordinate = $scope.GetAAwindowStoreData(windowviewid, 'CBselectedpinCordinate');
            CBselectedpinCordinate = new jinqJs()
                                  .from(CBselectedpinCordinate)
                                  .delete().at("pinId == " + pinId).select();

            $scope.SetAAwindowStoreData(windowviewid, 'CBselectedpinCordinate', CBselectedpinCordinate);

            var clickedPins=$scope.GetAAwindowStoreData(windowviewid,'clickedPins');
            clickedPins = new jinqJs()
                            .from(clickedPins)
                            .delete().at("id == " + pinId).select();

            $scope.SetAAwindowStoreData(windowviewid, 'clickedPins', clickedPins);

            var activePinArray=$scope.GetAAwindowStoreData(windowviewid,'activePinArray');
          
            const index = activePinArray.indexOf("PinArc_"+pinId);
            if (index > -1) {
                activePinArray.splice(index, 1);
            }
            $scope.GetAAwindowStoreData(windowviewid,'activePinArray',activePinArray);
            $rootScope.UnsaveCurriculum = true;

        });

        //make the head green
        var radialAfterClick = $('#aaDetailViewCanvas_'+windowviewid).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;

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

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

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

        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) {
            var sliderVal=$scope.GetAAwindowStoreData(windowviewid,'sliderVal');
            if (sliderVal == 40) {
                $("#" + dragLineId).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 (sliderVal == 25) {
                $("#" + dragLineId).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 {
                $("#" + dragLineId).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,windowviewid) {

        var slidpercentValue=  $scope.GetAAwindowStoreData(windowviewid,'sliderPercentValue');

        var multipliedByValue = 5;
        var $ua = navigator.userAgent;
        if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {
            multipliedByValue = 10;
        }
        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 * slidpercentValue, y1: offsetY1 * slidpercentValue,
            x2: x * slidpercentValue, y2: y * slidpercentValue,


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

            click: function (clickedPin) {

                $rootScope.UnsaveCurriculum =true;
                $('#selectedTermName_' + windowviewid).val('');
                $("#selectedTermName_" + windowviewid).attr("name", '0');
                //birendra
                var iskeyctrlActive= $scope.GetAAwindowStoreData(windowviewid, 'keyctrl');//for iPad
                // for mac os Command key use for multi selection
                if (clickedPin.event.ctrlKey == false && clickedPin.event.metaKey == false && !iskeyctrlActive) {
                    $scope.SetAAwindowStoreData(windowviewid, 'clickedPins', []);
                    $scope.SetAAwindowStoreData(windowviewid, 'selectedPins', []);
                    $scope.SetAAwindowStoreData(windowviewid, 'CBselectedpinCordinate', []);
                    $scope.SetAAwindowStoreData(windowviewid,'activePinArray',[]);
                }
              
                 var activePinArray=$scope.GetAAwindowStoreData(windowviewid,'activePinArray');
                 var isFound = jQuery.inArray(clickedPin.name, activePinArray)
                 if (isFound == -1) {
                     activePinArray.push(clickedPin.name);

                     var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
                     var aaPinData =  $scope.GetAAwindowStoreData(windowviewid,'aaPinData');
                     var pinData = new jinqJs()
                                   .from(aaPinData)
                                   .where("_PinId == " + pinID)
                                   .select();
     
     
                     var pinTermNumber = pinData[0]._TermId;
     
                     var pinWithSameTerm = new jinqJs()
     
                                          .from(aaPinData)
                                          .where("_TermId == " + pinTermNumber)
                                          .select();
                     if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
                         var selectedPins = $scope.GetAAwindowStoreData(windowviewid, 'selectedPins');
                         var clickedPins=$scope.GetAAwindowStoreData(windowviewid,'clickedPins');
                         for (var i = 0; i < pinWithSameTerm.length; i++) {
                             clickedPins.push({ 'id': pinWithSameTerm[i]._PinId });
                             selectedPins.push(pinWithSameTerm[i]._PinId);
                             //some time get multiple pinid on selected termid
                             var pinvalue='PinArc_' +  pinWithSameTerm[i]._PinId;
                            var isFound = jQuery.inArray(pinvalue, activePinArray)
                            if (isFound == -1) {
                                activePinArray.push(pinvalue);
                            }

                             var headX = (parseInt(pinWithSameTerm[i]._HeadX));
                             var headY = (parseInt(pinWithSameTerm[i]._HeadY));
                             //Save Cordinate for show annotation as per Pin
                            var CBselectedpinCordinate = $scope.GetAAwindowStoreData(windowviewid, 'CBselectedpinCordinate');
                            CBselectedpinCordinate.push(
                                                    {
                                                        "hy": headY,
                                                        "ly": headY+10,
                                                        "hx": headX,
                                                        "lx": headX+30,
                                                        "pinId": pinWithSameTerm[i]._PinId
                                                    });

                                }
                     }
     
                     $scope.SetAAwindowStoreData(windowviewid,'isSelectedPinBtnClickedAftrSliderCange',false);
                     var selectedPinData = new jinqJs()
                                 .from(aaPinData)
                                 .where("_PinId == " + pinID)
                                 .select();
     
                    if (clickedPin.event.ctrlKey == true||clickedPin.event.metaKey == true ||iskeyctrlActive) {
            
                            var radialAfterClick = $('#aaDetailViewCanvas_' + windowviewid).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,false,  windowviewid);
                        }
                        else 
                        {
                            var radial = $('#aaDetailViewCanvas_' + windowviewid).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_' + windowviewid).setLayers({
                                fillStyle: radial,
                            }).drawLayers();
        
                            //change the head color to green
                            var radialAfterClick = $('#aaDetailViewCanvas_' + windowviewid).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,false, windowviewid);
        
                        }
                
                     
                 }

               
            }

        }).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,windowviewid) {

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

        $scope.removeSpeechBubble(windowviewid);

    }

    $rootScope.aaAnnotationToolEvent = function (windowviewid) {
        $('#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" });

        $('#canvasAA_'+windowviewid).css("display", "block");
        $('#canvasPaintAA_'+windowviewid).css("display", "block");
       
    }

    //Reload Body View after setting Change
    $rootScope.reloadAABodyViewEvent = function (isLexiconChange, windowviewid) {
       
        $scope.loadaaBodyViewChangedBySetting(windowviewid,isLexiconChange);
    }

    $scope.loadaaBodyViewChangedBySetting = function (windowviewid, isLexiconChange) {
        $scope.DisableAAUI(windowviewid);
        
        // store image for export while click on panel
        var currentViewTitle = $scope.GetAAwindowStoreData(windowviewid, 'currentViewTitle');
        var imageName = $scope.GetAAwindowStoreData(windowviewid, 'imageName');

        $rootScope.StoreTitleName(currentViewTitle);
        $rootScope.StoreOrgImageName(imageName);

        var timeintval=$scope.SetAAwindowStoreData(windowviewid,'intervalObject');
        if(isLexiconChange)
        {
            // remove first annotation text
            $scope.removeSpeechBubble(windowviewid); 

           //load term data and also language data
            $rootScope.loadPinSearchData(windowviewid); 
            timeintval =  $interval(function(){loadaaBodyViewBySetting(windowviewid)},5);
            $scope.SetAAwindowStoreData(windowviewid,'intervalObject',timeintval);            
            function loadaaBodyViewBySetting(panid) {                 
                var pinTermData = $scope.GetAAwindowStoreData(panid, 'pinTermData');                                           
                if (pinTermData!=null) {
                    var intval=$scope.GetAAwindowStoreData(panid,'intervalObject');
                    $scope.stopVocab(intval);  
                    $scope.langSearchLoad(panid);   
                    $scope.SetAAwindowStoreData(panid,'isShowBodyWithCBPinData',true);
                        //loading annotation
                        $scope.ShowCBAnnotation(panid);  
                        
                        $timeout(function () {
                            if ($rootScope.isListManagerMenuSelected) {
                                var selectedPanel = $("#viewName option:selected").val();
                                var winid = (selectedPanel).split("_")[1];
                                if(winid==panid)
                                {
                                    $scope.DisableAAUI(panid);
                                    $rootScope.aalistManagerEvent(panid);
                                }
                            }
                           
                        }, 200);
                   
                        $scope.EnableAAUI(panid); 
                }
                else
                {
                    console.log("waiting for search term Data");                       
                }
            } 

            $scope.stopVocab = function (intvalobj) {
                if (angular.isDefined(intvalobj)) {
                    $interval.cancel(intvalobj);
                    intvalobj = undefined;
                }
            }; 

        }
      
    }

    $rootScope.aaloadSearchData = function (windowviewid) {

        var imageId=  $scope.GetAAwindowStoreData(windowviewid,'imageId');
        $scope.SetAAwindowStoreData(windowviewid,'pinTermData',[]);
        var promise = ModuleService.getTermTextDataForAAImage(imageId)
                 .then(
                  function (response) {
                    var AAPinTermData = response.data.PinTermData.TermData;
                    $scope.SetAAwindowStoreData(windowviewid,'AAPinTermData',AAPinTermData)

                    $scope.EnableAAUI(windowviewid); 
                     $rootScope.loadPinSearchData(windowviewid);                

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


    }
    $rootScope.loadPinSearchData = function (windowviewid) {
       var AAPinTermData= $scope.GetAAwindowStoreData(windowviewid,'AAPinTermData')
        for (var i = 0; i <= $rootScope.lexiconLanguageArray.length - 1; i++) {

            var lexiconId = $rootScope.lexiconLanguageArray[i].id;
            var matchedLanguageTermData = new jinqJs()
                           .from(AAPinTermData)
                           .where('_LanguageId == ' + lexiconId)
                           .select();
          
            if(matchedLanguageTermData.length>0) 
            {
                if(i==0)
                {
                    $scope.SetAAwindowStoreData(windowviewid, 'pinTermData', matchedLanguageTermData);
                }
                else
                {
                    var pinTermData = $scope.GetAAwindowStoreData(windowviewid, 'pinTermData');
                    var result=pinTermData.concat(matchedLanguageTermData); 
                    $scope.SetAAwindowStoreData(windowviewid, 'pinTermData', result);

                }
            }              
           
        }

    }

    //event remove it fire multiple time
    $rootScope.aalistManagerEvent=function(windowviewid){
       
        $scope.DisableAAUI(windowviewid);           
        $("#langaugeDivLm").css("display", "none");
        
        $("#AABodySystems").empty();
        $("#bodySystems").css("display", "none");
        $("#langaugeDivLm").css("display", "none");
        $("#AABodySystems").css("display", "block");
        $('#termList').empty();
        
        var totalstructure=0;
        $rootScope.isListManagerMenuSelected = true;

        $scope.SetAAwindowStoreData(windowviewid,'totalstructureLm',0);
        var languageArray = $rootScope.lexiconLanguageArray;
       
        if(languageArray.length>1)
        {
            $("#langaugeDivLm").css("display", "block");
            $("#selectLanguageLm").empty();           
            for (var i = 0; i <= languageArray.length - 1; i++) {
                $('#selectLanguageLm').append('<option value="' + languageArray[i].id + '">' + languageArray[i].language + '</option>');
            }
        }

        var $all = $('<option  id="0_'+windowviewid+'" selected="">All</option>').appendTo('#AABodySystems');
        $compile($all)($scope);

        $("#bodySystemList_" + windowviewid + " li a").each(function (key, value) {
            if($(this).attr('id')!="0")
            {
                var sysid= $(this).attr('id') + '_' +windowviewid;
                
                if ($(this).parent().hasClass("disabledSelectedSystem")) {
                    var $systemOptions = $('<option id=' + sysid+' disabled style="color:#d0c9c9" >' + $(this).text() + '</option>').appendTo("#AABodySystems")
                    $compile($systemOptions)($scope);
                }
                else{
                    var $systemOptions = $('<option id=' + sysid+' >' + $(this).text() + '</option>').appendTo("#AABodySystems")
                    $compile($systemOptions)($scope);
                }         
            }                                                          
            
         });


            // primary language
        var langId=languageArray[0].id;
        $scope.loadaaListManger(windowviewid,langId,totalstructure);

    }

    $rootScope.changeLanguageLmEventAA = function (windowviewid) { 
        $scope.DisableAAUI(windowviewid);
        $('#termList').empty();
        var totalstructure=0;
        $scope.SetAAwindowStoreData(windowviewid,'totalstructure',0);                        
      
       var langIdvalue = $("#selectLanguageLm option:selected").val();
      
       setTimeout(function () {

        if(langIdvalue!=undefined)
        {
            var selectedLanguage = new jinqJs()
                                    .from( $rootScope.lexiconLanguageArray)
                                    .where('id == ' + langIdvalue)
                                    .select()[0];

          var langId=selectedLanguage.id;

        }
        else
        {
            var langId=$rootScope.lexiconLanguageArray[0].id;
        }      

        var sysid = $("#AABodySystems option:selected").attr("id");
        var bodysystemId = (sysid).split("_")[0];
        if(bodysystemId=="0")
        {
        $scope.loadaaListManger(windowviewid,langId,totalstructure); 
        }
        else
        {
        $scope.aasystemMatchTermLoad(bodysystemId,windowviewid,langId,totalstructure);
        }                        

       },100)
                                       
    }

    $rootScope.LoadMoreLmEventAA = function (windowviewid) {         
        $scope.DisableAAUI(windowviewid);
        var langIdvalue = $("#selectLanguageLm option:selected").val();
        var totalstructure = $scope.GetAAwindowStoreData(windowviewid, 'totalstructureLm');
           
        setTimeout(function () {             
            
        if(langIdvalue!=undefined)
        {
           var selectedLanguage = new jinqJs()
                                    .from( $rootScope.lexiconLanguageArray)
                                    .where('id == ' + langIdvalue)
                                    .select()[0];

           var langId=selectedLanguage.id;

        }
        else
        {
            var langId=$rootScope.lexiconLanguageArray[0].id;
        }    

        var sysid = $("#AABodySystems option:selected").attr("id");
        var bodysystemId = (sysid).split("_")[0];
        if(bodysystemId=="0")
        {
        $scope.loadaaListManger(windowviewid,langId,totalstructure); 
        }
        else
        {
        $scope.aasystemMatchTermLoad(bodysystemId,windowviewid,langId,totalstructure);
        }     
           
        }, 100);          
        
    }
    
    $scope.loadaaListManger = function (windowviewid,langId,totalstructure) {
  
        var selectedpinTermData=$scope.GetAAwindowStoreData(windowviewid,'pinTermData');//term data for selected language

        var languageTermDataArray = new jinqJs()
                                        .from( selectedpinTermData)
                                        .where('_LanguageId == ' + langId)
                                        .select();

      
       var afterskipdata = new jinqJs()
                            .from(languageTermDataArray)
                            .skip(totalstructure)
                            .select();

        var  limitTofilterdata = $filter('limitTo')(afterskipdata, 500);

        var matchTermDataFilter = new jinqJs()
                                .from(limitTofilterdata)
                                .distinct('_TermText', '_TermNumber')
                                .orderBy([{ field: '_TermText', sort: 'asc' }])
                                .select('_TermNumber', '_TermText');

        var option='';

        angular.forEach(matchTermDataFilter, function (value2, key2) {
            totalstructure=totalstructure+1;
             option=option+'<option id=' +  value2._TermNumber +'_' +windowviewid+ ' style="margin-right:-12px">' +  value2._TermText + '</option>';
          
        })
        var $el = $(option).appendTo('#termList')
        $compile($el)($scope);

        $scope.SetAAwindowStoreData(windowviewid,'totalstructureLm',totalstructure);
        var termsTotal = '<span class="pull-left marginTop5">' + totalstructure + ' Structures</span>';

        $("#totalTermsLm").empty();
        $("#totalTermsLm").append(termsTotal);
        
        if(totalstructure < languageTermDataArray.length)
        {
            $("#totalTermsLm").append('<button type="button"  id="btlLoadMoreLm" class="btn btn-primary btn-block" onclick="LoadMoreLm(event)" style="width:65%;float:right">Load More Structures..</button>');       
        }
        else
        {                 
            $("#totalTermsLm").append('<button type="button"  id="btlLoadMoreLm" class="btn btn-primary btn-block" onclick="LoadMoreLm(event)" style="width:65%;float:right">Load More Structures..</button>'); 
            $('#btlLoadMoreLm').attr('disabled', 'disabled');
        }

        $scope.EnableAAUI(windowviewid);                       
        
    }
    
    $rootScope.refreshTermListOnAASystemSelection = function (selectedBodysystemId) {
        var windowviewid = (selectedBodysystemId).split("_")[1];
        var bodysystemId = (selectedBodysystemId).split("_")[0];
        $("#AABodySystems").find("option:not(:disabled)").css({ "background-color": "#ffffff", "color": "#000000" });
        $("#AABodySystems").find("option[id=" + selectedBodysystemId + "]").css({ "background-color": "#3399FF", "color": "#ffffff" });
        $('#termList').empty();
       // var bodySystemName = $("#AABodySystems #" + selectedBodysystemId).val();

            $scope.SetAAwindowStoreData(windowviewid, 'totalstructureLm',0);
            var totalstructure = 0;
            var langIdvalue = $("#selectLanguageLm option:selected").val();
            if(langIdvalue!=undefined)
            {
                var selectedLanguage = new jinqJs()
                                        .from( $rootScope.lexiconLanguageArray)
                                        .where('id == ' + langIdvalue)
                                        .select()[0];

            var langId=selectedLanguage.id;

            }
            else
            {
                var langId=$rootScope.lexiconLanguageArray[0].id;
            }    

            if(bodysystemId=="0") 
            {
                setTimeout(function () {                             
                $scope.loadaaListManger(windowviewid,langId,totalstructure); 
                    
                }, 100);       
            }
            else
            {
            $scope.aasystemMatchTermLoad(bodysystemId,windowviewid,langId,totalstructure);
            }

    }

    $scope.aasystemMatchTermLoad=function(bodysystemId,windowviewid,langId,totalstructure)
    {
        var aaPinData =  $scope.GetAAwindowStoreData(windowviewid,'aaPinData');
        var systemMatchedTermList = new jinqJs()
                                  .from(aaPinData)
                                  .where('_BodySystemId == ' + bodysystemId)
                                  .select();
          if (systemMatchedTermList != null || systemMatchedTermList != undefined) {
                $scope.refreshTerms(systemMatchedTermList,windowviewid,langId,totalstructure);
          }

    }

    
    $scope.refreshTerms = function (termList,windowviewid,langId,totalstructure) {
        var matchTermData = [];
        var selectedpinTermData=$scope.GetAAwindowStoreData(windowviewid,'pinTermData');

        var languageTermDataArray = new jinqJs()
                                        .from( selectedpinTermData)
                                        .where('_LanguageId == ' + langId)
                                        .select();

    
        for (var i = 0; i < termList.length; i++) {

            var actulaTerm = new jinqJs()
                               .from(languageTermDataArray)
                               .where('_TermNumber == ' + termList[i]._TermId)
                               .select()[0];
            
            if (actulaTerm != null || actulaTerm != undefined) {
                matchTermData.push(
                    {
                        "_TermNumber": actulaTerm._TermNumber,
                        "_TermText": actulaTerm._TermText
                       
                    });
            }

        }


        var matchTermDataFilter = new jinqJs()
                                .from(matchTermData)
                                .distinct('_TermText', '_TermNumber')
                                .orderBy([{ field: '_TermText', sort: 'asc' }])
                                .select('_TermNumber', '_TermText');

         var option='';   
        if (matchTermDataFilter != null || matchTermDataFilter != undefined) {
            
            angular.forEach(matchTermDataFilter, function (value2, key2) {
                totalstructure=totalstructure+1;
                 option=option+'<option id=' +  value2._TermNumber +'_' +windowviewid+ ' style="margin-right:-12px">' +  value2._TermText + '</option>';
              
            })
            var $el = $(option).appendTo('#termList')
            $compile($el)($scope);

            $scope.SetAAwindowStoreData(windowviewid,'totalstructureLm',totalstructure);
            var termsTotal = '<span class="pull-left marginTop5">' + totalstructure + ' Structures</span>';

            $("#totalTermsLm").empty();
            $("#totalTermsLm").append(termsTotal);
            
            if(totalstructure < matchTermDataFilter.length)
            {
                $("#totalTermsLm").append('<button type="button" id="btlLoadMoreLm" class="btn btn-primary btn-block" onclick="LoadMoreLm(event)" style="width:65%;float:right">Load More Structures..</button>');       
            }
            else
            {                 
                $("#totalTermsLm").append('<button type="button"  id="btlLoadMoreLm" class="btn btn-primary btn-block" onclick="LoadMoreLm(event)" style="width:65%;float:right">Load More Structures..</button>'); 
                $('#btlLoadMoreLm').attr('disabled', 'disabled');
            }
               
        }
        $scope.EnableAAUI(windowviewid);

  }

    $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo,windowviewid) {

        var languageArray = $rootScope.lexiconLanguageArray;   
        var pinTermData = $scope.GetAAwindowStoreData(windowviewid, 'pinTermData');

        if (pinTermData != null || pinTermData != undefined) {

            var matchedTermNoData = new jinqJs()
                                       .from(pinTermData)
                                       .where('_TermNumber == ' + actualTermNo)
                                       .select();

            if (matchedTermNoData != null || matchedTermNoData != undefined) {

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

                    $scope.matchedLanguageTermNoData = new jinqJs()
                                      .from(matchedTermNoData)
                                      .where('_LanguageId == ' + languageArray[j].id)
                                      .select();
                    var termText = $scope.matchedLanguageTermNoData[0]._TermText;
                    $scope.MultiLanguageAnnationArray.push(termText);
                };
            }
        }
    }
    $rootScope.hidePinsevent = function (windowviewid) {
        $rootScope.UnsaveCurriculum = true;
        $rootScope.hidePins(windowviewid);
    }
    $rootScope.hidePins = function (windowviewid) {   
        $scope.ToolBoxStyle("HidePin",windowviewid);
        $scope.DisableAAUI(windowviewid);
        $scope.hideSpeechBubble(windowviewid);
        $scope.SetAAwindowStoreData(windowviewid, 'isShowSelectedPins', false);
        $scope.SetAAwindowStoreData(windowviewid, 'isShowAllPins', false);
        $scope.SetAAwindowStoreData(windowviewid, 'isHidePinBtnClicked', true);

        var aaPinData =  $scope.GetAAwindowStoreData(windowviewid,'aaPinData');
        angular.forEach(aaPinData, function (aaPinDataValue, aaPinDataKey) {

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

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

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

    }

    $scope.showAllPinEvent = function (windowviewid) {
        $rootScope.UnsaveCurriculum = true;
        $scope.showAllPinsAfterHide(windowviewid);
    }
    $scope.showAllPinsAfterHide = function (windowviewid) {

        $scope.ToolBoxStyle("ShowAllPin",windowviewid);

        $scope.DisableAAUI(windowviewid);
       
        $scope.SetAAwindowStoreData(windowviewid, 'isShowAllPins', true);
        $scope.SetAAwindowStoreData(windowviewid,'isHidePinBtnClicked',false);
        $scope.SetAAwindowStoreData(windowviewid, 'isShowSelectedPins', false);

        var selectedSystemName=$scope.GetAAwindowStoreData(windowviewid,'selectedSystemName');
        if (selectedSystemName != null && selectedSystemName != undefined) {
            var selectedSystemPinData=$scope.GetAAwindowStoreData(windowviewid,'selectedSystemPinData');
            $scope.showSystemPins(selectedSystemPinData, false,windowviewid);
        }
        else
        {
            var aaPinData =  $scope.GetAAwindowStoreData(windowviewid,'aaPinData');
            $scope.showSystemPins(aaPinData, false,windowviewid);
        }
        $scope.showSpeechBubble(windowviewid);
        var isSliderChange = $scope.GetAAwindowStoreData(windowviewid, 'isSliderChange');
        if ($("#bodySystemList_" + windowviewid  + " li.activeAASystemSelect a").attr("title") == "Current Structure" || $("#bodySystemList_" + windowviewid  + " li.activeAASystemSelect a").attr("title") == undefined) {

            if (isSliderChange == true) {
                $scope.showAllPins(windowviewid);

            }
        }
        else if (isSliderChange) {
                $scope.showAllPins(windowviewid);
            }

    };
    $scope.showSelectedPinEvent = function (windowviewid) {
        $rootScope.UnsaveCurriculum = true;
        $scope.showSelectedPins(windowviewid);
    }

    $scope.showSelectedPins = function (windowviewid) {

        $scope.ToolBoxStyle("ShowSelectedPin",windowviewid);
        $("#listManager").css("display", "none");
        $("#optionsListManagerTab").removeClass("active");

        $scope.DisableAAUI(windowviewid);
       
        var isHidePinBtnClicked = $scope.GetAAwindowStoreData(windowviewid, 'isHidePinBtnClicked');
        if (isHidePinBtnClicked) {
            $scope.showAllPins(windowviewid);
            setTimeout(function () {
                $scope.activePinOnSliderChange(windowviewid);
            }, 200);
        }
    
        $scope.SetAAwindowStoreData(windowviewid, 'isShowAllPins', false);
        $scope.SetAAwindowStoreData(windowviewid, 'isHidePinBtnClicked', false);
        $scope.SetAAwindowStoreData(windowviewid, 'isShowSelectedPins', true);
        var selectedSystemName=$scope.GetAAwindowStoreData(windowviewid,'selectedSystemName');
        if (selectedSystemName != null && selectedSystemName != undefined) {
            var selectedSystemPinData=$scope.GetAAwindowStoreData(windowviewid,'selectedSystemPinData');
            $scope.showSystemPins(selectedSystemPinData, true,windowviewid);
        }
        else
        {
            var aaPinData =  $scope.GetAAwindowStoreData(windowviewid,'aaPinData');
            $scope.showSystemPins(aaPinData, true,windowviewid);

        }
        $scope.showSpeechBubble(windowviewid);

        var isSelectedPinBtnClickedAftrSliderCange=  $scope.GetAAwindowStoreData(windowviewid,'isSelectedPinBtnClickedAftrSliderCange');

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

        }

    };

    $scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins, windowviewid) {

        if (isShowSelectedPins) {

            var selectedPins = [];
            $scope.SetAAwindowStoreData(windowviewid, 'selectedPins', []);

            var clickedPins=$scope.GetAAwindowStoreData(windowviewid,'clickedPins');
            angular.forEach(clickedPins, function (value, key) {

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

                selectedPins.push(value.id);
                $scope.SetAAwindowStoreData(windowviewid, 'selectedPins', selectedPins);
            });

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

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

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

                $('#aaDetailViewCanvas_'+windowviewid).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;

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

                $('#aaDetailViewCanvas_'+windowviewid).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;

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

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

    }

    $scope.showItemsForSearch = function (windowviewid, isbuttionclick) {
       
        if ($('#searchListDivAA_' + windowviewid).html() != "")
        $('#termlistfilter_'+windowviewid).empty();

        $scope.IsSearchVisible = true;
         // clear time stamp on text box click
         $scope.SetAAwindowStoreData(windowviewid, 'SearchTimeStampValue', 0);

         var langIdvalue = $("#searchLanguageLm_"+windowviewid+" option:selected").val();
         if(langIdvalue!=undefined)
         {
             var selectedLanguage = new jinqJs()
                                 .from( $rootScope.lexiconLanguageArray)
                                 .where('id == ' + langIdvalue)
                                 .select()[0];

              var langId=selectedLanguage.id;
         }
         else
         {
             // get default language
             var langId=$rootScope.lexiconLanguageArray[0].id
         }

         var selectedpinTermData=$scope.GetAAwindowStoreData(windowviewid,'pinTermData');//term data for selected language
        
         var languageTermDataArray = new jinqJs()
                                        .from( selectedpinTermData)
                                        .where('_LanguageId == ' + langId)
                                        .select();

            var searchvalue = $("#selectedTermName_" + windowviewid).val();
            
            var searchfilterdata = $filter('filter')(languageTermDataArray, searchvalue);
            if(searchvalue.trim()!="")
            {
                searchfilterdata = $filter('orderBy')(searchfilterdata, '_TermText.length');
            }
            else
            {
                searchfilterdata = $filter('orderBy')(searchfilterdata, '_TermText');
            }

            $scope.limitTofilterdata = $filter('limitTo')(searchfilterdata, 500);

            $('#termlistfilter_'+windowviewid).css("display", "block");

            angular.forEach($scope.limitTofilterdata, function (value2, key2) {
                var $el = $('<option id=' +  value2._TermNumber +'_' +windowviewid+ '>' +  value2._TermText + '</option>').appendTo('#termlistfilter_' + windowviewid);
                $compile($el)($scope);
            })
            
            var $all = $('#termlistfilter_'+windowviewid).appendTo('#searchListDivAA_' + windowviewid);
                $compile($all)($scope);
    
                if(isbuttionclick)
                {
                $timeout(function () {
                    $('#termlistfilter_'+windowviewid).focus();
                    }, 200);  
                }                                         

    }

    $scope.resetSearchListView = function (event) {

        var len = (event.target.id).split("_").length;
        var windowviewid = (event.target.id).split("_")[len - 1];
        var date = new Date();
        var newtimestamp = date.getTime();

        var oldtimestamp = $scope.GetAAwindowStoreData(windowviewid, 'SearchTimeStampValue');

        if ((newtimestamp - oldtimestamp) > 100) {

            $scope.SetAAwindowStoreData(windowviewid, 'SearchTimeStampValue', newtimestamp);
            $scope.showFilteredTerms(windowviewid);
        }

    }

    $scope.HideSearchList = function (event) {
        var len=  (event.currentTarget.id).split("_").length;
        var windowviewid = (event.currentTarget.id).split("_")[len-1];
     
        $timeout(function () {
            if(!$scope.IsSearchVisible)
            {
                $("#termlistfilter_" + windowviewid).empty();
                $("#termlistfilter_" + windowviewid).css("display", "none");
            }            
           
        }, 600);

    }

    $scope.showFilteredTerms = function (windowviewid) {
        var langIdvalue = $("#searchLanguageLm_"+windowviewid+" option:selected").val();
        if(langIdvalue!=undefined)
        {
            var selectedLanguage = new jinqJs()
                                .from( $rootScope.lexiconLanguageArray)
                                .where('id == ' + langIdvalue)
                                .select()[0];

             var langId=selectedLanguage.id;
        }
        else
        {
            // get default language
            var langId=$rootScope.lexiconLanguageArray[0].id
        }
      
        var selectedpinTermData=$scope.GetAAwindowStoreData(windowviewid,'pinTermData');//term data for selected language
        
         var languageTermDataArray = new jinqJs()
                                        .from( selectedpinTermData)
                                        .where('_LanguageId == ' + langId)
                                        .select();

        var searchvalue = $("#selectedTermName_" + windowviewid).val();
        
        var searchfilterdata = $filter('filter')(languageTermDataArray, searchvalue);
        if(searchvalue.trim()!="")
        {
            searchfilterdata = $filter('orderBy')(searchfilterdata, '_TermText.length');
        }
        else
        {
            searchfilterdata = $filter('orderBy')(searchfilterdata, '_TermText');
        }

        $scope.limitTofilterdata = $filter('limitTo')(searchfilterdata, 20);

        $('#termlistfilter_'+windowviewid).css("display", "block");
        $('#termlistfilter_'+windowviewid).empty();
        
        angular.forEach($scope.limitTofilterdata, function (value2, key2) {
            var $el = $('<option id=' +  value2._TermNumber +'_' +windowviewid+ '>' +  value2._TermText + '</option>').appendTo('#termlistfilter_' + windowviewid);
            $compile($el)($scope);
        })
      
        var $all = $('#termlistfilter_'+windowviewid).appendTo('#searchListDivAA_' + windowviewid);
         $compile($all)($scope);

         $("#selectedTermName_" + windowviewid).attr("name", "0");
        
    };

    $scope.changeaaSearchLanguage = function (event) { 

        var len=  (event.currentTarget.id).split("_").length;
        var windowviewid = (event.currentTarget.id).split("_")[len-1];

        $scope.changeSearchText(windowviewid);
                      
    }

    $scope.changeSearchText = function (windowviewid) {
                 
       setTimeout(function () {

         var term_num = $("#selectedTermName_" + windowviewid).attr("name");
         if(term_num!=undefined && term_num!="0")
         {
             var langIdvalue = $("#searchLanguageLm_"+windowviewid+" option:selected").val();
             if(langIdvalue!=undefined)
             {
                 var selectedLanguage = new jinqJs()
                                         .from( $rootScope.lexiconLanguageArray)
                                         .where('id == ' + langIdvalue)
                                         .select()[0];
 
             var langId=selectedLanguage.id;
 
             }
             else
             {
                 var langId=$rootScope.lexiconLanguageArray[0].id;
             }    
             var selectedpinTermData=$scope.GetAAwindowStoreData(windowviewid,'pinTermData');//term data for selected language
        
             var languageTermDataArray = new jinqJs()
                                            .from( selectedpinTermData)
                                            .where('_LanguageId == ' + langId)
                                            .select();
    

             var selectedTerm = new jinqJs()
                                     .from( languageTermDataArray)
                                     .where('_TermNumber == '+term_num)
                                     .select()[0];


              if(selectedTerm!=undefined) 
              {
                
                 $("#selectedTermName_" + windowviewid).attr("name", selectedTerm._TermNumber);
                 $("#selectedTermName_" + windowviewid).val(selectedTerm._TermText);

              }   
              else
              {
                 $("#selectedTermName_" + windowviewid).attr("name", "0");
                 $("#selectedTermName_" + windowviewid).val('');
              }                           
            
         }
         else
         {
             $("#selectedTermName_" + windowviewid).attr("name", "0");
             $("#selectedTermName_" + windowviewid).val('');
         }      

        },100)
                

    }
   

    $scope.highlightPinBasedOnSerachItemEvent = function (termid,isTermListOptionClicked) {
        $rootScope.UnsaveCurriculum = true;
        $scope.highlightPinBasedOnSerachItem(termid,isTermListOptionClicked);
    }

    $scope.highlightPinBasedOnSerachItem = function (termid,isTermListOptionClicked) {
        
        var windowviewid = (termid).split("_")[1];
        var TermNumber= termid.split('_')[0];
        var currenttermidTxt = $('#' + termid).text();
        $scope.IsSearchVisible=false;

        
        if (isTermListOptionClicked == true) {
            $('#selectedTermName_' + windowviewid).val('');
            $("#selectedTermName_" + windowviewid).attr("name", '0');
        }
        else
        {
            $('#selectedTermName_' + windowviewid).val(currenttermidTxt);
            $("#selectedTermName_" + windowviewid).attr("name", TermNumber);
            $("#termlistfilter_" + windowviewid).empty();
            $("#termlistfilter_" + windowviewid).css("display", "none");
        }
        
        $scope.showAllPinsAfterHide(windowviewid);

        $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
        $("#termList").find("option[id=" + termid + "]").css({ "background-color": "#3399FF", "color": "#ffffff" });
       
        //get data from pindata for this trem

        var aaPinData =  $scope.GetAAwindowStoreData(windowviewid,'aaPinData');
        var pinDataForTerm = new jinqJs()
                                         .from(aaPinData)
                                         .where("_TermId == " + TermNumber)
                                         .select();

         // birendra
           //change body system by searched term
           $scope.showSelectedSystemPins(pinDataForTerm[0]._BodySystemId,windowviewid);

      $timeout(function () {
        //make all pin heads grey
        var radial = $('#aaDetailViewCanvas_'+windowviewid).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_'+windowviewid).setLayers({
            fillStyle: radial,
        }).drawLayers();
      
        $scope.SetAAwindowStoreData(windowviewid,'clickedPins',[]);
        $scope.SetAAwindowStoreData(windowviewid, 'selectedPins', []);
        $scope.SetAAwindowStoreData(windowviewid,'activePinArray',[]);    
       //clear all cb data
       $scope.SetAAwindowStoreData(windowviewid, 'CBselectedpinCordinate', []);

       $scope.showAnnotation(pinDataForTerm, false, false, true,false,windowviewid);
        // maintaing scroll position on selection of options in list manager.
        var annotationTopPos = $(".common-drag").css("top").split("p");
        $("#canvasAADiv_" + windowviewid).scrollTop(annotationTopPos[0]);
     },500);

      $scope.IsSearchVisible = false;

    }

    $scope.MultipleAnnotation = function (event) {
        var len=  (event.currentTarget.id).split("_").length;
        var windowviewid = (event.currentTarget.id).split("_")[len-1];

        //set true to false or vice versa
       var iskeyctrlActive= $scope.GetAAwindowStoreData(windowviewid, 'keyctrl');
      
       $("#multiannotation_" + windowviewid).toggleClass("disableAAMultiAnnotationText");
           
        if(iskeyctrlActive)
        {
          $("#multiannotation_"+windowviewid ).attr('title', 'Active Multiple Structure');    
        }
        else
        {      
          $("#multiannotation_"+windowviewid ).attr('title', 'Disable Multiple Structure');
        }

       $scope.SetAAwindowStoreData(windowviewid, 'keyctrl', !iskeyctrlActive);
    }

    $scope.ShowHideAnnotation = function (event) {
        var len=  (event.currentTarget.id).split("_").length;
        var windowviewid = (event.currentTarget.id).split("_")[len-1];
        $rootScope.UnsaveCurriculum = true;

        var btnStrutureBoxname = document.getElementById("comment-box_"+windowviewid).name;
        $("#comment-box_" + windowviewid).toggleClass("disableAAAnnotationText");

            if (btnStrutureBoxname == "showAnnotationText") {
                $("#comment-box_"+windowviewid ).attr('title', 'Show Structure Name Boxes');
                $("#comment-box_"+windowviewid +" i").removeClass("far fa-comment-alt-times").addClass("far fa-comment-alt");
                $("#comment-box_"+windowviewid ).attr('name', 'hideAnnotationText');
                $scope.SetAAwindowStoreData(windowviewid, 'showHideAnnotations', 'hideAnnotationText');           
            }
            else
            {
                $("#comment-box_"+windowviewid ).attr('title', 'Hide Structure Name Boxes');
                $("#comment-box_"+windowviewid +" i").removeClass("far fa-comment-alt").addClass("far fa-comment-alt-times");
                $("#comment-box_"+windowviewid ).attr('name', 'showAnnotationText');
                $scope.SetAAwindowStoreData(windowviewid, 'showHideAnnotations', 'showAnnotationText');
               
            }
            
            $scope.ShowHideAnnotationText(windowviewid);
    }
    $scope.ShowHideAnnotationText = function(windowviewid) {

        var showHideAnnotations = $scope.GetAAwindowStoreData(windowviewid, 'showHideAnnotations');
        document.getElementById("comment-box_"+windowviewid).name = showHideAnnotations;

        var speechBubbleDimaensions=$scope.GetAAwindowStoreData(windowviewid,'speechBubbleDimaensions');
            if (showHideAnnotations == "showAnnotationText") {
                for (var i = 0; i <= speechBubbleDimaensions.length - 1; i++) {
                    $("#" + speechBubbleDimaensions[i].speechBuubleId).css("display", "block");
                    $("#" + speechBubbleDimaensions[i].speechBubbleLineId).css("display", "block");
                }
            }
            else {
                $("#comment-box_"+windowviewid).addClass("disableAAAnnotationText");

                for (var i = 0; i <= speechBubbleDimaensions.length - 1; i++) {
                    $("#" + speechBubbleDimaensions[i].speechBuubleId).css("display", "none");
                    $("#" + speechBubbleDimaensions[i].speechBubbleLineId).css("display", "none");
                }

            }
    }

    $scope.activePinOnLayerChange = function (windowviewid) {

        var activePinArray=$scope.GetAAwindowStoreData(windowviewid,'activePinArray');
        for (var i = 0; i <= activePinArray.length - 1; i++) {
            var radialAfterClick = $('#aaDetailViewCanvas_'+windowviewid).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 = activePinArray[i];
            $('#aaDetailViewCanvas_'+windowviewid).setLayer(clickedPin, {
                fillStyle: radialAfterClick
            }).drawLayers();

        }
    }

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

    });

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

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

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

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

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

            })
            for (var i = 0; i <= activePinArray.length - 1; i++) {
                var pinName = activePinArray[i].split("_");
                var activePinName = 'Pin_' + pinName[1];
                var pinArcName = 'PinArc_' + pinName[1];
                $('#aaDetailViewCanvas_'+windowviewid).setLayer(activePinName, {
                    visible: true // set to true instead to show the layer again
                }).drawLayers();
                $('#aaDetailViewCanvas_'+windowviewid).setLayer(pinArcName, {
                    visible: true // set to true instead to show the layer again
                }).drawLayers();
            }
        }
    }
   
    //Created method by Sandeep for Save JSPanel Activity on the CB module
    $scope.PanelActivity = function () {
        $(document).on("click", "#" + $scope.jsPanelID + " .jsPanel-hdr .jsPanel-hdr-r .jsPanel-btn-close .jsglyph-remove", function (event) {
            var panelid = $(event.target).parent().parent().parent().parent().attr('id');

            $scope.RemoveJSPanel(panelid);

            $scope.setActiveTab(parseInt($rootScope.getLocalStorageValue("activeTab")));
            $(".tools").css("z-index", "15000");

        });

    }

    $scope.RemoveJSPanel = function (panelid) {

        var len = (panelid).split("_").length;
        var windowviewid = (panelid).split("_")[len - 1];

        // remove old stored data after close panel
        for (var index = 0 ; index < $rootScope.AAWindowData.length; index++) {

            if ($rootScope.AAWindowData[index].multiwinid == windowviewid) {

                if (index != -1) {
                    // remove module which one is loaded
                    $rootScope.AAWindowData.splice(index, 1);
                    if ($('#' + panelid).html() != undefined) {

                        $('#' + panelid).remove();

                    }
                   // $rootScope.resetjsPanelTop(panelid);
                }
            }
        }

    }

}]);


function refreshTermListOnSystemSel(bodySystemId) {
    var windowviewid = (bodySystemId).split("_")[1];
    var rootScope = angular.element(document.getElementById("aaDetailPageDiv_"+windowviewid)).scope();
    rootScope.$apply(function () {
        rootScope.refreshTermListOnAASystemSelection(bodySystemId);
    });
}


function showSelectedSystemPins(event) {
    console.log('OnBodySystem chnaged is called outside ');
    var scope = angular.element(document.getElementById("aaBodyView")).scope();
    scope.$apply(function () {
        //select system and its related pins
        scope.showSelectedSystemPins(event);
    });
}

function hidePins(event) {
    var len=  (event.target.id).split("_").length;
    var windowviewid = (event.target.id).split("_")[len-1];
    var rootScope = angular.element(document.getElementById("aaBodyView")).scope();
    rootScope.$apply(function () {
        rootScope.hidePinsevent(windowviewid);
        //Calling for Save CB Window data
        //rootScope.updateWindowsContentForSaveCB();
    });


}

function showAllPins(event) {

    var len=  (event.target.id).split("_").length;
    var windowviewid = (event.target.id).split("_")[len-1];
    var scope = angular.element(document.getElementById("aaBodyView")).scope();
    scope.$apply(function () {
        scope.showAllPinEvent(windowviewid);
    });
}

function onSearchAA(event) {
    console.log('AA search is called')
    var scope = angular.element(document.getElementById("aaBodyView")).scope();
    scope.$apply(function () {
        var len=  (event.currentTarget.id).split("_").length;
        var windowviewid = (event.currentTarget.id).split("_")[len-1];

        if((event.currentTarget.id).match('btnSearchAA'))
           scope.showItemsForSearch(windowviewid,true);
        else
        {
            scope.showItemsForSearch(windowviewid,false);
        }
        
    });
}

function changeaaSearchLanguage(event) {
    event.stopPropagation();
    var scope = angular.element(document.getElementsByClassName("aaBodyView")).scope();
    scope.$apply(function () {
        scope.changeaaSearchLanguage(event);
    });
}


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

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

function onSearchItemSelection(termid, isTermListOptionClicked) {

    console.log('AA hide search is called');
    var scope = angular.element(document.getElementById("aaBodyView")).scope();
    scope.$apply(function () {
        scope.highlightPinBasedOnSerachItemEvent(termid,isTermListOptionClicked);
    });
}


function showHideAnnotation(event) {

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

function keyControlAAActive(event) {

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

function showSelectedPins(event) {

    console.log('showSelectedPins is called')
    var scope = angular.element(document.getElementById("aaBodyView")).scope();
    var len=  (event.target.id).split("_").length;
    var windowviewid = (event.target.id).split("_")[len-1];

    scope.$apply(function () {
        scope.showSelectedPinEvent(windowviewid);
    });
}


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 systemChange(event) {
    event.stopPropagation();
    var len=  (event.currentTarget.id).split("_").length;
    var windowviewid = (event.currentTarget.id).split("_")[len-1];
    $("#bodySystemList_" + windowviewid ).toggle();

    var $ua = navigator.userAgent;
    if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {
        $(".custom-tooltip").toggle();
    }
}


 //sidebar toggle
 function SideBarToggleAA(event) {
    var len = (event.currentTarget.id).split("_").length;
    var windowviewid = (event.currentTarget.id).split("_")[len - 1];

    $("#" + event.currentTarget.id).parent().toggleClass('active');
    $("#selectedTermName_"+windowviewid).parent().parent().parent().parent().parent().toggleClass('active');

 }