'use strict';

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

    $scope.genderId = "";
    $scope.BodyViewData;
    $scope.selectedGenderBodyViewData;
    $scope.imagePath = "";
    $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.genderId = "";
    $scope.BodyViewData;
    $scope.selectedGenderBodyViewData;
    $scope.imagePath = "";
    $scope.BodyRegionData;
    $scope.BodyRegionCordinatesData;
    $scope.isTransparencyActivated;
    $scope.BodyLayerData;
    $scope.VocabTermData;
    $scope.TermNumberData;
    $scope.bodyViewId = 0;
    //view specific constants
    $scope.voId;
    $scope.layerNumber;
    $scope.daCounter = 1;

    $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/BodyViews/" + 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 bodyView 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-view 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;
               //get layer data for body view
               //if (currentBodyViewId == 12) {
               //     CommonViewId = 10;
               //    layerJsonPath = '~/../content/data/json/da/bodyView/' + CommonViewId + '/da_dat_layer_' + CommonViewId + '.json';
               //}
               //else if (currentBodyViewId == 11)
               //{
               //     CommonViewId = 9;
               //    layerJsonPath = '~/../content/data/json/da/bodyView/' + CommonViewId + '/da_dat_layer_' + CommonViewId + '.json';
               //}
               //else
               //{
                   layerJsonPath = '~/../content/data/json/da/bodyView/' + 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/bodyView/' + 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);
                    });

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



                   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.BodyView == 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',
                       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-view';

                   //hide scrollbar


                   $rootScope.openViews.push(
                             {
                                 "module": $rootScope.currentActiveModuleTitle, "BodyView": 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 = '';

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


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

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

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

                   // debugger;

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

                    //1.Get image source
                    if (value._IsPrimary == 'N') {
                        var src = $scope.GetBackgroundImgSource(value._BodyRegionId);
                        $scope.imageSource = src;
                    }
                    else {
                        var src = $scope.GetImageSource(value._BodyRegionId);
                        $scope.imageSource = src;
                    }
                    //2.Draw body region which don't have mirror image
                    $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N');

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

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

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

                }

        
        });

        //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')
        $rootScope.isLoading = false;

        $('#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));

    }

    function scaleRectangle(x, y, height, width, mirrorValue) {
        var nzoom = 75;
        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;

        $('#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/BodyViews/" + $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/BodyViews/" + $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) {
                        //if ($scope.voId == 12) {
                        //    return "content/images/DA/BodyViews/10/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName;
                        //}
                        //else {
                            return "content/images/DA/BodyViews/" + $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/BodyViews/" + $scope.voId + "/layers/0/" + bodyRegionId + "/" + $scope.skinTone + "/" + $scope.bagartDetailsOnSktn[z]._ImageId;
                }
            }
        }
        else {
            return "content/images/DA/BodyViews/" + $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 ($('#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;
        console.log("img.src: " + img.src);
        console.log("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'

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


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


            var canvasId = context.canvas.getAttribute('id');

            var 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// - 135;// + leftToolBarWidth;
            var actualY = mousePos.y + verticalScrollPosition //- 135; //+ tomenuBarheight + titleBarheight + searchComboheight;



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


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

            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;
        console.log("img.src: " + img.src);
        console.log("src: " + src);



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

        $rootScope.isLoading = true;

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

    }

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

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


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

        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)

    }

    //called on jspanel close
    $scope.openParent = function () {
        // debugger;
        var openViews = $rootScope.openViews;
        if (openViews.length > 0) {
            $rootScope.openViews.splice(openViews.length - 1);
        }
        if (openViews.length > 0) {
            var lastOpenMoudle = $rootScope.openViews[openViews.length - 1];
        }
        $('#daImagePanel').remove();
        $location.url('/da-view-list');
    }

    //called on jsanel minimize
    $scope.setState = function (state, title) {
        //debugger;


        var alreadyOpenThisView = new jinqJs()
               .from($rootScope.openViews)
               .where("BodyView == " + title)
               .select();
        var k = 0;
        if (alreadyOpenThisView != null) {
            for (var i = 0; i < $rootScope.openViews.length; i++) {
                k++;
                if ($rootScope.openViews[i].BodyView == title) {
                    $rootScope.openViews.splice((k - 1), 1);

                    $rootScope.openViews.push(
                {
                    "module": $rootScope.currentActiveModuleTitle, "BodyView": title, "state": state, "BodyViewId": $rootScope.currentBodyViewId,
                    "slug": $rootScope.currentSlug
                }
               );
                }
            }
        }
        if (state == 'max') {
            $('#daBodyview').css('width', '100%')
        }
    }

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

        $('#canvasDiv').css('cursor', 'pointer');
        $('<div id="speechBubble" class="BubbleDiv" style="display:visible; top:' + y + 'px; left:' + x + 'px;"> <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.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;"> <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'
        })
    };



}]



);