'use strict';

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

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


    //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) {
            $scope.genderId = "Male";
        }
        else {
            $scope.genderId = $event.currentTarget.id;
        }
        if ($event != null) {
            if ($event.currentTarget.id == "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_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')


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


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



        var openViews;
        var currentBodyViewId = localStorage.getItem("currentBodyViewId");
        // 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 },

        });





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

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


    })

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

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

        $scope.voId = localStorage.getItem("currentBodyViewId");;
        //  Load Layer data
        $http({ method: 'GET', url: '~/../content/data/json/da/bodyView/'+$scope.voId+'/da_dat_layer_'+$scope.voId+'.json' }).success(function (data) {
            //  debugger
            $scope.BodyLayerData = data;
            console.log($scope.BodyLayerData);

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

        //  debugger;

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

        $timeout(function () { $scope.CalculateImageCordinates($scope.voId); }, 250);


    };


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

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

        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

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

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

                //2.Draw 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
        $('#daLoaderLabel').css('visibility', 'hidden')
        $('#canvasDiv').css('overflow', 'scroll')
        $('#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) {
        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 {
            for (var z = 0; z <= SelectedLayerData.BodyRegion.length; z++) {
               // alert('bd length: ' + SelectedLayerData.BodyRegion.length);
                var bodyRegion = SelectedLayerData.BodyRegion[z]._BodyRegionId;
                if (bodyRegion == bodyRegionId) {
                    return "content/images/DA/BodyViews/" + $scope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName;
                }
            }
        }
    }


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

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

            context.drawImage(img, 0, 0);
        };
        $('#daLoaderLabel').css('visibility', 'visible')
        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')
        var canDiv = document.getElementById('canvasDiv');
        var canDivChildCount = canDiv.childElementCount;
        if (canDivChildCount > 0) {
            canDiv.innerHTML = '';
        }

        $scope.CalculateImageCordinates($scope.voId);


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

    }

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

    $('layerChangeSlider').slider().on('slideStop', function (ev) {
        alert('slide')
        var newVal = $('.span2').data('slider').getValue();
        if (originalVal != newVal) {
            alert('Value Changed!');
        }
    });


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



}]



);