'use strict';

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


    $scope.genderId = "";
    $scope.BodyViewData;
    $scope.selectedGenderBodyViewData;
    $scope.imagePath = "";
    $rootScope.BodyRegionData;
    $rootScope.BodyRegionCordinatesData;
    $scope.isTransparencyActivated = false;
    $rootScope.BodyLayerData;
    $rootScope.VocabTermData;

    //for modesty image layers 
    $scope.lowerlayerNumberForModesty;
    $scope.HigherlayerNumberForModesty;
    $scope.layerInfoForModesty;

    $scope.VocabTermTxt;
    $scope.CommonData
    $rootScope.TermNumberData;
    $rootScope.BodySystemData
    $scope.bodyViewId = 0;
    $rootScope.bgartData;
    $scope.drawnBodyRegions;
    //view specific constants
    $rootScope.voId;
    $scope.layerNumber;
    $scope.daCounter = 1;
    $scope.bagartDetails;
    $scope.transNumber = 50;

    //for transarency scale
    $scope.TBDrawStartX;
    $scope.TBDrawStartY;
    $scope.isTBDrawnOnBodyRegion;
    $rootScope.path = "~/../content/images/speeachBubbleClose.png";
    $rootScope.isHighLight = false;
    $rootScope.coloredImageCanvasList = [];
    $rootScope.coloredImageMRCanvasList = [];
    $rootScope.ColoredCanvasData = [];
    $rootScope.grayImageDataList = [];
    $rootScope.grayImageMRDataList = [];
    $rootScope.updatedGrayDataList = [];
    $rootScope.updatedGrayMRDataList = [];
    $scope.isEligibleForHighlight = false;
    $scope.doHighlightOrExtract = false;
    $scope.isClickedOnBodyForHighlight;
    $scope.isEligibleForHighlightBodyByTermList = false;

    //  $scope.AnteriorView = "active";

    $scope.zoomInOut = 75;
    $scope.speechBubbleCounter = 0;
    $scope.j = 0;
    $scope.speechbubbleList = [];
    $scope.speachBubbleArrayAnnotation = [];
    $rootScope.multiAnnotationIsON = false;
    $scope.previousGrayImageDataVar;
    $scope.previousGrayCanvas;
    $rootScope.updatedImageDataList = [];
    $rootScope.updatedImageMRDataList = [];

    $scope.previousSelectedTermList = [];
    $scope.runningWorkers = [];
    $scope.runningSearchWorkers = [];
    $scope.runningBodyViewWorkers = [];

    // This variable is used for unhighlight previously highlighted body portion, if multiAnnotation is false.
    $scope.machedIcolorInBodyRegion = [];

    $rootScope.MaskCanvasData = [];

    //extract
    $rootScope.isExtract = false;
    $rootScope.UIWrapperZIndex = 12000;

    $rootScope.whiteImageDataList = [];
    $rootScope.whiteImageMRDataList = [];
    $rootScope.previousHighlightList = [];

    $rootScope.isViewChange = false;
    $rootScope.isGenderChnage = false;

    // to do it is setting but not using. need to check
    $rootScope.updatedWhiteImageDataList = [];
    $rootScope.updatedWhiteImageMRDataList = [];

    //normal mode
    $rootScope.isNormalMode = true;
    $rootScope.isZoomed = false;

    //navigator man functionality
    $scope.navigatorImage;
    $rootScope.NavigatorData;
    $scope.navimgsrc;

    $scope.dragdivleft = 0;
    $scope.dragdivtop = 0;

    $scope.IsSearchVisible = false;
    $scope.shapesize = 1;
    $scope.dragdivposition = {
        "left": $scope.dragdivleft,
        "top": $scope.dragdivtop
    };


    //array for bodyviewid correspoing to male female(used for gender change)
    $scope.correspondingBodyViewIds = {
        '1': '5',
        '2': '6',
        '3': '7',
        '4': '8',
        '9': '11',
        '10': '12',

        '5': '1',
        '6': '2',
        '7': '3',
        '8': '4',
        '11': '9',
        '12': '10',

    }

    $scope.bodyViews = {
        'Anterior': '1',
        'Lateral': '2',
        'Medial': '3',
        'Posterior': '4',
        'Lateral Arm': '5',
        'Medial Arm': '6'
    }

    $scope.isBodylayerdataLoaded = false;
    $scope.isBodyRegionDataLoaded = false;
    //currentTitleFromJson shows the current BodyView Title 
    $scope.currentTitleFromJson;
    $scope.showme = false;
    $scope.IsVisible = function () {
        $scope.scroll();

    }


    $scope.scroll = function () {
        // $window.scrollTo(0, 0);
        $("html,body").scrollTop(0);
        //alert("scroll");
    }


    $scope.switchGender = function () {

        var retrievedObject = localStorage.getItem('currentViewTitle');

        if (retrievedObject == "Male Anterior") {
            $scope.male = "active";
            $scope.female = "";
        }
        else if (retrievedObject == "Female Anterior") {
            $scope.male = "";
            $scope.female = "active";
        }
    }

    //get the DA body view list based on selected gender
    //get the DA body view list based on selected gender
    $scope.getDAViewList = function ($event) {


        if ($('#MainImage') != null) {
            $('#MainImage').remove();
        }
      //  $rootScope.currentActiveModuleTitle = Modules[0].Name;
        $("#bodyViewList").empty();
        //for default load
        if ($event == null || $event == undefined) {
            //if ((localStorage.getItem("genderId") != "")||(localStorage.getItem("genderId")!="null")) {
            //    $scope.genderId = localStorage.getItem("genderId");
            //}
            var selectedGender = localStorage.getItem("genderId");
            if ((selectedGender == null)) {
                $scope.genderId = "Male";
            }
            else
                $scope.genderId = localStorage.getItem("genderId");

        }
        else {
            $scope.genderId = $event.currentTarget.id;
        }

        localStorage.setItem("genderId", $scope.genderId);

        var selectedGender = localStorage.getItem("genderId");

        if (selectedGender != null) {
            if (selectedGender == "Male") {
                $('#Male').addClass('active');
                $('#Female').removeClass("active");
            }
            else {
                $('#Female').addClass('active');
                $('#Male').removeClass("active");
            }

        }

        $scope.selectedGenderBodyViewData = new jinqJs()
                                           .from($scope.BodyViewData.BodyViews.view)
                                           .where('_gender == ' + $scope.genderId)
                                           .select();

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


                var userEthnicity;
                var userModestysettings;
                var curentEthnicity = localStorage.getItem("globalEthnicity");
                if (typeof (curentEthnicity) !== "undefined" && curentEthnicity !== null) {
                    userEthnicity = curentEthnicity;
                }
                else {
                    userEthnicity = $rootScope.globalSetting.ethnicity;
                }

                var curentmodesty = localStorage.getItem("globalModesty");
                if (typeof (curentmodesty) !== "undefined" && curentmodesty !== null) {
                    userModestysettings = curentmodesty;
                }
                else {
                    userModestysettings = $rootScope.globalSetting.modesty;
                }



                //var userSelectedSkintone = 'W';
                //$scope.userModestySetting = 'Y'
                var thumbnailImage;
                if ((value._id == 1) || (value._id == 3) || (value._id == 5) || (value._id == 6) || (value._id == 7) || (value._id == 11))
                    thumbnailImage = ((value._thumbnailImage).replace('.jpg', '_' + userEthnicity + userModestysettings)) + '.jpg';
                else {
                    thumbnailImage = ((value._thumbnailImage).replace('.jpg', '_' + userEthnicity)) + '.jpg';

                }

                $scope.imagePath = "~/../content/images/DA/" + $scope.zoomInOut + "/body-views/" + value._id + '/skintone/' + userEthnicity + '/' + thumbnailImage;


                var $el = $('<div id=' + value._id + ' class="col-sm-3 col-lg-2" title = ' + value._title + ' data-ng-click="openView($event)"><div class="thumbnail" >'
                                          + '<img class= "daImg" id="' + value._title + '" src="' + $scope.imagePath + '" alt="" title="" >'
                                          + '<div class="caption"><p>' + value._title + '</p></div></a></div></div>').appendTo('#bodyViewList');


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

            });
        }

    };



    $scope.openView = function ($event) {
        $rootScope.disableAnnotationTB = false;
        $rootScope.MenuModuleName = "DA";
        //alert($rootScope.MenuModuleName);
        $rootScope.isLoading = true;
        $('#spinner').css('visibility', 'visible');

        $rootScope.currentBodyViewId = $event.currentTarget.id;
        $rootScope.ViewTitle = $event.currentTarget.textContent;

        localStorage.setItem("currentViewTitleFromJson", $event.currentTarget.textContent);
        localStorage.setItem("currentViewTitle", $event.currentTarget.textContent);
        localStorage.setItem("currentBodyViewId", $event.currentTarget.id);

        var u = $location.url();
        $location.url('/da-body-view');

        var view_list = angular.element($event.currentTarget);
        var view_list_male_female = view_list.attr('title');

        if (($event.currentTarget.textContent == "Female Anterior" || $event.currentTarget.textContent == "Male Anterior")) {
            $rootScope.AnteriorView = "active";
            $rootScope.LateralView = "";
            $rootScope.MedialView = "";
            $rootScope.PosteriorView = "";
            $rootScope.LateralArmView = "";
            $rootScope.MedialArmView = "";
        }
        if (($event.currentTarget.textContent == "Female Lateral" || $event.currentTarget.textContent == "Male Lateral")) {
            $rootScope.AnteriorView = "";
            $rootScope.LateralView = "active";
            $rootScope.MedialView = "";
            $rootScope.PosteriorView = "";
            $rootScope.LateralArmView = "";
            $rootScope.MedialArmView = "";


        }
        if (($event.currentTarget.textContent == "Female Medial" || $event.currentTarget.textContent == "Male Medial")) {
            $rootScope.AnteriorView = "";
            $rootScope.LateralView = "";
            $rootScope.MedialView = "active";
            $rootScope.PosteriorView = "";
            $rootScope.LateralArmView = "";
            $rootScope.MedialArmView = "";


        }
        if (($event.currentTarget.textContent == "Female Posterior" || $event.currentTarget.textContent == "Male Posterior")) {
            $rootScope.AnteriorView = "";
            $rootScope.LateralView = "";
            $rootScope.MedialView = "";
            $rootScope.PosteriorView = "active";
            $rootScope.LateralArmView = "";
            $rootScope.MedialArmView = "";

        }
        if (($event.currentTarget.textContent == "Female Lateral Arm" || $event.currentTarget.textContent == "Male Lateral Arm")) {
            $rootScope.AnteriorView = "";
            $rootScope.LateralView = "";
            $rootScope.MedialView = "";
            $rootScope.PosteriorView = "";
            $rootScope.LateralArmView = "active";
            $rootScope.MedialArmView = "";


        }
        if (($event.currentTarget.textContent == "Female Medial Arm" || $event.currentTarget.textContent == "Male Medial Arm")) {
            $rootScope.AnteriorView = "";
            $rootScope.LateralView = "";
            $rootScope.MedialView = "";
            $rootScope.PosteriorView = "";
            $rootScope.LateralArmView = "";
            $rootScope.MedialArmView = "active";


        }

        //$rootScope.Normal = "LeftButtonsDefaultState";

        if (view_list_male_female == "Male") {

            $rootScope.male = "active";
            $rootScope.female = "";
        }
        else {

            $rootScope.male = "";
            $rootScope.female = "active";
        }


    }


    //load json data for body view
    $scope.loadDissectibleAnatomyData = function () {

        //get current path
        var currentURL = $location.path();
        var selectedModuleName = '';
            angular.forEach( $rootScope.userModules, function (value, key) {
                if (value.slug === currentURL.replace('/','')) {
                    selectedModuleName = value.name;
                    $rootScope.currentActiveModuleTitle = selectedModuleName;
                }
            }) 
           
          
        $rootScope.ClearIframe();

        //load common data
        var commondataJsonPath = '~/../content/data/json/da/da_dat_common.json';

        DataService.getAnotherJson(commondataJsonPath)
       .then(
        function (result) {

            $rootScope.CommonData = result;
            $http({ method: 'GET', url: '~/../content/data/json/da/da_dat_contentlist.json' }).success(function (data) {

                $scope.BodyViewData = data;

                $scope.getDAViewList();

            })
       .error(function (data, status, headers, config) {
           console.log(data);
       });


        },
        function (error) {
            console.log(error.statusText)
        }
        )
        //load body-views data


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



        //push the details of open module in array   $rootScope.openModules
        $rootScope.openModules.push({ "ModuleId": 1 });


    }


    //da-body-views functions

    $scope.openBodyView = function () {

        //0. we will initially append container to load body

        //check if localstorage has any settings
        var curentEthnicity = localStorage.getItem("globalEthnicity");
        if (typeof (curentEthnicity) !== "undefined" && curentEthnicity !== null) {
            $rootScope.globalSetting.ethnicity = curentEthnicity;
        }

        var curentmodesty = localStorage.getItem("globalModesty");
        if (typeof (curentmodesty) !== "undefined" && curentmodesty !== null) {
            $rootScope.globalSetting.modesty = curentmodesty
        }

        //0.1
        var currentBodyViewId = localStorage.getItem("currentBodyViewId");

        $scope.loadSearchDataForBodyView();


        console.log('currentBodyViewId pickjed from localStorage: ' + currentBodyViewId);

        var openViews;
        if ($rootScope.openViews != null || $rootScope.openViews != undefined) {
            if ($rootScope.openViews.length > 0) {
                openViews = new jinqJs()
                           .from($rootScope.openViews)
                           .where("BodyViewId == " + currentBodyViewId)
                           .select();
            }
        }

        // 0.2 getting corresponding body view title
        //var counter = 1;
        var tittle = localStorage.getItem("currentViewTitleFromJson");
        localStorage.setItem("currentViewTitle", tittle);

        //WILL BE USED WHEN MULTI VIEWOPEN FUNCTIONALITY IS IMPELMNETD
        //if (openViews != null && openViews != undefined) {
        //    angular.forEach(openViews, function (value, key) {

        //        if (value.bodyView == tittle) {
        //            tittle = localStorage.getItem("currentViewTitleFromJson") + counter++;
        //            $rootScope.currentActiveViewTitle = tittle;
        //            localStorage.setItem("currentViewTitle", tittle);
        //        }

        //    });
        //}
        //else {
        //    localStorage.setItem("currentViewTitle", tittle);
        //}

        //0.3 

        $.jsPanel({
            id: 'daImagePanel',
            selector: '.daBodyView',
            theme: 'success',
            currentController: 'DAController',
            parentSlug: 'da-view-list',
            ajax: {
                url: 'app/views/da/da-view.html'
            },
            title: localStorage.getItem("currentViewTitle"),

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

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

        });

        console.log('jsPanel loaded daImagePanel exist= ' + document.getElementById('daImagePanel'))
        //0.1
        $rootScope.currentSlug = 'da-body-view';

        //0.2
        $rootScope.openViews.push(
                  {
                      "module": $rootScope.currentActiveModuleTitle, "bodyView": tittle, "state": 'max', "BodyViewId": $rootScope.currentBodyViewId,
                      "slug": $rootScope.currentSlug
                  }
                );

        //0.3
        var daBodyviewElement = angular.element(document.getElementById("daBodyview"));

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

            console.log('html is compiled' + document.getElementById('daView'))
            if (document.getElementById('daView') != null) {

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

                $('#daBodyview').css("width", $(window).outerWidth());

                //1. load navigator man first  
                console.log('before LoadBodyViewNavigatorImage call')
                $scope.LoadBodyViewNavigatorImage();

                //$scope.loadSearchDataForBodyView();

                $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");

                $scope.layerNumber = 0;

                //2.

                console.log('currentBodyViewId just before sending: ' + currentBodyViewId);
                $scope.loadBodyViewData(currentBodyViewId);

                //2. load bodyRegion data
                $rootScope.isLoading = true;
                $rootScope.voId = localStorage.getItem("currentBodyViewId");

                $('#daBodyview').css("height", $(window).outerHeight());

                $('#daBodyview').css("width", $(window).outerWidth());
            }
        }, 250);
    }

    angular.element(document).ready(function (e) {

        $("#layerChangeSlider").slider({
            orientation: "vertical",
            range: "max", // <--- needed...
            min: 0,
            // max: 100,
            value: 0,
            slide: function (event, ui) {
                // $("#txtlayerNumber").val(100 - ui.value); // basic math operation..

                // $("#txtlayerNumber").val($("#layerChangeSlider").slider("value"));
            },
            stop: function (event, ui) {
                var la;
                var rootScope = angular.element(document.getElementById("bo")).scope();
                rootScope.$apply(function () {
                    rootScope.isLoading = true;
                })
                var scope = angular.element(document.getElementById("daView")).scope();
                scope.$apply(function () {
                    if (scope.isTransparencyActivated) {
                        rootScope.isLoading = false;
                    }
                    la = parseInt(scope.totalLayers) //- parseInt(scope.layerNumber);
                    //  $('#layerChangeSlider').slider("option", "value", la - ui.value);
                    var slideVal = la - ui.value;
                    $("#txtlayerNumber").val(slideVal);
                    scope.layerNumber = slideVal;
                    scope.LayerChange();
                    $("#annotationpaintbrushsize").removeClass("activebtncolor");
                    $("#annotationpainteraser").removeClass("activebtncolor");
                });
            },

        });


         $("#daImagePanel").resize(function () {
             $("#canvasDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
             $("#canvasDiv").scrollTop($rootScope.CanvasDivTopPosition);
         });

        $(document).on("mouseover", "#termList option", function (e) {
            $('#termList option[selected="selected"]').attr("selected", false);
            $(this).attr("selected", true);
            });
          
           $(document).keypress(function (e) {
                if ($('#termList option[selected="selected"]').attr("id") == "undefined") {
                    return false;
                }
                else {
                    var originator = e.keyCode || e.which;
                   // alert($('#termList option[selected="selected"]').attr("id"));
                    if ($('#termList option[selected="selected"]').attr("id")) {
                        if (e.keyCode == 13) {
                            onListManagerTermSelection($('#termList option[selected="selected"]').attr("id"));
                        }
                    }
                }
            });
       })

    $scope.loadSearchDataForBodyView = function () {
       
        console.log('loadSearchDataForBodyView');

        var currentBodyViewId = localStorage.getItem("currentBodyViewId");


        var searchWorker = new Worker('search-wp.js');

        //push workers in array to further used the refernece to delete the workers
        $scope.runningSearchWorkers.push({ 'workerName': searchWorker })

        //console.log('for bodyRegionId = ' + bodyRegionId + ', time: ' + new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"))

        searchWorker.postMessage({
            'currentBodyViewId': currentBodyViewId,
        })

        searchWorker.onmessage = function (e) {
            //console.log('callback searchWorker , time: ' + new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"));



            $rootScope.TermNumberData = e.data.TermNumberData,
            $rootScope.VocabTermData = e.data.VocabTermData,
            $scope.vocabTermTxt = e.data.vocabTermTxt


            $scope.VocabTermTxt = new jinqJs()
                                 .from($scope.vocabTermTxt)
                                 .distinct('_TermText', '_ActualTermNumber')
                                 .orderBy([{ field: '_TermText', sort: 'asc' }])
                                 .select('_ActualTermNumber', '_TermText', '_cdId');


            console.log('JlinqActivity , time: ' + new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"));

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

                var workerCount = $scope.runningSearchWorkers.length;
                if (workerCount > 0) {
                    for (var i = workerCount - 1; i >= 0; i--) {



                        var runningWorker = $scope.runningSearchWorkers[i].workerName;
                        runningWorker.terminate();
                        $scope.runningSearchWorkers.splice(i, 1);
                        // workerCount--;
                    }
                }
            }
        }

        //call watch on '$scope.VocabTermTxt and compile <li> and append to <ul> on first time load
        $scope.$watch('$scope.VocabTermTxt', function (newValue, oldValue, scope) {

            //This is added as the $scope.VocabTermTxt can change while changing view also the li elements need to be removed
            //Remove the list and then Repopulate 
            if ($('#searchListDiv').html()!="")
              $('#searchListDiv').empty()
            //Delay compile of ul li so that the remove of li is completed.
            $timeout(function () {
                var $e2 = $('<ul id="termlistfilter" class="form-control dropdown-menu" style="height:90px;width:100%;overflow-y:scroll;position:absolute;display:none;z-index:60001;"><li ng-repeat="item in VocabTermTxt| filter:{ _TermText: searchFilter}">' +
                                                           '<a id="{{item._ActualTermNumber}}" href="" onclick="selectTerm(event)">{{item._TermText}}</a>' +
                                                      ' </li></ul>').appendTo('#searchListDiv')
                $compile($e2)($scope);

            }, 500);

        }, true);

    }

    $scope.loadBodyViewData = function (currentVoid) {
        console.log('caller of worker sending currentVoid: ' + currentVoid);

        var bodyViewWorker = new Worker('body-view-wp.js');

        //push workers in array to further used the refernece to delete the workers
        $scope.runningBodyViewWorkers.push({ 'workerName': bodyViewWorker })

        bodyViewWorker.postMessage({

            'currentViewId': currentVoid

        });

        bodyViewWorker.onmessage = function (e) {
            //console.log('callback in extr');

            $rootScope.BodyRegionData = e.data.bodyRegionData;
            $rootScope.bgartData = e.data.bodyArtData;
            $rootScope.BodyLayerData = e.data.bodyLayerData;

            var dataLength = $rootScope.BodyLayerData.Layers.DataLayer.length;

            //set max for LayerNumber input
            $rootScope.totalLayers = dataLength - 1;
            //   debugger
            $('#txtLayerNumber').attr('max', $rootScope.totalLayers);
            $('#layerChangeSlider').slider("option", "max", $rootScope.totalLayers);

            $scope.isBodylayerdataLoaded = true;

            $scope.LoadDefaultLayerImage();



        }
        bodyViewWorker.onerror = function (e) {
            alert('Error: Line ' + e.lineno + ' in ' + e.filename + ': ' + e.message);
        };
    }


    //Code for displaying NavigatorImage for BodyView
    $scope.LoadBodyViewNavigatorImage = function () {

        if ($rootScope.currentBodyViewId == undefined || $rootScope.currentBodyViewId == null) {
            $rootScope.currentBodyViewId = localStorage.getItem("currentBodyViewId");
        }
        console.log('insideLoadBodyViewNavigatorImage')
        var NavigatorManJsonPath = '~/../content/data/json/da/da_dat_orient_image.json';

        $http({ method: 'GET', url: NavigatorManJsonPath })
        .success(function (data) {
            $rootScope.NavigatorData = data;

            $scope.skinTone = $rootScope.globalSetting.ethnicity;

            var navigatorManData = new jinqJs()
                              .from($rootScope.NavigatorData.Navigtor.ViewOrientation)
                              .where("_ViewOrientationId == " + $rootScope.currentBodyViewId)
                              .select();

            if ((navigatorManData != null || navigatorManData != undefined) && (navigatorManData.length > 0)) {


                var imageInfoForNavigator = new jinqJs()
                                             .from(navigatorManData[0].ImageInfo)
                                             .where("_Ethnicity == " + $scope.skinTone)
                                             .select();
            }
            else {
                console.log('NAVIGATOR.DATA.NOT.FOUND FOR BODY VIEW: ' + $rootScope.currentBodyViewId);
            }

            if (imageInfoForNavigator != null || imageInfoForNavigator != undefined) {
                $scope.navigatorImage = imageInfoForNavigator;


                var navImageModesty;

                if (($scope.navigatorImage != null || $scope.navigatorImage != undefined) && ($scope.navigatorImage.length > 0)) {
                    angular.forEach($scope.navigatorImage, function (value, key) {

                        if (value._HaveModesty === $rootScope.globalSetting.modesty) {
                            navImageModesty = value._ImageName;
                        }
                    })
                }
                if (typeof (navImageModesty) === "undefined" || navImageModesty === null) {

                    navImageModesty = $scope.navigatorImage[0]._ImageName;
                }

               // $scope.navimgsrc = "~/../content/images/DA/ethnicity/body-views/" + $scope.voId + '/' + $scope.skinTone + '/navigator_images/' + navImageModesty;
                document.getElementById('navimg').src = "~/../content/images/DA/ethnicity/body-views/" + $scope.voId + '/' + $scope.skinTone + '/navigator_images/' + navImageModesty;

                $('#navigatorDiv').css('visibility', 'visible');

                $('#containment - wrapper').css('visibility', 'visible');
            }

            else {
                console.log('NAVIGATOR.IMAGE.NOT.FOUND FOR BODY VIEW: ' + $rootScope.currentBodyViewId);
            }
        })

        .error(function (data, status, headers, config) {
            //1.
            console.log('DATA.NOT.LOADED FOR:' + NavigatorManJsonPath + ', ERROR: ' + data);
            //2.
            // $scope.LoadBodyViewNavigatorImage()
        });
    }


    $scope.LoadDefaultLayerImage = function () {
        console.log('inside LoadDefaultLayerImage')
        $rootScope.isNormalMode = true;

        $scope.layerNumber = 0;
        $scope.skinTone = $rootScope.globalSetting.ethnicity;

        //viewOrientationId is to pic coordinates of view and void is to pic iamge name from resopective json
        $rootScope.viewOrientationId = $rootScope.voId;
        if ($rootScope.voId == 5) {
            $rootScope.viewOrientationId = 1;
        }
        else if ($rootScope.voId == 6) {
            $rootScope.viewOrientationId = 2;
        }
        else if ($rootScope.voId == 7) {
            $rootScope.viewOrientationId = 3;
        }
        else if ($rootScope.voId == 8) {
            $rootScope.viewOrientationId = 4;
        }
        else if ($rootScope.voId == 9) {
            $rootScope.viewOrientationId = 5;
        }
        else if ($rootScope.voId == 10) {
            $rootScope.viewOrientationId = 6;
        }
        else if ($rootScope.voId == 11) {
            $rootScope.viewOrientationId = 5;
        }
        else if ($rootScope.voId == 12) {
            $rootScope.viewOrientationId = 6;
        }

        $scope.CalculateImageCordinates($rootScope.viewOrientationId);


    };


    //calculate coordinates for body region images
    $scope.CalculateImageCordinates = function (viewOrientationId) {
        $scope.layerInfoForModesty = [];
        $rootScope.isLoading = true;
        $('#spinner').css('visibility', 'visible');
        $scope.modestyImageInfo = [];
        // annotation toolbar canvas

    


        $scope.terminateCurrentlyRunningWPs();

        var drawnBodyRegionCount = [];

        if ($rootScope.MaskCanvasData != null || $rootScope.MaskCanvasData != undefined) {
            var n = $rootScope.MaskCanvasData.length;

            if (n > 0) {
                for (var i = n - 1; i >= 0; i--) {

                    $rootScope.MaskCanvasData.splice(i, 1);
                    // workerCount--;
                }

                $rootScope.MaskCanvasData = null;
                $rootScope.MaskCanvasData = [];
            }
        }

        //set height of canvas div and left tool bar as per window size
        $rootScope.BodyRegionCordinatesData = []; // create an empty array

        $('#daBodyview').css('width', '100%');
        var canvasDIvHeight = parseInt($('#daImagePanel').outerHeight()) - 104;
        $('#canvasDiv').css('height', canvasDIvHeight);
        $('#leftToolBar').css('height', $('#daImagePanel').outerHeight())



        //calculate image coordinates and draw image
        var bodyRegionCoordinates = $rootScope.BodyRegionData.BodyRegionViews;
        // var viewOrientationId = String($rootScope.voId);


        $scope.bodyRegionCoordinates = new jinqJs()
                .from($rootScope.BodyRegionData.BodyRegionViews.BodyRegionCordinates)
                .where('_ViewOrientationId == ' + viewOrientationId)
                .select();

        console.log('viewOrientationId= ' + viewOrientationId + ', $scope.bodyRegionCoordinates length= ' + $scope.bodyRegionCoordinates.length)
        // if ($rootScope.voId == 9 || $rootScope.voId == 11) {

        $scope.bagartDetails = new jinqJs()
                               .from($rootScope.bgartData.BackgroundArts.BackgroundArtDetail)
                               .where('_ViewOrientationId == ' + viewOrientationId)
                               .select();   

        if ($scope.ColoredImageSRC != null && $scope.ColoredImageSRC.length > 0) {
            $scope.ColoredImageSRC = null;
            $scope.ColoredImageSRC = [];
            //remove existing body view
            var canDiv = document.getElementById('canvasDiv');
            var canDivChildCount = canDiv.childElementCount;
            if (canDivChildCount > 0) {
                canDiv.innerHTML = '';
            }
           // $scope.flushCanvas();
        }
        else {
            $scope.ColoredImageSRC = [];
        }

        //history code

        if ($("#canvasDiv").find("canvas[id='canvasPaint']").length == 0) {
            var ATBarHtml = $("#canvasDiv").append('<canvas id="canvasPaint" width="2277" height="3248" ng-click="FreeStylePaint($event)" class="canvas-annotationStyle1"></canvas><canvas id="canvas" ng-click="onDrawingCanvasClick($event)" width="2277" height="3248" class="canvas-annotationStyle"></canvas>');
            $compile(ATBarHtml)($scope);
            $scope.onDrawingCanvasClick();
            //  $rootScope.FreeStylePaint();

        }

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

                if (value._HaveMirrorImage == 'Y') {

                    //DrawMirroredImage

                    //0. Scaling as per default zoom               
                    var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, value._MirrorValue);

                    //1.Get image source
                    var src = $scope.GetImageSource(value._BodyRegionId);

                    $scope.imageSource = src;

                    //2.Draw mirror image
                    $scope.DrawMirroredImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N');
                    //  debugger;
                    $rootScope.BodyRegionCordinatesData.push(
                                             {
                                                 "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth),
                                                 "X": Math.round(rectangle.scaledX), "Y": Math.round(rectangle.scaledY), "IsMirror": 'Yes'
                                             }
                                            );

                    //3.GetMaskImageSource               
                    var maskImageSrc = $scope.GetMaskImageSource($scope.imageSource);
                    // debugger;
                    //4 Draw Mask Mirror Image                    
                    $scope.DrawMirroredImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskImageSrc, value._BodyRegionId, 'Y');


                    //Draw Normal Image

                    //0. Scaling as per default zoom  
                    var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, 0);


                    //1.Draw body region which have mirror image
                    $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N');
                    $scope.BodyRegionCordinatesData.push(
                               {
                                   "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth),
                                   "X": Math.round(rectangle.scaledX), "Y": Math.round(rectangle.scaledY), "IsMirror": 'No'
                               }
                              );

                    //2.Draw body region for mask image
                    $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskImageSrc, value._BodyRegionId, 'Y');


                }
                else {

                    //0.Scaling as per default zoom                  
                    var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, value._MirrorValue);

                    //1.Get image source
                    if (value._IsPrimary == 'N') {
                        var src = $scope.GetBackgroundImgSource(value._BodyRegionId);
                        $scope.imageSource = src;
                    }
                    else {
                        var src = $scope.GetImageSource(value._BodyRegionId);
                        $scope.imageSource = src;
                    }

                    //2.Draw body region which don't have mirror image
                    $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N');

                    $scope.BodyRegionCordinatesData.push(
                              {
                                  "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth),
                                  "X": Math.round(rectangle.scaledX), "Y": Math.round(rectangle.scaledY), "IsMirror": 'No'
                              }
                             );

                    //3.GetMaskImageSource               
                    var maskSRC = $scope.GetMaskImageSource($scope.imageSource);

                    //4.Draw body region for mask image
                    $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskSRC, value._BodyRegionId, 'Y');


                    //draw figLeaf for modesty

                    $scope.figLaefImageName;
                    $scope.figLaefX;
                    $scope.figLaefY;
                    var gender;
                    if (localStorage.getItem("genderId") == 'Female') {
                        gender = 'F';

                    }
                    else {
                        gender = 'M';
                    }
                    if (((localStorage.getItem("genderId") == 'Female') && (value._BodyRegionId == 2)) || (value._BodyRegionId == 3)) {

                        if ($scope.bagartDetails != null || $scope.bagartDetails != undefined) {
                            var dtlOfBr = new jinqJs()
                                          .from($scope.bagartDetails)
                                          .where('_BodyRegionId == ' + value._BodyRegionId)
                                          .select();
                            if (dtlOfBr != null || dtlOfBr != undefined) {

                                var dtlOfGender = new jinqJs()
                                                  .from(dtlOfBr)
                                                  .where('_Gender == ' + gender)
                                                  .select();
                                if (dtlOfGender != null || dtlOfGender != undefined) {

                                    var dtlOfSktn = new jinqJs()
                                                     .from(dtlOfGender)
                                                     .where('_Skintone == +')
                                                     .select();

                                    //multiple conditions are not working in where clause of JinQ so need multiple filtered variables


                                    if ((dtlOfSktn != null || dtlOfSktn != undefined) && (dtlOfSktn.length > 0)) {

                                        if ((parseInt(dtlOfSktn[0]._lns) <= parseInt($scope.layerNumber)) && (parseInt(dtlOfSktn[0]._lne) > parseInt($scope.layerNumber)) && (dtlOfSktn[0]._isfr == 'Y')) {

                                            $scope.figLaefImageName = dtlOfSktn[0]._ImageId;
                                           

                                            $scope.lowerlayerNumberForModesty = dtlOfSktn[0]._lns;
                                            $scope.HigherlayerNumberForModesty = dtlOfSktn[0]._lne;
                                            $scope.layerInfoForModesty.push({ "bodyRegionId": value._BodyRegionId, "lowerlayerNumberForModesty": $scope.lowerlayerNumberForModesty, "HigherlayerNumberForModesty": $scope.HigherlayerNumberForModesty })

                                            var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, value._MirrorValue);


                                            var src = "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $rootScope.voId + "/layers/0/" + value._BodyRegionId + "/" + $scope.figLaefImageName;

                                            $scope.DrawImage(rectangle.scaledHeight, rectangle.scaledWidth, rectangle.scaledX, rectangle.scaledY, src, 'modestyImg' + value._BodyRegionId, 'N')

                                        }
                                    }
                                }
                            }

                        }


                    }
                }


            });

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

        if (($rootScope.globalSetting.modesty == 'Y')) {
            if ($('.modestyImg') != null) {
                $('.modestyImg').css('visibility', 'visible');
            }
        }
        //set scrollbars on canvas and hide loading label
        //   debugger;
        // var isiOSSafari = (navigator.userAgent.match(/like Mac OS X/i)) ? true : false;
        var isiOSSafari = (navigator.userAgent.match(/iPad/i)) ? true : false;

        //set scrollbars on canvas and hide loading label
        $('#daLoaderLabel').css('visibility', 'hidden')


        $('#canvasDiv').css('overflow', 'scroll')
        if (isiOSSafari) {
            $('#canvasDiv').scrollLeft($('#canvasDiv').width() + 150)

        }
        else {
            $('#canvasDiv').scrollLeft($('#canvasDiv').width() / 2)
        }


        // $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition)
        $('#canvasDiv').scrollTop(50)
        var abc = $rootScope.BodyRegionCordinatesData;
        //debugger;
        $('#layerChangeSlider').slider("option", "value", parseInt($rootScope.totalLayers) - parseInt($scope.layerNumber));
        //  $('#spinner').css('visibility', 'hidden');
        $rootScope.isLoading = false;
        //Dated:16-07-2016 Issue #4957 :While selecting the Zoom-in\Zoom-out button scroll should be go on top.
        //                       #4976 :While changing gender male to female scroll bar is going on top. 
        var canvasDiv = document.getElementById('canvasDiv');
        if (canvasDiv != null || canvasDiv != undefined) {
            canvasDiv.scrollTop = 0;


            //Navigator Code for dynamically calculating the height and width of Dragable Div on Navigator Image

            var dragdivh = Math.floor(($('#canvasDiv').height() / $('#canvasDiv')[0].scrollHeight) * 119) //119px is the height of the image

            if ($('#canvasDiv')[0].scrollWidth > $('#canvasDiv')[0].clientWidth) {

                var dragdivw = 42
                $scope.dragdivleft = 21;
                $scope.dragdivtop = 0;

                $scope.dragdivposition = {
                    "left": 21,
                    "top": 0
                };
            }
            else {
                var dragdivw = 83;

                $scope.dragdivleft = 0;
                $scope.dragdivtop = 0;

                $scope.dragdivposition = {
                    "left": 0,
                    "top": 0

                };
            }
        }



        $('#draggable').css('width', dragdivw);
        $('#draggable').css('height', dragdivh)
     
    }

    function scaleRectangle(x, y, height, width, mirrorValue) {
        var nzoom = $scope.zoomInOut;
        var existingZoon = 100;

        var X = 0;
        var scaledY = 0;
        var scaledHeight = 0;
        var scaledWidth = 0;

        if (mirrorValue != 0) {
            var mirroredX = parseInt(mirrorValue) + parseInt(x);
            var newX = (mirroredX * nzoom);
            mirroredX = (newX / existingZoon);
            X = mirroredX;
        }
        else {
            var newX = (x * nzoom);
            X = (newX / existingZoon);
        }

        var newY = (y * nzoom);
        var Y = (newY / existingZoon);

        var newHeight = (height * nzoom);
        var ht = (newHeight / existingZoon);

        var newWidth = (width * nzoom);
        var wt = (newWidth / existingZoon);

        return {
            scaledX: X,
            scaledY: Y,
            scaledHeight: ht,
            scaledWidth: wt
        }
    }

    $scope.GetMaskImageSource = function (src) {

        if (src != null || src != undefined) {
            if (src.match('.png')) {
                var mciImage = src.replace('.png', '_mci.png')
            }
            else {
                var mciImage = src.replace('.jpg', '_mci.png')
            }
            return mciImage;

        }
        else {
            console.log('IMAGE.SOURCE.NOLT.FOUND');
        }
    }



    $scope.GetImageSource = function (bodyRegionId) {

        var dataLength = $rootScope.BodyLayerData.Layers.DataLayer.length;

    
        //    $('#layerChangeSlider').slider("option", "value",parseInt($rootScope.totalLayers)-parseInt($scope.layerNumber));

        $scope.one = 1;

        if ($rootScope.isListManagerSelected == true) {
            $scope.layerNumber = $('#txtlayerNumber').val();
        }

        $scope.userInput = parseInt($scope.layerNumber);


        $scope.skinTone = $rootScope.globalSetting.ethnicity;

        var SelectedLayerData = [];
        SelectedLayerData = $rootScope.BodyLayerData.Layers.DataLayer[dataLength - $scope.userInput - 1];
        if ((SelectedLayerData != null || SelectedLayerData != undefined))

            if ($scope.layerNumber == 0) {
                console.log('lNo: ' + $scope.layerNumber + ' and BodyRegion.length: ' + SelectedLayerData.BodyRegion.length);

                if (SelectedLayerData.BodyRegion.length > 0) {
                    for (var z = 0; z < SelectedLayerData.BodyRegion.length; z++) {

                        var bodyRegion = SelectedLayerData.BodyRegion[z]._BodyRegionId;
                        var bodyRegionSkinTone = SelectedLayerData.BodyRegion[z].Image._SkintTone;

                        if ($rootScope.viewOrientationId == 3 && bodyRegionId == 1) {
                            console.log('$rootScope.voId: ' + $rootScope.voId);
                            if (bodyRegion == bodyRegionId && bodyRegionSkinTone == 'W') {
                                return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $rootScope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/W/" + SelectedLayerData.BodyRegion[z].Image._ImageName;
                            }
                        }

                        else {

                            if (bodyRegion == bodyRegionId && bodyRegionSkinTone == $scope.skinTone) {

                                return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $rootScope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + $scope.skinTone + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName;
                            }
                        }
                    }
                }
            }
            else {
                //  debugger;
                //below 4 bodyviews have only single body region
                if (($rootScope.voId == '9') || ($rootScope.voId == '11') || ($rootScope.voId == '10') || ($rootScope.voId == '12')) {
                    var bodyRegion = SelectedLayerData.BodyRegion._BodyRegionId;

                    return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $rootScope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + SelectedLayerData.BodyRegion.Image._ImageName;

                }
                else // it is for other body view which have multiple body regions and layer no > 0
                {
                    // debugger;
                    if (SelectedLayerData.BodyRegion.length > 0) {
                        for (var z = 0; z <= SelectedLayerData.BodyRegion.length; z++) {
                            var bodyRegion = SelectedLayerData.BodyRegion[z]._BodyRegionId;
                            if (bodyRegion == bodyRegionId) {

                                return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $rootScope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName;


                            }
                        }
                    }
                }
            }

    }

    $scope.GetBackgroundImgSource = function (bodyRegionId) {


        var selectedGender;
        if (localStorage.getItem("genderId") == "Male") {
            selectedGender = 'M';
        }
        else {
            selectedGender = 'F';

        }
        //filter data based on bodyRegion
        $scope.bagartBodyRegionDetails = new jinqJs()
              .from($scope.bagartDetails)
              .where('_BodyRegionId == ' + bodyRegionId)
              .select();
        if ($scope.bagartBodyRegionDetails != null || $scope.bagartBodyRegionDetails != undefined) {

            //filter bodyRegion data basd on skintone
            $scope.skinTone = $rootScope.globalSetting.ethnicity
            $scope.bagartDetailsOnSktn = new jinqJs()
                                         .from($scope.bagartBodyRegionDetails)
                                         .where('_Skintone == ' + $scope.skinTone)
                                         .select();

            if ($scope.bagartDetailsOnSktn != null || $scope.bagartDetailsOnSktn != undefined) {
                //only brid=2 is having different male,female image, other bodr region have common images for male, female
                if (bodyRegionId == 2) {
                    for (var z = 0; z <= $scope.bagartDetailsOnSktn.length; z++) {
                        var gender = $scope.bagartDetailsOnSktn[z]._Gender;
                        if (gender == selectedGender) {
                            return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $rootScope.voId + "/layers/0/" + bodyRegionId + "/" + $scope.skinTone + "/" + $scope.bagartDetailsOnSktn[z]._ImageId;
                        }
                    }
                }

                else {
                    return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $rootScope.voId + "/layers/0/" + bodyRegionId + "/" + $scope.skinTone + "/" + $scope.bagartDetailsOnSktn[0]._ImageId;

                }
            }
        }
    }


    $scope.DrawMirroredImage = function (h, w, x, y, src, bodyRegionId, isMaskImage) {

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

        var FlipedImgCanvas = document.createElement('canvas');
        FlipedImgCanvas.height = h;
        FlipedImgCanvas.width = w;
        FlipedImgCanvas.setAttribute("data-IsMirrored", "Y")
        FlipedImgCanvas.style.position = "absolute";
        FlipedImgCanvas.style.left = x + "px";
        FlipedImgCanvas.style.top = y + "px";

      

        if (isMaskImage == 'Y') {
           
            FlipedImgCanvas.id = 'imageCanvas' + bodyRegionId + '_MR_mci';
            FlipedImgCanvas.style.visibility = 'hidden';
       

        }
        else {
            FlipedImgCanvas.id = 'imageCanvas' + bodyRegionId + '_MR';


            if ($rootScope.isExtract == true) {
                FlipedImgCanvas.style.visibility = 'visible'
            }
            else {
                if ($rootScope.isHighLight == true && $rootScope.isZoomed == false) {
                    FlipedImgCanvas.style.visibility = 'hidden';
                }
            }
        }



        FlipedImgCanvas.addEventListener('click', function (evt) {


            //to get correct data on multihighlight highlight
            if ($scope.isLayerChange == true) {
                $scope.isLayerChange = false;
            }

            if (evt.ctrlKey) {
                $rootScope.multiAnnotationIsON = true;
            }
            else {
                if (($rootScope.previousHighlightList != null || $rootScope.previousHighlightList != undefined) && ($rootScope.previousHighlightList.length > 0)) {
                    $rootScope.previousHighlightList = [];
                }

                $rootScope.multiAnnotationIsON = false;
            }

            //get mouse coordinate of mirror image click
            var mousePos = $scope.getMousePos(evt);

            var context = FlipedImgCanvas.getContext("2d");
            var canvasId = context.canvas.getAttribute('id');


            var mirrorCanvasX = context.canvas.offsetLeft;
            var mirrorCanvasWidth = context.canvas.clientWidth;

            var maskCanvasId = (canvasId.replace('_MR', '')) + '_mci';
            var maskCanvas = document.getElementById(maskCanvasId);
            var maskCanvasContext = maskCanvas.getContext("2d");


            var canvasDiv = document.getElementById('canvasDiv');
            var verticalScrollPosition = canvasDiv.scrollTop;
            var horizontlScrollPosition = canvasDiv.scrollLeft;

            var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(mousePos.x) + horizontlScrollPosition);// - 135);

            var mirrorXOnNormalImage = parseInt(maskCanvasContext.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);

            var actulalX = mirrorXOnNormalImage
            var actualY = mousePos.y + verticalScrollPosition


            var pixelData = maskCanvasContext.getImageData(Math.round(actulalX - parseInt(maskCanvasContext.canvas.offsetLeft)), Math.round(actualY - y), 1, 1);

            pixelData.data[0] = pixelData.data[0] - 9;
            pixelData.data[1] = pixelData.data[1] - 9;
            pixelData.data[2] = pixelData.data[2] - 9

            var Red;
            var Green;
            var Blue;
            var zero = "0";

            if ((pixelData.data[0]).toString().length != 2) {
                Red = zero.concat((pixelData.data[0]).toString())
            }
            else {
                Red = (pixelData.data[0]).toString()
            }
            if ((pixelData.data[1]).toString().length != 2) {
                Green = zero.concat((pixelData.data[1]).toString())
            }
            else {
                Green = (pixelData.data[1]).toString()

            }
            if ((pixelData.data[2]).toString().length != 2) {
                Blue = zero.concat((pixelData.data[2]).toString())
            }
            else {
                Blue = (pixelData.data[2]).toString()

            }
            var RGBColor = (Red + Green + Blue);

            $rootScope.previousHighlightList.push(RGBColor);


            if ($rootScope.isHighLight) {

                if ($scope.machedIcolorInBodyRegion != null || $scope.machedIcolorInBodyRegion != undefined) {
                    if ($scope.machedIcolorInBodyRegion.length > 0) {
                        if ($rootScope.multiAnnotationIsON == false) {
                            for (var i = 0; i < $scope.machedIcolorInBodyRegion.length; i++) {
                                var bodyRegionId = $scope.machedIcolorInBodyRegion[i];

                                var grayCanvasID = 'imageCanvas' + bodyRegionId;
                                var grayCanvas = document.getElementById(grayCanvasID);

                                var grayCanvasContext = grayCanvas.getContext("2d");

                                if ($rootScope.grayImageDataList[bodyRegionId - 1] != null || $rootScope.grayImageDataList[bodyRegionId - 1] != undefined) {
                                    var grayImageData = $rootScope.grayImageDataList[bodyRegionId - 1];
                                    grayCanvasContext.putImageData(grayImageData, 0, 0);
                                }

                                // for mirrored canvas

                                if (bodyRegionId == 4 || bodyRegionId == 5 || bodyRegionId == 6) {
                                    var grayCanvasID = 'imageCanvas' + bodyRegionId + '_MR';
                                    var grayCanvasMR = document.getElementById(grayCanvasID);

                                    var grayCanvasContextMR = grayCanvasMR.getContext("2d");
                                    if ($rootScope.grayImageMRDataList[bodyRegionId] != null || grayImageMRDataList[bodyRegionId] != undefined) {
                                        var grayImageDataMR = $rootScope.grayImageMRDataList[bodyRegionId];

                                        grayCanvasContextMR.putImageData(grayImageDataMR, 0, 0);
                                    }
                                }

                            }
                        }
                    }
                }

                //  $rootScope.previousHighlightList.push(RGBColor);
                $scope.isClickedOnBodyForHighlight = true;
                $scope.highLightBodyBasedOnIcolor(RGBColor);
            }

          
            //extarct clicked body part is extarct button is already enabled.

            if ($rootScope.isExtract == true) {
                if ($rootScope.multiAnnotationIsON == false) {
                    $rootScope.isListManagerSelected = false;
                }
                $scope.enableExtract(false);
            }

            var annotationText = $scope.GetAnnotationText(parseInt(RGBColor));

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

            if ($rootScope.multiAnnotationIsON == true) {

                //    $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top);
                $scope.MultiLanguageAnnationArray = [];
                $scope.MultiLanguageAnnationArray.push(annotationText);
                
                $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
            }
            else {

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

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


                    // $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top);
                    $scope.MultiLanguageAnnationArray = [];
                    $scope.MultiLanguageAnnationArray.push(annotationText);

                   
                    $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
                }
                else {

                    //  $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top);
                    $scope.MultiLanguageAnnationArray = [];
                    $scope.MultiLanguageAnnationArray.push(annotationText);

                    
                    $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
                }


            }
        }, false);

        FlipedImgCanvas.addEventListener('mousedown', function (evt) {

            //alert('mousedown')
        }, false);


        FlipedImgCanvas.addEventListener('mouseup', function (evt) {
            //alert('mouseup')


        }, false);

        var context = FlipedImgCanvas.getContext("2d");

        var PI = Math.PI;
        var PI2 = PI * 2;
        var cw, ch, imgW, imgH, mouseX, mouseY;
        var scaleFactor = 1.00;

        //$scaler = $("#scaler");
        //$scaler.val(scaleFactor);
        //$scaler.hide();

        var img = new Image();
        img.onload = start;

        //  img.src = "~/../content/images/" + src;;
        img.src = src;


        function start() {

            context.save();
            context.translate(w, 0);
            context.scale(-1, 1);
            context.drawImage(img, 0, 0);
            context.restore();
          
            
            if (isMaskImage == 'N') {


                $scope.ColoredImageSRC.push(
                                                {
                                                    "bodyRegionId": bodyRegionId, "SRC": src,
                                                    "Height": h,
                                                    "Width": w,
                                                    "x": x,
                                                    "y": y,
                                                    "haveMirror": 'true'
                                                }
                                               );

                //-NIKI-for solving extarct issue 8286

                var imageCanvas = document.getElementById('imageCanvas' + bodyRegionId + '_MR');

                if (imageCanvas != null || imageCanvas != undefined) {
                    var width = imageCanvas.width;
                    var ht = imageCanvas.height;

                    var coloredCanvasContext = imageCanvas.getContext("2d");
                    var coloredImageData = coloredCanvasContext.getImageData(0, 0, width, ht);
                    var coloredImageDataVar = coloredImageData;

                    $rootScope.coloredImageMRCanvasList[parseInt(bodyRegionId)] = coloredImageDataVar;
                }
                
                                  

                //

                //   console.log('$rootScope.isListManagerSelected= ' + $rootScope.isListManagerSelected + ' length= ' + $scope.ColoredImageSRC.length)

                if (($scope.ColoredImageSRC != null || $scope.ColoredImageSRC != undefined)) {
                     
                    if ((($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) && ($scope.ColoredImageSRC.length == 9)) {
                        $scope.isEligibleForHighlight = true;
                    }
                    else if ((($rootScope.viewOrientationId == '2') || ($rootScope.viewOrientationId == '3')) && ($scope.ColoredImageSRC.length == 5)) {
                        $scope.isEligibleForHighlight = true;
                    }
                    else if (($rootScope.viewOrientationId == '5') && ($scope.ColoredImageSRC.length == 4)) {
                        $scope.isEligibleForHighlight = true;
                    }
                    else if (($rootScope.viewOrientationId == '6') && ($scope.ColoredImageSRC.length == 1)) {
                        $scope.isEligibleForHighlight = true;
                    }
                    else {
                        $scope.isEligibleForHighlight = false;
                    }

                    if ($scope.isEligibleForHighlight == true) {
                        if ($scope.isExtract == true) {
                            $rootScope.isLoading = true;
                            $('#spinner').css('visibility', 'visible');
                            $scope.highLightBody();
                        }
                        else if ($rootScope.isHighLight == true || ($rootScope.isListManagerSelected == true) || (($rootScope.isGenderChnage == true) && ($rootScope.isHighLight == true))
                                 || (($rootScope.isViewChange == true) && ($rootScope.isHighLight == true)) || $rootScope.isHighlightBodyByBodySystem == true) {
                            
                            console.log('1. $rootScope.isHighLight= ' + $rootScope.isHighLight)

                            $rootScope.isLoading = true;
                            $('#spinner').css('visibility', 'visible');
                            //$timeout(function () {
                            console.log('inside start of flipped. $scope.ColoredImageSRC.length= ' + $scope.ColoredImageSRC.length)
                            $rootScope.isHighLight = true;
                            console.log('in FlipedImgCanvas just before highLightBody call');
                            $scope.highLightBody();
                            console.log('just after highLightBody call');
                            //}, 500);
                        }
                    }
                    else {
                        $rootScope.isLoading = false;
                        $('#spinner').css('visibility', 'hidden');
                    }
                }

                // console.log('ColoredImageSRC. pushed and length: ' + $scope.ColoredImageSRC.length);
            }

            if (FlipedImgCanvas.id.match('_mci')) {

                var maskImgData = context.getImageData(0, 0, w, h);

                $rootScope.MaskCanvasData.push(
                                               {
                                                   "bodyRegionId": bodyRegionId,
                                                   "canvasId": FlipedImgCanvas.id,
                                                   "maskData": maskImgData,

                                               }
                                              );
            }
        };
        
       
        if (document.getElementById('canvasDiv') != null)
            document.getElementById('canvasDiv').appendChild(FlipedImgCanvas);
       
  



    }

    $scope.DrawImage = function (h, w, x, y, src, bodyRegionId, isMaskImage) {

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

        var imgCanvas = document.createElement('canvas');

        imgCanvas.height = h;
        imgCanvas.width = w;
        imgCanvas.setAttribute("data-IsMirrored", "N")
        imgCanvas.style.position = "absolute";
        imgCanvas.style.left = x + "px";
        imgCanvas.style.top = y + "px";

        if (isMaskImage == 'Y') {
            imgCanvas.style.visibility = 'hidden'
            imgCanvas.id = 'imageCanvas' + bodyRegionId + '_mci';

        }
        else {
            imgCanvas.id = 'imageCanvas' + bodyRegionId;

            if (bodyRegionId == 3) {
                //set z index of hip canavs to fix the issue caused by overlapping of arm canavs on hip canavs.
                imgCanvas.style.zIndex = "100";
            }
            if (bodyRegionId.match('modestyImg')) {
                //added class to further access this canavs to show and hide leaf as per modesty seting
                imgCanvas.className = 'modestyImg'
                imgCanvas.style.visibility = 'hidden'
                //set z index to make leaf canvas on top of hip canavs
                imgCanvas.style.zIndex = "200";
            }
            if (($rootScope.voId == 11 || $rootScope.voId == 9) && bodyRegionId == 6) {
                imgCanvas.style.zIndex = "500";
            }

            if ($rootScope.isExtract == true) {
                imgCanvas.style.visibility = 'visible'
            }
            else {

                if ($rootScope.isHighLight == true && $rootScope.isZoomed == false) {
                    imgCanvas.style.visibility = 'hidden';
                }
            }

        }

        imgCanvas.addEventListener('click', function (evt) {


            if ($scope.isLayerChange == true) {
                $scope.isLayerChange = false;
            }

            if (evt.ctrlKey) {
                $rootScope.multiAnnotationIsON = true;
            }
            else {
                if (($rootScope.previousHighlightList != null || $rootScope.previousHighlightList != undefined) && ($rootScope.previousHighlightList.length > 0)) {
                    $rootScope.previousHighlightList = [];
                }
                $rootScope.multiAnnotationIsON = false;
            }

            var annotationText;
            var context = imgCanvas.getContext("2d");


            var canvasId = context.canvas.getAttribute('id');
            var maskCanvasId;
            //for leaf canvas
            if (canvasId.match('modestyImg')) {
                maskCanvasId = canvasId;
            }
            else {
                maskCanvasId = canvasId + '_mci';
            }
            var maskCanvas = document.getElementById(maskCanvasId);
            var maskCanvasContext = maskCanvas.getContext("2d");

            var mousePos = $scope.getMousePos(evt);
            //   alert(mousePos.x + ',' + mousePos.y);

            var canvasDiv = document.getElementById('canvasDiv');
            var verticalScrollPosition = canvasDiv.scrollTop;
            var horizontlScrollPosition = canvasDiv.scrollLeft;


            //We substracted 135,  as the difference between flex and html coordinates for same organ is 135
            var actulalX = mousePos.x + horizontlScrollPosition;
            var actualY = mousePos.y + verticalScrollPosition;
            var RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y);


            //Modesty ON
            if (maskCanvasId.match('modestyImg') && RGBColor != '000000') {
                RGBColor = DA[0].figLeafTermId;
                annotationText = $scope.GetAnnotationBasedOnActualTermNo(RGBColor);
            }
                //Modesty On but clicked somewhre else, we did modesty check because the modesty image covers whole body region so if user will click to 
                //see the annotation apart from leaf then the actual click will be on modesty canvas, but for annotation er
                // 
            else if (maskCanvasId.match('modestyImg') && RGBColor == '000000') {
               
                bodyRegionId = maskCanvasId.slice(-1);
                maskCanvasId = 'imageCanvas' + bodyRegionId + '_mci';
               
                var maskCanvas = document.getElementById(maskCanvasId);
                var maskCanvasContext = maskCanvas.getContext("2d");
                RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y);
                annotationText = $scope.GetAnnotationText(parseInt(RGBColor));
            }
            else {
                RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y);
                annotationText = $scope.GetAnnotationText(parseInt(RGBColor));

            }

            $rootScope.previousHighlightList.push(RGBColor);

            if ($rootScope.isHighLight == true) {
                if ($scope.machedIcolorInBodyRegion != null || $scope.machedIcolorInBodyRegion != undefined) {
                    if ($scope.machedIcolorInBodyRegion.length > 0) {
                        if ($rootScope.multiAnnotationIsON == false) {
                            for (var i = 0; i < $scope.machedIcolorInBodyRegion.length; i++) {
                                var bodyRegionId = $scope.machedIcolorInBodyRegion[i];

                                var grayCanvasID = 'imageCanvas' + bodyRegionId;
                                var grayCanvas = document.getElementById(grayCanvasID);

                                var grayCanvasContext = grayCanvas.getContext("2d");
                                if ($rootScope.grayImageDataList[bodyRegionId - 1] != null || $rootScope.grayImageDataList[bodyRegionId - 1] != undefined) {
                                    var grayImageData = $rootScope.grayImageDataList[bodyRegionId - 1];
                                    grayCanvasContext.putImageData(grayImageData, 0, 0);
                                }

                                // for unhighlight the mirrored body region
                                if (bodyRegionId == 4 || bodyRegionId == 5 || bodyRegionId == 6) {
                                    var grayCanvasID = 'imageCanvas' + bodyRegionId + '_MR';
                                    var grayCanvasMR = document.getElementById(grayCanvasID);

                                    var grayCanvasContextMR = grayCanvasMR.getContext("2d");

                                    if ($rootScope.grayImageMRDataList[bodyRegionId] != null || $rootScope.grayImageMRDataList[bodyRegionId] != undefined) {

                                        var grayImageDataMR = $rootScope.grayImageMRDataList[bodyRegionId];

                                        grayCanvasContextMR.putImageData(grayImageDataMR, 0, 0);

                                    }
                                }

                            }
                        }
                    }
                }

                // $rootScope.previousHighlightList.push(RGBColor);


                if (maskCanvasId.match('modestyImg') && RGBColor != '000000') { }
                else
                {
                    $scope.isClickedOnBodyForHighlight = true;
                    $scope.highLightBodyBasedOnIcolor(RGBColor);
                }

            }

            
            //extarct clisked body part is extarct button is already enabled.
            if ($rootScope.isExtract == true) {
                if ($rootScope.multiAnnotationIsON == false) {
                    $rootScope.isListManagerSelected = false;
                }
                $scope.enableExtract(false);
            }

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

            if ($rootScope.multiAnnotationIsON == true) {

                //   $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top);
                $scope.MultiLanguageAnnationArray = [];
                $scope.MultiLanguageAnnationArray.push(annotationText);
              
                $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
            }
            else {

                $scope.MultiLanguageAnnationArray = [];

                console.log('1. annotationText: ' + annotationText);

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

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



                    //  $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top);


                    $scope.MultiLanguageAnnationArray.push(annotationText);

                    console.log('2. annotationText: ' + annotationText + ' , length: ' + $scope.MultiLanguageAnnationArray.length);

                    $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);

                }
                else {



                    $scope.MultiLanguageAnnationArray = [];
                    $scope.MultiLanguageAnnationArray.push(annotationText);

                    console.log('3. annotationText: ' + annotationText + ' , length: ' + $scope.MultiLanguageAnnationArray.length);

                    $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
                }


            }
        }, false);

        var PI = Math.PI;
        var PI2 = PI * 2;
        var cw, ch, imgW, imgH, mouseX, mouseY;
        var scaleFactor = 1.00;

        var context = imgCanvas.getContext('2d');
        var img = new Image();
        img.onload = start;

        img.src = src;



        function start() {
          
            context.drawImage(img, 0, 0);

            if (isMaskImage == 'N') {
                if (bodyRegionId == 'modestyImg3' || bodyRegionId == 'modestyImg2') {
                    $scope.modestyImageInfo.push(

                                    {
                                        "bodyRegionId": bodyRegionId, "SRC": src,
                                        "Height": h,
                                        "Width": w,
                                        "x": x,
                                        "y": y,
                                        "haveMirror": 'false'
                                    }

                                              );
                }
                else {

                    $scope.ColoredImageSRC.push(
                                       {
                                           "bodyRegionId": bodyRegionId, "SRC": src,
                                           "Height": h,
                                           "Width": w,
                                           "x": x,
                                           "y": y,
                                           "haveMirror": 'false'
                                       }

                                      );


                    //-NIKI-for solving extarct issue 8286

                    var imageCanvas = document.getElementById('imageCanvas' + bodyRegionId);

                    if (imageCanvas != null || imageCanvas != undefined) {
                        var width = imageCanvas.width;
                        var ht = imageCanvas.height;

                        var coloredCanvasContext = imageCanvas.getContext("2d");
                        var coloredImageData = coloredCanvasContext.getImageData(0, 0, width, ht);
                        var coloredImageDataVar = coloredImageData;


                        $rootScope.coloredImageCanvasList[parseInt(bodyRegionId - 1)] = coloredImageDataVar;
                    }
                    //
                    

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

                        if ((($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) && ($scope.ColoredImageSRC.length == 9)) {
                            $scope.isEligibleForHighlight = true;
                        }
                        else if ((($rootScope.viewOrientationId == '2') || ($rootScope.viewOrientationId == '3')) && ($scope.ColoredImageSRC.length == 5)) {
                            $scope.isEligibleForHighlight = true;
                        }
                        else if (($rootScope.viewOrientationId == '5') && ($scope.ColoredImageSRC.length == 4)) {
                            $scope.isEligibleForHighlight = true;
                        }
                        else if (($rootScope.viewOrientationId == '6') && ($scope.ColoredImageSRC.length == 1)) {
                            $scope.isEligibleForHighlight = true;
                        }
                        else {
                            $scope.isEligibleForHighlight = false;
                        }


                        if ($scope.isEligibleForHighlight == true) {

                            if ($scope.isExtract == true) {
                                $rootScope.isLoading = true;
                                $('#spinner').css('visibility', 'visible');
                                $scope.highLightBody();
                            }
                            else if ($rootScope.isHighLight == true || ($rootScope.isListManagerSelected == true) || (($rootScope.isGenderChnage == true) && ($rootScope.isHighLight == true))
                                     || (($rootScope.isViewChange == true) && ($rootScope.isHighLight == true)) || $scope.isExtract == true || $rootScope.isHighlightBodyByBodySystem == true) {

                                console.log('2. $rootScope.isHighLight= ' + $rootScope.isHighLight)

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

                                console.log('inside start of non flipped. $scope.ColoredImageSRC.length= ' + $scope.ColoredImageSRC.length)
                                $rootScope.isHighLight = true;

                                console.log('just before highLightBody call');

                                $scope.highLightBody();

                                console.log('just after highLightBody call');

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

                    console.log('ColoredImageSRC. pushed and length: ' + $scope.ColoredImageSRC.length);
                }
            }

            if (imgCanvas.id.match('_mci')) {
                var maskImgData = context.getImageData(0, 0, w, h);
                $rootScope.MaskCanvasData.push(
                                               {
                                                   "bodyRegionId": bodyRegionId,
                                                   "canvasId": imgCanvas.id,
                                                   "maskData": maskImgData,

                                               }
                                              );
            }

        };

        if (document.getElementById('canvasDiv') != null)
            document.getElementById('canvasDiv').appendChild(imgCanvas);
    }



    $scope.highLightBodyBasedOnIcolor = function (RGBColor) {


        //2. Find Actul Term No Based on Icolor.
        var ActualTermNo = $scope.getActualTermNumber(RGBColor);

        if (ActualTermNo != null) {

            //3. Find Term No List Based on ActualTermNo
            var TermList = $scope.getTermNumberList(ActualTermNo);
            if (TermList != null) {

                //4. 
                $scope.HighlightBodyByTermList(TermList);
            }
        }


    }


    $scope.HighlightBodyOnExtract = function () {
        console.log(' insode HighlightBodyOnExtract. $rootScope.MaskCanvasData length= ' + $rootScope.MaskCanvasData.length + ', $rootScope.previousHighlightList.length= ' + $rootScope.previousHighlightList.length)


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

       
        if ($("#btnNormalMode").hasClass("btn-primary")) {
            $("#btnNormalMode").removeClass("btn-primary");
            $("#btnNormalMode").addClass("btn-black");
        }

        if ($("#btnHighLight").hasClass("btn-primary")) {
            $("#btnHighLight").removeClass("btn-primary");
            $("#btnHighLight").addClass("btn-black");
        }


        //terminate previous running workers to create space for new workers
        $scope.layerNumber = $('#txtlayerNumber').val();
        $scope.terminateCurrentlyRunningWPs();

        var multiTermList = [];
        var CallBackBodyRegion = [];
        var selectedAnnotation;

        if (($rootScope.previousHighlightList != null || $rootScope.previousHighlightList != undefined) && ($rootScope.previousHighlightList.length > 0)
             && $rootScope.isListManagerSelected && $rootScope.multiAnnotationIsON == true) {

            multiTermList = $scope.AllTerms;
            angular.forEach($rootScope.previousHighlightList, function (value, key) {

                var ActualTermNo = $scope.getActualTermNumber(value);
                selectedAnnotation = ActualTermNo;
                if (ActualTermNo != null) {
                    var TermList = $scope.getTermNumberList(ActualTermNo);
                    if (TermList != null) {
                        for (var i = 0; i < TermList.length; i++) {
                            multiTermList.push(TermList[i]);
                        }
                    }
                }

                // to do
            });
        }

        if ($rootScope.isListManagerSelected) {

            multiTermList = $scope.AllTerms;
            selectedAnnotation = $rootScope.actualTermNumber;

        }
        else if (($rootScope.previousHighlightList != null || $rootScope.previousHighlightList != undefined) && ($rootScope.previousHighlightList.length > 0)) {
            angular.forEach($rootScope.previousHighlightList, function (value, key) {

                var ActualTermNo = $scope.getActualTermNumber(value);
                selectedAnnotation = ActualTermNo;
                if (ActualTermNo != null) {
                    var TermList = $scope.getTermNumberList(ActualTermNo);
                    if (TermList != null) {
                        for (var i = 0; i < TermList.length; i++) {
                            multiTermList.push(TermList[i]);
                        }
                    }
                }

                // to do
            });
        }

        //get term list to get term coordinates
        $scope.TermList = $scope.getTermNumberList(selectedAnnotation);

        $scope.termCoordinate = $scope.getTermCoordinate(selectedAnnotation);
        
     

        $timeout(function () {

            var loopLength = 0;
            if ((($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) && ($scope.ColoredImageSRC.length == 9)) {
                loopLength = 9;
            }
            else if ((($rootScope.viewOrientationId == '2') || ($rootScope.viewOrientationId == '3')) && ($scope.ColoredImageSRC.length == 5)) {
                loopLength = 5;
            }
            else if (($rootScope.viewOrientationId == '5') && ($scope.ColoredImageSRC.length == 4)) {
                loopLength = 4;
            }
            else if (($rootScope.viewOrientationId == '6') && ($scope.ColoredImageSRC.length == 1)) {
                loopLength = 1;
            }

            if (loopLength !== 0) {
                for (var x = 0; x < loopLength; x++) {
                    if ($rootScope.MaskCanvasData[x] != null || $rootScope.MaskCanvasData[x] != undefined) {
                        var bodyRegionId = $rootScope.MaskCanvasData[x].bodyRegionId;
                        var canvasId = $rootScope.MaskCanvasData[x].canvasId;
                        var maskData = null;
                        maskData = $rootScope.MaskCanvasData[x].maskData;

                        var coloredImageDataVar = null;
                        var grayImageDataVar = null;

                        var white = null;
                        if (canvasId.match('_MR')) {
                            if ($rootScope.coloredImageMRCanvasList[bodyRegionId] != null || $rootScope.coloredImageMRCanvasList[bodyRegionId] != undefined) {

                                coloredImageDataVar = $rootScope.coloredImageMRCanvasList[bodyRegionId];

                            }

                            if ($rootScope.whiteImageMRDataList[bodyRegionId] != null || $rootScope.whiteImageMRDataList[bodyRegionId] != undefined) {
                                white = $rootScope.whiteImageMRDataList[bodyRegionId];
                            }

                        }

                        else {

                            if ($rootScope.coloredImageCanvasList[bodyRegionId - 1] != null || $rootScope.coloredImageCanvasList[bodyRegionId - 1] != undefined) {
                                coloredImageDataVar = $rootScope.coloredImageCanvasList[bodyRegionId - 1];
                            }
                            if ($rootScope.whiteImageDataList[bodyRegionId - 1] != null || $rootScope.whiteImageDataList[bodyRegionId - 1] != undefined) {
                                white = $rootScope.whiteImageDataList[bodyRegionId - 1];

                            }
                        }


                        var worker = new Worker('extract-wp.js');

                        //push workers in array to further used the refernece to delete the workers
                        $scope.runningWorkers.push({ 'workerName': worker })

                        console.log('for BRID = ' + bodyRegionId + ', coloredImageDataVar: ' + coloredImageDataVar + ', maskData= ' + maskData + ', white= ' + white)

                        if (coloredImageDataVar != null && maskData != null && white != null) {
                            worker.postMessage({

                                'termList': multiTermList,
                                'maskCanvasData': maskData,
                                'coloredImageData': coloredImageDataVar,
                                'grayImageData': white,
                                'bodyRegionId': bodyRegionId,
                                'canvasId': canvasId

                            });
                        }

                        //}

                        worker.onmessage = function (e) {
                            console.log('callback in extract for e.data.bodyRegionId: ' + e.data.bodyRegionId + ', time: ' + new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"));


                            var updatedData = e.data.value;

                            var bodyRegionId = e.data.bodyRegionId;


                            var canvasId = (e.data.canvasId).replace('_mci', '');
                            
                            //for (var i = 1; i <= updatedData.length; i++) {
                            var grayCanvasID = canvasId;

                            //  var grayCanvasID = 'imageCanvas' + bodyRegionId;
                            var grayCanvas = document.getElementById(grayCanvasID);
                            var grayCanvasContext = grayCanvas.getContext("2d");



                            grayCanvasContext.putImageData(updatedData, 0, 0);
                          
                            //to resolve lateral arm black issue in highlight mode

                            if ($rootScope.viewOrientationId == 5 && (bodyRegionId == 6 || bodyRegionId == 4)) {

                                var canavsWidth = parseInt(grayCanvas.width);
                                var canavsHeight = parseInt(grayCanvas.height);

                                console.log('canavsWidth= ' + canavsWidth + ', canavsHeight= ' + canavsHeight)

                                var imgData = grayCanvasContext.getImageData(0, 0, canavsWidth, canavsHeight);
                                var data = imgData.data;
                                var c = 0;
                                for (var i = 0; i < data.length; i += 4) {
                                    if (data[i] == data[i + 1] && data[i + 1] == data[i + 2] && data[i + 2] === 0) {
                                        data[i + 3] = 0;
                                    }

                                }
                                grayCanvasContext.putImageData(imgData, 0, 0);
                            }

                            CallBackBodyRegion.push(bodyRegionId);

                            $scope.doAligneCanvasWithTerm = false;
                            if ((($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) && (CallBackBodyRegion.length == 9)) {
                                $scope.doAligneCanvasWithTerm = true;
                            }
                            else if ((($rootScope.viewOrientationId == '2') || ($rootScope.viewOrientationId == '3')) && (CallBackBodyRegion.length == 5)) {
                                $scope.doAligneCanvasWithTerm = true;
                            }
                            else if ((($rootScope.viewOrientationId == '5')) && (CallBackBodyRegion.length == 1)) {
                                $scope.doAligneCanvasWithTerm = true;
                            }
                            else if ((($rootScope.viewOrientationId == '6')) && (CallBackBodyRegion.length == 1)) {
                                $scope.doAligneCanvasWithTerm = true;
                            }


                            if ($rootScope.multiAnnotationIsON == true) {
                              
                                if (canvasId.match('_MR'))
                                    $rootScope.updatedWhiteImageMRDataList[bodyRegionId] = updatedData;
                                else
                                    $rootScope.updatedWhiteImageDataList[bodyRegionId - 1] = updatedData;


                            }
                            else {

                                if (canvasId.match('_MR'))
                                    $rootScope.whiteImageMRDataList[bodyRegionId] = e.data.value;
                                else {
                                    if ($rootScope.whiteImageDataList[bodyRegionId - 1] != null || $rootScope.whiteImageDataList[bodyRegionId - 1] != undefined)
                                        $rootScope.whiteImageDataList[bodyRegionId - 1] = e.data.value;
                                }
                            }

                            //if ((CallBackBodyRegion != null || CallBackBodyRegion[i] != undefined) && (CallBackBodyRegion.length > 0)) {
                            //    if (CallBackBodyRegion.length == 6) {
                            //        $rootScope.isLoading = false;
                            //        $('#spinner').css('visibility', 'hidden');
                            //    }
                            //}

                            if ($scope.doAligneCanvasWithTerm == true) {
                                $scope.aligneCanvasWithTerm()
                            }

                            //  $timeout(function () { $scope.DisableProgressBar() }, 1000);
                            

                          
                        };
                        worker.onerror = function (e) {
                            alert('Error: Line ' + e.lineno + ' in ' + e.filename + ': ' + e.message);
                        };
                    }
                }
            }
        }, 500)

    }

    $scope.HighlightBodyByTermList = function (TermList) {
       
        $("#btnTranparency").attr('disabled', 'disabled');
        $scope.currentLayerNumber = $scope.layerNumber;

        $scope.layerNumber = $('#txtlayerNumber').val();

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


        if ($rootScope.isHighLight == true) {
            false;
        }

        console.log('HighlightBodyByTermList is called');

        $scope.highlightedBR = [];

        $scope.terminateCurrentlyRunningWPs();



        $timeout(function () {
            var loopLength = 0;
            if ((($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) && ($scope.ColoredImageSRC.length == 9)) {
                loopLength = 9;
            }
            else if ((($rootScope.viewOrientationId == '2') || ($rootScope.viewOrientationId == '3')) && ($scope.ColoredImageSRC.length == 5)) {
                loopLength = 5;
            }
            else if (($rootScope.viewOrientationId == '5') && ($scope.ColoredImageSRC.length == 4)) {
                loopLength = 4;
            }
            else if (($rootScope.viewOrientationId == '6') && ($scope.ColoredImageSRC.length == 1)) {
                loopLength = 1;
            }

            for (var x = 0; x < loopLength; x++) {
                if ($rootScope.MaskCanvasData[x] != null || $rootScope.MaskCanvasData[x] != undefined) {

                    var bodyRegionId = $rootScope.MaskCanvasData[x].bodyRegionId;
                    var canvasId = $rootScope.MaskCanvasData[x].canvasId;
                    var maskData = null;
                    maskData = $rootScope.MaskCanvasData[x].maskData;

                    var coloredImageDataVar = null;
                    var grayImageDataVar = null;

                    var white;
                    if (canvasId.match('_MR')) {
                        if ($rootScope.coloredImageMRCanvasList[bodyRegionId] != null || $rootScope.coloredImageMRCanvasList[bodyRegionId] != undefined) {
                            coloredImageDataVar = $rootScope.coloredImageMRCanvasList[bodyRegionId];
                        }


                        if ($rootScope.multiAnnotationIsON == true) {
                            //on layer change we need the fresh data not the updated one
                            if ($scope.isLayerChange == true) {
                                if ($rootScope.grayImageMRDataList[bodyRegionId] != null || $rootScope.grayImageMRDataList[bodyRegionId] != undefined) {
                                    grayImageDataVar = $rootScope.grayImageMRDataList[bodyRegionId];
                                }
                            }
                            else {
                                if ($rootScope.updatedGrayDataList[bodyRegionId - 1] == null || $rootScope.updatedGrayDataList[bodyRegionId - 1] == undefined) {

                                    if ($rootScope.grayImageMRDataList[bodyRegionId] != null || $rootScope.grayImageMRDataList[bodyRegionId] != undefined) {
                                        grayImageDataVar = $rootScope.grayImageMRDataList[bodyRegionId];
                                    }
                                }
                                else {
                                    if ($rootScope.updatedGrayMRDataList[bodyRegionId] != null || $rootScope.updatedGrayMRDataList[bodyRegionId] != undefined) {
                                        grayImageDataVar = $rootScope.updatedGrayMRDataList[bodyRegionId]
                                    }
                                }
                            }
                        }
                        else {
                            if ($rootScope.grayImageMRDataList[bodyRegionId] != null || $rootScope.grayImageMRDataList[bodyRegionId] != undefined) {
                                grayImageDataVar = $rootScope.grayImageMRDataList[bodyRegionId];
                            }
                        }


                    }

                    else {

                        if ($rootScope.coloredImageCanvasList[bodyRegionId - 1] != null || $rootScope.coloredImageCanvasList[bodyRegionId - 1] != undefined) {
                            coloredImageDataVar = $rootScope.coloredImageCanvasList[bodyRegionId - 1];
                        }



                        if ($rootScope.multiAnnotationIsON == true) {

                            //on layer change we need the fresh data not the updated one
                            if ($scope.isLayerChange == true) {
                                if ($rootScope.grayImageDataList[bodyRegionId - 1] != null || $rootScope.grayImageDataList[bodyRegionId - 1] != undefined) {
                                    grayImageDataVar = $rootScope.grayImageDataList[bodyRegionId - 1];

                                }

                            } else {
                                // this code is for the case where user first click on normal mode then extract then again highlight then we need to call highlight body in gray mode 
                                //and then highlight the previously selected body regions at the time of normal mode.
                                if ($rootScope.updatedGrayDataList[bodyRegionId - 1] == null || $rootScope.updatedGrayDataList[bodyRegionId - 1] == undefined) {

                                    if ($rootScope.grayImageDataList[bodyRegionId - 1] != null || $rootScope.grayImageDataList[bodyRegionId - 1] != undefined) {
                                        grayImageDataVar = $rootScope.grayImageDataList[bodyRegionId - 1];
                                    }

                                }
                                else {
                                    if ($rootScope.updatedGrayDataList[bodyRegionId - 1] != null || $rootScope.updatedGrayDataList[bodyRegionId - 1] != undefined) {
                                        // for normal case means without interdepency button case.
                                        grayImageDataVar = $rootScope.updatedGrayDataList[bodyRegionId - 1];
                                    }
                                }
                            }
                        }
                        else
                            if ($rootScope.grayImageDataList[bodyRegionId - 1] != null || $rootScope.grayImageDataList[bodyRegionId - 1] != undefined) {
                                grayImageDataVar = $rootScope.grayImageDataList[bodyRegionId - 1];
                            }


                    }

                    var worker = new Worker('term-number-wp.js');

                    //push workers in array to further used the refernece to delete the workers
                    $scope.runningWorkers.push({ 'workerName': worker })

                    console.log('before worker call BRID: ' + bodyRegionId)

                    if (grayImageDataVar != null && coloredImageDataVar != null && maskData != null && TermList != undefined && TermList.length > 0) {
                        worker.postMessage({

                            'termList': TermList,
                            'maskCanvasData': maskData,
                            'coloredImageData': coloredImageDataVar,
                            'grayImageData': grayImageDataVar,
                            'bodyRegionId': bodyRegionId,
                            'canvasId': canvasId

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


                    worker.onmessage = function (e) {
                        console.log('callback for e.data.bodyRegionId: ' + e.data.bodyRegionId + ', time: ' + new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"));

                        var updatedData = e.data.value;

                        var bodyRegionId = e.data.bodyRegionId;
                        var canvasId = (e.data.canvasId).replace('_mci', '');
                      
                        var grayCanvasID = canvasId;

                     
                        var grayCanvas = document.getElementById(grayCanvasID);
                        if (grayCanvas != null) {
                            var grayCanvasContext = grayCanvas.getContext("2d");

                            var canvasHeight = grayCanvas.height + 'px';
                            var canvasWidth = grayCanvas.width + 'px';
                            grayCanvasContext.clearRect(0, 0, canvasHeight, canvasWidth)

                            grayCanvasContext.putImageData(updatedData, 0, 0);
                            $scope.highlightedBR.push({ 'bodyRegionId': bodyRegionId });

                        }

                     

                        if (canvasId.match('_MR')) {
                            $rootScope.updatedGrayMRDataList[bodyRegionId] = updatedData;

                        }
                        else
                            $rootScope.updatedGrayDataList[bodyRegionId - 1] = updatedData;


                        console.log('$scope.highlightedBR.length= ' + $scope.highlightedBR.length)

                        if ($scope.highlightedBR != null || $scope.highlightedBR != undefined) {
                            
                            if ((($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) && ($scope.highlightedBR.length == 9)) {
                                $scope.doAligneCanvasWithTerm = true;
                            }
                            else if ((($rootScope.viewOrientationId == '2') || ($rootScope.viewOrientationId == '3')) && ($scope.highlightedBR.length == 5)) {
                                $scope.doAligneCanvasWithTerm = true;
                            }
                            else if ((($rootScope.viewOrientationId == '5')) && ($scope.highlightedBR.length == 1)) {
                                $scope.doAligneCanvasWithTerm = true;
                            }
                            else if ((($rootScope.viewOrientationId == '6')) && ($scope.highlightedBR.length == 1)) {
                                $scope.doAligneCanvasWithTerm = true;
                            }
                            if ($scope.doAligneCanvasWithTerm == true) {
                              
                                if ($rootScope.isListManagerSelected == true) {
                                    $scope.aligneCanvasWithTerm();
                                }
                                else if ($rootScope.previousHighlightList != undefined && $rootScope.previousHighlightList.length > 0 && ($scope.isGenderChnage == true || $scope.isViewChange == true)) {
                                    var canvasDiv = document.getElementById('canvasDiv');
                                    if ($rootScope.viewOrientationId == '1' || $rootScope.viewOrientationId == '4') {

                                        $('#canvasDiv').scrollLeft($('#canvasDiv').width() / 2)
                                        var canvasDiv = document.getElementById('canvasDiv');
                                        $('#canvasDiv').scrollTop($scope.imageVerticalScrollPosition);
                                    }
                                    else {
                                    $('#canvasDiv').scrollTop($scope.imageVerticalScrollPosition);
                                    $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition);
                                    $rootScope.isLoading = false;
                                }
                                    $('#spinner').css('visibility', 'hidden');
                                }
                                else if ($rootScope.isHighlightBodyByBodySystem == true || $rootScope.isListManagerSelected == true || $scope.isClickedOnBodyForHighlight
                                   ) {

                                    $rootScope.isLoading = false;

                                    $('#spinner').css('visibility', 'hidden');
                                }

                                else {
                                 
                                    var canvasDiv = document.getElementById('canvasDiv');
                                    $('#canvasDiv').scrollTop($scope.imageVerticalScrollPosition);
                                    $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition);
                                    //  }

                                    $rootScope.isLoading = false;

                                    $('#spinner').css('visibility', 'hidden');
                                  
                                }
                                                            
                            }
                        }
                       
                    };
                    worker.onerror = function (e) {
                        alert('Error: Line ' + e.lineno + ' in ' + e.filename + ': ' + e.message);
                    };
                }
            }
        }, 100)
    }



    $scope.createTermListByPreviousTermsAndHighlight = function () {


        var multiTermList = [];
        angular.forEach($rootScope.previousHighlightList, function (value, key) {
            var ActualTermNo = $scope.getActualTermNumber(value);
            if (ActualTermNo != null) {
                var TermList = $scope.getTermNumberList(ActualTermNo);
                if (TermList != null) {
                    for (var i = 0; i < TermList.length; i++) {

                        multiTermList.push(TermList[i]);
                    }
                }
            }

        });

        console.log('createTermListByPreviousTermsAndHighlight is called');

        if ((multiTermList != undefined || multiTermList != null) && multiTermList.length > 0) {

            $timeout(function () { $scope.HighlightBodyByTermList(multiTermList); }, 50);
        }
    }


    $scope.GetRGBColor = function (maskCanvasContext, actulalX, actualY, x, y) {
        var pixelData = maskCanvasContext.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1);

        pixelData.data[0] = pixelData.data[0] - 9;
        pixelData.data[1] = pixelData.data[1] - 9;
        pixelData.data[2] = pixelData.data[2] - 9;
        var Red;
        var Green;
        var Blue;
        var zero = "0";

        if ((pixelData.data[0]).toString().length != 2) {
            Red = zero.concat((pixelData.data[0]).toString())
        }
        else {
            Red = (pixelData.data[0]).toString()
        }
        if ((pixelData.data[1]).toString().length != 2) {
            Green = zero.concat((pixelData.data[1]).toString())
        }
        else {
            Green = (pixelData.data[1]).toString()

        }
        if ((pixelData.data[2]).toString().length != 2) {
            Blue = zero.concat((pixelData.data[2]).toString())
        }
        else {
            Blue = (pixelData.data[2]).toString()

        }
        var RGBColor = (Red + Green + Blue);
        return RGBColor;
    }


    //get annotation from term number
    $scope.GetAnnotationText = function (termNumber) {
     
        var annotationText;
        //0
        var figLeafTermNo = 5868; // to do declare constant for this

        if (parseInt(termNumber) != parseInt(figLeafTermNo)) {
            $scope.TermNumber = termNumber;
            if ($rootScope.TermNumberData != null || $rootScope.TermNumberData != undefined) {
                $scope.matchedTermNoData = new jinqJs()
                                           .from($rootScope.TermNumberData.TermData.Term)
                                           .where('_TermNumber == ' + termNumber)
                                           .select();

                if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) {
                    //1.
                    var actualTermNo = 0;
                    for (var z = 0; z < $scope.matchedTermNoData.length; z++) {
                        //send actual term no to get the term text.
                        actualTermNo = $scope.matchedTermNoData[0]._ActualTermNumber;
                        annotationText = $scope.GetAnnotationBasedOnActualTermNo(actualTermNo);
                        $rootScope.actualTermNumber = actualTermNo;
                        break;
                    };

                    //2.

                }
                else {
                    // send term no to vocab json data to get the text 
                }
            }
        }
        return annotationText;
    }

    $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
      
        var Annotation;
        $scope.ActualTermNo = actualTermNo;
        if ($rootScope.VocabTermData != null || $rootScope.VocabTermData != undefined) {
            $scope.matchedActualTermData = new jinqJs()
                                           .from($rootScope.VocabTermData.VocabTerms.Term)
                                           .where('_ActualTermNumber == ' + actualTermNo)
                                           .select();

            if ($scope.matchedActualTermData != null || $scope.matchedActualTermData != undefined) {
                for (var z = 0; z <= $scope.matchedActualTermData.length; z++) {
                    //send actual term no to get the term text.
                    Annotation = $scope.matchedActualTermData[0]._TermText;
                    // alert("Annotation : " + Annotation);
                    break;
                };
            }
            return Annotation;
        }
        else {
            return null;
        }
    }


    //layer change function
    $scope.LayerChange = function () {

      
        //if listanager is visisble then close it
        // $rootScope.isListManagerSelected = false;

        $rootScope.CloseListManager();



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

        //1.
        $scope.terminateCurrentlyRunningWPs();

        var canvasDiv = document.getElementById('canvasDiv');
        $scope.imageVerticalScrollPosition = canvasDiv.scrollTop;
        $scope.imageHorizontlScrollPosition = canvasDiv.scrollLeft;

        //  $('#daLoaderLabel').css('visibility', 'visible');


        if ($scope.isTransparencyActivated) {
          
            //crete temp canavs to store the original data which will be used to chnange the transparency
            if (document.getElementById('tempCanvas') != null) {
                $('#tempCanvas').remove();
            }

            if ($('#speechBubbleTrns').length > 0) {
                $('#speechBubbleTrns').remove();
            }
            var tempCanvas = document.createElement('canvas');
            tempCanvas.id = 'tempCanvas';
            $scope.tempCanvas = tempCanvas.id;
            tempCanvas.height = $scope.transparencyCanvasHeight;
            tempCanvas.width = $scope.transparencyCanvasWidth;
            tempCanvas.style.position = "absolute";
            tempCanvas.style.left = 200 + 'px';
            tempCanvas.style.backgroundColor = "transparent";
            tempCanvas.style.visibility = 'hidden';

            if (document.getElementById('canvasDiv') != null)
                document.getElementById('canvasDiv').appendChild(tempCanvas);

           

            var tCanvas = document.getElementById('transparencyCanvas');
        
            var tCanvasContext = tCanvas.getContext('2d');

            var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', ''));

            var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', ''));


            //  var tCanvas = document.getElementById('transparencyCanvas');
            if (tCanvas != null) {
                clearTransCanvas();
            }
            var TransparencyBoxStartX = parseInt((tCanvas.style.left).replace('px', ''));
            var TransparencyEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', '')));
            var TransparencyBoxStartY = parseInt((tCanvas.style.top).replace('px', ''));
            var TransparencyBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', ''));
            var transparencyBoxBottom = parseInt(TransparencyBoxStartY) + parseInt(tCanvasHeight);
            var transparencyBoxRight = parseInt(TransparencyBoxStartX) + parseInt(tCanvasWidth);

            var BodyRegionDictionary = $rootScope.BodyRegionCordinatesData;

            $.each(BodyRegionDictionary, function (index, value) {
                //debugger;
                //   alert(' $.each(BodyRegionDictionary1')

                var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
                var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);


                //   alert(' $.each(BodyRegionDictionary3. bodyRegionRight: ' + bodyRegionRight + ', bodyRegionBottom: ' + bodyRegionBottom)
                if (TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {
                    //var transNumber = parseInt(document.getElementById("txtTransparencyChange").value);
                    // debugger;
                    $scope.layerNumber = parseInt(txtlayerNumber.value);


                    $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, TransparencyBoxStartX, transparencyBoxRight, TransparencyBoxStartY, transparencyBoxBottom, $scope, true, false);
                }


            })
       
        }

        else {


            //1. Dated:13-07-2016 Issue #4965 : The layer number should not extend beyond its level through layer text box.
            var dataLength = $rootScope.BodyLayerData.Layers.DataLayer.length;
            if (parseInt($('#txtlayerNumber').val()) > (dataLength - 1)) {
                $('#txtlayerNumber').val(dataLength - 1);
                $scope.currentLayerNumber = parseInt(dataLength - 1);
                $scope.layerNumber = parseInt(dataLength - 1);
            }
            else
                $scope.currentLayerNumber = parseInt($('#txtlayerNumber').val());

            //$scope.isMousUp();

            //alert('$scope.currentLayerNumber');

            $rootScope.isLoading = true;
            $('#spinner').css('visibility', 'visible');
            var canDiv = document.getElementById('canvasDiv');
            var canDivChildCount = canDiv.childElementCount;
            if (canDivChildCount > 0) {
                canDiv.innerHTML = '';
            }



            //2.
            $scope.CalculateImageCordinates($rootScope.viewOrientationId);

            //3.
            $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition)
            $('#canvasDiv').scrollTop($scope.imageVerticalScrollPosition)

         
            if ($rootScope.isHighlightBodyByBodySystem) {
                $timeout(function () { $scope.DisableProgressBar() }, 20000);
            }
            else {
                $timeout(function () { $scope.DisableProgressBar() }, 2000);
            }
        }

        $('#layerChangeSlider').slider("option", "value", parseInt($rootScope.totalLayers) - parseInt($scope.layerNumber));
    
        // Annotations Closing Code

        $('.com_anno').remove();

        $('#sppeachBubble_annotation').remove();
        $('#dot_annotation').remove();
        $('#bord_annotation').remove();

        $('#dot').remove();
        $('#sppeachBubble').remove();
        $(".com").remove();
        $("#bord").remove();


        if (($("#canvasPaint").css("display") == "block") && ($("#canvas").css("display") == "block")){
            if ($rootScope.isAnnotatiomToolBarPopupOpenOnLayerChange == false) {
                
            if ($("#transparencyScale").css("display") == "block") {
                $rootScope.switchToTransparencycanvas();
            }
        }
        else {

                if ($("#OnIdentify").hasClass("annotationtoolbartab")) {
                    $rootScope.switchToTransparencycanvas();
                }
                else {
                    $('.btnCursor').addClass('activebtncolor');
                    $rootScope.switchCanvas();
                }
        }

        }
        else
        {
            if ($rootScope.isAnnotatiomToolBarPopupOpenOnLayerChange == true) {

                $rootScope.CloseAnnotationTool();

            }
        }
    }
    $rootScope.PreviouslayerNumbr = 0;
    


    $scope.DisableProgressBar = function () {

        // alert('Disabled wait cursor is called');


        if ($rootScope.isHighLight) {
            //alert('isHighlight: ' + $scope.isHighLight);

            //$('#btnHighLight').removeClass('btn btn-black');
            //$('#btnHighLight').addClass('btn-primary');

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

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

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

            if ($("#btnExtract").hasClass("btn-primary")) {
                $("#btnExtract").removeClass("btn-primary");
            }


            if ($("#btnNormalMode").hasClass("btn-primary")) {
                $("#btnNormalMode").removeClass("btn-primary");
            }

            console.log('highLightBody call from DisableProgressBar')

            //  $scope.highLightBody();



        }

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

        //alert('Disabled wait cursor is done.See val :' + $rootScope.isLoading);
    }


    $scope.changeLayer = function () {
        //console.log('changeLayer');
        // alert('slide')
    }

    $('layerChangeSlider').slider().on('slideStop', function (ev) {

        var newVal = $('.span2').data('slider').getValue();
        if (originalVal != newVal) {

        }
    });


    $scope.getMousePos = function (evt) {

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



    $scope.createDynamicSpeechBubble = function (event, x, y, isAnnotationForTBox) {

        //debugger;
        if (isAnnotationForTBox == true) {
            //1. In transparency box we shows two annotation at a time, so we need to decide the max length of annotation in btween two annotation because based on that 
            // we decide the size of speech bubble
            $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });

            //2.
            if (event.ctrlKey) {

                console.log('ctrl pressed');

                $scope.multiAnnotationIsON = true;

                //2.1 create unique speech bubbles
                $scope.speechBubbleCounter = $scope.speechBubbleCounter + 1;
                var id = "speechBubble" + $scope.speechBubbleCounter;

                //2.2 Get clicked locationa and find if it is already clicked earlier too on same location
                var pointClicked = parseInt(x) + parseInt(y);

                var isClickedOnSamePoint = $("#canvasDiv").find("div[id=" + pointClicked + "]").length;

                console.log('isClickedOnSamePoint: ' + isClickedOnSamePoint);

                // if user has not clciked on smae point then create speech bubble otherwise not
                if (isClickedOnSamePoint == 0) {
                    console.log('not clicked on same point')
                    $scope.createSpeechBubbleBasedOnAnnotationLength(pointClicked, x, y, id);

                    $scope.speechbubbleList.push({ xaxis: x, yaxis: y, ids: id });

                }


                $('.appendDragg').draggable({
                    drag: function (evt) {
                        $(this).prev('div').css("display", "none");
                        var bor_id = $(this).next('div').attr('id');
                        var sub_id1 = $(this).attr('id');
                        var verticalScrollPosition = canvasDiv.scrollTop;
                        var horizontlScrollPosition = canvasDiv.scrollLeft;

                        if ($scope.speechbubbleList != null || $scope.speechbubbleList != undefined) {
                            for (var m = 0; m <= $scope.speechbubbleList.length - 1; m++) {
                                if ($scope.speechbubbleList[m].ids == sub_id1) {

                                    $scope.angle1($scope.speechbubbleList[m].xaxis, $scope.speechbubbleList[m].yaxis, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, bor_id);
                                    break;

                                }
                            }
                        }

                    },
                });



                $('.dynCross').on('click', function (evt) {
                    //$(this).parent().parent().parent().css('display', 'none');
                    $(this).parent().parent().parent().remove();

                });

            }


            else {
                $scope.multiAnnotationIsON = false;
              
                //$(".com").css("display", "none");
                //$("#bord").css({ "width": "0px", "display": "none" });

                //history maintained issue
                if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) {
                    $("#sppeachBubble").remove();
                    $("#dot").remove();
                }



                $(".com").remove();
                $("#bord").remove();

                var sppechBubbleDotHTML = '<div id="dot" style="position:absolute;height:15px;width:35px;display:none;z-index:10000;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);"></div>'
           + '<div id="sppeachBubble" style="height:auto!important;z-index:10000;margin-left:25px;border:1px solid #000;display:none;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 class="crossDiv_temp" style="width:18px" src=' + $rootScope.path + '></span></div>'

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

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

                if (MultipleLanguage == undefined) {
                    console.log("No text is found");
                } else {
                    $('#canvasDiv').append(sppechBubbleDotHTML);

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


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

                        }

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



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

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


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

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

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

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


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

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

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

                        }

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


                            $("#sppeachBubble").css("width", "450px");

                        }

                        else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {


                            $("#sppeachBubble").css("width", "510px");

                        }

                        else {


                            $("#sppeachBubble").css("width", ($scope.longestAnnotation.length) + "%");


                        }

                    }
                }
                var Globe = [];
                Globe.push({ currentX: x, currentY: y });

                document.getElementById('dot').style.display = 'block';
                document.getElementById('dot').style.left = ((Globe[0].currentX) - 10) + 'px';
                document.getElementById('dot').style.top = ((Globe[0].currentY) + 10) + 'px';
                document.getElementById('sppeachBubble').style.display = 'block';
                document.getElementById('sppeachBubble').style.left = (Globe[0].currentX) + 'px';
                document.getElementById('sppeachBubble').style.top = (Globe[0].currentY) + 'px';


                //history maintained issue
                if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) { document.getElementById('sppeachBubble').style.zIndex = "60000"; }
               



                $('#sppeachBubble').draggable(
         {
             drag: function (evt) {

                 //$("#dot").css("display", "none");
                 $("#dot").css("visibility", "hidden");
                 var verticalScrollPosition = canvasDiv.scrollTop;
                 var horizontlScrollPosition = canvasDiv.scrollLeft;
                 $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);


             },
         });


                $('.crossDiv_temp').on('click', function (evt) {
                    //$('#sppeachBubble').css('display', 'none');

                    //$("#bord").css("display", "none");
                    //$("#dot").css("display", "none");
                    $('#sppeachBubble').remove();

                    $("#bord").remove();
                    $("#dot").remove();

                });

            }
        }

        else {

            // alert("false");
            $scope.longest_annotationT1 = $scope.annotationTextArrayT1.reduce(function (a, b) { return a.length > b.length ? a : b; });
            $scope.longest_annotationT2 = $scope.annotationTextArrayT2.reduce(function (a, b) { return a.length > b.length ? a : b; });

            if (event.ctrlKey) {

                //   $scope.multiAnnotationIsON = true;

                $scope.j = $scope.j + 1;

                var sub_id_annotation = "black_annotation" + $scope.j;
                //  alert(sub_id_annotation);
                var pointClicked_annotation = parseInt(x) + parseInt(y);
                var Exists_annotation = $("#canvasDiv").find("div[id=" + pointClicked_annotation + "]").length;
                // alert(Exists_annotation);
                //  alert(pointClicked_annotation);
                var sppechBubbleHTML_annotation = "<div id ='" + pointClicked_annotation + "' class='com_anno'><div style='z-index:10000;position:absolute;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);height:15px;width:35px;left:" + (x - 10) + "px;top:" + (y + 10) + "px;'' id='bubble" + $scope.j + "'></div><div data=" + $scope.j + " id=" + sub_id_annotation + " class='appendDragg_annotation' style='z-index:60000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size: 12px;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;left:" + x + "px;top:" + y + "px;'><div style='z-index:7000;position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.j + " class='dynCross_anno' style='width:18px' src=" + $rootScope.path + "></div></div><div style='position:absolute;border:1px solid #000;display:none;z-index:9000;' id='bord_annotation" + $scope.j + "'></div></div>";
                if ($scope.longest_annotationT1.length > $scope.longest_annotationT2.length) {
                    if (Exists_annotation == 0) {
                        $("#canvasDiv").append(sppechBubbleHTML_annotation);

                        for (var l = 0; l <= $scope.annotationTextArrayT1.length - 1; l++) {
                            var MultipleLang_annotation_T1 = $scope.annotationTextArrayT1[l];
                            //   alert(MultipleLang_annotation_T1);
                            // alert(sub_id_annotation);
                            $("#" + sub_id_annotation).append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T1 + "</p>");
                        }

                        $("#" + sub_id_annotation).append("<p style='border-bottom:1px solid black;margin-bottom:0;'></p>");

                        for (var k = 0; k <= $scope.annotationTextArrayT2.length - 1; k++) {
                            //    alert(MultipleLang_annotation_T2);
                            var MultipleLang_annotation_T2 = $scope.annotationTextArrayT2[k];
                            $("#" + sub_id_annotation).append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T2 + "</p>");
                        }



                        if ($scope.longest_annotationT1.length <= 10) {


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


                        }

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


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


                        }

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



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

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



                            $("#" + sub_id_annotation).css("width", "248px");
                        }
                        else if ($scope.longest_annotationT1.length > 34 && $scope.longest_annotationT1.length <= 44) {



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

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



                            $("#" + sub_id_annotation).css("width", "370px");
                        }
                        else if ($scope.longest_annotationT1.length > 54 && $scope.longest_annotationT1.length <= 69) {



                            $("#" + sub_id_annotation).css("width", "450px");
                        }
                        else if ($scope.longest_annotationT1.length > 69 && $scope.longest_annotationT1.length <= 75) {


                            $("#" + sub_id_annotation).css("width", "510px");

                        }
                        else {


                            $("#" + sub_id_annotation).css("width", ($scope.longest_annotationT1.length) + "%");
                        }
                    }
                    else {

                        $("#canvasDiv").find("div[id=" + pointClicked_annotation + "]").css("display", "block");

                    }

                }
                else {

                    if (Exists_annotation == 0) {



                        $("#canvasDiv").append(sppechBubbleHTML_annotation);

                        for (var l = 0; l <= $scope.annotationTextArrayT1.length - 1; l++) {
                            var MultipleLang_annotation_T1 = $scope.annotationTextArrayT1[l];
                            //  alert(MultipleLang_annotation_T1);
                            $("#" + sub_id_annotation).append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T1 + "</p>");
                        }

                        $("#" + sub_id_annotation).append("<p style='border-bottom:1px dotted white;margin-bottom:0;'></p>");

                        for (var k = 0; k <= $scope.annotationTextArrayT2.length - 1; k++) {
                            var MultipleLang_annotation_T2 = $scope.annotationTextArrayT2[k];
                            // alert(MultipleLang_annotation_T2);
                            $("#" + sub_id_annotation).append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T2 + "</p>");
                        }

                        if ($scope.longest_annotationT2.length <= 10) {


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


                        }

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


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


                        }

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



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

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



                            $("#" + sub_id_annotation).css("width", "248px");
                        }
                        else if ($scope.longest_annotationT2.length > 34 && $scope.longest_annotationT2.length <= 44) {



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

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



                            $("#" + sub_id_annotation).css("width", "370px");
                        }
                        else if ($scope.longest_annotationT2.length > 54 && $scope.longest_annotationT2.length <= 69) {



                            $("#" + sub_id_annotation).css("width", "450px");
                        }
                        else if ($scope.longest_annotationT2.length > 69 && $scope.longest_annotationT2.length <= 75) {


                            $("#" + sub_id_annotation).css("width", "510px");

                        }
                        else {


                            $("#" + sub_id_annotation).css("width", ($scope.longest_annotationT2.length) + "%");
                        }
                    }
                    else {

                        $("#canvasDiv").find("div[id=" + pointClicked_annotation + "]").css("display", "block");

                    }

                }

                $scope.speachBubbleArrayAnnotation.push({ xaxis: x, yaxis: y, ids: sub_id_annotation });

                $('.appendDragg_annotation').draggable({
                    drag: function (evt) {
                        $(this).prev('div').css("display", "none");
                        var bor_id_anno = $(this).next('div').attr('id');
                        var sub_id1_anno = $(this).attr('id');
                        var verticalScrollPosition = canvasDiv.scrollTop;
                        var horizontlScrollPosition = canvasDiv.scrollLeft;

                        if ($scope.speachBubbleArrayAnnotation != null || $scope.speachBubbleArrayAnnotation != undefined) {
                            for (var m = 0; m <= $scope.speachBubbleArrayAnnotation.length - 1; m++) {
                                if ($scope.speachBubbleArrayAnnotation[m].ids == sub_id1_anno) {

                                    $scope.angle1($scope.speachBubbleArrayAnnotation[m].xaxis, $scope.speachBubbleArrayAnnotation[m].yaxis, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, bor_id_anno);
                                    break;

                                }
                            }
                        }

                    },
                });



                $('.dynCross_anno').on('click', function (evt) {
                    //$(this).parent().parent().parent().css('display', 'none');
                    $(this).parent().parent().parent().remove();
                    // $("#bord").css("display", "none");
                    //  $("#dot").css("display", "none");


                });



            }

            else {
              
                $scope.multiAnnotationIsON = false;

                $(".com_annotation").css("display", "none");
                $("#bord_annotation").css({ "width": "0px", "display": "none" });
                $('.dynCross_anno').parent().parent().parent().remove();
                var sppechBubbleDotHTML_annotation = '<div id="dot_annotation" style="position:absolute;height:15px;width:35px;display:none;z-index:10000;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);"></div>'
           + '<div id="sppeachBubble_annotation" style="height:auto!important;z-index:60000;margin-left:25px;border:1px solid #000;display:none;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size:12px;background-color:#19100e;font-weight:bold;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 class="crossDiv_temp_annotation" style="width:18px" src=' + $rootScope.path + '></span></div>'

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



                if ($scope.longest_annotationT1.length > $scope.longest_annotationT2.length) {

                    $("#sppeachBubble_annotation p").remove();
                    $('#canvasDiv').append(sppechBubbleDotHTML_annotation);
                    for (var l = 0; l <= $scope.annotationTextArrayT1.length - 1; l++) {
                        var MultipleLang_annotation_T1 = $scope.annotationTextArrayT1[l];
                        $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T1 + "</p>");
                    }

                    $("#sppeachBubble_annotation").append("<p style='border-bottom:1px dotted white;margin-bottom:0;'></p>");

                    for (var k = 0; k <= $scope.annotationTextArrayT2.length - 1; k++) {
                        var MultipleLang_annotation_T2 = $scope.annotationTextArrayT2[k];
                        $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T2 + "</p>");
                    }

                    if ($scope.longest_annotationT1.length <= 10) {


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


                    }

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


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


                    }

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



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

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



                        $("#sppeachBubble_annotation").css("width", "248px");
                    }
                    else if ($scope.longest_annotationT1.length > 34 && $scope.longest_annotationT1.length <= 44) {



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

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



                        $("#sppeachBubble_annotation").css("width", "370px");
                    }
                    else if ($scope.longest_annotationT1.length > 54 && $scope.longest_annotationT1.length <= 69) {



                        $("#sppeachBubble_annotation").css("width", "450px");
                    }
                    else if ($scope.longest_annotationT1.length > 69 && $scope.longest_annotationT1.length <= 75) {


                        $("#sppeachBubble_annotation").css("width", "510px");

                    }
                    else {


                        $("#sppeachBubble_annotation").css("width", ($scope.longest_annotationT1.length) + "%");
                    }
                }


                else {
                    $("#sppeachBubble_annotation p").remove();
                    $('#canvasDiv').append(sppechBubbleDotHTML_annotation);
                    for (var l = 0; l <= $scope.annotationTextArrayT1.length - 1; l++) {
                        var MultipleLang_annotation_T1 = $scope.annotationTextArrayT1[l];
                        $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T1 + "</p>");
                    }

                    $("#sppeachBubble_annotation").append("<p style='border-bottom:1px dotted white;margin-bottom:0;'></p>");

                    for (var k = 0; k <= $scope.annotationTextArrayT2.length - 1; k++) {
                        var MultipleLang_annotation_T2 = $scope.annotationTextArrayT2[k];
                        $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T2 + "</p>");
                    }

                    if ($scope.longest_annotationT2.length <= 10) {


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


                    }

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


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


                    }

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



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

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



                        $("#sppeachBubble_annotation").css("width", "248px");
                    }
                    else if ($scope.longest_annotationT2.length > 34 && $scope.longest_annotationT2.length <= 44) {



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

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



                        $("#sppeachBubble_annotation").css("width", "370px");
                    }
                    else if ($scope.longest_annotationT2.length > 54 && $scope.longest_annotationT2.length <= 69) {



                        $("#sppeachBubble_annotation").css("width", "450px");
                    }
                    else if ($scope.longest_annotationT2.length > 69 && $scope.longest_annotationT2.length <= 75) {


                        $("#sppeachBubble_annotation").css("width", "510px");

                    }
                    else {


                        $("#sppeachBubble_annotation").css("width", ($scope.longest_annotationT2.length) + "%");
                    }
                    var Globe = [];
                    Globe.push({ currentX: x, currentY: y });

                    document.getElementById('dot_annotation').style.display = 'block';
                    document.getElementById('dot_annotation').style.left = ((Globe[0].currentX) - 10) + 'px';
                    document.getElementById('dot_annotation').style.top = ((Globe[0].currentY) + 10) + 'px';
                    document.getElementById('sppeachBubble_annotation').style.display = 'block';
                    document.getElementById('sppeachBubble_annotation').style.left = (Globe[0].currentX) + 'px';
                    document.getElementById('sppeachBubble_annotation').style.top = (Globe[0].currentY) + 'px';

                    $('#sppeachBubble_annotation').draggable(
             {
                 drag: function (evt) {

                     //$("#dot_annotation").css("display", "none");
                     $("#dot_annotation").remove();

                     var verticalScrollPosition = canvasDiv.scrollTop;
                     var horizontlScrollPosition = canvasDiv.scrollLeft;
                     $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);


                 },
             });


                    $('.crossDiv_temp_annotation').on('click', function (evt) {
                        //$('#sppeachBubble_annotation').css('display', 'none');

                        //$("#bord_annotation").css("display", "none");
                        //$("#dot_annotation").css("display", "none");


                        $('#sppeachBubble_annotation').remove();

                        $("#bord_annotation").remove();
                        $("#dot_annotation").remove();

                    });
                }



            }


        }


        if (document.getElementById("btnStrutureBox").name == "showAnnotationStructure") {
            $scope.showAnnotation()
           
        }
        else {
            $scope.hideAnnotation()
          

        }
       
        if ($rootScope.isTBCompleted == true) {
            $('#sppeachBubble').remove();
            $('#dot').remove();
            $('#bord').remove();
            $('.com').remove();
            $rootScope.isTBCompleted = false;
        }
    }

    $scope.showAnnotation = function()
    {
        $(".com").show();
        $('#dot').show();
        $('#bord').show();
        $('#sppeachBubble').show();
        $('#sppeachBubble_annotation').show();

        $("#bord_annotation").show();
        $("#dot_annotation").show();
        $(".dynCross_anno").parent().parent().parent().show();
    }

    $scope.hideAnnotation=function()
    {
        $(".com").hide();
        $('#dot').hide();
        $('#bord').hide();
        $('#sppeachBubble').hide();
        $('#sppeachBubble_annotation').hide();
        $("#bord_annotation").hide();
        $("#dot_annotation").hide();
        $(".dynCross_anno").parent().parent().parent().hide();
    }

    $scope.createSpeechBubbleBasedOnAnnotationLength = function (pointClicked, x, y, id) {
        var sppechBubbleHTML = "<div id ='" + pointClicked + "' class='com'><div style='z-index:60000;position:absolute;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);height:15px;width:35px;left:" + (x - 10) + "px;top:" + (y + 10) + "px;'' id='bubble" + $scope.speechBubbleCounter + "'></div><div data=" + $scope.speechBubbleCounter + " id=" + id + " class='appendDragg' style='z-index:60000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size: 12px;font-weight:bold;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;left:" + x + "px;top:" + y + "px;'><div style='z-index:7000;position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.speechBubbleCounter + " class='dynCross' style='width:18px' src=" + $rootScope.path + "></div></div><div style='position:absolute;border:1px solid #000;display:none;z-index:9000;' id='bord" + $scope.speechBubbleCounter + "'></div></div>";
        //Issue #7286 :Undefined annotation should not appear
        for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
            var annotation = $scope.MultiLanguageAnnationArray[i];
        }

        if (annotation == undefined) {
            console.log("No text found");
        } else {

            $("#canvasDiv").append(sppechBubbleHTML);

            for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
                var annotation = $scope.MultiLanguageAnnationArray[i];

                $("#" + id).append("<p style='margin-bottom:2px;'>" + annotation + "</p>");
            }

            if ($scope.longestAnnotation.length <= 10) {
                $("#" + id).css("width", "100px");
            }

            else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
                $("#" + id).css("width", "140px");
            }
            else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
                $("#" + id).css("width", "195px");

            }
            else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
                $("#" + id).css("width", "248px");
            }
            else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
                $("#" + id).css("width", "300px");
            }

            else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
                $("#" + id).css("width", "370px");
            }
            else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
                $("#" + id).css("width", "450px");
            }
            else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
                $("#" + id).css("width", "510px");

            }
            else {
                $("#" + id).css("width", ($scope.longestAnnotation.length) + "%");
            }
        }
    }

    $scope.angle1 = function (cx1, cy1, ex1, ey1, id, id2) {

        // console.log(cx1 + " " + cy1);
        var dy = ey1 - cy1;
        var dx = ex1 - cx1;
        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 g = Math.sqrt((cx1 - ex1) * (cx1 - ex1) + (cy1 - ey1) * (cy1 - ey1));
        var e = cy1;
        var f = cx1;

        $('#' + id).css({ 'display': 'block', 'width': g + '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%' });

    }

    function myFunction(crossId) {
        // alert(crossId);
        $('#' + crossId).parent().parent().parent().css("display", "none");

    }


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


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

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

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

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

        if (BoolValues == true) {
            $("#bord").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%' });

        }
        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.createSpeechBubble = function (event, text, x, y) {
        //set z index to make annoation speech buble on top others
        $('#canvasDiv').css('cursor', 'pointer');
        $('<div id="speechBubble" class="BubbleDiv" style="display:visible; top:' + y + 'px; left:' + x + 'px; z-index:700"> <div class="">'
            + '<div class="Bubble">'
            + '<div class="BubbleCloseBtn"></div><div class="BubbleContent">' + text + '</div><div class="bottomLeftArrow"></div>'
            //+'<div class="bottomRightArrow"></div><div class="topLeftArrow"></div><div class="topRightArrow"></div>
            + '</div></div></div>').appendTo('#canvasDiv');

        $('#speechBubble').on('click', '.BubbleCloseBtn', function (evt) {
            $('#speechBubble').css('display', 'none');
        });

        $('#canvasDiv').attr("data-bubbleid", "speechBubble")
        
    };


    $scope.createTransparencyBox = function () {

        $scope.isTransparencyBtnClicked = true;

        //do not create TBOX if in extarct mode otherwise create
        if ($rootScope.isExtract == false) {

            $("#btnExtract").addClass("disabled");

            //if listanager is visisble then close it
            $rootScope.isListManagerSelected = false;
            $rootScope.CloseListManager();



            //   alert('transparencyClicked' + $scope.isTransparencyActivated)
            $('#btnTranparency').addClass('tButtonActive');
            $('#btnIdentity').removeClass(' btn-primary');
            $('#btnIdentity').addClass('btn-black');

            var canvasDiv = document.getElementById('canvasDiv');
            $scope.verticalScrollPosition = canvasDiv.scrollTop;
            $scope.horizontlScrollPosition = canvasDiv.scrollLeft;

            var canvasDiv = document.getElementById('canvasDiv');
            canvasDiv.addEventListener("mousedown", mouseDownListener);

            canvasDiv.addEventListener("mousemove", mouseMoveListener);

            canvasDiv.addEventListener("mouseup", mouseUpListener)

        }
        else {

            //  console.log("extract button is active");

        }

      
        //in case of annotation toolbar is open below code will be executed to draw Tbox
        if ($rootScope.isAnnotationWindowOpen == true) {
            if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
                $rootScope.DrawingMode();
                $rootScope.shapeType = "";
                $(".btn-annotation").removeClass("activebtncolor");
                $("#annotationpaintbrushsize").removeClass("activebtncolor");
                $("#annotationpainteraser").removeClass("activebtncolor");
            }
            else {

                $rootScope.switchCanvas();
            }
        }
      

    }

    function mouseDownListener(e) {
        //Dated:18-07-2016 Issue#4975: Transparency box should not be clickable if it is already selected.
        var tCanvas = document.getElementById('transparencyCanvas');
        if ($('#transparencyScale').css("visibility") == 'visible') {
            $('#transparencyScale').css('visibility', 'hidden');
            $('#transparencyCanvas').remove();
        }
        var $container = document.getElementById('canvasDiv');
        var $selection = $('<div>').addClass('rectangle');
        document.getElementById("DAView")
        $selection.css({
            'position': 'absolute',
            //'background': 'transparent',
            'border': '1px dotted #000'
        });

        var currentMousePosition = $scope.getMousePos(e);

        $scope.TBDrawStartX = currentMousePosition.x;
        $scope.TBDrawStartY = currentMousePosition.y;

         var canvasDiv = document.getElementById('canvasDiv');
         $scope.verticalScrollPosition = canvasDiv.scrollTop;
         $scope.horizontlScrollPosition = canvasDiv.scrollLeft;

        var actulalX = currentMousePosition.x + $scope.horizontlScrollPosition
        var actualY = currentMousePosition.y + $scope.verticalScrollPosition

        //alert('$scope.TransparencyBoxStartX in mouseDown: ' + $scope.TransparencyBoxStartX + ' & Y= ' + $scope.TransparencyBoxStartY);
        $scope.TransparencyBoxStartX = actulalX;
        $scope.TransparencyBoxStartY = actualY
        $scope.startX = actulalX;
        $scope.startY = actualY;
        var tBox = document.getElementById('transparencyCanvas');

        if (tBox == null) {
            ////  canvasDiv.style.cursor = "crosshair";
            $selection.css({
                'top': actualY,
                'left': actulalX,
                'width': 0,
                'height': 0,
                'z-index': 1000
            });
            $selection.appendTo($container);
        }

        document.getElementById('canvasDiv').removeEventListener("mousedown", mouseDownListener);
        //Dated:19-07-2016 Issue#4975: Transparency box should not be clickable if it is already selected.
        if ($("#txtlayerNumber").val() != 0 && $scope.currentLayerNumber != undefined) {
            $('#layerChangeSlider').slider("option", "value", parseInt($rootScope.totalLayers) - parseInt($scope.currentLayerNumber));
            $("#txtlayerNumber").val(parseInt($scope.currentLayerNumber));
        }

    }

    function mouseMoveListener(e) {

        var canvasDiv = document.getElementById('canvasDiv');
        $scope.verticalScrollPosition = canvasDiv.scrollTop;
        $scope.horizontlScrollPosition = canvasDiv.scrollLeft;

        var currentMousePosition = $scope.getMousePos(e);
        var move_x = currentMousePosition.x + $scope.horizontlScrollPosition,
            move_y = currentMousePosition.y + $scope.verticalScrollPosition,

              width = move_x - $scope.TransparencyBoxStartX,
            height = move_y - $scope.TransparencyBoxStartY,
            new_x, new_y;

        new_x = (move_x < $scope.TransparencyBoxStartX) ? ($scope.TransparencyBoxStartX - width) : $scope.TransparencyBoxStartX;
        new_y = (move_y < $scope.TransparencyBoxStartY) ? ($scope.TransparencyBoxStartY - height) : $scope.TransparencyBoxStartY;

        $('.rectangle').css({
            'width': width,
            'height': height,
            //'background': 'transparent'

        });

    }


    function mouseUpListener(e) {
       
        $scope.isTBDrawnOnBodyRegion = false;
      
        $(".com").remove();
        $('#dot').remove();
        $('#bord').remove();
        $('#sppeachBubble').remove();

        var previewRectangleWidth = $('.rectangle').width();
        var previewRectangleHeight = $('.rectangle').height()
      

        $scope.currentLayerNumber = parseInt($('#txtlayerNumber').val());
        $('.rectangle').remove();

        var currentMousePosition = $scope.getMousePos(e);


        var canavsDivScrollPos = $scope.getCanavsDivScrollPosition();

        var TransparencyEndX = currentMousePosition.x + canavsDivScrollPos.horizontlScrollPosition;
        var TransparencyBoxEndY = currentMousePosition.y + canavsDivScrollPos.verticalScrollPosition;


        $scope.isTboxDrwan = true;
        $scope.TbEndX = TransparencyEndX;
        $scope.TbEndY = TransparencyBoxEndY;
        $scope.TransparencyEndX = TransparencyEndX;
        $scope.TransparencyBoxEndY = TransparencyBoxEndY;

        if ($scope.TransparencyBoxStartX == $scope.TransparencyEndX && $scope.TransparencyBoxStartY == $scope.TransparencyBoxEndY) {
            // $('#transparencyScale').css('visibility', 'hidden');
        } else {

            if (previewRectangleWidth == 0 && previewRectangleHeight == 0) {

            }
            else {
                $scope.layerNumberBeforeTBDraw = parseInt($('#txtlayerNumber').val());

                //draw temp box to store the canvas data with original transparecy
                if (document.getElementById('tempCanvas') != null) {
                    $('#tempCanvas').remove();
                }
                if (document.getElementById('tempCanvas') == null || document.getElementById('tempCanvas') == undefined) {
                    var tempCanvas = document.createElement('canvas');
                    tempCanvas.id = 'tempCanvas';
                    // $scope.tempCanvas = transparencyCanvas.id;
                    tempCanvas.height = TransparencyBoxEndY - $scope.startY;
                    tempCanvas.width = TransparencyEndX - $scope.startX;
                    tempCanvas.style.position = "absolute";
                    tempCanvas.style.left = 200 + 'px';
                    tempCanvas.style.top = 200 + 'px';
                    tempCanvas.style.backgroundColor = "transparent";
                    tempCanvas.style.visibility = 'hidden';
                    tempCanvas.style.border = "black 1px solid";
                    document.getElementById('canvasDiv').appendChild(tempCanvas);
                }


                $scope.isTransparencyActivated = true;

                var BodyRegionDictionary = $rootScope.BodyRegionCordinatesData;

                $scope.IncludedBodyRegions = [];
                $scope.transparencyDrawnRegions = [];

                $.each(BodyRegionDictionary, function (index, value) {


                    var tBoxDimesions = $scope.getTBoxDimesions($scope.TransparencyBoxStartX, TransparencyEndX, $scope.TransparencyBoxStartY, TransparencyBoxEndY, value.X, value.Y, value.Height, value.Width);

                    var transparencyBoxHeight = tBoxDimesions.transparencyBoxHeight;
                    var transparencyBoxWidth = tBoxDimesions.transparencyBoxWidth;
                    var transparencyBoxBottom = tBoxDimesions.transparencyBoxBottom;
                    var transparencyBoxRight = tBoxDimesions.transparencyBoxRight;
                    var bodyRegionRight = tBoxDimesions.bodyRegionRight;
                    var bodyRegionBottom = tBoxDimesions.bodyRegionBottom;

                    var transparencyCanvas = document.createElement('canvas');
                    var tBox = document.getElementById('transparencyCanvas');
                    if (tBox == null) {

                        transparencyCanvas.id = 'transparencyCanvas';
                        $scope.transparencyCanvasId = transparencyCanvas.id;
                        transparencyCanvas.height = TransparencyBoxEndY - $scope.startY;
                        transparencyCanvas.width = TransparencyEndX - $scope.startX;
                        transparencyCanvas.style.position = "absolute";
                        transparencyCanvas.style.left = $scope.startX + 'px' // x + "px";
                        transparencyCanvas.style.top = $scope.startY + "px"//y + "px";
                        transparencyCanvas.style.border = "black 1px solid";
                        transparencyCanvas.style.backgroundColor = "transparent";
                        transparencyCanvas.style.zIndex = 200;
                        document.getElementById('canvasDiv').appendChild(transparencyCanvas);
                        $scope.transparencyChangeCounter = 0;

                        $('#transparencyCanvas').resizable({ handles: "e,s,se,w,n,ne,nw,sw", stop: function (event, ui) { resizeTransparencyBox(); }, start: function (event, ui) { clearTransCanvas(); } });

                        $scope.transparencyCanvasHeight = transparencyCanvas.height;
                        $scope.transparencyCanvasWidth = transparencyCanvas.width;

                        //bind click listener
                        transparencyCanvas.addEventListener('click', TransparencyCanvasClickListener);

                        $(".ui-wrapper").css("z-index", $rootScope.UIWrapperZIndex);

                    }
                    if ($scope.TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && $scope.TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {

                        $scope.isTBDrawnOnBodyRegion = true;

                        if (($rootScope.voId == "9" || $rootScope.voId == "11")) {
                            if (value.bodyRegionId == "6") {
                                $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, TransparencyEndX, $scope.TransparencyBoxStartY, TransparencyBoxEndY, $scope, false, false);
                            }
                            else {

                            }
                        }
                        else {
                            $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, TransparencyEndX, $scope.TransparencyBoxStartY, TransparencyBoxEndY, $scope, false, false);

                        }
                    }
                })

                //for modesty
                if ($rootScope.isModestyOn == true && $scope.modestyImageInfo.length > 0) {
                    $.each($scope.modestyImageInfo, function (index, value) {

                        var tBoxDimesions = $scope.getTBoxDimesions($scope.TransparencyBoxStartX, TransparencyEndX, $scope.TransparencyBoxStartY, TransparencyBoxEndY, value.x, value.y, value.Height, value.Width);

                        var transparencyBoxHeight = tBoxDimesions.transparencyBoxHeight;
                        var transparencyBoxWidth = tBoxDimesions.transparencyBoxWidth;
                        var transparencyBoxBottom = tBoxDimesions.transparencyBoxBottom;
                        var transparencyBoxRight = tBoxDimesions.transparencyBoxRight;
                        var bodyRegionRight = tBoxDimesions.bodyRegionRight;
                        var bodyRegionBottom = tBoxDimesions.bodyRegionBottom;

                        if ($scope.TransparencyBoxStartX <= bodyRegionRight && value.x <= transparencyBoxRight && $scope.TransparencyBoxStartY <= bodyRegionBottom && value.y <= transparencyBoxBottom) {

                            $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.x, value.y, value.IsMirror, $scope.TransparencyBoxStartX, TransparencyEndX, $scope.TransparencyBoxStartY, TransparencyBoxEndY, $scope, false, false);

                        }
                    })
                }




                //

                // $('#transparencyScale').modal('show');
                $('#transparencyScale').css('position', 'fixed')
                $('#transparencyScale').css('top', $scope.TBDrawStartY - 10)
                $('#transparencyScale').css('left', $scope.TBDrawStartX + 130)
                $('#transparencyScale').css('visibility', 'visible')
                $('#transparencyScale').css("z-index", "100000")  //Dated:16-07-2016 Issue#4962:Transparency box should be on top.

            }
        }

        document.getElementById('canvasDiv').removeEventListener("mousedown", mouseDownListener);
        document.getElementById('canvasDiv').removeEventListener("mousemove", mouseMoveListener);

        document.getElementById('canvasDiv').removeEventListener("mouseup", mouseUpListener);
        //    document.getElementById('canvasDiv').removeEventListener("mousemove", mouseMoveListener);
        $('#btnTranparency').removeClass('btn-black');

        $('#btnTranparency').addClass('tButtonActive');
      
        //  $('#txtlayerNumber').val((parseInt($scope.currentLayerNumber)) + 1);
        //Dated:18-07-2016 Issue#4975: Transparency box should not be clickable if it is already selected.
        $('#btnTranparency').removeClass('tButtonActive');
        $('#btnTranparency').addClass('btn-black');
        $('#btnIdentity').removeClass('btn-black');
        $('#btnIdentity').addClass('btn-primary');

        // clear canvas before drawing transparency box 
        if ($rootScope.isAnnotationWindowOpen == true){
            $('#canvas').removeLayers();
            var paintCanvasObj = document.getElementById("canvasPaint");
            if (paintCanvasObj != null) {
                var ctx = paintCanvasObj.getContext("2d");
                ctx.clearRect(0, 0, 2277, 3248);
            }
            var sktch = $('#canvasPaint').sketch();
            $('#canvasPaint').sketch().actions = [];
            $("#annotationpaintbrushsize").removeClass("activebtncolor");
            $("#annotationpainteraser").removeClass("activebtncolor");
            if ($("#DrawMode").hasClass("annotationtoolbartab"))
            {
                var drawCanvasZindex = $("#canvas").css("z-index");
                var paintCanvasZindex = $("#canvasPaint").css("z-index");
                drawCanvasZindex = parseInt(drawCanvasZindex) - 1;
                paintCanvasZindex = parseInt(paintCanvasZindex) - 1;
                if (drawCanvasZindex > paintCanvasZindex) {
                    $(".ui-wrapper").css("z-index", drawCanvasZindex);
                    $rootScope.UIWrapperZIndex = drawCanvasZindex;
                }
                else {
                    $(".ui-wrapper").css("z-index", paintCanvasZindex);
                    $rootScope.UIWrapperZIndex = paintCanvasZindex;
                }
            }
            else {
                $rootScope.switchToTransparencycanvas();
            }
        }

        //hide the speechbubble
        
           
           if($rootScope.isAnnotationWindowOpen == true)
              $rootScope.isTBCompleted = true;
    }

    $scope.getCanavsDivScrollPosition = function () {

        var canvasDiv = document.getElementById('canvasDiv');
        return{
            verticalScrollPosition : canvasDiv.scrollTop,
             horizontlScrollPosition : canvasDiv.scrollLeft
       }

    }

    $scope.getTBoxDimesions = function (TransparencyBoxStartX, TransparencyEndX, TransparencyBoxStartY, TransparencyBoxEndY, X, Y, Height, Width) {
      
        var tBoxHeight = parseInt(TransparencyBoxEndY) - parseInt(TransparencyBoxStartY);
        var tBoxWidth =  parseInt(TransparencyEndX) - parseInt(TransparencyBoxStartX);
        var tBoxBottom = parseInt(TransparencyBoxStartY) + parseInt(tBoxHeight);
        var tBoxRight = parseInt(TransparencyBoxStartX) + parseInt(tBoxWidth);

        return{

            transparencyBoxHeight: tBoxHeight,
            transparencyBoxWidth: tBoxWidth,
            transparencyBoxBottom: tBoxBottom,
            transparencyBoxRight: tBoxRight,
            bodyRegionRight : parseInt(X) + parseInt(Width),
            bodyRegionBottom : parseInt(Y) + parseInt(Height)
      }
    }

    $scope.loadTransparencyImage = function (bodyRegionId, Height, Width, X, Y, IsMirror, TransparencyBoxStartX, TransparencyEndX, TransparencyBoxStartY, TransparencyBoxEndY, scope, isLayerChanged, isTransparencyChanged) {
        

        var transparencyCanvas = document.getElementById('transparencyCanvas');

        TransparencyBoxStartX = parseInt((transparencyCanvas.style.left).replace('px', ''));
        TransparencyBoxStartY = parseInt((transparencyCanvas.style.top).replace('px', ''));
        TransparencyEndX = parseInt(transparencyCanvas.width) + parseInt(TransparencyBoxStartX);
        TransparencyBoxEndY = parseInt(transparencyCanvas.height) + parseInt(TransparencyBoxStartY);


        var TBImageDimensions = $scope.calculateDimensionsForTBImage(Height, Width, X, Y, IsMirror, TransparencyBoxStartX, TransparencyEndX, TransparencyBoxStartY, TransparencyBoxEndY, bodyRegionId);

        var XforCopyImage = TBImageDimensions.XforCopyImageTB;
        var YforCopyImage = TBImageDimensions.YforCopyImageTB;
        var WidthforCopyImage = TBImageDimensions.WidthforCopyImageTB;
        var HeightforCopyImage = TBImageDimensions.HeightforCopyImageTB;
        var XforTransImage = TBImageDimensions.XforTransImageTB;
        var WidthforTransImage = TBImageDimensions.WidthforTransImageTB;
        var HeightforTransImage = TBImageDimensions.HeightforTransImageTB;
        var YforTransImage = TBImageDimensions.YforTransImageTB;

        //0. get current layer number
        if ($scope.isResized) {
            //do nothing
        }
        else if (isLayerChanged) {

        }
        else {
           
            var tranparencyLayer;

            var currentLayer = $scope.layerNumberBeforeTBDraw;

            if (currentLayer == $rootScope.totalLayers) {

                tranparencyLayer = currentLayer;

            }

            else {

                tranparencyLayer = currentLayer + 1;

            }

            $scope.layerNumber = tranparencyLayer;

        }

        $('#txtlayerNumber').val($scope.layerNumber);


        var tranparencyImgSrc;
        var tranparencyMaskImgSrc;

        if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg')))
        {
            var modestyBodyRegionData = new jinqJs()
                                          .from($scope.modestyImageInfo)
                                         .where('bodyRegionId == ' + bodyRegionId)
                                          .select();
            tranparencyImgSrc = modestyBodyRegionData[0].SRC;
        }
        else {
            tranparencyImgSrc = $scope.GetImageSource(bodyRegionId);
            tranparencyMaskImgSrc = $scope.GetMaskImageSource(tranparencyImgSrc);
        }
      
        //remove old canvases
        var oldCanvas;
        var oldtempTransCanvasMask;
        var oldtempTransCanvasMaskMR;

        if (IsMirror == 'Yes') {
            oldCanvas = document.getElementById('transparencyTempCanvas_MR_' + bodyRegionId);
            oldtempTransCanvasMaskMR = document.getElementById('transparencyTempCanvasMask_MR' + bodyRegionId + '_mci');
            oldtempTransCanvasMask = document.getElementById('transparencyTempCanvasMask_' + bodyRegionId + '_mci');

            if (oldtempTransCanvasMaskMR != null) {
                document.getElementById('canvasDiv').removeChild(oldtempTransCanvasMaskMR);
            }
            
        }
        else {
           
            oldCanvas = document.getElementById('transparencyTempCanvas_' + bodyRegionId)
            oldtempTransCanvasMask = document.getElementById('transparencyTempCanvasMask_' + bodyRegionId + '_mci');

        }

        if (oldCanvas != null) {
            document.getElementById('canvasDiv').removeChild(oldCanvas);
        }
        if (oldtempTransCanvasMask != null) {
            document.getElementById('canvasDiv').removeChild(oldtempTransCanvasMask);
        }
       
     
        var transparencyTempCanvas = document.createElement('canvas');
        var transparencyTempcanavsMask = document.createElement('canvas');
        //if mirror then draw mask image for non mirrored body region for annotation
        if (IsMirror == 'Yes') {
            transparencyTempCanvas.id = 'transparencyTempCanvas_MR_' + bodyRegionId;
            transparencyTempcanavsMask.id = 'transparencyTempCanvasMask_MR' + bodyRegionId + '_mci';
        }
        else {
            if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {
                transparencyTempCanvas.id = 'transparencyTempCanvas_' + bodyRegionId;

            }
            else {
                transparencyTempCanvas.id = 'transparencyTempCanvas_' + bodyRegionId;
                transparencyTempcanavsMask.id = 'transparencyTempCanvasMask_' + bodyRegionId + '_mci';
            }

        }
        transparencyTempCanvas.height = Height;
        transparencyTempCanvas.width = Width;
        transparencyTempCanvas.style.position = "absolute";
        transparencyTempCanvas.style.left = X + 'px' // x + "px";
        transparencyTempCanvas.style.top = Y + "px"//y + "px";
       
        transparencyTempCanvas.style.visibility = 'hidden';
       
        document.getElementById('canvasDiv').appendChild(transparencyTempCanvas);

        //create temp mask canvas
        if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) { }
        else {
            transparencyTempcanavsMask.height = Height;
            transparencyTempcanavsMask.width = Width;
            transparencyTempcanavsMask.style.position = "absolute";
            transparencyTempcanavsMask.style.left = X + 'px' // x + "px";
            transparencyTempcanavsMask.style.top = Y + "px"//y + "px";
            transparencyTempcanavsMask.style.visibility = 'hidden';
           
            document.getElementById('canvasDiv').appendChild(transparencyTempcanavsMask);
        }

        //for modesty canvas
        if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {

            var modestyTransTempCanvasId = 'tempCanvasModesty_' + bodyRegionId;
            var modestyTransCanvasId = 'modestyTransCanavs_' + bodyRegionId;
            if (document.getElementById(modestyTransTempCanvasId) != null) {
                document.getElementById(modestyTransTempCanvasId).parentNode.removeChild(document.getElementById(modestyTransTempCanvasId));
            }

            if (document.getElementById(modestyTransTempCanvasId) == null || document.getElementById(modestyTransTempCanvasId) == undefined) {
                var tempCanvasModesty = document.createElement('canvas');
                tempCanvasModesty.id = modestyTransTempCanvasId;
                tempCanvasModesty.height = Height;
                tempCanvasModesty.width = Width;
                tempCanvasModesty.style.position = "absolute";
                tempCanvasModesty.style.left = 10 + 'px';
                tempCanvasModesty.style.top = 10 + 'px';
                tempCanvasModesty.style.backgroundColor = "transparent";
                tempCanvasModesty.style.visibility = 'hidden';
                tempCanvasModesty.style.border = "black 1px solid";
                document.getElementById('canvasDiv').appendChild(tempCanvasModesty);
            }
            if (document.getElementById(modestyTransCanvasId) != null) {
                document.getElementById(modestyTransCanvasId).parentNode.removeChild(document.getElementById(modestyTransCanvasId));
            }

            if (document.getElementById(modestyTransCanvasId) == null || document.getElementById(modestyTransCanvasId) == undefined) {
                var canvasModesty = document.createElement('canvas');
                canvasModesty.id = modestyTransCanvasId;
                canvasModesty.height = Height;
                canvasModesty.width = Width;
                canvasModesty.style.position = "absolute";
                canvasModesty.style.left = X + 'px';
                canvasModesty.style.top = Y + 'px';
                canvasModesty.style.visibility = 'visible';
                canvasModesty.style.zIndex = '2000';
                canvasModesty.addEventListener('click', OnClickModestyTransCanvas);

                document.getElementById('canvasDiv').appendChild(canvasModesty);
            }
        }

        if (tranparencyImgSrc != undefined) {
            var tempImg = new Image();

            var tempCanvasID;

            if (IsMirror == 'Yes') {
                tempCanvasID = 'transparencyTempCanvas_MR_' + bodyRegionId;
            }
            else {
                if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {
                    tempCanvasID = 'transparencyTempCanvas_' + bodyRegionId;//bodyRegionId;
                }
                else
                    tempCanvasID = 'transparencyTempCanvas_' + bodyRegionId;
            }

            tempImg.onload = function () {

                var tempCtx = transparencyTempCanvas.getContext('2d');

                if (IsMirror == 'Yes') {
                    //debugger;
                    tempCtx.save();
                    tempCtx.translate(Width, 0);
                    tempCtx.scale(-1, 1);
                    tempCtx.drawImage(tempImg, 0, 0);

                    if ($rootScope.isHighLight == true) {
                       // var tempCanvasID = 'transparencyTempCanvas_MR_' + bodyRegionId;
                        $scope.highlightTempTransparencyCanvas(tempCanvasID, XforCopyImage, YforCopyImage, WidthforCopyImage, HeightforCopyImage,
                                                        XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage, Height, Width, bodyRegionId);
                    }
                }
                else {

                    tempCtx.drawImage(tempImg, 0, 0);

                   if ($rootScope.isHighLight == true) {
                       $scope.highlightTempTransparencyCanvas(tempCanvasID, XforCopyImage, YforCopyImage, WidthforCopyImage, HeightforCopyImage, XforTransImage,
                                                    YforTransImage, WidthforTransImage, HeightforTransImage, Height, Width, bodyRegionId);

                   }

                }
          

              
                if ($rootScope.isHighLight != true) {
                 

                    if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {
                        var modestyTempCanvasId = 'tempCanvasModesty_' + bodyRegionId;
                        if (document.getElementById(modestyTempCanvasId) != undefined || document.getElementById(modestyTempCanvasId) != null) {
                            var contxModestyTemp = document.getElementById(modestyTempCanvasId).getContext('2d');
                            var tbTempCanvas = document.getElementById(tempCanvasID)
                            contxModestyTemp.drawImage(tbTempCanvas, XforCopyImage, YforCopyImage, WidthforCopyImage, HeightforCopyImage, XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage);

                        }
                    }
                    else {

                        if (document.getElementById('tempCanvas') != null && document.getElementById('tempCanvas') != undefined) {
                            var contx = document.getElementById('tempCanvas').getContext('2d');
                            var tbTempCanvas = document.getElementById(tempCanvasID)
                            contx.drawImage(tbTempCanvas, XforCopyImage, YforCopyImage, WidthforCopyImage, HeightforCopyImage, XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage);

                        }
                   }

                    $scope.DrawOnTBWithSelectedTransparency(tempCanvasID, XforCopyImage, YforCopyImage, WidthforCopyImage, HeightforCopyImage, XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage, Height, Width, bodyRegionId);

                }
              

            }
            tempImg.src = tranparencyImgSrc;//"http://localhost/AIA/" + tranparencyImgSrc;

         
        }

        //mask image code
        //draw mask for annotation
        var tempMaskImg = new Image();
        var tranparencyMaskImgSrc = $scope.GetMaskImageSource(tranparencyImgSrc);
        tempMaskImg.src = tranparencyMaskImgSrc;//"http://localhost/AIA/" + tranparencyMaskImgSrc;
        tempMaskImg.onload = function () {
            //  debugger;
            var tempmaskCtx = transparencyTempcanavsMask.getContext('2d');

            if (IsMirror == 'Yes') {
                //debugger;
                tempmaskCtx.save();
                tempmaskCtx.translate(Width, 0);
                tempmaskCtx.scale(-1, 1);
                tempmaskCtx.drawImage(tempMaskImg, 0, 0);
            }
            else {
                tempmaskCtx.drawImage(tempMaskImg, 0, 0);

            }


        }

        //set modesty image visiblility true/false as per layer
           

            var layerInfo = new jinqJs()
                            .from($scope.layerInfoForModesty)
                             .where('bodyRegionId == ' + bodyRegionId)
                             .select();
            if (layerInfo != undefined && layerInfo.length>0){
            var lowerlayerNumberForModesty = layerInfo[0].lowerlayerNumberForModesty;
            var HigherlayerNumberForModesty = layerInfo[0].HigherlayerNumberForModesty;

            var modestyTransCanvases = $("canvas[id*='modestyTransCanavs']");

            if (modestyTransCanvases != null || modestyTransCanvases != undefined && modestyTransCanvases.length > 0) {
                for (var j = 0; j < modestyTransCanvases.length; j++) {

                    if (modestyTransCanvases[j].id.match(bodyRegionId)) {

                        var modestyCanavs = document.getElementById(modestyTransCanvases[j].id);

                        if ((parseInt(lowerlayerNumberForModesty) <= parseInt($scope.layerNumber)) && (HigherlayerNumberForModesty) > parseInt($scope.layerNumber)) {

                            modestyCanavs.style.visibility = 'visible';
                        }
                        else {

                            modestyCanavs.style.visibility = 'hidden';

                        }
                    }

                }
            }
            }

    }


    $scope.calculateDimensionsForTBImage = function (Height, Width, X, Y, IsMirror, TransparencyBoxStartX, TransparencyEndX, TransparencyBoxStartY, TransparencyBoxEndY, bodyRegionId) {

        var XforCopyImage = 0;
        var YforCopyImage = 0;
        var WidthforCopyImage = 0;
        var HeightforCopyImage = 0;
        var XforTransImage = 0;
        var WidthforTransImage = 0;
        var HeightforTransImage = 0;
        var YforTransImage = 0;
 

        //X ends outside and start outside of bodyregion
        if (TransparencyBoxStartX < X && TransparencyEndX > parseInt(X) + parseInt(Width)) {
            XforCopyImage = 0;
            WidthforCopyImage = Width;
            WidthforTransImage = Width;
            if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {
                XforTransImage = 0;
            }
            else
                XforTransImage = parseInt(X) - (parseInt(TransparencyBoxStartX));
        }
        else if (TransparencyBoxStartX < X && TransparencyEndX < parseInt(X) + parseInt(Width)) {

            XforCopyImage = 0;

            WidthforCopyImage = parseInt(TransparencyEndX) - parseInt(X);

            WidthforTransImage = parseInt(TransparencyEndX) - parseInt(X);

            if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {
                XforTransImage = 0;
            }
            else
                XforTransImage = parseInt(X) - (parseInt(TransparencyBoxStartX));

        }
        else if (TransparencyBoxStartX > X && TransparencyEndX > parseInt(X) + parseInt(Width)) {

            XforCopyImage = parseInt(TransparencyBoxStartX) - parseInt(X);
            WidthforCopyImage = parseInt(X) + parseInt(Width) - parseInt(TransparencyBoxStartX);
            WidthforTransImage = parseInt(X) + parseInt(Width) - parseInt(TransparencyBoxStartX);

            if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {

                XforTransImage = parseInt(TransparencyBoxStartX) - parseInt(X);
            }
            else
                XforTransImage = 0;
        }
        else if (TransparencyBoxStartX > X && TransparencyEndX < parseInt(X) + parseInt(Width)) {
            XforCopyImage = parseInt(TransparencyBoxStartX) - parseInt(X);//parseInt(X) + parseInt(Width) - parseInt(scope.TransparencyBoxStartX)// scope.TransparencyBoxStartX ;
            WidthforCopyImage = parseInt(TransparencyEndX) - parseInt(TransparencyBoxStartX);
            WidthforTransImage = parseInt(TransparencyEndX) - parseInt(TransparencyBoxStartX);
            if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {

                XforTransImage = parseInt(TransparencyBoxStartX) - parseInt(X);
            }
            else
                XforTransImage = 0;
        }

        //calculate Y and height for tempTranparency box from where to cut the image


        if (TransparencyBoxStartY < Y && TransparencyBoxEndY > parseInt(Y) + parseInt(Height)) {

            YforCopyImage = 0;
            HeightforCopyImage = Height;

            HeightforTransImage = Height;
            if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {
                YforTransImage = 0;
            }
            else
                YforTransImage = parseFloat(Y) - parseInt(TransparencyBoxStartY)//parseFloat(Y) - (24.4);
        }
        else if (TransparencyBoxStartY < Y && TransparencyBoxEndY < (parseInt(Y) + parseInt(Height))) {

            YforCopyImage = 0;
            HeightforCopyImage = (parseInt(TransparencyBoxEndY)) - parseInt(Y)//(parseInt(Height) + parseInt(Y)) - (parseInt(TransparencyBoxEndY) - parseInt(scope.TransparencyBoxStartY));

            HeightforTransImage = (parseInt(TransparencyBoxEndY)) - parseInt(Y)// - parseInt(scope.TransparencyBoxStartY));

            if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {
                YforTransImage = 0;
            }
            else
                YforTransImage = parseFloat(Y) - parseInt(TransparencyBoxStartY);// - (24.4);

        }
        else if (TransparencyBoxStartY > Y && TransparencyBoxEndY > parseInt(Y) + parseInt(Height)) {

            YforCopyImage = parseInt(TransparencyBoxStartY) - parseInt(Y);
            HeightforCopyImage = parseInt(Y) + parseInt(Height) - parseInt(TransparencyBoxStartY);
            HeightforTransImage = parseInt(Y) + parseInt(Height) - parseInt(TransparencyBoxStartY);
            if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {
                YforTransImage = parseInt(TransparencyBoxStartY) - parseInt(Y);

            }
            else
                YforTransImage = 0;

        }
        else if (TransparencyBoxStartY > Y && TransparencyBoxEndY < parseInt(Y) + parseInt(Height)) {

            YforCopyImage = parseInt(TransparencyBoxStartY) - parseInt(Y);
            HeightforCopyImage = parseInt(TransparencyBoxEndY) - parseInt(TransparencyBoxStartY);
            HeightforTransImage = parseInt(TransparencyBoxEndY) - parseInt(TransparencyBoxStartY);
            if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {
                YforTransImage = parseInt(TransparencyBoxStartY) - parseInt(Y);

            }
            else
                YforTransImage = 0;
        }

        return {

            
            XforCopyImageTB : XforCopyImage,
            YforCopyImageTB: YforCopyImage,
            WidthforCopyImageTB: WidthforCopyImage,
            HeightforCopyImageTB: HeightforCopyImage,
            XforTransImageTB: XforTransImage,
            WidthforTransImageTB: WidthforTransImage,
            HeightforTransImageTB: HeightforTransImage,
            YforTransImageTB: YforTransImage
           
        }
    }

    $scope.highlightTempTransparencyCanvas = function (tempCanvasID, XforCopyImage, YforCopyImage, WidthforCopyImage, HeightforCopyImage, XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage, Height, Width, bodyRegionId) {

        var tempTransCanvas = document.getElementById(tempCanvasID);
        var tempCanvasContext = tempTransCanvas.getContext('2d');

        var dataURL = tempTransCanvas.toDataURL();

        var img = new Image();
        img.src = dataURL;

        img.onload = function () {

            var DAData = new BitmapData(parseInt(tempTransCanvas.width), parseInt(tempTransCanvas.height));
            DAData.draw(img);

            var colorMode = $scope.applyGrayMatrix(img, tempCanvasContext);

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

                var zeroPoint = new Point();

                DAData.applyFilter(DAData, DAData.rect, zeroPoint, colorMode);


                tempCanvasContext.putImageData(DAData.data, 0, 0);

                //keep the original image on temp canavs to use it in changing transparency
                if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {
                    var modestyTempCanvasId = 'tempCanvasModesty_' + bodyRegionId;
                    if (document.getElementById(modestyTempCanvasId) != undefined || document.getElementById(modestyTempCanvasId) != null) {
                        var contxModestyTemp = document.getElementById(modestyTempCanvasId).getContext('2d');
                        var tbTempCanvas = document.getElementById(tempCanvasID)
                        contxModestyTemp.drawImage(tbTempCanvas, XforCopyImage, YforCopyImage, WidthforCopyImage, HeightforCopyImage, XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage);

                    }
                }
                else {
                    if (document.getElementById('tempCanvas') != null) {

                        var contx = document.getElementById('tempCanvas').getContext('2d');
                        var tbTempCanvas = document.getElementById(tempCanvasID)
                        contx.drawImage(tbTempCanvas, XforCopyImage, YforCopyImage, WidthforCopyImage, HeightforCopyImage, XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage);

                    }
                }

                $scope.DrawOnTBWithSelectedTransparency(tempCanvasID, XforCopyImage, YforCopyImage, WidthforCopyImage, HeightforCopyImage, XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage, Height, Width, bodyRegionId);
            }
        }
    }


    $scope.DrawOnTBWithSelectedTransparency = function (tempCanvasID, XforCopyImage, YforCopyImage, WidthforCopyImage, HeightforCopyImage, XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage, Height, Width, bodyRegionId) {

        var transNumber = $scope.transNumber;//txtTransparencyChange.value;
        //this changes the transparency when transparency is already activated and user resizes or chage the layer

        var tempCtx = document.getElementById(tempCanvasID).getContext('2d');

        var imageD = tempCtx.getImageData(0, 0, Width, Height);
        var imageData = imageD.data;
        var length = imageData.length;


        // set every fourth value to the desired number of transparency
        for (var i = 3; i < length; i += 4) {
            if ($scope.voId == "9" || $scope.voId == "11") {

                if (imageData[i] == 0) {

                }
                else {
                    imageData[i] = ((255) * (parseInt(transNumber))) / 100;
                }
            }
            else {
                imageData[i] = ((255) * (parseInt(transNumber))) / 100;
            }
        }


        tempCtx.putImageData(imageD, 0, 0);


        $scope.widthOfImage = WidthforTransImage;
        $scope.heightOfImage = HeightforTransImage;
        $scope.xOfImage = XforTransImage;
        $scope.yOfImage = YforTransImage;

        var ctx = transparencyCanvas.getContext('2d');


        var tmpCanvasContext = document.getElementById(tempCanvasID);//.getContext('2d');         



        var ctx;
        if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {
            var modestyTransCanvasId  = 'modestyTransCanavs_' + bodyRegionId
            ctx = document.getElementById(modestyTransCanvasId).getContext('2d');
        }
        else
            ctx = transparencyCanvas.getContext('2d');

       // var ctx = transparencyCanvas.getContext('2d');
        ctx.drawImage(tmpCanvasContext, XforCopyImage, YforCopyImage, WidthforCopyImage, HeightforCopyImage, XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage)

        $scope.transparencyDrawnRegions.push(bodyRegionId);


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

        if ($scope.transparencyDrawnRegions.length == $scope.IncludedBodyRegions.length) {

            transparencyCanvas.style.visibility = 'visible';
            $('.rectangle').remove();


        }
    }


    $scope.changeTransparency = function () {
        //this changes the transparency when user click on transparency scale(we have already set the original 
        //data on tras canvas irrespective of the trans number, so we can chnage the transparnecy of original data not the manipulated)
        //  if (isTransparencyChanged == true) {

        // var txtTransparencyChange = document.getElementById("txtTransparencyChange");

        var transNumber = $scope.transNumber;

        var modestyTransCanvases = $("canvas[id*='modestyTransCanavs']");
        var modestyTemCanvas = $("canvas[id*='tempCanvasModesty_']");
        if (modestyTransCanvases != null || modestyTransCanvases != undefined && modestyTransCanvases.length > 0) {
            
            for (var j = 0; j < modestyTransCanvases.length; j++) {
                var ctx = document.getElementById(modestyTransCanvases[j].id).getContext('2d');
                var imageDa = ctx.getImageData(0, 0, modestyTransCanvases[j].width, modestyTransCanvases[j].height);
                //modestyTransCanvases[j].parentNode.removeChild(modestyTransCanvases[j]);

                var imageData = imageDa.data;
                var length = imageData.length;
                // set every fourth value to 50
                for (var i = 3; i < length; i += 4) {
                    //NIKITA
                    if ($scope.voId == "9" || $scope.voId == "11") {

                        if (imageData[i] == 0) {

                        }
                        else {
                            imageData[i] = ((255) * (parseInt(transNumber))) / 100;
                        }
                    }
                    else {
                        if (imageData[i] == 0) {

                        }
                        else
                            imageData[i] = ((255) * (parseInt(transNumber))) / 100;
                    }

                    // imageData[i] = ((255) * (parseInt(transNumber))) / 100;
                }
                // after the manipulation, reset the data
                // imageDa.data = imageData;
                // and put the imagedata back to the canvas
                //ctx.putImageData(imageDa, XforTransImage, YforTransImage);
                ctx.putImageData(imageDa, 0, 0);
            }
        }


        var ctx = document.getElementById('transparencyCanvas').getContext('2d');

        // var imageDa = ctx.getImageData(XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage);
        var imageDa = ctx.getImageData(0, 0, $scope.transparencyCanvasWidth, $scope.transparencyCanvasHeight);

        // get the image data values 
        var imageData = imageDa.data;
        var length = imageData.length;
        // set every fourth value to 50
        for (var i = 3; i < length; i += 4) {
            //NIKITA
            if ($scope.voId == "9" || $scope.voId == "11") {

                if (imageData[i] == 0) {

                }
                else {
                    imageData[i] = ((255) * (parseInt(transNumber))) / 100;
                }
            }
            else {
                if (imageData[i] == 0) {

                }
                else
                    imageData[i] = ((255) * (parseInt(transNumber))) / 100;
            }

            // imageData[i] = ((255) * (parseInt(transNumber))) / 100;
        }
        // after the manipulation, reset the data
        // imageDa.data = imageData;
        // and put the imagedata back to the canvas
        //ctx.putImageData(imageDa, XforTransImage, YforTransImage);
        ctx.putImageData(imageDa, 0, 0);


        //}
    }

    // History Maintained Issue//

    $rootScope.getAnnotationTextBasedOnSelectedBodyRegion = function (event) {
   
        var canvasDiv = document.getElementById('canvasDiv');
        var verticalScrollPosition = canvasDiv.scrollTop;
        var horizontlScrollPosition = canvasDiv.scrollLeft;


        $rootScope.Xaxis = event.pageX - $('#canvasDiv').offset().left + horizontlScrollPosition;
        $rootScope.Yaxis = event.pageY - $('#canvasDiv').offset().top + verticalScrollPosition;


        $rootScope.setSelectedBodyRegionData();
        
        if ($rootScope.isMirrorBodyRegion == "No") {
            var maskCanvasId = "imageCanvas" + $rootScope.BRId + "_mci";
            var maskCanvas = document.getElementById(maskCanvasId);
            var maskCanvasContext = maskCanvas.getContext("2d");
            //var canvasDiv = document.getElementById('canvasDiv');
            //var verticalScrollPosition = canvasDiv.scrollTop;
            //var horizontlScrollPosition = canvasDiv.scrollLeft;
            var actulalX = $rootScope.Xaxis;
            var actualY = $rootScope.Yaxis;
            var RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, $rootScope.BodyRegionXAxis, $rootScope.BodyRegionYAxis);
            var annotationText = $scope.GetAnnotationText(parseInt(RGBColor));

        }
        else {
        
            var maskCanvasId = "imageCanvas" + $rootScope.BRId + "_MR_mci";
            var maskoffsetval = $('#' + maskCanvasId).offset();
            var mirrorCanvasX = maskoffsetval.left;
            //alert(mirrorCanvasX);
            var mirrorImageCanvas = document.getElementById(maskCanvasId);
            var mirrorCanvasWidth = mirrorImageCanvas.clientWidth;
            // alert(mirrorCanvasWidth);
            var maskCanvas = document.getElementById(maskCanvasId);
            var maskCanvasContext = maskCanvas.getContext("2d");
          
            var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(event.pageX) + horizontlScrollPosition);// - 135);
            var mirrorXOnNormalImage = parseInt(maskCanvasContext.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);
            var actulalX = mirrorXOnNormalImage;
            var actualY = event.pageY + verticalScrollPosition;
            var pixelData = maskCanvasContext.getImageData(Math.round(actulalX - parseInt(maskCanvasContext.canvas.offsetLeft)), Math.round(actualY - $rootScope.BodyRegionYAxis), 1, 1);
            pixelData.data[0] = pixelData.data[0] - 9;
            pixelData.data[1] = pixelData.data[1] - 9;
            pixelData.data[2] = pixelData.data[2] - 9
            var Red;
            var Green;
            var Blue;
            var zero = "0";
            if ((pixelData.data[0]).toString().length != 2) {
                Red = zero.concat((pixelData.data[0]).toString())
            }
            else {
                Red = (pixelData.data[0]).toString()
            }
            if ((pixelData.data[1]).toString().length != 2) {
                Green = zero.concat((pixelData.data[1]).toString())
            }
            else {
                Green = (pixelData.data[1]).toString()
            }
            if ((pixelData.data[2]).toString().length != 2) {
                Blue = zero.concat((pixelData.data[2]).toString())
            }
            else {
                Blue = (pixelData.data[2]).toString()
            }
            var RGBColor = (Red + Green + Blue);
            // alert(RGBColor);
            //$rootScope.previousHighlightList.push(RGBColor);

        }
      
        //    var maskCanvasId = "imageCanvas" + $rootScope.BRId + "_mci";

        //   alert(annotationText);
        $scope.MultiLanguageAnnationArray = [];
        $scope.MultiLanguageAnnationArray.push(annotationText);
        if (annotationText == "undefined") {
        }
        else {
            $scope.createDynamicSpeechBubble(event, event.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, event.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true)
        }
    
    }


     $rootScope.setSelectedBodyRegionData = function () {
         var BodyRegionDictionary = $rootScope.BodyRegionCordinatesData;

         $.each(BodyRegionDictionary, function (index, value) {
             var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
             var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
             if ($rootScope.Xaxis <= bodyRegionRight && $rootScope.Yaxis <= bodyRegionBottom && value.X <= $rootScope.Xaxis && value.Y <= $rootScope.Yaxis) {
                 $rootScope.BRId = value.bodyRegionId;
                 $rootScope.BodyRegionXAxis = value.X;
                 $rootScope.BodyRegionYAxis = value.Y;
                 $rootScope.isMirrorBodyRegion = value.IsMirror;
                 return false;
             }
         });
     }



    function resizeTransparencyBox() {
       
        clearTransCanvas();
        if ($('#speechBubbleTrns').length > 0) {
            $('#speechBubbleTrns').remove();
        }
        var tCanvas = document.getElementById('transparencyCanvas');
        var tCanvasContext = tCanvas.getContext('2d');

        var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', ''));

        var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', ''));

        var tBoxStartX = parseInt((tCanvas.style.left).replace('px', ''));
        var tBoxEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', '')));
        var tBoxStartY = parseInt((tCanvas.style.top).replace('px', ''));
        var tBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', ''));
        var transparencyBoxBottom = parseInt(tBoxStartY) + parseInt(tCanvasHeight);
        var transparencyBoxRight = parseInt(tBoxStartX) + parseInt(tCanvasWidth);

        if (tCanvas != null) {
            $('#transparencyCanvas').remove();
        }


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

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

        var modestyTempCanvases = $("canvas[id*='tempCanvasModesty_']");
        if (modestyTempCanvases != null || modestyTransCanvases != undefined && modestyTransCanvases.length > 0) {
            for (var j = 0; j < modestyTempCanvases.length; j++) {

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

        $scope.isResized = true;

        if (tCanvasHeight != $scope.transparencyCanvasHeight || tCanvasWidth != $scope.transparencyCanvasWidth) {


            var transparencyCanvas = document.createElement('canvas');
            transparencyCanvas.id = 'transparencyCanvas';
            $scope.transparencyCanvas = tCanvas.id;
            transparencyCanvas.height = tCanvasHeight;
            transparencyCanvas.width = tCanvasWidth;
            transparencyCanvas.style.position = "absolute";
            transparencyCanvas.style.left = tCanvas.style.left; // x + "px";
            transparencyCanvas.style.top = tCanvas.style.top//y + "px";
            transparencyCanvas.style.border = "black 1px solid";
            transparencyCanvas.style.zIndex = 200;


            document.getElementById('canvasDiv').appendChild(transparencyCanvas);

            $('#transparencyCanvas').resizable({ handles: "e,s,se,w,n,ne,nw,sw", stop: function (event, ui) { resizeTransparencyBox(); }, start: function (event, ui) { clearTransCanvas(); } });
            $(".ui-wrapper").css("z-index", $rootScope.UIWrapperZIndex);

            //bind click listener
            transparencyCanvas.addEventListener('click', TransparencyCanvasClickListener);
        }
        $scope.transparencyCanvasHeight = tCanvasHeight;
        $scope.transparencyCanvasWidth = tCanvasWidth;

        // debugger;
        //create temp cavas to retain the original anavs data for use in transparency change as 
        //if u use original canvas data for transprency change then at 0 transparency all data will become transparent and if u increase transparency with this data then the canavs will be blank
        if (document.getElementById('tempCanvas') != null) {
            $('#tempCanvas').remove();
        }
        var tempCanvas = document.createElement('canvas');
        tempCanvas.id = 'tempCanvas';
        $scope.tempCanvas = tempCanvas.id;
        tempCanvas.height = $scope.transparencyCanvasHeight;
        tempCanvas.width = $scope.transparencyCanvasWidth;
        tempCanvas.style.position = "absolute";
        tempCanvas.style.left = 200 + 'px';
        tempCanvas.style.backgroundColor = "transparent";
        tempCanvas.style.visibility = 'hidden';
        // tempCanvas.style.border = "black 1px solid";

        document.getElementById('canvasDiv').appendChild(tempCanvas);


        var BodyRegionDictionary = $rootScope.BodyRegionCordinatesData;

        $scope.IncludedBodyRegions = [];
        $scope.transparencyDrawnRegions = [];
        //  $scope.layerNo = parseInt(document.getElementById(''))
        var counter = 0;
        $.each(BodyRegionDictionary, function (index, value) {

            var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
            var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
            var TBRight = parseInt((document.getElementById('transparencyCanvas').style.left).replace('px', '')) + parseInt((document.getElementById('transparencyCanvas').style.width).replace('px', ''));
            var TBBottom = parseInt((document.getElementById('transparencyCanvas').style.top).replace('px', '')) + parseInt((document.getElementById('transparencyCanvas').style.height).replace('px', ''));
            var TBStartX = parseInt((document.getElementById('transparencyCanvas').style.left).replace('px', ''));
            var TBStartY = parseInt((document.getElementById('transparencyCanvas').style.top).replace('px', ''));




            if (TBStartX <= bodyRegionRight && value.X <= TBRight && TBStartY <= bodyRegionBottom && value.Y <= TBBottom) {

                if ($scope.isTBDrawnOnBodyRegion == false) {
                    $scope.layerNumber = $scope.layerNumber + 1;
                }
                $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, $scope.TransparencyEndX, $scope.TransparencyBoxStartY, $scope.TransparencyBoxEndY, $scope, false, false);
                $scope.isTBDrawnOnBodyRegion = true;
            }


        })


        //for modesty
        if ($rootScope.isModestyOn == true && $scope.modestyImageInfo.length > 0) {
            $.each($scope.modestyImageInfo, function (index, value) {
                //   alert(' $.each(BodyRegionDictionary1')


                var bodyRegionRight = parseInt(value.x) + parseInt(value.Width);
                var bodyRegionBottom = parseInt(value.y) + parseInt(value.Height);
                var TBRight = parseInt((document.getElementById('transparencyCanvas').style.left).replace('px', '')) + parseInt((document.getElementById('transparencyCanvas').style.width).replace('px', ''));
                var TBBottom = parseInt((document.getElementById('transparencyCanvas').style.top).replace('px', '')) + parseInt((document.getElementById('transparencyCanvas').style.height).replace('px', ''));
                var TBStartX = parseInt((document.getElementById('transparencyCanvas').style.left).replace('px', ''));
                var TBStartY = parseInt((document.getElementById('transparencyCanvas').style.top).replace('px', ''));




                if (TBStartX <= bodyRegionRight && value.x <= TBRight && TBStartY <= bodyRegionBottom && value.y <= TBBottom) {


                    $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.x, value.y, value.IsMirror, $scope.TransparencyBoxStartX, $scope.TransparencyEndX, $scope.TransparencyBoxStartY, $scope.TransparencyBoxEndY, $scope, false, false);

                }
            })
        }

        // });
        //$(".ui-wrapper").css("z-index", "600");
        $scope.isResized = false;
    }


    function TransparencyCanvasClickListener(evt) {
        //alert('tb clicked')
        // debugger;
        var pixelData;
        var pixelDataTrans;
        var mousePos = $scope.getMousePos(evt);
        //   alert(mousePos.x + ',' + mousePos.y);

        var canvasDiv = document.getElementById('canvasDiv');
        var verticalScrollPosition = canvasDiv.scrollTop;
        var horizontlScrollPosition = canvasDiv.scrollLeft;


        //We substracted 135,  as the difference between flex and html coordinates for same organ is 135
        var actulalX = mousePos.x + horizontlScrollPosition;
        var actualY = mousePos.y + verticalScrollPosition //- 135; //+ tomenuBarheight + titleBarheight + searchComboheight;
        var clickedBodyRegion;
        var x;
        var y;
        var isMirror;
        var width;
        var BodyRegionDictionary = $rootScope.BodyRegionCordinatesData;
        if ($rootScope.viewOrientationId == 5) {
            
            var clickedBodyRegionData = new jinqJs()
                                              .from(BodyRegionDictionary)
                                             .where('bodyRegionId == 6')
                                              .select();
 
         
            // clickedBodyRegion = clickedBodyRegionData[0].bodyRegionId;
            x = clickedBodyRegionData[0].X;
            y = clickedBodyRegionData[0].Y;
            width = clickedBodyRegionData[0].Width;
            var height = clickedBodyRegionData[0].Height;
            isMirror = clickedBodyRegionData[0].IsMirror;
            var bodyRegionRight = parseInt(x) + parseInt(width);
            var bodyRegionBottom = parseInt(y) + parseInt(height);
            if (actulalX <= bodyRegionRight && x <= actulalX && actualY <= bodyRegionBottom && y <= actualY) {
                
                clickedBodyRegion = clickedBodyRegionData[0].bodyRegionId;
                x = clickedBodyRegionData[0].X;
                y = clickedBodyRegionData[0].Y;
                width = clickedBodyRegionData[0].Width;
                var height = clickedBodyRegionData[0].Height;
                isMirror = clickedBodyRegionData[0].IsMirror;
            }
        
        }
        else {
            $.each(BodyRegionDictionary, function (index, value) {
        
                var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
                var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
                if (actulalX <= bodyRegionRight && value.X <= actulalX && actualY <= bodyRegionBottom && value.Y <= actualY) {
            
                    clickedBodyRegion = value.bodyRegionId;
                    x = value.X;
                    y = value.Y;
                    width = value.Width;
                    isMirror = value.IsMirror;
                    return false;
                }
            })
        }
 

        if (isMirror == "Yes") {

            var mirrorCanvasX = x;
            var mirrorCanvasWidth = width;

            var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
            var clickedCanavs = document.getElementById(clickedCanvasMaskId);

            var maskCanvasId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
            var maskCanvas = document.getElementById(maskCanvasId);
           
            if (maskCanvas != null) {
                x = maskCanvas.style.left;
                y = maskCanvas.style.top;

                var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
                var maskCanvastrans = document.getElementById(maskCanvasTransId);
                var maskCanvasContexttrans = maskCanvastrans.getContext("2d");


                getAnnotationAndCraeteSpeechBubble(mirrorCanvasX, mirrorCanvasWidth, mousePos, maskCanvasContexttrans, clickedBodyRegion, x, y, evt)


            }

                //if non mirrored canvas does not exist for this irror Body region then draw non mirrored image to get annotation

            else if (maskCanvas == null) {
                var clickedBodyRegionData = new jinqJs()
                                           .from(BodyRegionDictionary)
                                          .where('bodyRegionId == ' + clickedBodyRegion)
                                           .select();
                if (clickedBodyRegionData != null || clickedBodyRegionData != undefined) {

                    var nomMirroredBodyRegion = new jinqJs()
                                                        .from(clickedBodyRegionData)
                                                       .where('IsMirror == No')
                                                        .select();

                    var transparencyTempcanavsMask = document.createElement('canvas');
                    transparencyTempcanavsMask.id = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
                    transparencyTempcanavsMask.height = nomMirroredBodyRegion[0].Height;
                    transparencyTempcanavsMask.width = nomMirroredBodyRegion[0].Width;
                    transparencyTempcanavsMask.style.position = "absolute";
                    transparencyTempcanavsMask.style.left = nomMirroredBodyRegion[0].X + 'px' // x + "px";
                    transparencyTempcanavsMask.style.top = nomMirroredBodyRegion[0].Y + "px"//y + "px";
                    transparencyTempcanavsMask.style.visibility = 'hidden';

                    document.getElementById('canvasDiv').appendChild(transparencyTempcanavsMask);

                    var tranparencyImgSrc = $scope.GetImageSource(clickedBodyRegion);
                    var tranparencyMaskImgSrc = $scope.GetMaskImageSource(tranparencyImgSrc);

                    var tempMaskImg = new Image();
                    tempMaskImg.src = tranparencyMaskImgSrc;

                    tempMaskImg.onload = function () {
                        var transparencyTempcanavsMask = document.getElementById(maskCanvasId);
                        var tempmaskCtx = transparencyTempcanavsMask.getContext('2d');
                        tempmaskCtx.drawImage(tempMaskImg, 0, 0);

                        //get x,y of non mirrored canvas for this body region
                        x = transparencyTempcanavsMask.style.left;
                        y = transparencyTempcanavsMask.style.top;

                        getAnnotationAndCraeteSpeechBubble(mirrorCanvasX, mirrorCanvasWidth, mousePos, tempmaskCtx, clickedBodyRegion, x, y, evt)

                    }
                }
            }
                

        }
        else {

            var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
            var maskCanvas = document.getElementById(clickedCanvasMaskId);
            var maskCanvasContext = maskCanvas.getContext("2d");

            //transparecncy canvas
            var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
            var maskCanvastrans = document.getElementById(maskCanvasTransId);
            var maskCanvasContexttrans = maskCanvastrans.getContext("2d");

            pixelData = maskCanvasContext.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1);

            pixelDataTrans = maskCanvasContexttrans.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1);
            var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);
            //var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);

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

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

                //   $scope.createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
                $scope.annotationTextArrayT1 = [];
                $scope.annotationTextArrayT2 = [];
                $scope.annotationTextArrayT1.push(annotations.annotationT1);
                $scope.annotationTextArrayT2.push(annotations.annotationT2);

               
                $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
            }
            else
                //  $scope.createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
            {

                $scope.annotationTextArrayT1 = [];
                $scope.annotationTextArrayT2 = [];
                $scope.annotationTextArrayT1.push(annotations.annotationT1);
                $scope.annotationTextArrayT2.push(annotations.annotationT2);

            
                $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
            }
                
        }
    

    }

    function OnClickModestyTransCanvas(evt) {

        var mousePos = $scope.getMousePos(evt);
        var canvasDiv = document.getElementById('canvasDiv');
        var verticalScrollPosition = canvasDiv.scrollTop;
        var horizontlScrollPosition = canvasDiv.scrollLeft;

        var actulalX = mousePos.x + horizontlScrollPosition;
        var actualY = mousePos.y + verticalScrollPosition;

        var canavsX = evt.currentTarget.offsetLeft;
        var canvasY = evt.currentTarget.offsetTop;

        var canvasId = evt.currentTarget.id;
        var canavsContext = document.getElementById(canvasId).getContext('2d');
        var RGBColor = $scope.GetRGBColor(canavsContext, actulalX, actualY, canavsX, canvasY);

        var annotationText;

        //Modesty ON
        if (canvasId.match('modestyImg') && RGBColor != '000000') {
            RGBColor = DA[0].figLeafTermId;
            annotationText = $scope.GetAnnotationBasedOnActualTermNo(RGBColor);
            $scope.annotationTextArrayT1 = [];
            $scope.annotationTextArrayT2 = [];
            $scope.annotationTextArrayT1.push(annotationText);
            $scope.annotationTextArrayT2.push(annotationText);
        }
            //Modesty On but clicked somewhre else, we did modesty check because the modesty image covers whole body region so if user will click to 
            //see the annotation apart from leaf then the actual click will be on modesty canvas, but for annotation er
            // 
        else if (canvasId.match('modestyImg') && RGBColor == '000000') {

           var bodyRegionId = canvasId.slice(-1);

            var maskCanvasId = 'imageCanvas' + bodyRegionId + '_mci';
            var maskCanvas = document.getElementById(maskCanvasId);
            var maskCanvasContext = maskCanvas.getContext("2d");
            //RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, xcanavsX, canvasY);
            //annotationText = $scope.GetAnnotationText(parseInt(RGBColor));

            //transparecncy canvas
            var maskCanvasTransId = 'transparencyTempCanvasMask_' + bodyRegionId + '_mci';
            var maskCanvastrans = document.getElementById(maskCanvasTransId);
            var maskCanvasContexttrans = maskCanvastrans.getContext("2d");

            var pixelData = maskCanvasContext.getImageData(Math.round(actulalX - canavsX), Math.round(actualY - canvasY), 1, 1);

            var pixelDataTrans = maskCanvasContexttrans.getImageData(Math.round(actulalX - canavsX), Math.round(actualY - canvasY), 1, 1);

            var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);


            //    var maskCanvasId = 'imageCanvas' + bodyRegionId + '_mci';
            //    var maskCanvas = document.getElementById(maskCanvasId);
            //    var maskCanvasContext = maskCanvas.getContext("2d");
            //    RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, xcanavsX, canvasY);
            //    annotationText = $scope.GetAnnotationText(parseInt(RGBColor));


                //  createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)

                $scope.annotationTextArrayT1 = [];
                $scope.annotationTextArrayT2 = [];
                $scope.annotationTextArrayT1.push(annotations.annotationT1);
                $scope.annotationTextArrayT2.push(annotations.annotationT2);

        }

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


        if ($('#speechBubbleTrns').length > 0) {
            $('#speechBubbleTrns').remove();
        }
            $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);

        
    }

    function getAnnotationAndCraeteSpeechBubble(mirrorCanvasX, mirrorCanvasWidth, mousePos, maskCanvasContexttrans, clickedBodyRegion, x, y, evt)
    {
        var canvasDiv = document.getElementById('canvasDiv');
        var verticalScrollPosition = canvasDiv.scrollTop;
        var horizontlScrollPosition = canvasDiv.scrollLeft;

        var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(mousePos.x) + horizontlScrollPosition);// - 135);

        var mirrorXOnNormalImage = parseInt(maskCanvasContexttrans.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);

        var actulalX = mirrorXOnNormalImage
        var actualY = mousePos.y + verticalScrollPosition



        var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
        var maskCanvas = document.getElementById(clickedCanvasMaskId);
        var maskCanvasContext = maskCanvas.getContext("2d");
        var imgX = Math.round(actulalX - parseInt((x).replace('px', '')));
        var imgY = Math.round(actualY - parseInt((y).replace('px', '')));
        var pixelData = maskCanvasContext.getImageData(imgX, imgY, 1, 1);


        //trans  layer image data
        var pixelDataTrans = maskCanvasContexttrans.getImageData(imgX, imgY, 1, 1);
        // console.log('at the time' + pixelData.data[0])
        // debugger;
        var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);
        if ($('#speechBubble').length > 0)
            $('#speechBubble').remove();


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

            //  createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)

            $scope.annotationTextArrayT1 = [];
            $scope.annotationTextArrayT2 = [];
            $scope.annotationTextArrayT1.push(annotations.annotationT1);
            $scope.annotationTextArrayT2.push(annotations.annotationT2);

            $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
        }
        else
        {
            $scope.annotationTextArrayT1 = [];
            $scope.annotationTextArrayT2 = [];
            $scope.annotationTextArrayT1.push(annotations.annotationT1);
            $scope.annotationTextArrayT2.push(annotations.annotationT2);

            $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
        }
  }
        

        function clearTransCanvas() {

        var tCanvas = document.getElementById('transparencyCanvas');
        if (tCanvas != null) {
            var tCanvasContext = tCanvas.getContext('2d');
            tCanvasContext.clearRect(0, 0, parseInt(tCanvas.style.width), parseInt(tCanvas.style.height));
        }

    }


    $scope.getAnnotationForTransparencyBox = function (pixelData, pixelDataTrans, scope) {



        pixelData.data[0] = pixelData.data[0] - 9;
        pixelData.data[1] = pixelData.data[1] - 9;
        pixelData.data[2] = pixelData.data[2] - 9;

        //trans pixel data
        pixelDataTrans.data[0] = pixelDataTrans.data[0] - 9;
        pixelDataTrans.data[1] = pixelDataTrans.data[1] - 9;
        pixelDataTrans.data[2] = pixelDataTrans.data[2] - 9;

        var Red;
        var Green;
        var Blue;
        var zero = "0";

        if ((pixelData.data[0]).toString().length != 2) {
            Red = zero.concat((pixelData.data[0]).toString())
        }
        else {
            Red = (pixelData.data[0]).toString()
        }
        if ((pixelData.data[1]).toString().length != 2) {
            Green = zero.concat((pixelData.data[1]).toString())
        }
        else {
            Green = (pixelData.data[1]).toString()

        }
        if ((pixelData.data[2]).toString().length != 2) {
            Blue = zero.concat((pixelData.data[2]).toString())
        }
        else {
            Blue = (pixelData.data[2]).toString()

        }
        var RGBColor = (Red + Green + Blue);


        var annotationText1 = $scope.GetAnnotationText(parseInt(RGBColor));

        //get annotation for trans canavs
        var RedTrans;
        var GreenTrans;
        var BlueTrans;
        var zero = "0";

        if ((pixelDataTrans.data[0]).toString().length != 2) {
            RedTrans = zero.concat((pixelDataTrans.data[0]).toString())
        }
        else {
            RedTrans = (pixelDataTrans.data[0]).toString()
        }
        if ((pixelDataTrans.data[1]).toString().length != 2) {
            GreenTrans = zero.concat((pixelDataTrans.data[1]).toString())
        }
        else {
            GreenTrans = (pixelDataTrans.data[1]).toString()

        }
        if ((pixelDataTrans.data[2]).toString().length != 2) {
            BlueTrans = zero.concat((pixelDataTrans.data[2]).toString())
        }
        else {
            BlueTrans = (pixelDataTrans.data[2]).toString()

        }
        var RGBColorTrans = (RedTrans + GreenTrans + BlueTrans);


        var annotationText2 = $scope.GetAnnotationText(parseInt(RGBColorTrans));

        return {
            annotationT1: annotationText1,
            annotationT2: annotationText2
        }
    }


    $scope.onTransparencyChange = function (ev, ui) {
        //debugger;
        // alert('t change')
        $scope.transNumber = ui.value;

        var tCanvas = document.getElementById('transparencyCanvas');
        var tCanvasContext = tCanvas.getContext('2d');

        var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', ''));

        var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', ''));

        var tBoxStartX = parseInt((tCanvas.style.left).replace('px', ''));
        var tBoxEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', '')));
        var tBoxStartY = parseInt((tCanvas.style.top).replace('px', ''));
        var tBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', ''));
        var transparencyBoxBottom = parseInt(tBoxStartY) + parseInt(tCanvasHeight);
        var transparencyBoxRight = parseInt(tBoxStartX) + parseInt(tCanvasWidth);

        //var scope = angular.element(document.getElementById("DAView")).scope();
        //scope.$apply(function () {
        var arr = [];
        $scope.transparencyChangeCounter++;
        //before changing the transparency of first canvas, hold the orignal canvas data on temp canvas

        //put original data on transcanvas so that it can be used to change transparency properly
        var tempCanavs = document.getElementById('tempCanvas');
        var tempCanvasContext = tempCanavs.getContext('2d');

        var originalTransparencyData = tempCanvasContext.getImageData(0, 0, $scope.transparencyCanvasWidth, $scope.transparencyCanvasHeight);
        var ctx = document.getElementById('transparencyCanvas').getContext('2d');
        ctx.putImageData(originalTransparencyData, 0, 0);


        $scope.transparencyDrawnRegions = [];
        //for modesty
        if ($rootScope.isModestyOn == true && $scope.modestyImageInfo.length > 0) {
            $.each($scope.modestyImageInfo, function (index, value) {

                var brId = value.bodyRegionId;

                var modestyTransTempCanvasId = 'tempCanvasModesty_' + brId;
                var modestyTransCanvasId = 'modestyTransCanavs_' + brId;
                if (document.getElementById(modestyTransTempCanvasId) != null) {

                   var tempCanvasContext = document.getElementById(modestyTransTempCanvasId).getContext('2d');
                   var originalTransparencyData = tempCanvasContext.getImageData(0, 0, value.Width, value.Height);
                    var ctx = document.getElementById(modestyTransCanvasId).getContext('2d');
                    ctx.putImageData(originalTransparencyData, 0, 0);
                }
            })
        }

        $scope.changeTransparency();


        //  });
    }

    $scope.CloseTransparencyBox = function () {
     
        //for enabling annoataions. 
        //Now everything si done on canavases uswed in annotation toolbar.
        
        $rootScope.switchCanvas();
        if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {

            $("#OnIdentify").removeClass('annotationtoolbartab');
            $("#DrawMode").addClass('annotationtoolbartab');
            //$('.btnCursor').trigger('click');
            $("#annotationpaintbrushsize").removeClass("activebtncolor");
            $('.btnCursor').addClass('activebtncolor');

        }
        else {

            $("#OnIdentify").addClass('annotationtoolbartab');
            $("#DrawMode").removeClass('annotationtoolbartab');
        }
     
      //  $rootScope.switchCanvas();
        //To enable extract button
        $scope.isTransparencyActivated = false;
        $("#btnExtract").removeClass("disabled");


        $('.com_anno').remove();

        $('#sppeachBubble_annotation').remove();
        $('#dot_annotation').remove();
        $('#bord_annotation').remove();

        $('#dot').remove();
        $('#sppeachBubble').remove();
        $(".com").remove();
        $("#bord").remove();

        // clear canvas on closing of transparency box 
        if ($rootScope.isAnnotationWindowOpen == true) {
            $('#canvas').removeLayers();
            var paintCanvasObj = document.getElementById("canvasPaint");
            if (paintCanvasObj != null) {
                var ctx = paintCanvasObj.getContext("2d");
                ctx.clearRect(0, 0, 2277, 3248);

                var sktch = $('#canvasPaint').sketch();
                $('#canvasPaint').sketch().actions = [];
            }
        }
       // $("#annotationpaintbrushsize").removeClass("activebtncolor");
       // $("#annotationpainteraser").removeClass("activebtncolor");


        var tBox = document.getElementById('transparencyCanvas');


        if (tBox != null) {
            tBox.parentNode.removeChild(tBox)
            var elements = document.getElementsByClassName('ui-icon ui-icon-gripsmall-diagonal-se');
            while (elements.length > 0) {
                elements[0].parentNode.removeChild(elements[0]);
            }
            //var txtTransparencyChange = document.getElementById("txtTransparencyChange");
            //txtTransparencyChange.value = 0;
            //   document.getElementById('txtLayerNumber').value = 0;
            // debugger;


            $('#layerChangeSlider').slider("option", "value", parseInt($rootScope.totalLayers) - parseInt($scope.currentLayerNumber));
            $("#txtlayerNumber").val(parseInt($scope.currentLayerNumber));


            if (document.getElementById('tempCanvas') != null) {
                $('#tempCanvas').remove();
            }
            if ($('#speechBubbleTrns').length > 0) {
                $('#speechBubbleTrns').remove();
            }
            //var scope = angular.element(document.getElementById("DAView")).scope();
            //scope.$apply(function () {
            // $scope.layerNumber = 0;
            // $scope.isTransparencyActivated  = false;
            //})


            var tempCanvases = $("canvas[id*='transparencyTempCanvas']");
            for (var i = 0; i < tempCanvases.length; i++) {
                tempCanvases[i].parentNode.removeChild(tempCanvases[i]);
            }

            $('.ui-wrapper').remove();

            //$("canvas[name*='transparencyTempCanvas']").nextUntil($("canvas[name*='transparencyTempCanvas']"))
            //.remove();
            $scope.layerNumber = $scope.currentLayerNumber;
            $scope.transNumber = 50;
            $(".slider").slider({ value: 50 })
        }


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

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

        $('#transparencyScale').css('visibility', 'hidden');

        //$scope.isTransparencyActivated  = false;
        // document.getElementById('btnTranparency').className = 't-transparency'
        $('#btnTranparency').removeClass('tButtonActive');
        $('#btnTranparency').addClass('btn-black');
        $('#btnIdentity').removeClass('btn-black');

        $('#btnIdentity').addClass('btn-primary');

        document.getElementById('btnTranparency').removeEventListener("click", $scope.createTransparencyBox);
            
    }

    $scope.createSpeechBubbleOnTransparencyBox = function (event, text1, text2, x, y) {

        $('#canvasDiv').css('cursor', 'pointer');
        $('<div id="speechBubbleTrns" class="BubbleDiv" style="display:visible; top:' + y + 'px; left:' + x + 'px;z-index:700"> <div class="">'
            + '<div class="Bubble">'
            + '<div class="BubbleCloseBtn"></div><div class="BubbleContent">' + text1 + '</div><div class="BubbleContent">' + text2 + '</div><div class="bottomLeftArrow"></div>'
            //+'<div class="bottomRightArrow"></div><div class="topLeftArrow"></div><div class="topRightArrow"></div>
            + '</div></div></div>').appendTo('#canvasDiv');

        $('#speechBubbleTrns').on('click', '.BubbleCloseBtn', function (e) {
            $('#speechBubbleTrns').css('display', 'none');
        });

        $('#canvasDiv').attr("data-bubbleid", "speechBubble")


    };


    function positionTooltip(event, x, y) {
        // alert('positionTooltip')
        x = 100,
        y = 200,

        $('div.speech-bubble').css({
            'position': 'absolute', 'top': x, 'left': y, 'background-color': '#f8f8f8',
            'border': '2px solid #c8c8c8', 'width': '150px', 'height': '50px'
        });


        $('.arrow').css({
            'border-style': 'solid',
            'position': 'absolute'
        });

        $('.bottom').css({
            'border-color': '#c8c8c8 transparent transparent transparent',
            'border-width': ' 8px 8px 0px 8px',
            'bottom': -'8px'
        })
    };

    $scope.createSpeechBubbleOnTransparencyBox = function (event, text1, text2, x, y) {

        $('#canvasDiv').css('cursor', 'pointer');
        $('<div id="speechBubbleTrns" class="BubbleDiv" style="display:visible; top:' + y + 'px; left:' + x + 'px;z-index:700"> <div class="">'
            + '<div class="Bubble">'
            + '<div class="BubbleCloseBtn"></div><div class="BubbleContent">' + text1 + '</div><div class="BubbleContent">' + text2 + '</div><div class="bottomLeftArrow"></div>'
            //+'<div class="bottomRightArrow"></div><div class="topLeftArrow"></div><div class="topRightArrow"></div>
            + '</div></div></div>').appendTo('#canvasDiv');

        $('#speechBubbleTrns').on('click', '.BubbleCloseBtn', function (e) {
            $('#speechBubbleTrns').css('display', 'none');
        });

        $('#canvasDiv').attr("data-bubbleid", "speechBubble")


    };


    function positionTooltip(event, x, y) {
        // alert('positionTooltip')
        x = 100,
        y = 200,

        $('div.speech-bubble').css({
            'position': 'absolute', 'top': x, 'left': y, 'background-color': '#f8f8f8',
            'border': '2px solid #c8c8c8', 'width': '150px', 'height': '50px'
        });


        $('.arrow').css({
            'border-style': 'solid',
            'position': 'absolute'
        });

        $('.bottom').css({
            'border-color': '#c8c8c8 transparent transparent transparent',
            'border-width': ' 8px 8px 0px 8px',
            'bottom': -'8px'
        })
    };


    $scope.IdentityClick = function () {


        //if listanager is visisble then close it

        $rootScope.isListManagerSelected = false;
        $rootScope.CloseListManager();
        // $('#btnIdentity').addClass('btn-primary');

        if ($scope.isTransparencyBtnClicked == true) {

           $scope.isTransparencyBtnClicked =  false;

            var canvasDiv = document.getElementById('canvasDiv');
            canvasDiv.removeEventListener("mousedown", mouseDownListener);

            canvasDiv.removeEventListener("mousemove", mouseMoveListener);

            canvasDiv.removeEventListener("mouseup", mouseUpListener)
            $('#btnTranparency').removeClass('tButtonActive');
            $('#btnTranparency').addClass('btn-black');
        }

    }

    $scope.enableZoom = function () {

        $("#btnExtract").removeClass("disabled");
        $("#btnTranparency").removeClass("disabled");
        $rootScope.isTransparencyBoxActivated = false;
        $rootScope.isNormalMode = false;

       
        //if listanager is visisble then close it

        $rootScope.CloseListManager();

        $rootScope.isHighlightBodyByBodySystem = false;


        $('#sppeachBubble').css('display', 'none');

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

        $scope.terminateCurrentlyRunningWPs();

        if ($scope.isTransparencyActivated) {

            $scope.CloseTransparencyBox();

        }

        $rootScope.isZoomed = true;
        //1.

        $scope.flushCanvas();

        if ($scope.zoomInOut == 25) {
            $scope.zoomInOut = 75;

        }
        else {
            $scope.zoomInOut = 25;
           

        }

        //2.
        $scope.CalculateImageCordinates($rootScope.viewOrientationId);

        //3.

    
            if ($scope.zoomInOut == 25) {
                if ($('#canvasDiv') != null)
                    $('#canvasDiv').scrollLeft(0)

            }
            else {
                if ($('#canvasDiv') != null)
                    $('#canvasDiv').scrollLeft($('#canvasDiv').width() / 2)

                
            }

       
        //remove annotation speech bubble
        if ($('#dot').length > 0) {
            $('#dot').remove();
        }

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

        //4.
        if ($rootScope.isHighLight == true) {

            $timeout(function () { $scope.highLightBody() }, 50);
        }
    }


    $scope.flushCanvas = function () {


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

        var endIndex = 0;
        var startIndex = 0;
        if (($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) {
            endIndex = 6;
            startIndex = 1;
        }
        else if (($rootScope.viewOrientationId == '2') || ($rootScope.viewOrientationId == '3')) {
            endIndex = 5;
            startIndex = 1;
        }
        else if (($rootScope.viewOrientationId == '5')) {
            endIndex = 6;
            startIndex = 2;
        }
        else if (($rootScope.viewOrientationId == '6')) {
            endIndex = 6;
            startIndex = 6;
        }

        for (var i = startIndex; i <= endIndex; i++) {

            var id;
            var maskId;

            id = 'imageCanvas' + i;
            maskId = 'imageCanvas' + i + '_mci';

            var canvas = document.getElementById(id);
            if (canvas != null || canvas != undefined)
                document.getElementById('canvasDiv').removeChild(canvas);

            var maskcanvas = document.getElementById(maskId);
            if (maskcanvas != null || maskcanvas != undefined)
                document.getElementById('canvasDiv').removeChild(maskcanvas);

            if (endIndex == 6) {

                if (i == 4 || i == 5 || i == 6) {
                    id = 'imageCanvas' + i + '_MR';
                    maskId = 'imageCanvas' + i + '_MR_mci';

                    var canvas = document.getElementById(id);
                    if (canvas != null || canvas != undefined)
                        document.getElementById('canvasDiv').removeChild(canvas);

                    var maskcanvas = document.getElementById(maskId);
                    if (maskcanvas != null || maskcanvas != undefined)
                        document.getElementById('canvasDiv').removeChild(maskcanvas);
                }
            }

            //remove modesty canavs
            var modestyCanvases = $("canvas[id*='imageCanvasmodestyImg']");
            if (modestyCanvases != null || modestyCanvases != undefined && modestyCanvases.length > 0) {
                for (var j = 0; j < modestyCanvases.length; j++) {

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


    }
    $scope.terminateCurrentlyRunningWPs = function () {
        if ($scope.runningWorkers != null || $scope.runningWorkers != undefined) {
            var workerCount = $scope.runningWorkers.length;
            if (workerCount > 0) {
                for (var i = workerCount - 1; i >= 0; i--) {
                    var runningWorker = $scope.runningWorkers[i].workerName;
                    runningWorker.terminate();
                    $scope.runningWorkers.splice(i, 1);
                    // workerCount--;
                }
            }
        }
    }


    $scope.enableHighlight = function () {


        //  $("#btnExtract").removeClass("disabled");
       // $("#btnTranparency").removeClass("disabled");
        $("#btnTranparency").removeAttr('disabled', 'disabled');
        //   $rootScope.isTransparencyBoxActivated = false;
        //  $rootScope.isNormalMode = false;

        //if listanager is visisble then close it

        //  $rootScope.isListManagerSelected = false;
        $rootScope.CloseListManager();

        $rootScope.isHighlightBodyByBodySystem = false;

        if ($rootScope.isHighLight == true) {
           
        }
        else {
            $rootScope.isHighLight = true;
            $rootScope.isNormalMode = false;
            $rootScope.isZoomed = false;

            if ($rootScope.isExtract == true) {
                //1.
                $rootScope.isExtract = false;

                //2.
                $scope.flushCanvas();

                //3.
                $scope.CalculateImageCordinates($rootScope.viewOrientationId);


            }
            else {
                console.log('highLightBody from enableHighlight')
                $timeout(function () { $scope.highLightBody() }, 50);
            }

        }

        // unhighlight other

        //$scope.Normal = "";
        //$scope.Extract = "";
        //$scope.Highlight = "LeftButtonsDefaultState";

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

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

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

        if ($("#btnExtract").hasClass("btn-primary")) {
            $("#btnExtract").removeClass("btn-primary");
        }

        if ($("#btnNormalMode").hasClass("btn-primary")) {
            $("#btnNormalMode").removeClass("btn-primary");
        }

        //7900
        $("#canvasDiv").scrollTop($rootScope.CanvasDivTopPosition);
        $("#canvasDiv").scrollLeft($rootScope.CanvasDivLeftPosition);


    }

    $scope.enableNormalMode = function () {
      //  $("#btnTranparency").removeClass("disabled");
        $("#btnTranparency").removeAttr('disabled', 'disabled');
        $rootScope.isNormalMode = false;
        console.log('enableNormalMode is called');


        // $rootScope.isHighLight = false;

        //to do should not call every time
        $rootScope.CloseListManager();


        $rootScope.isHighlightBodyByBodySystem = false;


        if ($rootScope.isNormalMode == true) {
           
           



        }
        else {

            //1.
            $scope.flushCanvas();

            //2.
            $rootScope.isNormalMode = true;

            //3.
            $rootScope.isHighLight = false;

            //4.
            $rootScope.isExtract = false;

            //5.
            $rootScope.isZoomed = false;

            //6.
            //  $rootScope.isListManagerSelected = false;
            if ($rootScope.actualTermNumber != null && $rootScope.actualTermNumber!=undefined && $rootScope.isListManagerSelected == true) {
                                $rootScope.isListManagerSelected = false;
                                $rootScope.isListManagerAlreadySelected = true;
                            }

            //7.

            $scope.layerNumber = $('#txtlayerNumber').val();
            $scope.CalculateImageCordinates($rootScope.viewOrientationId);
      //      alert($rootScope.viewOrientationId + "gadash")
          
        
            $("#canvasDiv").scrollTop($rootScope.CanvasDivTopPosition);
            $("#canvasDiv").scrollLeft($rootScope.CanvasDivLeftPosition);


        }

        //$scope.Normal = "LeftButtonsDefaultState";
        //$scope.Extract = "";
        //$scope.Highlight = "";
        $("#btnNormalMode").addClass("btn-primary");
        $("#btnNormalMode").removeClass("btn-black");

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

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

        if ($("#btnExtract").hasClass("btn-primary")) {
            $("#btnExtract").removeClass("btn-primary");
        }

        if ($("#btnHighLight").hasClass("btn-primary")) {
            $("#btnHighLight").removeClass("btn-primary");
        }
    }

    // #7972 Mozilla Firefox> Incorrect navigation
    $("#canvasDiv").scroll(function (event) {
        $rootScope.CanvasDivTopPosition = $("#canvasDiv").scrollTop();
        $rootScope.CanvasDivLeftPosition = $("#canvasDiv").scrollLeft();

    });



    $scope.enableExtract = function (isCalledFromButton) {

        console.log('isCalledFromButton= ' + isCalledFromButton);

        $rootScope.isHighlightBodyByBodySystem = false;


        $rootScope.CanvasDivTopPosition = $("#canvasDiv").scrollTop();

        $rootScope.CanvasDivLeftPosition = $("#canvasDiv").scrollLeft();

       
        if ($scope.isTransparencyActivated  == true) {

            $("#btnExtract").addClass("disabled");

        }


        else {


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

            //2.
            $scope.terminateCurrentlyRunningWPs();

                //3.
                //if extarct is alraedy enabled and user cliked on any body part then extract that.
                if (isCalledFromButton == false) {

                    $rootScope.isExtract = true;
                    //disable transparency button

                    $("#btnTranparency").addClass("disabled");


                    if ($rootScope.isNormalMode == true) {

                        $rootScope.isHighLight = false;
                        $rootScope.isNormalMode = false;
                    }
                    else {

                        $rootScope.isHighLight = false;
                    }

                    //4.
                    console.log('highLightBody from enableExtract')
                    $scope.highLightBody();

                }
                else {

                    if ($rootScope.isExtract == true) {

                    }
                    else {
                        $rootScope.isExtract = true;
                        //disable transparency button

                        $("#btnTranparency").addClass("disabled");


                        if ($rootScope.isNormalMode == true) {

                            $rootScope.isHighLight = false;
                            $rootScope.isNormalMode = false;
                        }
                        else {

                            $rootScope.isHighLight = false;
                        }

                        //4.
                        console.log('highLightBody from enableExtract')
                        $scope.highLightBody();


                    }
                }
            

            //5. unhighlight other
            //$scope.Normal = "";
            //$scope.Extract = "LeftButtonsDefaultState";
            //$scope.Highlight = "";

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

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

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

            if ($("#btnNormalMode").hasClass("btn-primary")) {
                $("#btnNormalMode").removeClass("btn-primary");
            }

            if ($("#btnHighLight").hasClass("btn-primary")) {
                $("#btnHighLight").removeClass("btn-primary");
            }
        }
    }

    $scope.enableShowHideStructureBox = function () {


        //if listanager is visisble then close it
      

        $rootScope.isListManagerSelected = false;
        $rootScope.CloseListManager();
        var btnStrutureBoxname = document.getElementById("btnStrutureBox").name;

        if (btnStrutureBoxname == "showAnnotationStructure") {
            $("#btnStrutureBox").addClass("disableHideShowStructure");
            $scope.hideAnnotation();
            document.getElementById("btnStrutureBox").name = "hideAnnotationStructure";
        }
        else {
            $("#btnStrutureBox").removeClass("disableHideShowStructure");
            $scope.showAnnotation();

            document.getElementById("btnStrutureBox").name = "showAnnotationStructure";
        }
     
    }



    $scope.highLightBody = function () {

        $scope.CloseTransparencyBox();
        $scope.Normal = "";
        $scope.Extract = "";
        $scope.Highlight = "LeftButtonsDefaultState";
        $("#btnTranparency").removeAttr('disabled', 'disabled');
        console.log('highLightBody is called and ColoredImageSRC length: ' + $scope.ColoredImageSRC.length);

        $scope.terminateCurrentlyRunningWPs();

        //different body views have different count of bodyegions so the length of ColoredImageSRC will be different
        if (($scope.ColoredImageSRC != null || $scope.ColoredImageSRC != undefined)) {

            if ((($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) && ($scope.ColoredImageSRC.length == 9)) {
                $scope.doHighlightOrExtract = true;
            }
            else if ((($rootScope.viewOrientationId == '2') || ($rootScope.viewOrientationId == '3')) && ($scope.ColoredImageSRC.length == 5)) {
                $scope.doHighlightOrExtract = true;
            }
            else if ((($rootScope.viewOrientationId == '5')) && ($scope.ColoredImageSRC.length == 4)) {
                $scope.doHighlightOrExtract = true;
            }
            else if ((($rootScope.viewOrientationId == '6')) && ($scope.ColoredImageSRC.length == 1)) {
                $scope.doHighlightOrExtract = true;
            }
            else {
                $scope.doHighlightOrExtract = false;
            }


            if ($scope.doHighlightOrExtract == true) {
                if ($rootScope.isHighLight == true) {

                    $scope.grayedBR = [];

                    angular.forEach($scope.ColoredImageSRC, function (value, key) {
                        console.log('$scope.ColoredImageSRC length before gray= ' + $scope.ColoredImageSRC.length)
                        var id;
                        if (value.haveMirror == 'true') {
                            id = 'imageCanvas' + value.bodyRegionId + '_MR';
                        }
                        else {
                            id = 'imageCanvas' + value.bodyRegionId;
                        }

                        var imageCanvas = document.getElementById(id);

                        var width = value.Width;
                        var ht = value.Height;

                        var coloredCanvasContext = imageCanvas.getContext("2d");
                        var coloredImageData = coloredCanvasContext.getImageData(0, 0, width, ht);
                        var coloredImageDataVar = coloredImageData;

                       
                        var context_gray = imageCanvas.getContext('2d');

                        var dataURL = imageCanvas.toDataURL();


                        var img = new Image();

                        img.src = dataURL;

                        img.onload = function () {
                            console.log('Before BitmapData call, width: ' + Math.max(img.width) + ', height: ' + Math.max(img.height) + ' value.bodyRegionId= '
                                + value.bodyRegionId)

                            var DAData = new BitmapData(Math.max(img.width), Math.max(img.height));
                            DAData.draw(img);

                            var colorMode;

                            if ($scope.isExtract == true) {

                                if ((($rootScope.previousHighlightList != null || $rootScope.previousHighlightList != undefined) && $rootScope.previousHighlightList.length > 0) || $rootScope.isListManagerSelected == true) {

                                    colorMode = $scope.applyWhiteMatrix(img, context_gray);
                                }
                            }
                            else {
                                colorMode = $scope.applyGrayMatrix(img, context_gray);
                            }

                            console.log('colorMode inside if = ' + colorMode);


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

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


                                var zeroPoint = new Point();

                                DAData.applyFilter(DAData, DAData.rect, zeroPoint, colorMode);


                                context_gray.putImageData(DAData.data, 0, 0)

                                //to resolve lateral arm black issue in highlight mode

                                if ($rootScope.viewOrientationId == 5 && (value.bodyRegionId == 6 || value.bodyRegionId == 4)) {

                                    var imgData = context_gray.getImageData(0, 0, width, ht);
                                    var data = imgData.data;
                                    var c = 0;
                                    for (var i = 0; i < data.length; i += 4) {
                                        if (data[i] == data[i + 1] && data[i + 1] == data[i + 2] && data[i + 2] === 0) {
                                            data[i + 3] = 0;
                                        }

                                    }
                                    context_gray.putImageData(imgData, 0, 0);
                                }

                                imageCanvas.style.visibility = 'visible';
                                //push BRID into array
                                $scope.grayedBR.push({ 'BRID': value.bodyRegionId });

                                var grayImageData = context_gray.getImageData(0, 0, width, ht);
                                var grayImageImageDataVar = grayImageData.data;

                                if ($scope.isExtract == true) {
                                    if (value.haveMirror == 'true') {
                                        $rootScope.whiteImageMRDataList[parseInt(value.bodyRegionId)] = grayImageData;
                                    }
                                    else {

                                        $rootScope.whiteImageDataList[parseInt(value.bodyRegionId - 1)] = grayImageData;
                                    }
                                }
                                else {

                                    if (value.haveMirror == 'true') {
                                        $rootScope.grayImageMRDataList[parseInt(value.bodyRegionId)] = grayImageData;
                                    }
                                    else {

                                        $rootScope.grayImageDataList[parseInt(value.bodyRegionId - 1)] = grayImageData;
                                    }
                                }


                                if ($scope.grayedBR != null || $scope.grayedBR != undefined) {
                                    if ((($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) && ($scope.grayedBR.length == 9)) {
                                        $scope.isEligibleForHighlightBodyByTermList = true;
                                        $scope.doHighlightOrExtract = false;
                                    }
                                    else if ((($rootScope.viewOrientationId == '2') || ($rootScope.viewOrientationId == '3')) && ($scope.grayedBR.length == 5)) {
                                        $scope.isEligibleForHighlightBodyByTermList = true;
                                        $scope.doHighlightOrExtract = false;
                                    }
                                    else if ((($rootScope.viewOrientationId == '5')) && ($scope.grayedBR.length == 4)) {
                                        $scope.isEligibleForHighlightBodyByTermList = true;
                                        $scope.doHighlightOrExtract = false;
                                    }
                                    else if ((($rootScope.viewOrientationId == '6')) && ($scope.grayedBR.length == 1)) {
                                        $scope.isEligibleForHighlightBodyByTermList = true;
                                        $scope.doHighlightOrExtract = false;
                                    }
                                    else {

                                        $scope.isEligibleForHighlightBodyByTermList = false;
                                    }

                                    if ($scope.isEligibleForHighlightBodyByTermList == true) {
                                   
                                        if (($rootScope.isHighlightBodyByBodySystem == true) && ($scope.systemMatchedTermList != null || $scope.systemMatchedTermList != undefined)) {


                                            $scope.isLoading = true;

                                            $('#spinner').css('visibility', 'visible');
                                            $timeout(function () { $scope.HighlightBodyByTermList($scope.systemMatchedTermList) }, 100);
                                        }
                                        else if (($rootScope.isListManagerSelected == true) || ($rootScope.previousHighlightList != null && $rootScope.previousHighlightList.length > 0) && ($rootScope.isGenderChnage==true || $rootScope.isViewChange==true) || $rootScope.isListManagerAlreadySelected==true) {

                                            // console.log('$scope.grayedBR.length is ' + $scope.grayedBR.length);
                                            $timeout(function () {

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

                                                $scope.HighlightBodyByTermList($scope.AllTerms)
                                            }, 800);

                                        }
                                        else if (($rootScope.previousHighlightList != null || $rootScope.previousHighlightList != undefined) && $rootScope.previousHighlightList.length > 0) {
                                            $scope.createTermListByPreviousTermsAndHighlight();
                                        }
                                        else {
                                            $scope.isLoading = false;
                                            $('#spinner').css('visibility', 'hidden');
                                        }

                                    }

                                }

                            }

                           // $timeout(function () { imageCanvas.style.visibility = 'visible' }, 50);

                            console.log('highlightboy. $rootScope.isExtract= '+$rootScope.isExtract+',  $rootScope.previousHighlightList.length= ' + $rootScope.previousHighlightList.length)
                            if ($rootScope.isExtract == true) {
                                if (($rootScope.previousHighlightList != null || $rootScope.previousHighlightList != undefined) && $rootScope.previousHighlightList.length > 0) {
                                    console.log('1. $rootScope.isExtract=true and $rootScope.previousHighlightList != null')

                                    $timeout(function () { $scope.HighlightBodyOnExtract() }, 50);
                                }
                                else if ($rootScope.isListManagerSelected == true) {
                                    console.log('1. $rootScope.isExtract=true and $rootScope.isListManagerSelected == true')

                                    $timeout(function () { $scope.HighlightBodyOnExtract() }, 50);

                                }
                            }
                        }
                    })

                }


                else {
                    // This code will execute when user will select normal Mode but this time isHighlight will be false 
                    console.log('highlightboy ELSE. $rootScope.isExtract= ' + $rootScope.isExtract + ',  $rootScope.previousHighlightList.length= ' + $rootScope.previousHighlightList.length)

                    angular.forEach($scope.ColoredImageSRC, function (value, key) {
                        var id;
                        if (value.haveMirror == 'true') {
                            id = 'imageCanvas' + value.bodyRegionId + '_MR';
                        }
                        else {
                            id = 'imageCanvas' + value.bodyRegionId;
                        }

                        var imageCanvas = document.getElementById(id);

                     
                        var width = value.Width;
                        var ht = value.Height;

                        var coloredCanvasContext = imageCanvas.getContext("2d");
                        var coloredImageData = coloredCanvasContext.getImageData(0, 0, width, ht);
                        var coloredImageDataVar = coloredImageData;


                        var context = imageCanvas.getContext('2d');


                        var dataURL = imageCanvas.toDataURL();


                        var img = new Image();

                        img.src = dataURL;



                        img.onload = function () {
                            //console.log(Math.max(img.width) + ', ' + Math.max(img.height))

                            var DAData = new BitmapData(Math.max(img.width), Math.max(img.height));
                            DAData.draw(img);

                            var colorMode;

                            if ($scope.isExtract == true) {
                                if ((($rootScope.previousHighlightList != null || $rootScope.previousHighlightList != undefined) && $rootScope.previousHighlightList.length > 0) || $rootScope.isListManagerSelected == true) {

                                    colorMode = $scope.applyWhiteMatrix(img, context);
                                }
                            }

                            console.log('colorMode inside else = ' + colorMode);
                            if (colorMode != undefined || colorMode != null) {

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

                                var zeroPoint = new Point();

                                DAData.applyFilter(DAData, DAData.rect, zeroPoint, colorMode);

                                context.putImageData(DAData.data, 0, 0)


                                //NIKI- to resolve lateral arm black issue in  mode

                                if ($rootScope.viewOrientationId == 5 && (value.bodyRegionId == 6 || value.bodyRegionId == 4)) {

                                    var imgData = context.getImageData(0, 0, width, ht);
                                    var data = imgData.data;
                                    var c = 0;
                                    for (var i = 0; i < data.length; i += 4) {
                                        if (data[i] == data[i + 1] && data[i + 1] == data[i + 2] && data[i + 2] === 0) {
                                            data[i + 3] = 0;
                                        }

                                    }
                                    context.putImageData(imgData, 0, 0);
                                }

                                imageCanvas.style.visibility = 'visible'
                                var grayImageData = context.getImageData(0, 0, width, ht);
                                var grayImageImageDataVar = grayImageData.data;

                                if ($scope.isExtract == true) {
                                    if (value.haveMirror == 'true') {
                                        $rootScope.whiteImageMRDataList[parseInt(value.bodyRegionId)] = grayImageData;
                                    }
                                    else {

                                        $rootScope.whiteImageDataList[parseInt(value.bodyRegionId - 1)] = grayImageData;
                                    }
                                }
                                else {

                                    if (value.haveMirror == 'true') {
                                        $rootScope.grayImageMRDataList[parseInt(value.bodyRegionId)] = grayImageData;
                                    }
                                    else {

                                        $rootScope.grayImageDataList[parseInt(value.bodyRegionId - 1)] = grayImageData;
                                    }
                                }
                            }

                           // $timeout(function () { imageCanvas.style.visibility = 'visible' }, 50);
                        }
                    })

                    if ($rootScope.isExtract == true) {
                        if (($rootScope.previousHighlightList != null || $rootScope.previousHighlightList != undefined) && $rootScope.previousHighlightList.length > 0) {
                            console.log('2. $rootScope.isExtract=true and $rootScope.previousHighlightList != null, $rootScope.previousHighlightList.length= ' + $rootScope.previousHighlightList.length)


                            $timeout(function () { $scope.HighlightBodyOnExtract() }, 50);

                            // to do

                        }
                        else if ($rootScope.isListManagerSelected == true) {
                            console.log('2. $rootScope.isExtract=true and $rootScope.isListManagerSelected == true')
                            $timeout(function () { $scope.HighlightBodyOnExtract() }, 50);

                        }
                    }

                }
            }
        }
    }


    $scope.applyGrayMatrix = function (img, context_gray) {
        var RED = 0.3086; // luminance contrast value for red
        var GREEN = 0.694; // luminance contrast value for green
        var BLUE = 0.0820; // luminance contrast value for blue

        var RGB = [RED, GREEN, BLUE, 0, 0];
        var RGB2 = [RED, GREEN, BLUE, 0, 0];
        var RGB3 = [RED, GREEN, BLUE, 0, 0];
        var ALPHA = [0, 0, 0, 1, 0];

        var rgbPx = RGB.concat(RGB2);
        var rgbPx2 = rgbPx.concat(RGB3);
        var matrix = rgbPx2.concat(ALPHA);


        var grayScale = new ColorMatrixFilter(matrix);

        return grayScale;
    }

    $scope.applyWhiteMatrix = function (img, context_gray) {
        var RED = 255; // white color value for red
        var GREEN = 255; // white color value for green
        var BLUE = 255; // white color value for blue

        var RGB = [RED, GREEN, BLUE, 0, 0];
        var RGB2 = [RED, GREEN, BLUE, 0, 0];
        var RGB3 = [RED, GREEN, BLUE, 0, 0];
        var ALPHA = [0, 0, 0, 1, 0];

        var rgbPx = RGB.concat(RGB2);
        var rgbPx2 = rgbPx.concat(RGB3);
        var matrix = rgbPx2.concat(ALPHA);


        var grayScale = new ColorMatrixFilter(matrix);

        return grayScale;
    }

    $scope.getActualTermNumber = function (iColor) {
        $scope.actualTermNo = new jinqJs()
                  .from($rootScope.TermNumberData.TermData.Term)
                  .where('_TermNumber == ' + iColor)
                  .select('_ActualTermNumber');
        if ($scope.actualTermNo != null || actualTermNo != undefined) {

            return $scope.actualTermNo[0]._ActualTermNumber;
        }
        else {
            return null;
        }
    }

    $scope.getTermNumberList = function (actualTermNo) {
        $scope.termList = new jinqJs()
                  .from($rootScope.TermNumberData.TermData.Term)
                  .where('_ActualTermNumber == ' + actualTermNo)
                  .select();
        if ($scope.termList != null || $scope.termList != undefined) {
            return $scope.termList;
        }
        else {
            return null;
        }

    }


    $scope.OnGenderChange = function (event) {

        var canvasDiv = document.getElementById('canvasDiv');
        $scope.imageVerticalScrollPosition = canvasDiv.scrollTop;
        $scope.imageHorizontlScrollPosition = canvasDiv.scrollLeft;

        $("#btnExtract").removeClass("disabled");
        $("#btnTranparency").removeClass("disabled");
        $rootScope.isTransparencyBoxActivated = false;
        $rootScope.isNormalMode = false;

        //close transparecny box   
        $scope.CloseTransparencyBox();

        //if listanager is visisble then close it

        // $rootScope.isListManagerSelected = false;
        $rootScope.CloseListManager();

       // $rootScope.isHighlightBodyByBodySystem = false;

        //Remove the Search list and then Repopulate it on change of Gender
        $('#searchListDiv').empty()

        $rootScope.isGenderChnage = true;


        if ($rootScope.isExtract == true) {
            $rootScope.isExtract = false;
            $rootScope.isHighLight = true;
            $("#btnExtract").removeClass("btn-primary");
            $("#btnExtract").addClass("btn-black");
            $("#btnHighLight").removeClass("btn-black");
            $("#btnHighLight").addClass("btn-primary");
            
         
        }


        var viewname = localStorage.getItem("currentViewTitle")
        var currentBodyViewId = $scope.correspondingBodyViewIds[$rootScope.voId];

        
        if ((event.currentTarget.title == 'Male') && (localStorage.getItem("genderId") == 'Female')) {

            //1.
            localStorage.setItem("genderId", 'Male');

            //2 first update the currentbodyviewid in local storage
            localStorage.setItem("currentBodyViewId", currentBodyViewId);

            $rootScope.isLoading = true;
            $('#spinner').css('visibility', 'visible');
            //3.
          
                $scope.layerNumber = 0;
                $scope.loadSelectedBodyView(currentBodyViewId);
           

            //4.
            $scope.loadNavigatorForSelectedBodyView(currentBodyViewId);

            //5. change the search terms as per the selected bodyview
            $scope.loadSearchDataForBodyView();

            //6.
            $('#daImagePanel')[0].childNodes[0].childNodes[0].innerHTML = localStorage.getItem("currentViewTitle").replace('Female', 'Male');

            localStorage.setItem("currentViewTitle", localStorage.getItem("currentViewTitle").replace('Female', 'Male'));


            $rootScope.isLoading = true;

        }

        else if ((event.currentTarget.title == 'Female') && (localStorage.getItem("genderId") == 'Male')) {

            //1.
            localStorage.setItem("genderId", 'Female');

            //2. first update the currentbodyviewid in local storage
            localStorage.setItem("currentBodyViewId", currentBodyViewId);

            $rootScope.isLoading = true;
            $('#spinner').css('visibility', 'visible');
            //3.
            
                $scope.layerNumber = 0;
                $scope.loadSelectedBodyView(currentBodyViewId);
            

            //4.
            $scope.loadNavigatorForSelectedBodyView(currentBodyViewId);

            //5. change the search terms as per the selected bodyview
            $scope.loadSearchDataForBodyView();

            //6.
            $('#daImagePanel')[0].childNodes[0].childNodes[0].innerHTML = localStorage.getItem("currentViewTitle").replace('Male', 'Female');

            localStorage.setItem("currentViewTitle", localStorage.getItem("currentViewTitle").replace('Male', 'Female'));


            $rootScope.isLoading = true;

        }

        $rootScope.openViews.push(
         {
             "module": $rootScope.currentActiveModuleTitle, "bodyView": localStorage.getItem("currentViewTitle"), "state": 'max', "BodyViewId": currentBodyViewId,
             "slug": $rootScope.currentSlug
         }
       );

        var target = angular.element(event.currentTarget);
        var title_male_female = target.attr('title');

        if (title_male_female == "Male") {

            $scope.male = "active";
            $scope.female = "";
        }
        else {
            $scope.male = "";
            $scope.female = "active";
        }
        $rootScope.CloseAnnotationTool();
    }


    //clsoe worker process
    $scope.$on('jsPanelCloseEvent', function (event, data) {



        console.log('terminate worker process')
        //terminate previous running workers to create space for new workers
        $scope.terminateCurrentlyRunningWPs();

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

        //To fix issue of gray maintained in after closing jspanel after listmanager selection
        $rootScope.isListManagerSelected = false;
        $rootScope.isHighLight = false;
        //$rootScope.isNormalMode = false;
        $rootScope.isHighlightBodyByBodySystem = false;
        $rootScope.CloseListManager();
    })

    $scope.loadSelectedBodyView = function (currentBodyViewId) {
     
        //remove transaprency scale
        if ($('#transparencyScale') != null) {

            $('#transparencyScale').css('visibility', 'hidden');
        }


        $rootScope.voId = currentBodyViewId;

        var layerJsonPath = '~/../content/data/json/da/body-views/' + currentBodyViewId + '/da_dat_layer_' + currentBodyViewId + '.json';

        DataService.getJson(layerJsonPath)
        .then(
         function (result) {
             //debugger;

             $rootScope.BodyLayerData = result;

             var dataLength = $rootScope.BodyLayerData.Layers.DataLayer.length;

             //set max for LayerNumber input
             $rootScope.totalLayers = dataLength - 1;
          
             $('#txtLayerNumber').attr('max', $rootScope.totalLayers);
             $('#layerChangeSlider').slider("option", "max", $rootScope.totalLayers);

             //set max for LayerNumber input
             $rootScope.totalLayers = dataLength - 1;

             $scope.isBodylayerdataLoaded = true;

             //load json for annotations
             // $http({ method: 'GET', url: '~/../content/data/json/da_dat_tm_sg_1.json' }).success(function (data) {
             var termJsonPath = '~/../content/data/json/da/body-views/' + currentBodyViewId + '/da_dat_tm_sg_' + currentBodyViewId + '.json';
             DataService.getAnotherJson(termJsonPath)
            .then(
             function (result) {
                 $rootScope.TermNumberData = result;

                 //if user seelcted any term and serached before gender cnage then itshould be highlighted in chnaged gender

                 if ((($rootScope.isListManagerSelected == true) ||
                     ($rootScope.isHighLight == true && $rootScope.previousHighlightList != null
                     && $rootScope.previousHighlightList.length > 0))
                     && (($rootScope.isGenderChnage == true) || $rootScope.isViewChange == true)) {

                     $scope.setLayerNumberAndHighlightByTermList();

                 }
                 else if ($rootScope.previousHighlightList != null && $rootScope.previousHighlightList.length > 0 &&
                     ($rootScope.isGenderChnage == true || $rootScope.isViewChange == true)) {

                     $rootScope.isHighLight = true
                     $scope.setLayerNumberAndHighlightByTermList();
                 }

                 else {

                     $scope.CalculateImageCordinates($rootScope.viewOrientationId);

                 }

                 $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");
             },
              function (error) {
                  // handle errors here
                  console.log(' $rootScope.TermNumberData= ' + error.statusText);
              }
             )
         },

        function (error) {
            // handle errors here
            console.log(' $rootScope.BodyLayerData= ' + error.statusText);
        }
    );
    }

    $scope.OnViewChange = function (event) {

        var canvasDiv = document.getElementById('canvasDiv');
        $scope.imageVerticalScrollPosition = canvasDiv.scrollTop;
        $scope.imageHorizontlScrollPosition = canvasDiv.scrollLeft;
     
        $("#btnExtract").removeClass("disabled");
        $("#btnTranparency").removeClass("disabled");
        $rootScope.isTransparencyBoxActivated = false;
        $rootScope.isNormalMode = false;

        //close transparency box 
        $scope.CloseTransparencyBox();

        //if listanager is visisble then close it

        //$rootScope.isListManagerSelected = false;
        $rootScope.CloseListManager();

      //  $rootScope.isHighlightBodyByBodySystem = false;

        //Remove the search list and then Repopulate it on change of View
        $('#searchListDiv').empty()

        if ($rootScope.openViews.length > 0) {
            $rootScope.openViews.splice($rootScope.openViews.length - 1);
        }

        $rootScope.isViewChange = true;

        if ($rootScope.isExtract == true) {
            $rootScope.isExtract = false;
            $rootScope.isHighLight = true;
            $("#btnExtract").removeClass("btn-primary");
            $("#btnExtract").addClass("btn-black");
            $("#btnHighLight").removeClass("btn-black");
            $("#btnHighLight").addClass("btn-primary");
        }
      
        $scope.layerNumber = 0;

        //remove existing body view
        var canDiv = document.getElementById('canvasDiv');
        var canDivChildCount = canDiv.childElementCount;
        if (canDivChildCount > 0) {
              canDiv.innerHTML = '';
        }

        var selectedViewId = $scope.bodyViews[event.currentTarget.title];
        $rootScope.viewOrientationId = selectedViewId;

        if (localStorage.getItem("genderId") == 'Male') {
            if ($rootScope.voId != selectedViewId) {
                if (selectedViewId == 5) {
                    $rootScope.voId = 9;
                }
                else if (selectedViewId == 6) {
                    $rootScope.voId = 10;
                }
                else
                    $rootScope.voId = selectedViewId;
                $rootScope.isLoading = true;

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

                //1. first update the currentbodyviewid in local storage
                localStorage.setItem("currentBodyViewId", $rootScope.voId);


                //2. Load selected body view
                $scope.loadSelectedBodyView($rootScope.voId);

                //3. load corresponding navigator man
                $scope.loadNavigatorForSelectedBodyView($rootScope.voId);

                //4. change the search terms as per the selected bodyview
                $scope.loadSearchDataForBodyView();

                //5.Change the popup title next to search
                $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");

            };


            //set selected view name as the title of jspanel
            // $('#daImagePanel')[0].childNodes[0].childNodes[0].innerHTML = localStorage.getItem("genderId") +" "+ event.currentTarget.attributes[1].value;

        }
        else {
            if (selectedViewId == 5) {
                selectedViewId = 11;
            }
            else if (selectedViewId == 6) {
                selectedViewId = 12;
            }
            else
                selectedViewId = $scope.correspondingBodyViewIds[selectedViewId];;
            if ($rootScope.voId != selectedViewId) {
                $rootScope.voId = selectedViewId;
                $rootScope.isLoading = true;

                $rootScope.isLoading = true;
                $('#spinner').css('visibility', 'visible');
                //1.
                $scope.loadSelectedBodyView($rootScope.voId);

                //2.
                $scope.loadNavigatorForSelectedBodyView($rootScope.voId);
            };


            // $('#daImagePanel')[0].childNodes[0].childNodes[0].innerHTML = localStorage.getItem("genderId") + " " + $scope.bodyViews[event.currentTarget.attributes[1].value;

        }
        $('#daImagePanel')[0].childNodes[0].childNodes[0].innerHTML = localStorage.getItem("genderId") + " " + event.currentTarget.title;
        localStorage.setItem("currentViewTitle", localStorage.getItem("genderId") + " " + event.currentTarget.title);


        $rootScope.openViews.push(
         {
             "module": $rootScope.currentActiveModuleTitle, "bodyView": localStorage.getItem("currentViewTitle"), "state": 'max', "BodyViewId": $rootScope.voId,
             "slug": $rootScope.currentSlug
         }
       );

        var viewtarget = angular.element(event.currentTarget);
        var title_drop_view = viewtarget.attr('title');

        if (title_drop_view == "Anterior") {

            $scope.AnteriorView = "active";
            $scope.LateralView = "";
            $scope.MedialView = "";
            $scope.PosteriorView = "";
            $scope.LateralArmView = "";
            $scope.MedialArmView = "";

        }
        else if (title_drop_view == "Lateral") {

            $scope.AnteriorView = "";
            $scope.LateralView = "active";
            $scope.MedialView = "";
            $scope.PosteriorView = "";
            $scope.LateralArmView = "";
            $scope.MedialArmView = "";
        }
        else if (title_drop_view == "Medial") {

            $scope.AnteriorView = "";
            $scope.LateralView = "";
            $scope.MedialView = "active";
            $scope.PosteriorView = "";
            $scope.LateralArmView = "";
            $scope.MedialArmView = "";
        }
        else if (title_drop_view == "Posterior") {

            $scope.AnteriorView = "";
            $scope.LateralView = "";
            $scope.MedialView = "";
            $scope.PosteriorView = "active";
            $scope.LateralArmView = "";
            $scope.MedialArmView = "";
        }
        else if (title_drop_view == "Lateral Arm") {

            $scope.AnteriorView = "";
            $scope.LateralView = "";
            $scope.MedialView = "";
            $scope.PosteriorView = "";
            $scope.LateralArmView = "active";
            $scope.MedialArmView = "";
        }
        else if (title_drop_view == "Medial Arm") {

            $scope.AnteriorView = "";
            $scope.LateralView = "";
            $scope.MedialView = "";
            $scope.PosteriorView = "";
            $scope.LateralArmView = "";
            $scope.MedialArmView = "active";
        }
        //13573 : DA > Annotations should not be display if we change the body view.
        $rootScope.CloseAnnotationTool();
      
    }

    //Reload DA controller event listener after setting change
    $scope.$on('reloadDAControllerEvent', function (event, data) {
        console.log('reloadDAControllerEvent');

        $scope.loadDissectibleAnatomyData();

    })

    $scope.$on('changeNavigatorModestyEvent', function (event, data) {
        console.log('changeNavigatorModestyEvent');

        $scope.loadNavigatorForSelectedBodyView(data.bodyViewId);

    })
    //Reload DA controller Body View after setting Change
    $scope.$on('reloadDABodyViewEvent', function (event, data) {
        //console.log('reloadDABodyViewEvent');
        if ($rootScope.isSettingEventAlredayDispachted == true) {
            $rootScope.isSettingEventAlredayDispachted = false;
            $scope.layerNumber = parseInt($('#txtlayerNumber').val());
            //alert('mouseUp');


            if ($scope.layerNumber == 0) {
                $scope.loadSelectedBodyView(data.reloadDABodyViewId);
            }
            // $scope.loadSelectedBodyView(data.reloadDABodyViewId);

            $scope.loadNavigatorForSelectedBodyView(data.reloadDABodyViewId);
        }
        // $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");

        //$rootScope.isSettingEventAlredayDispachted = false;
        //}

    })

    $scope.loadNavigatorForSelectedBodyView = function (currentBodyViewId) {
      
        //$rootScope.voId = currentBodyViewId;

        //$scope.skinTone = $rootScope.globalSetting.ethnicity;

        if ($rootScope.NavigatorData != null || $rootScope.NavigatorData != undefined) {
            var navdtlOrient = new jinqJs()
                              .from($rootScope.NavigatorData.Navigtor.ViewOrientation)
                              .where("_ViewOrientationId == " + currentBodyViewId)
                              .select();


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

                var navOrientationdata = new jinqJs()
                                 .from(navdtlOrient[0].ImageInfo)
                                 .where("_Ethnicity == " + $rootScope.globalSetting.ethnicity)
                                 .select();

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

                    $scope.navigatorImage = navOrientationdata;


                    var navImageModesty;

                    angular.forEach($scope.navigatorImage, function (value, key) {
                        if (value._HaveModesty === $rootScope.globalSetting.modesty) {
                            navImageModesty = value._ImageName;
                        }
                    })
                    if (typeof (navImageModesty) === "undefined" || navImageModesty === null) {

                        navImageModesty = $scope.navigatorImage[0]._ImageName;

                    }

                   // $scope.navimgsrc = 'http://localhost/AIAHTML5/content/images/DA/ethnicity/body-views/' + $scope.voId + '/' + $rootScope.globalSetting.ethnicity + '/navigator_images/' + navImageModesty;//"~/../content/images/DA/ethnicity/body-views/" + $scope.voId + '/' + $rootScope.globalSetting.ethnicity + '/navigator_images/' + navImageModesty;
                    document.getElementById('navimg').src = '~/../content/images/DA/ethnicity/body-views/' + $scope.voId + '/' + $rootScope.globalSetting.ethnicity + '/navigator_images/' + navImageModesty;//"~/../content/images/DA/ethnicity/body-views/" + $scope.voId + '/' + $rootScope.globalSetting.ethnicity + '/navigator_images/' + navImageModesty;
                }
            }

        }

    }

    //Annotation tool event lsitener

    //   $scope.drawing = drawing;
    //    $scope.lastX = lastX;
    //   $scope.lastY = lastY;
    //    $scope.currentX;
    //    $scope.currentY;
    //----Annotation Toolbar: Jcanvas---

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



    }





   
    



   

    //body highlight options functinality
    $scope.LoadBodySystemData = function () {

        var currentBodyViewId = $rootScope.voId;
        var systemListHtml = '<ul class="dropdown-menu" aria-labelledby="dropdownMenu2"><li><a href="#" title="Current Structure">Current Structure</a></li>  <li role="separator" class="divider"></li>'
        var systemList = $rootScope.CommonData.DACommonData.BodySystems.Item;

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

            systemListHtml = systemListHtml + '<li><a href="#" id="' + value._BodySystemId + '"  title="' + value._Name + '">' + value._Name + '</a></li>'
        })

        systemListHtml = systemListHtml + '</ul>';
        $('#bodySystem').append(systemListHtml);

        var bodySystemDataPath = '~/../content/data/json/da/body-views/' + currentBodyViewId + '/da_dat_body_system_term_' + currentBodyViewId + '.json';
        DataService.getJson(bodySystemDataPath)
       .then(
        function (result) {

            $rootScope.BodySystemData = result;

        },
        function (error) {
            console.log(error.statusText)
        }
        )

    }

    $scope.HighlightBodyByBodySystem = function (event) {

        //if listanager is visisble then close it

        $rootScope.isListManagerSelected = false;
        $rootScope.CloseListManager();


        //NIKITA
        $rootScope.isHighlightBodyByBodySystem = true;
        $scope.systemMatchedTermList = new jinqJs()
                                     .from($rootScope.BodySystemData.BodySystem.BodySystemTerm)
                                     .where('_SystemNumber == ' + event.currentTarget.id)
                                     .select();

        if ($rootScope.isHighLight == false) {
            //color  the body gray
            $rootScope.isHighLight = true
            console.log('highLightBody from HighlightBodyByBodySystem')
            $scope.highLightBody();
        }
        else {
            //This else is when user seraced anything then change the view and clicked on highlight options 
            //in this case body is already highlihted(gray) so no need to 
            if ($scope.grayedBR != null || $scope.grayedBR != undefined) {
                if ((($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) && ($scope.grayedBR.length == 9)) {
                    $scope.isAlreadyHighlighted = true;
                }
                else if ((($rootScope.viewOrientationId == '2') || ($rootScope.viewOrientationId == '3')) && ($scope.grayedBR.length == 5)) {
                    $scope.isAlreadyHighlighted = true;
                }
                else if ((($rootScope.viewOrientationId == '5')) && ($scope.grayedBR.length == 4)) {
                    $scope.isAlreadyHighlighted = true;
                }
                else if ((($rootScope.viewOrientationId == '6')) && ($scope.grayedBR.length == 1)) {
                    $scope.isAlreadyHighlighted = true;
                }
                if (($scope.isAlreadyHighlighted == true && $rootScope.isHighlightBodyByBodySystem == true) && ($scope.systemMatchedTermList != null || $scope.systemMatchedTermList != undefined && $scope.systemMatchedTermList.length > 0)) {

                    $scope.isLoading = true;

                    $('#spinner').css('visibility', 'visible');
                    $timeout(function () { $scope.HighlightBodyByTermList($scope.systemMatchedTermList) }, 100);
                }
            }
        }


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

        //NIKITA
        //  $rootScope.isHighlightBodyByBodySystem = true;

        //if (systemMatchedTermList != null || systemMatchedTermList != undefined) {

        //    $timeout(function () { $scope.HighlightBodyByTermList(systemMatchedTermList) }, 100);
        //}


        var viewtarget_highlightbody = angular.element(event.currentTarget);
        var title_highlightbody = viewtarget_highlightbody.attr('title');

        if (title_highlightbody == "Cardiovascular") {
            $scope.CurrentStructure = "";
            $scope.Cardiovascular = "active";
            $scope.Digestive = "";
            $scope.Endocrine = "";
            $scope.Immune = "";
            $scope.Integumentary = "";
            $scope.Lymphatic = "";
            $scope.Muscular = "";
            $scope.Nervous = "";
            $scope.Reproductive = "";
            $scope.Respiratory = "";
            $scope.Skeletal = "";
            $scope.Urinary = "";
        }

        if (title_highlightbody == "Digestive") {
            $scope.CurrentStructure = "";
            $scope.Cardiovascular = "";
            $scope.Digestive = "active";
            $scope.Endocrine = "";
            $scope.Immune = "";
            $scope.Integumentary = "";
            $scope.Lymphatic = "";
            $scope.Muscular = "";
            $scope.Nervous = "";
            $scope.Reproductive = "";
            $scope.Respiratory = "";
            $scope.Skeletal = "";
            $scope.Urinary = "";
        }

        if (title_highlightbody == "Endocrine") {
            $scope.CurrentStructure = "";
            $scope.Cardiovascular = "";
            $scope.Digestive = "";
            $scope.Endocrine = "active";
            $scope.Immune = "";
            $scope.Integumentary = "";
            $scope.Lymphatic = "";
            $scope.Muscular = "";
            $scope.Nervous = "";
            $scope.Reproductive = "";
            $scope.Respiratory = "";
            $scope.Skeletal = "";
            $scope.Urinary = "";
        }
        if (title_highlightbody == "Immune") {

            $scope.CurrentStructure = "";
            $scope.Cardiovascular = "";
            $scope.Digestive = "";
            $scope.Endocrine = "";
            $scope.Immune = "active";
            $scope.Integumentary = "";
            $scope.Lymphatic = "";
            $scope.Muscular = "";
            $scope.Nervous = "";
            $scope.Reproductive = "";
            $scope.Respiratory = "";
            $scope.Skeletal = "";
            $scope.Urinary = "";
        }
        if (title_highlightbody == "Integumentary") {
            $scope.CurrentStructure = "";
            $scope.Cardiovascular = "";
            $scope.Digestive = "";
            $scope.Endocrine = "";
            $scope.Immune = "";
            $scope.Integumentary = "active";
            $scope.Lymphatic = "";
            $scope.Muscular = "";
            $scope.Nervous = "";
            $scope.Reproductive = "";
            $scope.Respiratory = "";
            $scope.Skeletal = "";
            $scope.Urinary = "";
        }
        if (title_highlightbody == "Lymphatic") {
            $scope.CurrentStructure = "";
            $scope.Cardiovascular = "";
            $scope.Digestive = "";
            $scope.Endocrine = "";
            $scope.Immune = "";
            $scope.Integumentary = "";
            $scope.Lymphatic = "active";
            $scope.Muscular = "";
            $scope.Nervous = "";
            $scope.Reproductive = "";
            $scope.Respiratory = "";
            $scope.Skeletal = "";
            $scope.Urinary = "";
        }
        if (title_highlightbody == "Muscular") {
            $scope.CurrentStructure = "";
            $scope.Cardiovascular = "";
            $scope.Digestive = "";
            $scope.Endocrine = "";
            $scope.Immune = "";
            $scope.Integumentary = "";
            $scope.Lymphatic = "";
            $scope.Muscular = "active";
            $scope.Nervous = "";
            $scope.Reproductive = "";
            $scope.Respiratory = "";
            $scope.Skeletal = "";
            $scope.Urinary = "";
        }
        if (title_highlightbody == "Nervous") {
            $scope.CurrentStructure = "";
            $scope.Cardiovascular = "";
            $scope.Digestive = "";
            $scope.Endocrine = "";
            $scope.Immune = "";
            $scope.Integumentary = "";
            $scope.Lymphatic = "";
            $scope.Muscular = "";
            $scope.Nervous = "active";
            $scope.Reproductive = "";
            $scope.Respiratory = "";
            $scope.Skeletal = "";
            $scope.Urinary = "";
        }
        if (title_highlightbody == "Reproductive") {
            $scope.CurrentStructure = "";
            $scope.Cardiovascular = "";
            $scope.Digestive = "";
            $scope.Endocrine = "";
            $scope.Immune = "";
            $scope.Integumentary = "";
            $scope.Lymphatic = "";
            $scope.Muscular = "";
            $scope.Nervous = "";
            $scope.Reproductive = "active";
            $scope.Respiratory = "";
            $scope.Skeletal = "";
            $scope.Urinary = "";
        }
        if (title_highlightbody == "Respiratory") {
            $scope.CurrentStructure = "";
            $scope.Cardiovascular = "";
            $scope.Digestive = "";
            $scope.Endocrine = "";
            $scope.Immune = "";
            $scope.Integumentary = "";
            $scope.Lymphatic = "";
            $scope.Muscular = "";
            $scope.Nervous = "";
            $scope.Reproductive = "";
            $scope.Respiratory = "active";
            $scope.Skeletal = "";
            $scope.Urinary = "";
        }
        if (title_highlightbody == "Skeletal") {
            $scope.CurrentStructure = "";
            $scope.Cardiovascular = "";
            $scope.Digestive = "";
            $scope.Endocrine = "";
            $scope.Immune = "";
            $scope.Integumentary = "";
            $scope.Lymphatic = "";
            $scope.Muscular = "";
            $scope.Nervous = "";
            $scope.Reproductive = "";
            $scope.Respiratory = "";
            $scope.Skeletal = "active";
            $scope.Urinary = "";
        }
        if (title_highlightbody == "Urinary") {
            $scope.CurrentStructure = "";
            $scope.Cardiovascular = "";
            $scope.Digestive = "";
            $scope.Endocrine = "";
            $scope.Immune = "";
            $scope.Integumentary = "";
            $scope.Lymphatic = "";
            $scope.Muscular = "";
            $scope.Nervous = "";
            $scope.Reproductive = "";
            $scope.Respiratory = "";
            $scope.Skeletal = "";
            $scope.Urinary = "active";
        }

        //Highlight button should be active
        $("#btnHighLight").addClass("btn-primary");
        $("#btnHighLight").removeClass("btn-black");

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

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

        if ($("#btnExtract").hasClass("btn-primary")) {
            $("#btnExtract").removeClass("btn-primary");
        }

        if ($("#btnNormalMode").hasClass("btn-primary")) {
            $("#btnNormalMode").removeClass("btn-primary");
        }

    }

    $scope.ShowSearch = function () {

        console.log('ShowSearch is called');
        //this check is for log only because we are writing length so need to check if its not null or undefined
        if ($scope.VocabTermTxt != null || $scope.VocabTermTxt != undefined) 
          console.log('$scope.VocabTermTxt.length= ' + $scope.VocabTermTxt.length)

        $timeout(function () {
            if (($scope.VocabTermTxt!=null|| $scope.VocabTermTxt!=undefined) && ($scope.VocabTermTxt.length > 0)) {
                $scope.IsSearchVisible = true;
                document.getElementById("termlistfilter").style.display = "block";
            }
            else {
                $scope.loadSearchDataForBodyView();
                if ($scope.VocabTermTxt.length > 0) {
                    $scope.ShowSearch();
                }
            }
        }, 500);

        //$scope.IsSearchVisible = true;

        //document.getElementById("termlistfilter").style.display = "block";
    }

    $scope.HideSearch = function () {
        if ($("#backdrop").is(":hover") || $("#termlistfilter").is(":hover") || $("#typedtermname").is(":focus")) {
            $scope.IsSearchVisible = true;
            document.getElementById("termlistfilter").style.display = "block";
        }
        else {
            //1. persist term in DAsearch but hide ul/li
            if ($("#btnDATermSearch").is(":hover")) {
                $scope.IsSearchVisible = false;
            }
            else {
                //2.hide ul/li and clear DA search
                $scope.IsSearchVisible = false;
                document.getElementById("termlistfilter").style.display = "none";
                $scope.searchFilter = "";
            }
        }

    }

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


        $rootScope.isLoading = true;

        $('#spinner').css('visibility', 'visible');
        //1.
        $scope.searchFilter = event.currentTarget.innerHTML;

        //2.
        $scope.HighlightBodyOnListManagerSelection(event.currentTarget.id);

        $scope.IsSearchVisible = false;
        $rootScope.isNormalMode = false;

        //Highlight only Highlight button

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

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

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

        if ($("#btnExtract").hasClass("btn-primary")) {
            $("#btnExtract").removeClass("btn-primary");
        }

        if ($("#btnNormalMode").hasClass("btn-primary")) {
            $("#btnNormalMode").removeClass("btn-primary");
        }

    }

    //Function to set the vertical and horizontal scroll position of CanvasDiv as per the Navigator
    $scope.ScrollCanvasDiv = function () {

        var x = $("#draggable").position();
        var can = $('#canvasDiv');
        var canheight = can[0].scrollHeight;
        var canwidth = can[0].scrollWidth;

        var scrolly = (x.top / ($('#containment-wrapper').height())) * (canheight);

        var scrollx = (x.left / $('#containment-wrapper').width()) * (canwidth);

        $("#canvasDiv").scrollTop(scrolly);
        $("#canvasDiv").scrollLeft(scrollx);

        if (($rootScope.isHighlightBodyByBodySystem == true) && ($scope.systemMatchedTermList != null || $scope.systemMatchedTermList != undefined)) {
            $timeout(function () { $scope.HighlightBodyByTermList(systemMatchedTermList) }, 100);
        }

    }

    //list manager
    $scope.$on('listManagerEvent', function (event, data) {
  
        if ($rootScope.islistManagerEventAlredayDispachted == true) {

            $('#spinner').css('visibility', 'visible');
            console.log('listManagerEvent');
            var systemList = $rootScope.CommonData.DACommonData.BodySystems.Item;

            var optionsLength = $('#bodySystems option').length;//.children('option').length;
            console.log('optionsLength= ' + optionsLength)
            if (optionsLength>0)
             $('#bodySystems').empty();


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

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

                var $elem = $('<option  id="' + value._BodySystemId + '"  title="' + value._Name + '" >' + value._Name + '</option>').appendTo('#bodySystems');
                $compile($elem)($scope);
            })



            $('#viewName').empty();
            var currentView = localStorage.getItem("currentViewTitle");
            var viewNmeHtml = '<option>' + currentView + '</option>'
            $('#viewName').append(viewNmeHtml);

            var len = $rootScope.openModules.length;
            var openViewLen = $rootScope.openViews.length;

            var currentOpenModuleId = $rootScope.openModules[len - 1].ModuleId;

            //confirm that this is DA module which is last open
            if (currentOpenModuleId == 1) {


                $('#termList').empty();
                $scope.loadListManger();
                $rootScope.islistManagerEventAlredayDispachted = false;
            }

        }
    


    });

    $scope.loadListManger = function () {


        var vocabTermTxt = [];

        angular.forEach($rootScope.TermNumberData.TermData.Term, function (value1, key1) {

            angular.forEach($rootScope.VocabTermData.VocabTerms.Term, function (value2, key2) {


                if (value1._ActualTermNumber === value2._ActualTermNumber) {
                    vocabTermTxt.push(

                         {

                             "_ActualTermNumber": value2._ActualTermNumber,
                             "_TermText": value2._TermText,
                             "_cdId": value2._cdId

                         }

                          );

                }

            })



        })



        $scope.VocabTermTxt = new jinqJs()
                               .from(vocabTermTxt)
                               .distinct('_TermText', '_ActualTermNumber')
                               .orderBy([{ field: '_TermText', sort: 'asc' }])
                               .select('_ActualTermNumber', '_TermText', '_cdId');

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


            for (var j = 0; j < $scope.VocabTermTxt.length; j++) {
                var $el = $('<option title ="' + $scope.VocabTermTxt[j]._TermText + '" id=' + $scope.VocabTermTxt[j]._ActualTermNumber + '>' + $scope.VocabTermTxt[j]._TermText + '</option>').appendTo('#termList')
                $compile($el)($scope);

            }

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

            var termsTotal = '<span class="pull-left marginTop5">' + $scope.VocabTermTxt.length + ' Structures</span>';
            $("#totalTerms").empty();
            $('#totalTerms').append(termsTotal);

          

        }
    }


    $scope.HighlightBodyOnListManagerSelection = function (actualTermNumber, isTermListOptionClicked) {
        //$rootScope.SelectedTermList = $("#termList").find("option[id=" + actualTermNumber + "]").val();
      
        $rootScope.slectedActualTermNumber = actualTermNumber;

        if (isTermListOptionClicked == true) {
            $scope.searchFilter = '';
        }

        $scope.CloseTransparencyBox();

        console.log('inside HighlightBodyOnListManagerSelection actualTermNumber= ' + actualTermNumber)
        //	Terms search in the Search list should be disable in the List Manager and Vice-Versa.
        if ($rootScope.prevId == actualTermNumber) {

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

            $rootScope.isLoading = true;

            $('#spinner').css('visibility', 'visible');


            $rootScope.prevId = actualTermNumber;
          //  $("#termList").find("option").attr('selected', false);
            $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
            $("#termList").find("option[id=" + actualTermNumber + "]").css({ "background-color": "#3399FF", "color": "#ffffff" });
            $("div#backdrop #termlistfilter li").find("a").css({ "background-color": "#ffffff", "color": "#000000" });
            $("div#backdrop #termlistfilter li").find("a[id=" + actualTermNumber + "]").css({ "background-color": "#3399FF", "color": "#ffffff" });
            
            $scope.terminateCurrentlyRunningWPs();
            //debugger
            $rootScope.isListManagerSelected = true;
            //---
            if ($rootScope.isListManagerSelected == true) {
                $("#btnHighLight").addClass("btn-primary");
                $("#btnHighLight").removeClass("btn-black");
                if (!$("#btnNormalMode").hasClass("btn-black")) {
                    $("#btnNormalMode").addClass("btn-black");
                }

                if ($("#btnNormalMode").hasClass("btn-primary")) {
                    $("#btnNormalMode").removeClass("btn-primary");
                }
            }
            //---
          
            $rootScope.isHighlightBodyByBodySystem = false;

            //1.
            $rootScope.actualTermNumber = actualTermNumber;//attributes[0].value;
            console.log(' $scope.actualTermNumber insde HighlightBodyOnListManagerSelection= ' + $rootScope.actualTermNumber)

            //2.

            $scope.setLayerNumberAndHighlightByTermList();


        }
       

    }

    $scope.setLayerNumberAndHighlightByTermList = function () {
        console.log(' $scope.actualTermNumber insde setLayerNumberAndHighlightByTermList= ' + $rootScope.actualTermNumber)

        $scope.TermList = $scope.getTermNumberList($rootScope.actualTermNumber);

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

            var internalLayerNumberList = [];
            for (var i = 0; i < $scope.TermList.length; i++) {
                var layerNumber = $scope.TermList[i]._InternalLayerNumber

                internalLayerNumberList[i] = parseInt(layerNumber);
            }

            internalLayerNumberList.sort(function (a, b) { return a - b })
            var internalLayerNumber = internalLayerNumberList[0]//.replace('00', '');

            //3. get layer number
            if (internalLayerNumber >= DA[0].SKIN_START_INTERNAL_LAYER && internalLayerNumber <= DA[0].SKIN_END_INTERNAL_LAYER) {

                internalLayerNumber = DA[0].SKIN_DEFAULT_INTERNAL_LAYER;
            }

            var layerNumber;
            var matchedLayerNumber = new jinqJs()
                                            .from($rootScope.BodyLayerData.Layers.DataLayer)
                                             .where("_lni == " + internalLayerNumber)
                                            .select('_LayerNumber');

            if (matchedLayerNumber == null || matchedLayerNumber.length == 0) {
                layerNumber = 0;
            }
            else {
                layerNumber = matchedLayerNumber[0]._LayerNumber
            }

            if (layerNumber == 0) {
                layerNumber = $rootScope.totalLayers;
            }
            else {
                layerNumber = parseInt(layerNumber) - 1;
            }

            $scope.layerNumber = layerNumber;

            //4.get scroll position
            if ($rootScope.actualTermNumber != DA[0].SKIN_TERM_ID) {

                $scope.termCoordinate = $scope.getTermCoordinate($rootScope.actualTermNumber);

            }

            //5.
            $scope.matchdedDataOnLayer = new jinqJs()
                                    .from($rootScope.TermNumberData.TermData.Term)
                                    .where('_InternalLayerNumber == ' + internalLayerNumber)
                                    .select();

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

                //6.
                var matchedDataonActualTerm = new jinqJs()
                                         .from($scope.matchdedDataOnLayer)
                                         .where('_ActualTermNumber == ' + $scope.actualTermNumber)
                                         .select('_TermNumber');

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

                    var termNo = matchedDataonActualTerm[0]._TermNumber.toString();

                    //7.get termList
                    $scope.fullTermlist = [];
                    $scope.AllTerms = [];

                    if (termNo != DA[0].figLeafTermId) {

                        $scope.getChildTermList(termNo);
                        // $timeout(function () { $scope.getSiblings(termNo) }, 50);
                        $scope.getSiblings(termNo)
                    }

                }
            }
        }
        $('#txtlayerNumber').val((parseInt($scope.layerNumber)));
        $('#layerChangeSlider').slider("option", "value", parseInt($rootScope.totalLayers) - parseInt($scope.layerNumber));

        //8.remove current layer canavses
       // $scope.flushCanvas();
        //remove existing body view
        var canDiv = document.getElementById('canvasDiv');
        var canDivChildCount = canDiv.childElementCount;
        if (canDivChildCount > 0) {
            canDiv.innerHTML = '';
        }

        //9.
        $timeout(function () {
            if(($rootScope.isGenderChnage == true && $rootScope.isHighLight==true) || ($rootScope.isViewChange == true && $rootScope.isHighLight==true)){

            }
            else{
                $rootScope.isHighLight = false;
            }
            $('#sppeachBubble').css('display', 'none');
            $("#dot").css("display", "none");
            //DA > Annotation's Line should not displayed.
            $("#bord").css("display", "none");

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

            //redraw body of respective layer
            $scope.CalculateImageCordinates($rootScope.viewOrientationId)
        }, 500);

    }

    $scope.getChildTermList = function (termNo) {


        var data = new jinqJs()
                         .from($scope.matchdedDataOnLayer)
                          .where("_ParentTermNumber == " + termNo)
                         .select();

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


            var data2 = new jinqJs()
                        .from(data)
                        .where("_TermNumber != " + termNo)
                        .select();


            var k;
            if ((data2 != null || data2 != undefined) && (data2.length > 0)) {
                for (var i = 0; i < data2.length; i++) {

                    var serachTerm = data2[i]._TermNumber;
                    var isFound = jQuery.inArray(serachTerm, $scope.fullTermlist)
                    if (isFound == -1) {
                        $scope.fullTermlist.push(serachTerm);
                        $scope.AllTerms.push({ '_TermNumber': serachTerm })
                        $scope.getChildTermList(serachTerm);
                    }
                }
            }
        }
    }

    $scope.getSiblings = function (termNo) {

        var data = new jinqJs()
                   .from($scope.matchdedDataOnLayer)
                   .where("_TermNumber == " + termNo)
                   .select();

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

            var termNo = data[0]._ActualTermNumber;

            var data2 = new jinqJs()
                       .from($scope.matchdedDataOnLayer)
                       .where("_ActualTermNumber == " + termNo)
                       .select();

            if ((data2 != null || data2 != undefined) && (data2.length > 0)) {
                for (var i = 0; i < data2.length; i++) {
                    $scope.fullTermlist.push(data2[i]._TermNumber);
                    $scope.AllTerms.push({ '_TermNumber': data2[i]._TermNumber })
                    $scope.getChildTermList(data2[i]._TermNumber);
                }
            }
        }
    }

    $scope.getTermCoordinate = function (actualTermNumber) {

        return {
            x: $scope.TermList[0]._CenterX,
            y: $scope.TermList[0]._CenterY
        }
    }


    $scope.aligneCanvasWithTerm = function () {
        console.log('aligneCanvasWithTerm')
       // debugger

        var newX = parseInt($scope.scaleValue($scope.termCoordinate.x, $scope.zoomInOut, DA[0].ZOOM_TERM_DATA));
        var newY = parseInt($scope.scaleValue($scope.termCoordinate.y, $scope.zoomInOut, DA[0].ZOOM_TERM_DATA));
        
        var canvasX = parseInt(document.getElementById('canvasDiv').offsetLeft);
        var canvasY = parseInt(document.getElementById('canvasDiv').offsetTop);
        var canvasHeight = $('#canvasDiv').height();
        var canvasWidth = $('#canvasDiv').width();

        var canvasBottom = canvasY + canvasHeight;
        var canvasRight = canvasX + canvasWidth

        if (newX < canvasX || newX > canvasRight || newY < canvasY || newY > canvasBottom) {

            newX = newX - canvasWidth / 2;
            newY = newY - canvasHeight / 2;

            var maxVScrollPos = $('#canvasDiv')[0].scrollHeight;
            var maxHScrollPos = $('#canvasDiv')[0].scrollWidth;

            if (newY < maxVScrollPos) {
                newY = newY;
            }
            else {
                newY = maxVScrollPos;
            }

            if (newX < maxHScrollPos) {
                newX = newX;
            }
            else {
                newX = maxHScrollPos;
            }
            $('#canvasDiv').scrollLeft(newX);
            $('#canvasDiv').scrollTop(newY);
            $scope.isLoading = false;
            $('#spinner').css('visibility', 'hidden');
        }

        $rootScope.CanvasDivTopPosition = $("#canvasDiv").scrollTop();
        $rootScope.CanvasDivLeftPosition = $("#canvasDiv").scrollLeft();

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

    }


    $scope.scaleValue = function (nValue, nNewZoom, nExistingZoom) {

        var iReturnValue = nValue * nNewZoom;
        return Math.round(iReturnValue / nExistingZoom);
    }

    $rootScope.refreshTermListOnSystemSelection = function (bodysystemId) {
        $rootScope.selectedBodySystemId = bodysystemId;
        $rootScope.selectedBodySystemName = $('#bodySystems option[id="' + bodysystemId + '"]').val();
        $('#termList').empty();
        // $('#termList').innerHTML = '';

        if (bodysystemId == 0) {
            $scope.loadListManger();
        }
        else {
            var bodySystemDataPath = '~/../content/data/json/da/body-views/' + localStorage.getItem("currentBodyViewId") + '/da_dat_body_system_term_' + localStorage.getItem("currentBodyViewId") + '.json';
            DataService.getJson(bodySystemDataPath)
           .then(
            function (result) {

                $rootScope.BodySystemData = result;
                var systemMatchedTermList = new jinqJs()
                                       .from($rootScope.BodySystemData.BodySystem.BodySystemTerm)
                                       .where('_SystemNumber == ' + bodysystemId)
                                       .select();
                if (systemMatchedTermList != null || systemMatchedTermList != undefined) {

                    $scope.refreshTerms(systemMatchedTermList);
                }
            },
            function (error) {
                console.log(error.statusText)
            }
            )

        }
    }

    $scope.refreshTerms = function (termList) {

        var path = '~/../content/data/json/da/vocab/english/cm_dat_vocabterm_1.json'

        $http({ method: 'GET', url: '~/../content/data/json/da/vocab/english/cm_dat_vocabterm_1.json' }).success(function (data) {

            var VocabTermData = data;

            var vocabTermTxt = [];

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

                var actulaTermNumber = new jinqJs()
                                   .from($rootScope.TermNumberData.TermData.Term)
                                   .where('_TermNumber == ' + termList[i]._TermNumber)
                                   .select('_ActualTermNumber');

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


                    angular.forEach(VocabTermData.VocabTerms.Term, function (value2, key2) {


                        if (actulaTermNumber[0]._ActualTermNumber == value2._ActualTermNumber) {
                            vocabTermTxt.push(

                                 {

                                     "_ActualTermNumber": value2._ActualTermNumber,

                                     "_TermText": value2._TermText,

                                     "_cdId": value2._cdId

                                 }

                                  );

                        }

                    })

                }
            }

            $scope.VocabTermTxt = new jinqJs()
                                   .from(vocabTermTxt)
                                   .distinct('_TermText', '_ActualTermNumber')
                                   .orderBy([{ field: '_TermText', sort: 'asc' }])
                                   .select('_ActualTermNumber', '_TermText', '_cdId');

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


                for (var j = 0; j < $scope.VocabTermTxt.length; j++) {
                    var $el = $('<option id=' + $scope.VocabTermTxt[j]._ActualTermNumber + '>' + $scope.VocabTermTxt[j]._TermText + '</option>').appendTo('#termList')
                    $compile($el)($scope);
                }

                var termsTotal = '<span class="pull-left marginTop5">' + $scope.VocabTermTxt.length + ' Structures</span>';
                $("#totalTerms").empty();
                //$('#totalTerms').innerHTML = '';

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

           .error(function (data, status, headers, config) {
               console.log(data);

           });

    }
  
    $scope.LayerChangeBasedOnKeyPressed = function (e) {
        //	Dissectible Anatomy > Should not display blank page if no layer is selected.
      
      
        if (e.keyCode == 13) {
         
            if ($("#txtlayerNumber").val() == '')
            {
               
                $("#txtlayerNumber").val($rootScope.PreviouslayerNumbr);
           }
            else
            {
                $rootScope.PreviouslayerNumbr = $("#txtlayerNumber").val();
                $scope.LayerChange();
            }
            
         
        }

        // 'x' button is displaying inside the input box in IE browser.
        if (e.keyCode == 38) {


            var layerInputVal = $("#txtlayerNumber").val();
            if (layerInputVal != $rootScope.totalLayers) {
                var layerInputValInc = parseInt(layerInputVal) + 1;
                $scope.layerNumber = parseInt(layerInputValInc);
                $("#txtlayerNumber").val($scope.layerNumber);
                $rootScope.PreviouslayerNumbr = $scope.layerNumber;
            }


        }

        // 'x' button is displaying inside the input box in IE browser.
        if (e.keyCode == 40) {
            var layerInputVal = $("#txtlayerNumber").val();
            if (layerInputVal > 0) {
                var layerInputValDec = parseInt(layerInputVal) - 1;
                $scope.layerNumber = parseInt(layerInputValDec);
                $("#txtlayerNumber").val($scope.layerNumber);
                $rootScope.PreviouslayerNumbr = $scope.layerNumber;
            }
        }

    }


    $scope.LayerValueChangeBasedOnKeyUp = function (e) {
  
        var keyUplayerNumber = parseInt($("#txtlayerNumber").val());
    
        if (isNaN(keyUplayerNumber))
        {
            
        }
        else {

            if (keyUplayerNumber > $rootScope.totalLayers) {

                $("#txtlayerNumber").val($rootScope.totalLayers);
                $scope.layerNumber = parseInt($rootScope.totalLayers);
              
            }
            else {

                $("#txtlayerNumber").val(keyUplayerNumber);
                $scope.layerNumber = parseInt(keyUplayerNumber);
               

            }

        }


    }


    $rootScope.mouseMoveToolTip = function (toolTipTopPosition, toolTipLeftPosition, toolTipWidth, toolTipText) {

        $("#cursor-block").addClass("custom-tooltip-annotation-toolbar");
        $(".custom-tooltip-annotation-toolbar").css({ "display": "block", "top": toolTipTopPosition + "px", "width": toolTipWidth + "px", "left": toolTipLeftPosition + "px" });
        $("#cursor-block").html(toolTipText);
    }

    $rootScope.mouseOutToolTip = function () {

        $(".custom-tooltip-annotation-toolbar").css('display', 'none');
        $("#cursor-block").removeClass("custom-tooltip-annotation-toolbar");
        $("#cursor-block").html();

    }

    $scope.OnSearchBtnClick = function (e) {

        if (typeof ($scope.searchFilter) !== "undefined" && ($scope.searchFilter !== null && $scope.searchFilter !== "")) {
            var EnteredDASearchTerm = [];
            EnteredDASearchTerm = new jinqJs()
                          .from($scope.VocabTermTxt)
                          .where('_TermText == ' + $scope.searchFilter)
                          .select('_ActualTermNumber', '_TermText', '_cdId');

            if (EnteredDASearchTerm.length > 0) {
                $scope.HighlightBodyOnListManagerSelection(EnteredDASearchTerm[0]._ActualTermNumber);

                $scope.IsSearchVisible = false;
                $rootScope.isNormalMode = false;

                //Highlight only Highlight button

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

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

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

                if ($("#btnExtract").hasClass("btn-primary")) {
                    $("#btnExtract").removeClass("btn-primary");
                }

                if ($("#btnNormalMode").hasClass("btn-primary")) {
                    $("#btnNormalMode").removeClass("btn-primary");
                }

                $('#typedtermname').val($scope.searchFilter);

            }
            else {
                // clear the text 
                $scope.ShowSearch();
            }

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

    $scope.resetSearchListView = function () {

        //Remove the list and then Repopulate it on change of $scope.searchFilter
        $('#searchListDiv').empty()
        // added the timeout to delay the compile of ul li
        $timeout(function () {
            var $e2 = $('<ul id="termlistfilter" class="form-control dropdown-menu" style="height:90px;width:100%;overflow-y:scroll;position:absolute;display:none;z-index:60001;"><li ng-repeat="item in VocabTermTxt| filter:{ _TermText: searchFilter}">' +
                                                   '<a id="{{item._ActualTermNumber}}" href="" onclick="selectTerm(event)">{{item._TermText}}</a>' +
                                              ' </li></ul>').appendTo('#searchListDiv')
        $compile($e2)($scope);
        }, 500);


    }


}]

);


