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

    console.log('DAController initialized')
    $scope.genderId = "";
    $scope.BodyViewData;
    $scope.selectedGenderBodyViewData;
    $scope.imagePath = "";
    $scope.BodyRegionData;
    $scope.BodyRegionCordinatesData;
    $scope.isTransparencyActivated;
    $scope.BodyLayerData;
    $scope.VocabTermData;
    $scope.TermNumberData;
    $scope.bodyViewId = 0;
    $scope.bgartData;
    //view specific constants
    $scope.voId;
    $scope.layerNumber;
    $scope.daCounter = 1;
    $scope.bagartDetails;
    $scope.transNumber = 50;

    //for transarency scale
    $scope.TBDrawStartX;
    $scope.TBDrawStartY;

    $scope.isHighLight = false;
    $scope.coloredImageCanvasList = [];

    $scope.zoomInOut = 75;

    //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;
    $scope.showme = false;
    $scope.IsVisible = function () {
        $scope.scroll();

    }

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


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

        //    debugger;
        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();


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

            var userEthnicity = DA[0].ethnicity;
            var userModestysettings = DA[0].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;
            //   debugger;

            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) {
        //  debugger;
        $rootScope.currentBodyViewId = $event.currentTarget.id;
        $rootScope.ViewTitle = $event.currentTarget.textContent;

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

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


    }


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

        $rootScope.ClearIframe();

        //load body-views data
        $http({ method: 'GET', url: '~/../content/data/json/da/da_dat_contentlist.json' }).success(function (data) {

            $scope.BodyViewData = data;
            //load default body view list for male
            $scope.getDAViewList();

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


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

        $http({ method: 'GET', url: '~/../content/data/json/da_dat_tm_sg_1.json' }).success(function (data) {
            $scope.TermNumberData = data;

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


        //load vocabterm data
        $http({ method: 'GET', url: '~/../content/data/json/cm_dat_vocabterm_1.json' }).success(function (data) {
            $scope.VocabTermData = data;
        })
         .error(function (data, status, headers, config) {
             console.log(data);
         });

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


    //da-body-views functions

    $scope.openBodyView = function () {
        //debugger;
        $rootScope.isLoading = true;
        $scope.voId = localStorage.getItem("currentBodyViewId");;

        //load bodyRegion data
        var brViewdata = DataService.getJson('~/../content/data/json/da/da_dat_brview.json')
        brViewdata.then(
           function (result) {
               // debugger;
               $scope.BodyRegionData = result;
               $scope.isBodyRegionDataLoaded = true;
               //   alert('da_dat_brview= ' + result)

               var currentBodyViewId = localStorage.getItem("currentBodyViewId");
               var layerJsonPath = '';
               var bgArtJsonPath = '';
               var CommonViewId = 0;

               layerJsonPath = '~/../content/data/json/da/body-views/' + currentBodyViewId + '/da_dat_layer_' + currentBodyViewId + '.json';



               DataService.getAnotherJson(layerJsonPath)
              .then(
               function (result) {
                   //debugger;

                   $scope.BodyLayerData = result;
                   $scope.isBodylayerdataLoaded = true;

                   //load json for annotations
                   // $http({ method: 'GET', url: '~/../content/data/json/da_dat_tm_sg_1.json' }).success(function (data) {
                   $http({ method: 'GET', url: '~/../content/data/json/da/body-views/' + currentBodyViewId + '/da_dat_tm_sg_' + currentBodyViewId + '.json' }).success(function (data) {
                       $scope.TermNumberData = data;


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

                   var path = '~/../content/data/json/da/vocab/english/cm_dat_vocabterm_1.json';

                   //load vocabterm data
                   //$http({ method: 'GET', url: '~/../content/data/json/cm_dat_vocabterm_1.json' }).success(function (data) {
                   $http({ method: 'GET', url: path }).success(function (data) {

                       $scope.VocabTermData = data;
                   })
                  .error(function (data, status, headers, config) {
                      console.log(data);
                  });

                   var openViews;


                   // debugger;
                   if ($rootScope.openViews.length > 0) {
                       openViews = new jinqJs()
                          .from($rootScope.openViews)
                          .where("BodyViewId==" + currentBodyViewId)
                          .select();
                   }
                   var counter = 1;

                   // var tittle = $rootScope.ViewTitle;
                   var tittle = localStorage.getItem("currentViewTitleFromJson");

                   if (openViews != null && openViews.length > 0) {
                       angular.forEach(openViews, function (value, key) {

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

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


                   $.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 },

                   });



                   //   $rootScope.openViewsDA.push({ "ViewId": 1 });
                   $rootScope.currentSlug = 'da-body-views';

                   //hide scrollbar


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

                   var e1 = angular.element(document.getElementById("daBodyview"));
                   $timeout(function () { $compile(e1.contents())($scope) }, 250);
                   // $compile(e1.contents())($scope);

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

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

                   //  debugger
                   if ($scope.isBodylayerdataLoaded) {
                       $timeout(function () { $scope.LoadDefaultLayerImage() }, 350);
                   }
               },
             function (error) {
                 // handle errors here
                 console.log(' $scope.BodyLayerData= ' + error.statusText);
             }
         );
           },
           function (error) {
               // handle errors here
               console.log(' $scope.BodyRegionData = ' + error.statusText);
           }
        );

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

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

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


    })





    $scope.LoadDefaultLayerImage = function () {
        //  debugger;

        $scope.layerNumber = 0;
        $scope.skinTone = DA[0].ethnicity;

        $scope.viewOrientationId = $scope.voId;
        if ($scope.voId == 5) {
            $scope.viewOrientationId = 1;
        }
        else if ($scope.voId == 6) {
            $scope.viewOrientationId = 2;
        }
        else if ($scope.voId == 7) {
            $scope.viewOrientationId = 3;
        }
        else if ($scope.voId == 8) {
            $scope.viewOrientationId = 4;
        }
        else if ($scope.voId == 9) {
            $scope.viewOrientationId = 5;
        }
        else if ($scope.voId == 10) {
            $scope.viewOrientationId = 6;
        }
        else if ($scope.voId == 11) {
            $scope.viewOrientationId = 5;
        }
        else if ($scope.voId == 12) {
            $scope.viewOrientationId = 6;
        }

        // debugger;
        var bgArtJsonPath = '';

        bgArtJsonPath = '~/../content/data/json/da/da_dat_bgart.json';

        var bgartdata = DataService.getJson(bgArtJsonPath)
        bgartdata.then(
           function (result) {
               //debugger;
               $scope.bgartData = result;
               $scope.CalculateImageCordinates($scope.viewOrientationId);

           },
           function (error) {
               // handle errors here
               console.log(' $scope.bgartData = ' + error.statusText);
           });
    };


    //calculate coordinates for body region images
    $scope.CalculateImageCordinates = function (viewOrientationId) {

        //  debugger;

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

        $('#daBodyview').css('width', '100%');
        $('#canvasDiv').css('height', $('#daImagePanel').outerHeight() - 104)
        //$('#canvasDiv').css('width', $('#daImagePanel').outerWidth() - 100)
        $('#leftToolBar').css('height', $('#daImagePanel').outerHeight())



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


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

        // if ($scope.voId == 9 || $scope.voId == 11) {

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

        $scope.ColoredImageSRC = [];

        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;
                //   debugger;

                $scope.ColoredImageSRC.push(
                                        {
                                            "bodyRegionId": value._BodyRegionId, "SRC": src,
                                            "Height": rectangle.scaledHeight,
                                            "Width": rectangle.scaledWidth,
                                            "x": rectangle.scaledX,
                                            "y": rectangle.scaledY,
                                            "haveMirror": 'true'
                                        }
                                       );


                //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;
                $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": '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);

                $scope.ColoredImageSRC.push(
                                     {
                                         "bodyRegionId": value._BodyRegionId, "SRC": src,
                                         "Height": rectangle.scaledHeight,
                                         "Width": rectangle.scaledWidth,
                                         "x": rectangle.scaledX,
                                         "y": rectangle.scaledY,
                                         "haveMirror": 'false'
                                     }
                                    );


                //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 {
                //Draw body region which don't have mirror image


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

                $scope.ColoredImageSRC.push(
                                       {
                                           "bodyRegionId": value._BodyRegionId, "SRC": src,
                                           "Height": rectangle.scaledHeight,
                                           "Width": rectangle.scaledWidth,
                                           "x": rectangle.scaledX,
                                           "y": rectangle.scaledY,
                                           "haveMirror": 'false'
                                       }
                                      );

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

                    var dtlOfBr = new jinqJs()
                                  .from($scope.bagartDetails)
                                  .where('_BodyRegionId == ' + value._BodyRegionId)
                                  .select();


                    // debugger

                    var dtlOfGender = new jinqJs()
                              .from(dtlOfBr)
                              .where('_Gender == ' + gender)
                              .select();
                    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.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.figLaefX = filtereddata[0]._X;
                            //$scope.figLaefY = filtereddata[0]._Y;

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


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

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

                        }
                    }

                }


            }


        });

        if ((DA[0].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 = $scope.BodyRegionCordinatesData;
        //debugger;
        $('#layerChangeSlider').slider("option", "value", parseInt($scope.totalLayers) - parseInt($scope.layerNumber));
        //  $('#spinner').css('visibility', 'hidden');
        $rootScope.isLoading = false;

    }

    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.match('.png')) {
            var mciImage = src.replace('.png', '_mci.png')
        }
        else {
            var mciImage = src.replace('.jpg', '_mci.png')
        }
        return mciImage;

    }


    $scope.GetImageSource = function (bodyRegionId) {
        // debugger;
        var dataLength = $scope.BodyLayerData.Layers.DataLayer.length;

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

        $scope.one = 1;

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


        var SelectedLayerData = [];
        SelectedLayerData = $scope.BodyLayerData.Layers.DataLayer[dataLength - $scope.userInput - 1];
        if ($scope.layerNumber == 0) {
            for (var z = 0; z <= SelectedLayerData.BodyRegion.length; z++) {

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

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

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

        else {
            //  debugger;
            //below 4 bodyviews have only single body region
            if ($scope.voId == 9 || $scope.voId == 11 || $scope.voId == 10 || $scope.voId == 12) {
                var bodyRegion = SelectedLayerData.BodyRegion._BodyRegionId;

                return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $scope.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;
                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/" + $scope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName;
                                               

                    }
                }
            }
        }
    }

    $scope.GetBackgroundImgSource = function (bodyRegionId) {
        // debugger;

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

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

        //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/" + $scope.voId + "/layers/0/" + bodyRegionId + "/" + $scope.skinTone + "/" + $scope.bagartDetailsOnSktn[z]._ImageId;
                }
            }
        }
        else {
            return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $scope.voId + "/layers/0/" + bodyRegionId + "/" + $scope.skinTone + "/" + $scope.bagartDetailsOnSktn[0]._ImageId;

        }
    }


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

        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';
            FlipedImgCanvas.style.visibility = 'visible'

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

            //get mouse coordinate of mirror image click
            var mousePos = $scope.getMousePos(evt);
            //alert(mousePos.x + ',' + mousePos.y);

            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 canvasContextForRGB = 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(canvasContextForRGB.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);

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




            var pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - parseInt(canvasContextForRGB.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);


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

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

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

                $scope.createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)

            }
            else
                $scope.createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)



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


        };

        document.getElementById('canvasDiv').appendChild(FlipedImgCanvas);


    }

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

        // debugger;
        var imgCanvas = document.createElement('canvas');
        // imgCanvas.style.backgroundColor = 'red';
        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;
            imgCanvas.style.visibility = 'visible'

            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 ($scope.voId == 11 && bodyRegionId == 6) {
                imgCanvas.style.zIndex = "500";
            }
        }
        imgCanvas.addEventListener('click', function (evt) {



            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 canvasContextForRGB = 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;

            //debugger;
            var RGBColor = $scope.GetRGBColor(canvasContextForRGB, actulalX, actualY, x, y);
            var annotationText;

            if (maskCanvasId.match('modestyImg') && RGBColor != '000000') {
                RGBColor = DA[0].figLeafTermId;
                annotationText = $scope.GetAnnotationBasedOnActualTermNo(RGBColor);
            }
            else if (maskCanvasId.match('modestyImg') && RGBColor == '000000') {
                //if ($scope.voId == 11) {
                //    maskCanvasId = 'imageCanvas6_mci';
                //    x = $('#imageCanvas6_mci').left;
                //    y = $('#imageCanvas6_mci').top;
                //}
                //else {
                bodyRegionId = maskCanvasId.slice(-1);
                maskCanvasId = 'imageCanvas' + bodyRegionId + '_mci';
                // }
                var maskCanvas = document.getElementById(maskCanvasId);
                var canvasContextForRGB = maskCanvas.getContext("2d");
                RGBColor = $scope.GetRGBColor(canvasContextForRGB, actulalX, actualY, x, y);
                annotationText = $scope.GetAnnotationText(parseInt(RGBColor));
            }
            else {
                RGBColor = $scope.GetRGBColor(canvasContextForRGB, actulalX, actualY, x, y);
                annotationText = $scope.GetAnnotationText(parseInt(RGBColor));

            }

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

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

                $scope.createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)

            }
            else
                $scope.createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)


        }, false);




        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 context = imgCanvas.getContext('2d');
        var img = new Image();
        img.onload = start;

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


        function start() {
            //  debugger;
            context.drawImage(img, 0, 0);
        };
        // $('#daLoaderLabel').css('visibility', 'visible')

        //  $rootScope.isLoading = true;

        document.getElementById('canvasDiv').appendChild(imgCanvas);

    }

    $scope.GetRGBColor = function (canvasContextForRGB, actulalX, actualY, x, y) {

        var pixelData = canvasContextForRGB.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) {
        //debugger;

        var annotationText;
        //0
        var figLeafTermNo = 5868; // to do declare constant for this

        if (parseInt(termNumber) != parseInt(figLeafTermNo)) {
            $scope.TermNumber = termNumber;
            $scope.matchedTermNoData = new jinqJs()
                   .from($scope.TermNumberData.TermData.Term)
                   .where('_TermNumber == ' + termNumber)
                   .select();
            //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);
                break;
            };

            //2.

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

    $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
        // debugger;

        var Annotation;
        $scope.ActualTermNo = actualTermNo;

        $scope.matchedActualTermData = new jinqJs()
               .from($scope.VocabTermData.VocabTerms.Term)
               .where('_ActualTermNumber == ' + actualTermNo)
               .select();
        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;
    }


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

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

        // debugger;
        //  $('#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';
            document.getElementById('canvasDiv').appendChild(tempCanvas);

            // //debugger;

            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 = $scope.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 {
            $scope.currentLayerNumber = parseInt($('#txtlayerNumber').val());

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

            $scope.CalculateImageCordinates($scope.viewOrientationId);

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

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

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

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

            $timeout(function () { $scope.highLightBody() }, 350);

        }

    }

    $scope.DisableProgressBar = function () {

        // alert('Disabled wait cursor is called');
        $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.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 (e) {
            $('#speechBubble').css('display', 'none');
        });

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


    };


    $scope.createTransparencyBox = function () {
        // debugger
        // alert('transparency clcked')



        $scope.isTransparencyActivated = true;
        //   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)

    }

    function mouseDownListener(e) {

        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 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
                //'background': 'transparent',
            });
            $selection.appendTo($container);
        }

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

    }

    function mouseMoveListener(e) {

        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) {
        // $selection.remove();
        // debugger;
       
        $scope.currentLayerNumber = parseInt($('#txtlayerNumber').val());
        $('.rectangle').remove();

        var currentMousePosition = $scope.getMousePos(e);


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

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


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



        //draw temp box to store the canvas data with original transparecy
        if (document.getElementById('tempCanvas') != null) {
            $('#tempCanvas').remove();
        }
        if (document.getElementById('tempCanvas') == null) {
            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);
        }


        var BodyRegionDictionary = $scope.BodyRegionCordinatesData;

        $scope.IncludedBodyRegions = [];
        ////debugger;
        $.each(BodyRegionDictionary, function (index, value) {
            //   alert(' $.each(BodyRegionDictionary1')
            var transparencyBoxHeight = parseInt(TransparencyBoxEndY) - parseInt($scope.TransparencyBoxStartY);
            var transparencyBoxWidth = parseInt(TransparencyEndX) - parseInt($scope.TransparencyBoxStartX);
            var transparencyBoxBottom = parseInt($scope.TransparencyBoxStartY) + parseInt(transparencyBoxHeight);
            var transparencyBoxRight = parseInt($scope.TransparencyBoxStartX) + parseInt(transparencyBoxWidth);
            //  alert(' $.each(BodyRegionDictionary2. transparencyBoxHeight: ' + transparencyBoxHeight + ',transparencyBoxBottom: ' + transparencyBoxBottom+', transparencyBoxRight: '+transparencyBoxRight)
            var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
            var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);



            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.visibility = 'hidden';
                document.getElementById('canvasDiv').appendChild(transparencyCanvas);
                $scope.transparencyChangeCounter = 0;

                $('#transparencyCanvas').resizable({ handles: "e,s,se,w,n,ne,nw,sw", stop: function (event, ui) { resizeCanvas(); }, 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", "600");

                // $('#transparencyScale').modal('show');

                //canvasDiv.removeEventListener('mouseup', arguments.callee);
                //canvasDiv.removeEventListener('mousedown', arguments.callee);
                //canvasDiv.removeEventListener('mousemove', arguments.callee);
            }
            if ($scope.TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && $scope.TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {

                //if ($scope.voId != "9") {
                //    if ($scope.voId != "11") {
                //        $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, TransparencyEndX, $scope.TransparencyBoxStartY, TransparencyBoxEndY, $scope, false, false);

                //    }

                //}

                //else {
                //    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);
                //    }
                //}
                if (($scope.voId == "9" || $scope.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);

                }
            }
        })

        // $('#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", "900")



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

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

        $('#btnTranparency').addClass('tButtonActive');
        //debugger;
        $('#txtlayerNumber').val((parseInt($scope.currentLayerNumber))+1);
    }

    $scope.loadTransparencyImage = function (bodyRegionId, Height, Width, X, Y, IsMirror, TransparencyBoxStartX, TransparencyEndX, TransparencyBoxStartY, TransparencyBoxEndY, scope, isLayerChanged, isTransparencyChanged) {
        // debugger;
        var scope1 = angular.element(document.getElementById("DAView")).scope();
        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 XforCopyImage = 0;
        var YforCopyImage = 0;
        var WidthforCopyImage = 0;
        var HeightforCopyImage = 0;
        var XforTransImage = 0;
        var WidthforTransImage = 0;
        var HeightforTransImage = 0;
        var YforTransImage = 0;
        var PreviousBodyRegionHeight = 0;
        var PreviousBodyRegionY;
        var PreviousBodyRegionWidth;
        var PreviousBodyRegionX;
        var previousBodyRegionId;
        var transparencyTempCanvas;


        //X ends outside and start outside of bodyregion
        if (TransparencyBoxStartX < X && TransparencyEndX > parseInt(X) + parseInt(Width)) {
            XforCopyImage = 0;
            WidthforCopyImage = Width;
            WidthforTransImage = Width;
            XforTransImage = parseInt(X) - (parseInt(TransparencyBoxStartX));
            //  alert('1')
        }
        else if (TransparencyBoxStartX < X && TransparencyEndX < parseInt(X) + parseInt(Width)) {

            XforCopyImage = 0;

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

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

            //  alert(' scope.WidthforCopyImage: ' + scope.WidthforCopyImage)
            XforTransImage = parseInt(X) - (parseInt(TransparencyBoxStartX));

            // alert('2')
        }
        else if (TransparencyBoxStartX > X && TransparencyEndX > parseInt(X) + parseInt(Width)) {
            // alert('TransparencyEndX: ' + TransparencyEndX + ', X: ' + X + ', Width: ' + Width + 'scope.TransparencyBoxStartX: ' + scope.TransparencyBoxStartX)

            XforCopyImage = parseInt(TransparencyBoxStartX) - parseInt(X);
            WidthforCopyImage = parseInt(X) + parseInt(Width) - parseInt(TransparencyBoxStartX);
            WidthforTransImage = parseInt(X) + parseInt(Width) - parseInt(TransparencyBoxStartX);
            XforTransImage = 0;
            //   alert('3')
        }
        else if (TransparencyBoxStartX > X && TransparencyEndX < parseInt(X) + parseInt(Width)) {
            //   alert('startX inside & endX inside')
            XforCopyImage = parseInt(TransparencyBoxStartX) - parseInt(X);//parseInt(X) + parseInt(Width) - parseInt(scope.TransparencyBoxStartX)// scope.TransparencyBoxStartX ;
            WidthforCopyImage = parseInt(TransparencyEndX) - parseInt(TransparencyBoxStartX);
            WidthforTransImage = parseInt(TransparencyEndX) - parseInt(TransparencyBoxStartX);
            XforTransImage = 0
            //   alert('4. TransparencyBoxStartX: ' + TransparencyBoxStartX + ',X: ' + parseInt(X) + ',TransparencyEndX: ' + TransparencyEndX + ',XforCopyImage: ' + XforCopyImage)
        }

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


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

            //   alert('start Y outside and end Y outside');

            YforCopyImage = 0;
            HeightforCopyImage = Height;

            HeightforTransImage = Height;
            //alert('Y ' + Y)
            YforTransImage = parseFloat(Y) - parseInt(TransparencyBoxStartY)//parseFloat(Y) - (24.4);
            //  alert('5')
        }
        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));

            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);
            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);
            YforTransImage = 0;
        }


        //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 ctx = document.getElementById('transparencyCanvas').getContext('2d');

            var imageDa = ctx.getImageData(XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage);

            // 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) {
                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);


        }
        else {

            //0. get current layer number
            if ($scope.isResized) {
                //do nothing
            }
            else if (isLayerChanged) {
               // debugger
                $scope.layerNumber = parseInt($('#txtlayerNumber').val());
            }
            else {
                var currentLayer = parseInt($('#txtlayerNumber').val());

                var tranparencyLayer = currentLayer + 1;
                $scope.layerNumber = tranparencyLayer;
            }

            //dedebugger;
            //1. get the image source
            var tranparencyImgSrc;

            tranparencyImgSrc = $scope.GetImageSource(bodyRegionId);
            var tranparencyMaskImgSrc = $scope.GetMaskImageSource(tranparencyImgSrc);
            // debugger;
            var oldCanvas;

            if (IsMirror == 'Yes') {
                oldCanvas = document.getElementById('transparencyTempCanvas_MR_' + bodyRegionId)
            }
            else {
                oldCanvas = document.getElementById('transparencyTempCanvas_' + bodyRegionId)

            }

            if (oldCanvas != null) {
                document.getElementById('canvasDiv').removeChild(oldCanvas);
            }

            //remove tempmask canvas
            var oldtempTransCanvasMask;
            if (IsMirror == 'Yes') {
                oldtempTransCanvasMask = document.getElementById('transparencyTempCanvasMask_MR_' + bodyRegionId + '_mci');
            }
            else {
                oldtempTransCanvasMask = document.getElementById('transparencyTempCanvasMask_' + bodyRegionId + '_mci');

            }
            if (oldtempTransCanvasMask != null) {
                document.getElementById('canvasDiv').removeChild(oldtempTransCanvasMask);
            }

            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 {
                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';
            //transparencyTempCanvas.style.visibility = 'visible';
            //  transparencyCanvas.style.zIndex = 4000;
            document.getElementById('canvasDiv').appendChild(transparencyTempCanvas);

            //create temp mask canvas
            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';
            //transparencyTempCanvas.style.visibility = 'visible';
            // transparencyCanvas.style.border = "black 1px solid";
            document.getElementById('canvasDiv').appendChild(transparencyTempcanavsMask);


            var tempImg = new Image();
            tempImg.src = tranparencyImgSrc;//"http://localhost/AIA/" + tranparencyImgSrc;


            tempImg.onload = function () {
                // debugger;
                var tempCtx = transparencyTempCanvas.getContext('2d');

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

                }
                // debugger;
                var tempCanvasID;

                if (IsMirror == 'Yes') {
                    tempCanvasID = 'transparencyTempCanvas_MR_' + bodyRegionId;
                }
                else {
                    tempCanvasID = 'transparencyTempCanvas_' + bodyRegionId;
                }


                // niki 3june
                //var txtTransparencyChange = document.getElementById("txtTransparencyChange");
                ////for first time, the transparency should be 50%
                //if ($scope.isTboxDrwan) {

                //    if (txtTransparencyChange != null)
                //        txtTransparencyChange.value = 50;

                //    $scope.isTboxDrwan = false;

                //}

                //check if transparency  is activated


                var transNumber = $scope.transNumber;//txtTransparencyChange.value;
                // debugger;
                //this changes the transparency when transparency is already activated(on scale the value is >0) and user resizes or chage the layer

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

                if (transNumber > 0) {
                    //   debugger;


                    //  tempCanvasID = 'transparencyTempCanvas_' + bodyRegionId;
                    var tempCtx = document.getElementById(tempCanvasID).getContext('2d');

                    //  var image = ctx.getImageData(0, 0, scope.transparencyCanvasWidth, scope.transparencyCanvasHeight);


                    //keep the original image on temp canavs to use it in changing transparency
                    // if (scope.isResized == true || scope.isLayerChanged) {
                    //debugger;

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

                    }

                    // get the image data values 

                    var imageData = imageD.data;
                    var length = imageData.length;

                    //change background of image from transparent to white
                    if ($scope.voId == 9 || $scope.voId == 11) {
                        for (var i = 3; i < length; i += 4) {
                            imageData[i] = '#FFFFFFFF';
                        }

                        tempCtx.putImageData(imageD, 0, 0);

                        var imageDWhite = tempCtx.getImageData(0, 0, Width, Height);
                        var imageDataWhite = imageDWhite.data;
                        var lengthW = imageDataWhite.length;
                        //
                        for (var i = 3; i < lengthW; i += 4) {
                            imageDataWhite[i] = ((255) * (parseInt(transNumber))) / 100;
                        }

                        // imageD.data = imageData;
                        // and put the imagedata back to the canvas
                        // debugger
                        tempCtx.putImageData(imageDWhite, 0, 0);
                    }
                    else {


                        // set every fourth value to 50
                        for (var i = 3; i < length; i += 4) {
                            imageData[i] = ((255) * (parseInt(transNumber))) / 100;
                        }

                        // imageD.data = imageData;
                        // and put the imagedata back to the canvas
                        // debugger
                        tempCtx.putImageData(imageD, 0, 0);
                    }


                }

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


                var TrtempCanvasID
                if (IsMirror == 'Yes') {
                    TrtempCanvasID = 'transparencyTempCanvas_MR_' + bodyRegionId;
                }
                else {
                    TrtempCanvasID = 'transparencyTempCanvas_' + bodyRegionId;
                }

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

                ctx.drawImage(tmpCanvasContext, XforCopyImage, YforCopyImage, WidthforCopyImage, HeightforCopyImage, XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage)


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

            }   //niki
            // }


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

                }


            }


            PreviousBodyRegionHeight = HeightforTransImage;
            PreviousBodyRegionY = YforTransImage;
            PreviousBodyRegionWidth = WidthforTransImage;
            PreviousBodyRegionX = XforTransImage;
            previousBodyRegionId = bodyRegionId;

          //  $scope.layerNumber = parseInt($scope.layerNumber - 1);

        }

    }





    function resizeCanvas() {
        //debugger;
        // alert('reload')
        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();
        }


        $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";
            document.getElementById('canvasDiv').appendChild(transparencyCanvas);

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

        }
        $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 = $scope.BodyRegionCordinatesData;

        $scope.IncludedBodyRegions = [];
        //  $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) {


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

            }


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



        // });
        $(".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 = $scope.BodyRegionCordinatesData;
        $.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);

            //if non mirrored canvas does not exist for this irror Body region then draw non mirrored image to get annotation
            var clickedBodyRegionData = new jinqJs()
                                                .from(BodyRegionDictionary)
                                               .where('bodyRegionId == ' + clickedBodyRegion)
                                                .select();

            var nomMirroredBodyRegion = new jinqJs()
                                                .from(clickedBodyRegionData)
                                               .where('IsMirror == No')
                                                .select();


            //debugger;
            var oldMirrorMaskId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
            var oldMirrorMask = document.getElementById(oldMirrorMaskId);
            if (oldMirrorMask != null) {
                document.getElementById('canvasDiv').removeChild(oldMirrorMask);
            }
            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 tempMaskImg = new Image();
            var tranparencyMaskImgSrc = $scope.GetMaskImageSource(tranparencyImgSrc);
            tempMaskImg.onload = function () {
                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;

                var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
                var maskCanvastrans = document.getElementById(maskCanvasTransId);
                var maskCanvasContexttrans = maskCanvastrans.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(maskCanvasContexttrans.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);

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



                var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
                var maskCanvas = document.getElementById(clickedCanvasMaskId);
                var canvasContextForRGB = maskCanvas.getContext("2d");
                var imgX = Math.round(actulalX - parseInt(x.replace('px', '')));
                var imgY = Math.round(actualY - parseInt(y.replace('px', '')));
                pixelData = canvasContextForRGB.getImageData(imgX, imgY, 1, 1);


                //trans  layer image data
                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)

                }
                else
                    createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)

            }
            tempMaskImg.src = "http://localhost/AIAHtml/" + tranparencyMaskImgSrc;




        }
        else {

            var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
            var maskCanvas = document.getElementById(clickedCanvasMaskId);
            var canvasContextForRGB = maskCanvas.getContext("2d");

            //transparecncy canvas
            var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
            var maskCanvastrans = document.getElementById(maskCanvasTransId);
            var maskCanvasContexttrans = maskCanvastrans.getContext("2d");

            pixelData = canvasContextForRGB.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)

            }
            else
                $scope.createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)

        }
        //debugger;
    }
    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) {


        console.log('hkhkdfhkhi' + pixelData.data[0])
        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);


        var BodyRegionDictionary = $scope.BodyRegionCordinatesData;

        $scope.IncludedBodyRegions = [];
        var counter = 0;
        $.each(BodyRegionDictionary, function (index, value) {

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



            if (tBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && tBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {

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

            }

        });



        //  });
    }

    $scope.CloseTransparencyBox = function () {
        var tBox = document.getElementById('transparencyCanvas');
        //  debugger;
        // alert('mouseDown is called');
        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($scope.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].remove();
            }

            $('.ui-wrapper').remove();

            //$("canvas[name*='transparencyTempCanvas']").nextUntil($("canvas[name*='transparencyTempCanvas']"))
            //.remove();
        }
        $('#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.OnIdentityClick = function () {

        // $('#btnIdentity').addClass('btn-primary');

        if ($scope.isTransparencyActivated == true) {

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

        if ($scope.zoomInOut == 25) {
            $scope.zoomInOut = 75;
            
        }
        else {
            $scope.zoomInOut = 25;
        }

        $scope.CalculateImageCordinates($scope.viewOrientationId);

    }

    $scope.flushCanvas = function () {
        angular.forEach($scope.ColoredImageSRC, function (value, key) {


            var id;
            if (value.haveMirror == 'true') {
                id = 'imageCanvas' + value.bodyRegionId + '_MR';
            }
            else {
                id = 'imageCanvas' + value.bodyRegionId;
            }

            var canvas = document.getElementById(id);
            document.getElementById('canvasDiv').removeChild(canvas);
        });
    }

    $scope.enableHighlight = function () {
        $scope.isHighLight = true;

        // alert('enableHighlight is called');

        $scope.highLightBody();
    }

    $scope.highLightBody = function () {

        // alert('highlight body is called');
        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 context_gray = imageCanvas.getContext('2d');

            var dataURL = imageCanvas.toDataURL();


            var img = new Image();

            img.src = dataURL;


            var DAData = new BitmapData(img.width, img.height);
            DAData.draw(img);
            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 zeroPoint = new Point();
            var grayScale = new ColorMatrixFilter(matrix);
            DAData.applyFilter(DAData, DAData.rect, zeroPoint, grayScale);

            context_gray.putImageData(DAData.data, 0, 0)

        });

    }

    $scope.OnGenderChange = function (event) {
       
        //use $scope.correspondingBodyViewIds for getting correspnding viewid
        //  alert('gender changed= ' + event.currentTarget.attributes[1].value)

        //   $(".enableGender li").removeClass("active");
        //   $(event.currentTarget.attributes[2].value).parent().addClass("active");

      var viewname=   localStorage.getItem("currentViewTitle")
        var currentBodyViewId = $scope.correspondingBodyViewIds[$scope.voId];

        if ((event.currentTarget.attributes[1].value == 'Male') && (localStorage.getItem("genderId") == 'Female')) {

            localStorage.setItem("genderId", 'Male');


            $scope.loadSelectedBodyView(currentBodyViewId);

            $('#daImagePanel')[0].childNodes[0].childNodes[0].innerHTML = localStorage.getItem("currentViewTitle").replace('Female','Male');

        }

        else if ((event.currentTarget.attributes[1].value == 'Female') && (localStorage.getItem("genderId") == 'Male')) {

            localStorage.setItem("genderId", 'Female');


            $scope.loadSelectedBodyView(currentBodyViewId)
            $('#daImagePanel')[0].childNodes[0].childNodes[0].innerHTML = localStorage.getItem("currentViewTitle").replace('Male','Female');



        }

    }



    $scope.loadSelectedBodyView = function (currentBodyViewId) {

        $scope.voId = currentBodyViewId;

        var layerJsonPath = '~/../content/data/json/da/body-views/' + currentBodyViewId + '/da_dat_layer_' + currentBodyViewId + '.json';

        DataService.getJson(layerJsonPath)
        .then(
         function (result) {
             //debugger;

             $scope.BodyLayerData = result;
             $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) {
                 $scope.TermNumberData = result;

                 var canDiv = document.getElementById('canvasDiv');
                 var canDivChildCount = canDiv.childElementCount;
                 if (canDivChildCount > 0) {
                     canDiv.innerHTML = '';
                 }
                 $scope.CalculateImageCordinates($scope.viewOrientationId);
             },
              function (error) {
                  // handle errors here
                  console.log(' $scope.TermNumberData= ' + error.statusText);
              }
             )
         },

        function (error) {
            // handle errors here
            console.log(' $scope.BodyLayerData= ' + error.statusText);
        }
    );
    }

    $scope.OnViewChange = function (event) {
        $scope.layerNumber = 0;
      //  debugger;
        var selectedViewId = $scope.bodyViews[event.currentTarget.attributes[1].value];
        $scope.viewOrientationId = selectedViewId;
        if (localStorage.getItem("genderId") == 'Male') {
            if ($scope.voId != selectedViewId) {
                if (selectedViewId == 5) {
                    $scope.voId = 9;
                }
                else if (selectedViewId == 6) {
                    $scope.voId = 10;
                }
                else
                    $scope.voId = selectedViewId;

                $scope.loadSelectedBodyView($scope.voId);
            };
          
            //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 ($scope.voId != selectedViewId) {
                $scope.voId = selectedViewId;
                $scope.loadSelectedBodyView($scope.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.attributes[1].value;
        localStorage.setItem("currentViewTitle", localStorage.getItem("genderId") + " " + event.currentTarget.attributes[1].value);
    }


    //Annotation tool event lsitener
    $scope.$on('annotationToolEvent', function (event, data) {
        console.log('annotation window opend');
        //draw new canvas on canavs div to draw/paint on that
        //debugger;
        if (document.getElementById('paintCanvas') == null) {
            var paintCanvas = document.createElement('canvas');
            paintCanvas.id = 'paintCanvas';
            paintCanvas.height = parseInt(document.getElementById('canvasDiv').style.height);// - 5;
            paintCanvas.style.width = '2277px';//(this is width of canavses of arm+thorax+arm+40)
            paintCanvas.style.position = "absolute";
            paintCanvas.style.left = 0 + 'px';
            paintCanvas.style.top = 0 + 'px';
            // paintCanvas.className = 'col-lg-12';
             paintCanvas.style.backgroundColor = 'yellow';
            paintCanvas.style.zIndex = '1100'
            //this is to get annoatation while annotation window is open
            paintCanvas.addEventListener('click', OnPaintCanvasClick);

            paintCanvas.addEventListener('mousedown', OnPaintCanvasMouseDown, false)
            paintCanvas.addEventListener('mouseup', OnPaintCanvasMouseUp, false)

            document.getElementById('canvasDiv').appendChild(paintCanvas);

            $scope.paintCanvasContext = document.getElementById('paintCanvas').getContext('2d');
        }
    });

    function OnPaintCanvasClick(event) {
        if ($rootScope.isIdetifyClicked == true) {
            //  alert('show annotation')
        }


    }

    $scope.mousePressed = false;
    $scope.lastX; $scope.lastY;
    var ctx;

    function OnPaintCanvasMouseDown(event) {
       
        if ($rootScope.isDrawingToolSelected == true) {


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

            //$rootScope.PaintCanvasMousedownListener($scope.paintCanvasContext,mousePos.x, mousePos.y)
            var mousePos = $scope.getMousePos(event)
            $scope.mousePressed = true;
            $rootScope.Draw(mousePos.x, mousePos.y, false, $scope.paintCanvasContext);

            if ($rootScope.isAnnotationWindowClose) {
                document.getElementById('paintCanvas').removeEventListener('mousemove', OnPaintCanvasMouseMove, false);

            }
            else
            document.getElementById('paintCanvas').addEventListener('mousemove', OnPaintCanvasMouseMove, false)

        }
        //ctx.moveTo(50, 50);
    }

    function OnPaintCanvasMouseUp(event) {
        if ($rootScope.isDrawingToolSelected == true) {
            //$rootScope.paint = false;
            $scope.mousePressed = false;
            //// $rootScope.Redraw();
            document.getElementById('paintCanvas').removeEventListener('mousemove', OnPaintCanvasMouseMove, false);

        }


    }

    function OnPaintCanvasMouseMove(event) {

        if ($rootScope.isDrawingToolSelected == true) {
            console.log('moving');
            //var mousePos = $scope.getMousePos(event);
            //var canvasDiv = document.getElementById('canvasDiv');
            //var verticalScrollPosition = canvasDiv.scrollTop;
            //var horizontlScrollPosition = canvasDiv.scrollLeft;

            //$rootScope.PaintCanvasMousemoveListener($scope.paintCanvasContext, mousePos.x, mousePos.y)

            if ($scope.mousePressed) {
                var mousePos = $scope.getMousePos(event)

                $rootScope.Draw(mousePos.x, mousePos.y, true,$scope.paintCanvasContext);
            }
        }
    }




//    $scope.Draw=function(x, y, isDown) {
//    if (isDown) {
//        $scope.paintCanvasContext.beginPath();
//        $scope.paintCanvasContext.strokeStyle = '#000000';
//        $scope.paintCanvasContext.lineWidth = 1//$('#selWidth').val();
//        $scope.paintCanvasContext.lineJoin = "round";
//        $scope.paintCanvasContext.moveTo($scope.lastX, $scope.lastY);
//        $scope.paintCanvasContext.lineTo(x, y);
//        $scope.paintCanvasContext.closePath();
//        $scope.paintCanvasContext.stroke();
//    }
//    $scope.lastX = x; $scope.lastY = y;
//}



}]



);