function OnGenderChange(event) {

    console.log('gender chnaged is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.OnGenderChange(event);
    });
}

function OnViewChange(event) {
    console.log('OnViewChange chnaged is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.OnViewChange(event);
    });
}

function OnBodySystemSelection(event) {
    console.log('OnBodySystem chnaged is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.HighlightBodyByBodySystem(event);
    });
}

function enableShowHideStructureBox() {
    console.log('OnBodySystem chnaged is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.enableShowHideStructureBox();
    });
}

function OnSearch() {
    console.log('Show Search is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.ShowSearch();
    });
}
function selectTerm(event) {
    console.log('selectTerm is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.jumpToTerm(event);
    });
}
function HighlightBodyOnListManager(event) {
    console.log('HighlightBodyOnListManager is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.HighlightBodyOnListManagerSelection(event);
    });
}

function refreshTermListOnSystem(bodysystemId) {
    console.log('refreshTermListOnSystem is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.refreshTermListOnSystemSelection(bodysystemId);
    });
}

function OnEnableExtract()
{
    console.log('OnEnableExtract is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.enableExtract('true');
    });
}

function onTboxCreation()
{
    console.log('OnEnableExtract is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.createTransparencyBox('true');
    });
}

function onTboxClose()
{
    console.log('onTboxClose is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.CloseTransparencyBox();
    });
}

function OnEnableNormalMode()
{
    console.log('OnEnableNormalMode is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.enableNormalMode();
    });
}

function OnEnableHighlight() {
    console.log('OnEnableHighlight is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.enableHighlight();
    });
}

function OnIdentityClick() {
    console.log('OnIdentityClick is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.IdentityClick();
    });
}

function OnZoom()
{
    //Dissectible Anatomy > Extract and Annotations displays apart on the page after click on Zoom-in.
    $(".com").remove();
    $("#bord").remove();
    console.log('OnZoom is called outside ');
    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.enableZoom();
    });
}

function onListManagerTermSelection(id, isTermListOptionClicked) {

    var scope = angular.element(document.getElementById("daView")).scope();
    scope.$apply(function () {
        scope.HighlightBodyOnListManagerSelection(id, isTermListOptionClicked);
    });
    
}