AIA.controller("CIController", ["$scope", "$window", "$rootScope", "$compile", "$http", "$log", "$location", "$timeout", "pages", "BodyRegions", "BodySystems", "ViewOrientations", "ImageTypes", "MedicalSpecialties", "DataService",
function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout, pages, BodyRegions, BodySystems, ViewOrientations, ImageTypes, MedicalSpecialties, DataService) {
    $rootScope.currentActiveModuleTitle = pages[3].name;
    $scope.showme = true;
    $scope.IllustrationData;
    $scope.CIAllBodyRegion = [];
    $scope.CIAllBodySystem = [];
    $scope.CIAllOrientation = [];
    $scope.CIAllImageType = [];
    $scope.CIAllSpeciality = [];
    $scope.searchCIListViewData = [];
    $scope.SelectedCIthumbImage = [];
    $scope.SelectedCIImage = [];
    $scope.SelectedCISummary = [];
    $scope.SelectedCIId = [];
    $scope.SelectedCITitle = [];
    $scope.selectedCIListViewData = [];
    $scope.filterstring = false;
    $scope.query = {
        selectedbodyregion: null,
        selectedbodysystem: null,
        selectedorientation: null,
        selectedimagetype: null,
        selectedspecialty: null,
    };

    $scope.$on('$viewContentLoaded', function (event) {
        // code that will be executed ... 
        // every time this view is loaded

        $scope.CIAllBodyRegion = BodyRegions;
        $scope.CIAllBodySystem = BodySystems;
        $scope.CIAllOrientation = ViewOrientations;
        $scope.CIAllImageType = ImageTypes;
        $scope.CIAllSpeciality = MedicalSpecialties;
        $scope.scroll();
        //push the details of open module in array   $rootScope.openModules
        $rootScope.openModules.push({ "ModuleId": 4 });

    });

    var promise = DataService.getJson('~/../content/data/json/ci/ci_dat_contentlist.json')
    promise.then(
              function (result) {
                  $scope.IllustrationData = result;
                  //$scope.selectedCIListViewData = $scope.IllustrationData.root.CIData;

                  $scope.selectedCIListViewData = new jinqJs()
                                                  .from($scope.IllustrationData.root.CIData)
                                                  .orderBy([{ field: '_Title', sort: 'asc' }])
                                                  .select();

                  $('#grid-view').empty();

                  angular.forEach($scope.selectedCIListViewData, function (value, key) {
                      $scope.imagePath = "~/../content/images/ci/thumbnails/" + value._ThumbnailImage;

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


                      $compile($el)($scope);

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

                  });

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

    $scope.IsVisible = function () {
        $scope.scroll();

    }

    $scope.showItem = function (id) {
       // console.log(id);
        $scope.hiderow = true;
        if ($scope.filterstring == false) {

            var SelectedCIthumbImage = [];
            SelectedCIthumbImage = new jinqJs()
                          .from($scope.selectedCIListViewData)
                          .where('_id = ' + id)
                          .select('_ThumbnailImage', '_Summary', '_id', '_Title');

            $scope.SelectedCIthumbImage = "~/../content/images/ci/thumbnails/" + SelectedCIthumbImage[0]._ThumbnailImage;
            $scope.SelectedCISummary = SelectedCIthumbImage[0]._Summary;
            $scope.SelectedCIId = SelectedCIthumbImage[0]._id;
            $scope.SelectedCITitle = SelectedCIthumbImage[0]._Title;

        }
        else {
            if ($scope.searchCIListViewData.length > 0) {

                var SelectedCIthumbImage = [];
                SelectedCIthumbImage = new jinqJs()
                              .from($scope.searchCIListViewData)
                              .where('_id = ' + id)
                              .select('_ThumbnailImage', '_Summary', '_id', '_Title');

                $scope.SelectedCIthumbImage = "~/../content/images/ci/thumbnails/" + SelectedCIthumbImage[0]._ThumbnailImage;
                $scope.SelectedCISummary = SelectedCIthumbImage[0]._Summary;
                $scope.SelectedCIId = SelectedCIthumbImage[0]._id;
                $scope.SelectedCITitle = SelectedCIthumbImage[0]._Title;

            }
        }
    };

    $scope.Reset = function (query) {

        //query.selectedbodyregion = "";
        //query.selectedbodysystem = "";
        //query.selectedorientation = "";
        //query.selectedimagetype = "";
        //query.selectedspecialty = "";
        query.selectedbodyregion = null;
        query.selectedbodysystem = null;
        query.selectedorientation = null;
        query.selectedimagetype = null;
        query.selectedspecialty = null;

        $scope.filterstring = false;
        while ($scope.searchCIListViewData.length) {
            $scope.searchCIListViewData.pop();
        }
        $('#grid-view').empty();

        angular.forEach($scope.selectedCIListViewData, function (value, key) {
            $scope.imagePath = "~/../content/images/ci/thumbnails/" + value._ThumbnailImage;

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


            $compile($el)($scope);

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

        });

    }

    $scope.ApplySearch = function (query) {

        $scope.filterstring = true;

        while ($scope.searchCIListViewData.length) {
            $scope.searchCIListViewData.pop();
        }

        $('#grid-view').empty();

        filtercount = 0;
        if (typeof (query.selectedbodyregion) !== "undefined" && query.selectedbodyregion !== null) {
            filtercount = filtercount + 1;
        }
        if (typeof (query.selectedbodysystem) !== "undefined" && query.selectedbodysystem !== null) {
            filtercount = filtercount + 1;
        }
        if (typeof (query.selectedorientation) !== "undefined" && query.selectedorientation !== null) {
            filtercount = filtercount + 1;
        }
        if (typeof (query.selectedimagetype) !== "undefined" && query.selectedimagetype !== null) {
            filtercount = filtercount + 1;
        }
        if (typeof (query.selectedspecialty) !== "undefined" && query.selectedspecialty !== null) {
            filtercount = filtercount + 1;
        }

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

            var selectimg = true;
            var count = 0;


            if (typeof (query.selectedbodyregion) !== "undefined" && query.selectedbodyregion !== null) {
                var posbodyregion = value._BodyRegion.indexOf((query.selectedbodyregion.trim()));
                if (posbodyregion > -1) {
                    selectimg = true;
                    count = count + 1;

                }
                else {
                    selectimg = false;
                    count = count - 1;
                }

            }

            if (typeof (query.selectedbodysystem) !== "undefined" && query.selectedbodysystem !== null) {
                var posbodysystem = value._BodySystem.indexOf(query.selectedbodysystem);
                if (posbodysystem > -1) {
                    count = count + 1;
                    selectimg = true;
                } else {
                    selectimg = false;
                    count = count - 1;
                }
            }

            if (typeof (query.selectedorientation) !== "undefined" && query.selectedorientation !== null) {
                var posorientation = value._ViewOrientation.indexOf(query.selectedorientation);
                if (posorientation > -1) {
                    count = count + 1;
                    selectimg = true;

                } else {
                    selectimg = false;
                    count = count - 1;
                }

            }

            if (typeof (query.selectedimagetype) !== "undefined" && query.selectedimagetype !== null) {
                var posimagetype = value._ImageType.indexOf(query.selectedimagetype);
                if (posimagetype > -1) {
                    count = count + 1;
                    selectimg = true;

                } else {
                    selectimg = false;
                    count = count - 1;
                }

            }

            if (typeof (query.selectedspecialty) !== "undefined" && query.selectedspecialty !== null) {
                var posspeciality = value._MedicalSpecialty.indexOf(query.selectedspecialty);
                if (posspeciality > -1) {
                    count = count + 1;
                    selectimg = true;
                } else {
                    selectimg = false;
                    count = count - 1;
                }

            }

            if (selectimg === true && count >= filtercount) {


                $scope.imagePath = "~/../content/images/ci/thumbnails/" + value._ThumbnailImage;

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


                $compile($el)($scope);

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


                $scope.searchCIListViewData.push(
                {
                    "_id": value._id,
                    "_ImageId": value._ImageId,
                    "_Title": value._Title,
                    "_contentImage": value._contentImage,
                    "_ThumbnailImage": value._ThumbnailImage,
                    "_BodySystem": value._BodySystem,
                    "_BodyRegion": value._BodyRegion,
                    "_ViewOrientation": value._ViewOrientation,
                    "_MedicalSpecialty": value._MedicalSpecialty,
                    "_ImageType": value._ImageType,
                    "_Summary": value._Summary

                });

            }


        });

        //Show Error Message in case of gridview if no data is found
        if ($scope.searchCIListViewData.length == 0) {

            var $el = $('<div class="col-sm-12" style="padding-left:25px;padding-top:10px;"><strong style="color:white">No illustration found for the selected search criteria!</strong></div>').appendTo('#grid-view');
            $compile($el)($scope);
        }
    }




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

   
    $scope.openView = function ($event) {

        $rootScope.CIAnotationIdentifyModeOff = true;
        $rootScope.currentBodyViewId = $event.currentTarget.id;
        if ($event.currentTarget.textContent !== null && typeof ($event.currentTarget.textContent) !== "undefined") {
            var CITitle = [];
            CITitle = new jinqJs()
                          .from($scope.selectedCIListViewData)
                          .where('_id = ' + $event.currentTarget.id)
                          .select('_Title');

           // console.log(CITitle);
          //  console.log($scope.selectedCIListViewData);

            $rootScope.ViewTitle = CITitle[0]._Title;
        }
        else {
            $rootScope.ViewTitle = $event.currentTarget.textContent;

        }
        

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

        var u = $location.url();
        $location.url('/clinical-illustrations-detail');

       // console.log($location.url('/clinical-illustrations-detail'));

    }

    $scope.openBodyView = function () {
       
        $rootScope.isLoading = true;
        $('#spinner').css('visibility', 'visible');
        $scope.voId = localStorage.getItem("currentBodyViewId");

        // alert($scope.voId);


        //once you get id in scope push detail in jspanel content
     
        var openViews;
        if ($rootScope.openViews.length > 0) {
            openViews = new jinqJs()
               .from($rootScope.openViews)
               .where("BodyViewId==" + $scope.voId)
               .select();
        }
        var counter = 1;
        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);

        }

        //alert(localStorage.getItem("currentViewTitle"));

        var promise = DataService.getJson('~/../content/data/json/ci/ci_dat_contentlist.json')
        promise.then(
                  function (result) {
                      $scope.CIllustrationData = result;
                      $scope.CIlistViewData = $scope.CIllustrationData.root.CIData;

                      var clickedCIImage = [];
                      clickedCIImage = new jinqJs()
                                    .from($scope.CIlistViewData)
                                    .where('_id == ' + $scope.voId)
                                    .select('_contentImage');

                      $scope.clickedCIImage = "~/../content/images/ci/images/" + clickedCIImage[0]._contentImage;

                      var clickedCISummary = [];
                      clickedCISummary = new jinqJs()
                                    .from($scope.CIlistViewData)
                                    .where('_id == ' + $scope.voId)
                                    .select('_Summary');

                      $scope.clickedCISummary = clickedCISummary[0]._Summary

                      if (clickedCIImage.length > 0 && clickedCISummary.length > 0) {

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

                          //$.jsPanel({
                          //    id: 'ciImagePanel',
                          //    selector: '.ciView',
                          //    theme: 'success',
                          //    currentController: 'CIController',
                          //    parentSlug: 'clinical-illustrations',
                          //    content: '<div class="row"><div class="col-sm-12 img-thumbnail" align="center">' +
                          //    '<img src="' + $scope.clickedCIImage + '" alt="" title="" style="width:100%;height:auto;" class="img-responsive "></div><div class="col-sm-12 well">' +
                          //    '<div id="sid"><p>' + $scope.clickedCISummary + '</p></div><button class="btn btn-primary pull-right">Text Off</button>'+
                          //    '<script>$(document).ready(function(){$("button").click(function(){$("#sid").toggle();if($.trim($(this).text()) === "Text Off"){$(this).text("Text On");}else{$(this).text("Text Off");}});});</script></div>' +
                          //    '</div>',
                          //    title: localStorage.getItem("currentViewTitle"),
                          //    position: {
                          //        top: 70,
                          //        left: 1,
                          //    },

                          $.jsPanel({
                              id: 'ciImagePanel',
                              selector: '.ciView',
                              theme: 'success',
                              currentController: 'CIController',
                              parentSlug: 'clinical-illustrations',
                              content: '<div class="row"><div style="align:left;width:100%;height:100%"><canvas id="canvas" ng-click="doClick($event)" width="1369" height="325" class="canvas-annotationStyle" style="position: absolute; background-color: transparent;z-index:1 "></canvas></div>  <canvas id="canvasPaint" ng-click="FreeStylePaint($event)"  width="1369" height="325" class="canvas-annotationStyle1" style="position: absolute;z-index:0;"></canvas>' +
                              '<div class="col-sm-12 img-thumbnail" align="center">' +
                              '<img src="' + $scope.clickedCIImage + '" alt="" title="" class="img-responsive "><div class="col-sm-12 well">' +
                              '<div align="left" id="sid"><p>' + $scope.clickedCISummary + '</p></div><button id="btnTxtOnOff" class="btn btn-primary pull-right">Text Off</button>' +
                              '<script>$(document).ready(function(){$("#btnTxtOnOff").click(function(){$("#sid").toggle();if($.trim($(this).text()) === "Text Off"){$(this).text("Text On");}else{$(this).text("Text Off");}});});</script></div>' +
                              '</div></div>',
                              //ajax: {
                              //    url: 'app/views/ci/ci-view-detail.html'
                              //},
                              title: localStorage.getItem("currentViewTitle"),
                              position: {
                                  top: 70,
                                  left: 1,
                              },

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

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

                          });

                          $rootScope.currentSlug = 'clinical-illustrations-detail';

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

                          //var e1 = angular.element(document.getElementById("CIView"));
                          //$timeout(function () {

                          //    //$compile(e1.contents())($scope)

                          //    var $el = $('<div class="row"><div class="col-sm-12 img-thumbnail" align="center">' +
                          //    '<img src="' + $scope.clickedCIImage + '" alt="" title="" " class="img-responsive "><div class="col-sm-12 well">' +
                          //    '<div id="sid"><p>' + $scope.clickedCISummary + '</p></div><button class="btn btn-primary pull-right">Text Off</button>' +
                          //    '<script>$(document).ready(function(){$("button").click(function(){$("#sid").toggle();if($.trim($(this).text()) === "Text Off"){$(this).text("Text On");}else{$(this).text("Text Off");}});});</script></div>' +
                          //    '</div></div>').appendTo('#ciView');

                          //    $compile($el)($scope);

                          //}, 250);
                          // $compile(e1.contents())($scope);

                          //$('#ciView').css("height", $(window).outerHeight() - 110);

                          //$('#ciView').css("width", $(window).outerWidth() - 10);

                      }


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

               );

       // console.log($rootScope.openViews);
        $('#CIView').css("height", $(window).outerHeight());

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

    }
    //khushbu
    $scope.$on('annotationToolEvent', function (event, data) {
        $("#canvas").css("display", "block");
        $("#canvasPaint").css("display", "block");
   
        $scope.doClick();
    //   $rootScope.FreeStylePaint();
    });


    $scope.clicked = true;
    $scope.offsetX1 = 0;
    $scope.offsetY1 = 0;
    $scope.x = 0;
    $scope.y = 0;
    $scope.doClick = function (event) {
      
        $scope.clicked = true;
        //  OnPaintCanvasMouseDown(event);
        canvas.addEventListener('mousedown', $scope.OnPaintCanvasMouseDown, false);
        canvas.addEventListener('mouseup', $scope.OnPaintCanvasMouseUp, false);
        //  alert("doclick");
    };

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

    $scope.OnPaintCanvasMouseDown = function (event) {
     //   alert("testing333");
        var canvasElement = document.getElementById("canvas");
        var ctx = canvasElement.getContext("2d");

        // var x = event.clientX;
        //   var y = event.clientY;
        $scope.offsetX1 = 0;
        $scope.offsetY1 = 0;
        $scope.offsetX1 = event.offsetX;
        $scope.offsetY1 = event.offsetY;

        ctx.clearRect(0, 0, 2277, 3248);
        $scope.clicked = true;
    }
    $rootScope.resetRectCI = 0;
    $rootScope.resetLineCI = 0;
    $rootScope.resetCircleCI = 0;
    $rootScope.resetArrowCI = 0;
    $rootScope.resetPinCI = 0;
    $rootScope.resetPinArcCI = 0;
    $rootScope.ObjectIndexCI = 0;
    $rootScope.Object1IndexCI = 0;
    $rootScope.Object2IndexCI = 0;
    $rootScope.resetTextCI = 0;
    $rootScope.resetTextSaveCI = 0;
    $rootScope.ObjectIndexSaveCI = 0;
    var arrayRect = {};


    var storeLine = '';
    $rootScope.canvasLayerNameCollection1CI = [];
    $scope.OnPaintCanvasMouseUp = function (event) {

        if (!$scope.clicked) {
            return;
        }
        $scope.clicked = false;
        $scope.x = 0;
        $scope.y = 0;
        $scope.x = parseInt(event.clientX - ($("#canvas").offset().left));
        $scope.y = parseInt(event.clientY - ($("#canvas").offset().top));

        var canvasElement = document.getElementById("canvas");
        var ctx = canvasElement.getContext("2d");

        var canvasElement1 = document.getElementById("canvasPaint");
        var ctx1 = canvasElement1.getContext("2d");

     
        switch ($rootScope.shapeType) {

            case "cursor":
                //  ctx.clearRect(0, 0, 2277, 3248);
                ctx.beginPath();
                ctx1.beginPath();


                break;

            case "Line":

                $rootScope.resetLineCI = $rootScope.ObjectIndexCI++;
                $('#canvas').addLayer({
                    name: 'Line_' + $rootScope.resetLineCI,
                    layer: true,
                    type: 'line',
                    draggable: true,
                    strokeStyle: $rootScope.shapestyleborderColor,
                    strokeWidth: $rootScope.shapestyleborderWidth,
                    rounded: true,
                    x1: $scope.offsetX1, y1: $scope.offsetY1,
                    x2: $scope.x, y2: $scope.y,

                    click: function (layer) {
                        $rootScope.canvasLayerNameCollectionCI = [];
                        $rootScope.canvasLayerNameCollectionCI.push(layer.name);
                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'arc',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 2,
                                radius: 3
                            }
                        }).drawLayers();


                    },
                    mouseout: function (layer) {
                        $rootScope.canvasLayerNameCollectionCI = [];
                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'arc',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 0,
                                radius: 0
                            }

                        }).drawLayers();

                    },
                    mouseover: function (layer) {


                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'arc',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 2,
                                radius: 3
                            }
                        }).drawLayers();

                    }

                }).drawLayers();
                $('.btnCursor').trigger('click');
                $(".btn-annotation").removeClass("activebtncolor");
                $('.btnCursor').addClass('activebtncolor');
                break;

            case "Rectangle":
                $rootScope.resetRectCI = $rootScope.ObjectIndexCI++;

                $('#canvas').addLayer({
                    layer: true,
                    name: 'Rect_' + $rootScope.resetRectCI,
                    fillStyle: $rootScope.shapestyleFillColor,
                    type: 'rectangle',
                    draggable: true,
                    strokeStyle: $rootScope.shapestyleborderColor,
                    opacity: $rootScope.shapestyleOpacity,
                    strokeWidth: $rootScope.shapestyleborderWidth,
                    x: $scope.offsetX1, y: $scope.offsetY1,
                    width: $scope.x - $scope.offsetX1,
                    height: $scope.y - $scope.offsetY1,

                    resizeFromCenter: false,


                    click: function (layer) {
                        $rootScope.canvasLayerNameCollectionCI = [];
                        $rootScope.canvasLayerNameCollectionCI.push(layer.name);
                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'rectangle',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 2,
                                width: 5, height: 5,
                                cornerRadius: 3
                            }
                        }).drawLayers();

                    },
                    mouseout: function (layer) {
                        $rootScope.canvasLayerNameCollectionCI = [];
                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'rectangle',
                                fillStyle: 'pink',
                                strokeStyle: 'yellow',
                                strokeWidth: 0,
                                width: 0, height: 0,
                                cornerRadius: 0
                            }

                        }).drawLayers();

                    },
                    mouseover: function (layer) {


                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'rectangle',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 2,
                                width: 5, height: 5,
                                cornerRadius: 3
                            }
                        }).drawLayers();

                    }
                }).drawLayers();



                $('.btnCursor').trigger('click');
                $(".btn-annotation").removeClass("activebtncolor");
                $('.btnCursor').addClass('activebtncolor');

                break;

            case "Circle":
                //   alert($rootScope.shapestyleborderWidth);
                $rootScope.resetCircleCI = $rootScope.ObjectIndexCI++;
                $('#canvas').addLayer({
                    layer: true,
                    name: 'Circle_' + $rootScope.resetCircleCI,
                    type: 'ellipse',
                    opacity: $rootScope.shapestyleOpacity,
                    draggable: true,
                    strokeStyle: $rootScope.shapestyleborderColor,
                    strokeWidth: $rootScope.shapestyleborderWidth,
                    fillStyle: $rootScope.shapestyleFillColor,
                    x: $scope.offsetX1, y: $scope.offsetY1,
                    width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2,
                    // Place a handle at each side and each corner
                    handlePlacement: 'both',



                    click: function (layer) {
                      //  alert($rootScope.shapestyleFillColor);
                        $rootScope.canvasLayerNameCollectionCI = [];
                        $rootScope.canvasLayerNameCollectionCI.push(layer.name);
                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'arc',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 2,
                                radius: 3
                            }
                        }).drawLayers();

                    },
                    mouseout: function (layer) {
                        $rootScope.canvasLayerNameCollectionCI = [];

                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'arc',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 0,
                                //    width: 0, height: 0,
                                radius: 0
                            }

                        }).drawLayers();

                    },
                    mouseover: function (layer) {


                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'arc',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 2,
                                //  width: 5, height: 5,
                                radius: 3
                            }
                        }).drawLayers();

                    }
                }).drawLayers();
                $('.btnCursor').trigger('click');
                $(".btn-annotation").removeClass("activebtncolor");
                $('.btnCursor').addClass('activebtncolor');
                break;
            case "Arrow":
                $rootScope.resetArrowCI = $rootScope.ObjectIndexCI++;

                $('#canvas').drawLine({
                    layer: true,
                    name: 'Arrow_' + $rootScope.resetArrowCI,
                    draggable: true,
                    strokeStyle: $rootScope.shapestyleborderColor,
                    strokeWidth: $rootScope.shapestyleborderWidth,
                    rounded: true,
                    startArrow: true,
                    arrowRadius: 7,
                    arrowAngle: 90,
                    x1: $scope.offsetX1, y1: $scope.offsetY1,
                    x2: $scope.x, y2: $scope.y,

                    click: function (layer) {
                        $rootScope.canvasLayerNameCollectionCI = [];
                        $rootScope.canvasLayerNameCollectionCI.push(layer.name);
                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'arc',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 2,
                                //  width: 5, height: 5,
                                radius: 3
                            }
                        }).drawLayers();
                        //  $("#canvas").removeLayer(layer.name).drawLayers();

                    },
                    mouseout: function (layer) {
                        $rootScope.canvasLayerNameCollectionCI = [];
                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'arc',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 0,
                                //    width: 0, height: 0,
                                radius: 0
                            }

                        }).drawLayers();

                    },
                    mouseover: function (layer) {


                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'arc',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 2,
                                //  width: 5, height: 5,
                                radius: 3
                            }
                        }).drawLayers();

                    }

                });
                $('.btnCursor').trigger('click');
                $(".btn-annotation").removeClass("activebtncolor");
                $('.btnCursor').addClass('activebtncolor');

                //        $scope.resetRect += 1;
                break;
            case "Pin":

                $rootScope.resetPinCI = $rootScope.Object2IndexCI++;
                $rootScope.resetPinArc = $rootScope.Object1IndexCI++;
                var radial = $('canvas').createGradient({
                    x1: 50, y1: 50,
                    x2: 50, y2: 50,
                    r1: 10, r2: 30,
                    c1: 'rgba(100, 50, 0,0)',
                    c2: 'grey'
                });
                $('#canvas').drawLine({
                    draggable: true,
                    layer: true,
                    name: "Pin_" + $rootScope.resetPinCI,
                    groups: ["Pin_" + $rootScope.resetPinCI],
                    dragGroups: ["Pin_" + $rootScope.resetPinCI],
                    strokeStyle: 'black',
                    strokeWidth: 2,
                    x1: $scope.offsetX1, y1: $scope.offsetY1,
                    x2: $scope.x, y2: $scope.y,

                    click: function (layer) {

                        $rootScope.shapeTypePinCI = "Pin";
                        $rootScope.canvasLayerNameCollectionCI = [];
                        var pinLine_layer = layer.name;
                        var pinLine_layer_split = pinLine_layer.split("_");
                        var pinArcName = "ArcPin_";
                        var pinResult = pinArcName.concat(pinLine_layer_split[1]);

                        $rootScope.canvasLayerNameCollectionCI.push({ pinName: layer.name, ArcName: pinResult });

                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'arc',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 2,
                                //  width: 5, height: 5,
                                radius: 3
                            }
                        }).drawLayers();


                    },
                    mouseout: function (layer) {

                        $rootScope.canvasLayerNameCollectioCI = [];
                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'arc',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 0,
                                //    width: 0, height: 0,
                                radius: 0
                            }

                        }).drawLayers();

                    },
                    mouseover: function (layer) {


                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'arc',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 2,
                                //  width: 5, height: 5,
                                radius: 3
                            }
                        }).drawLayers();

                    }
                }).drawArc({
                    draggable: true,
                    name: "ArcPin_" + $rootScope.resetPinArcCI,
                    //  name: "Pin_" + $rootScope.resetPinCI,
                    layer: true,
                    groups: ["Pin_" + $rootScope.resetPinCI],
                    dragGroups: ["Pin_" + $rootScope.resetPinCI],
                    strokeStyle: 'grey',
                    strokeWidth: 2,
                    fillStyle: radial,
                    x: $scope.offsetX1, y: $scope.offsetY1,
                    radius: 5,
                    //handle: {
                    //    type: 'arc',
                    //    fillStyle: '#fff',
                    //    strokeStyle: '#c33',
                    //    strokeWidth: 2,
                    //    radius: 3
                    //},
                    add: function (layer) {

                        $rootScope.resetPinArcCI = layer.name;
                        // $scope.arr = [];


                    },

                }).drawLayers();
                $('.btnCursor').trigger('click');
                $(".btn-annotation").removeClass("activebtncolor");
                $('.btnCursor').addClass('activebtncolor');
                break;
            case "TextArea":
                $rootScope.IsTextAlreadySaveCI = false;
                $("#text_area").val('');
                // Draw text
                $rootScope.resetTextRectCI = $rootScope.ObjectIndexCI++;
                $rootScope.resetTextCI = $rootScope.ObjectIndexCI++;
                $('#canvas').drawText({
                    layer: true,
                    draggable: true,
                    //    opacity: $rootScope.shapestyleOpacity,
                    name: 'TextArea_' + $rootScope.resetTextCI,
                    groups: ['TextArea_' + $rootScope.resetTextCI],
                    dragGroups: ['TextArea_' + $rootScope.resetTextCI],
                    fillStyle: '#36c',
                    strokeWidth: 0,
                    x: $scope.offsetX1, y: $scope.offsetY1,
                    fontSize: '14pt',
                    align: "left",
                    fontFamily: 'Verdana, sans-serif',
                    text: ''

                })
                // Draw rect as wide as the text
                .drawRect({
                    layer: true,
                    name: "TextRect_" + $rootScope.resetTextRectCI,
                    dragGroups: ['shapes'],
                    opacity: $rootScope.shapestyleOpacity,
                    strokeStyle: $rootScope.shapestyleborderColor,
                    strokeWidth: $rootScope.shapestyleborderWidth,
                    fillStyle: $rootScope.shapestyleFillColor,
                    x: $scope.offsetX1, y: $scope.offsetY1,
                    width: $scope.x - $scope.offsetX1,
                    height: $scope.y - $scope.offsetY1,
                    click: function (layer) {

                        $rootScope.canvasLayerNameCollectionCI = [];
                        $rootScope.canvasLayerNameCollectionCI.push(layer.name);
                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'rectangle',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 2,
                                width: 5, height: 5,
                                cornerRadius: 3
                            }
                        }).drawLayers();

                    },
                    mouseout: function (layer) {
                        $rootScope.canvasLayerNameCollectionCI = [];
                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'rectangle',
                                fillStyle: 'pink',
                                strokeStyle: 'yellow',
                                strokeWidth: 0,
                                width: 0, height: 0,
                                cornerRadius: 0
                            }

                        }).drawLayers();

                    },
                    mouseover: function (layer) {

                        $('#canvas').setLayer(layer.name, {
                            handle: {
                                type: 'rectangle',
                                fillStyle: '#fff',
                                strokeStyle: '#c33',
                                strokeWidth: 2,
                                width: 5, height: 5,
                                cornerRadius: 3
                            }
                        }).drawLayers();

                    }
                });


                $("#annotationTextModal").modal("toggle");
                $('.btnCursor').trigger('click');
                $("#text_area").val('');
                $("#text_area").css({ " font-family": 'Verdana, sans-serif', "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
                $(".btn-annotation").removeClass("activebtncolor");
                $('.btnCursor').addClass('activebtncolor');
                break;

            case "DrawPolygon":

                break;

        }
        //}

    }

    //-- TextArea functionality of Annotation toolbar

    $rootScope.fontSizesCI;
    $rootScope.fontWeightCI;
    $rootScope.fontStyleCI;
    $rootScope.textAlignmtCI;
    $rootScope.fontColorCI;
    $rootScope.underlineTextCI;
    $rootScope.textAreaCI;
    $rootScope.fontFamilyCI;
    $rootScope.TextPropertyArrayCI = [];
    $rootScope.modifySavedTextCI = [];
    $rootScope.TextRectangleArrCI = [];
    $rootScope.rectDimensionCI = [];


    // will refactor this code later


    $rootScope.saveText = function () {
        // this part will work first time when save button will be clicked
        if ($rootScope.IsTextAlreadySaveCI == false) {
            // getting textarea style properties
            $rootScope.fontSizesCI = $("#text_area").css("font-size");
            $rootScope.fontWeightCI = $("#text_area").css("font-weight");
            $rootScope.fontStyleCI = $("#text_area").css("font-style");
            $rootScope.textAlignmtCI = $("#text_area").css("text-align");
            $rootScope.fontColorCI = $("#text_area").css("color");
            $rootScope.fontFamilyCI = $("#text_area").css("font-family");
            $rootScope.underlineTextCI = $("#text_area").css("text-decoration");
            $rootScope.textAreaCI = $("#text_area").val();

            // deleting previous text area

            $("#canvas").removeLayer('TextArea_' + $rootScope.resetTextCI).drawLayers();
            $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRectCI).drawLayers();

            // Text After Saving in Rectangle 
            $('#canvas').drawText({
                layer: true,
                draggable: true,
                name: 'TextArea_' + $rootScope.resetTextCI,
                groups: ['TextArea_' + $rootScope.resetTextCI],
                dragGroups: ['TextArea_' + $rootScope.resetTextCI],
                fillStyle: $rootScope.fontColorCI,
                fontStyle: $rootScope.fontWeightCI + " " + $rootScope.fontStyleCI,
                fontSize: $rootScope.fontSizesCI,
                fontFamily: $rootScope.fontFamilyCI,
                align: $rootScope.textAlignmtCI,
                strokeWidth: 0,
                text: $rootScope.textAreaCI,
                x: $scope.offsetX1, y: $scope.offsetY1,
                maxWidth: $scope.x - $scope.offsetX1,
                maxHeight: $scope.y - $scope.offsetY1,
                add: function (layer) {
                    $rootScope.TextPropertyArrayCI.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });
                    $rootScope.TextPropertyArrayCI.push({ Text1: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily, TextDecoration: $rootScope.underlineTextCI });
                }
            })
                  // Draw rectangle  
                  .drawRect({
                      name: 'TextArea1_' + $rootScope.resetTextCI,
                      layer: true,
                      draggable: true,
                      groups: ['TextArea_' + $rootScope.resetTextCI],
                      dragGroups: ['TextArea_' + $rootScope.resetTextCI],
                      opacity: $rootScope.shapestyleOpacity,
                      strokeStyle: $rootScope.shapestyleborderColor,
                      strokeWidth: $rootScope.shapestyleborderWidth,
                      x: $scope.offsetX1, y: $scope.offsetY1,
                      width: $scope.x - $scope.offsetX1,
                      height: $scope.y - $scope.offsetY1,
                      click: function (layer) {
                          $rootScope.shapeTypeTextCI = "textAreaRect";

                          var layerNameSplit = layer.name;
                          var splitedName = layerNameSplit.split("_");
                          var textValName = "TextArea_";
                          var concatinateResult = textValName.concat(splitedName[1]);
                          $rootScope.canvasLayerNameCollectionCI = [];
                          $rootScope.canvasLayerNameCollectionCI.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
                          $('#canvas').setLayer(layer.name, {
                              handle: {
                                  type: 'rectangle',
                                  fillStyle: '#fff',
                                  strokeStyle: '#c33',
                                  strokeWidth: 2,
                                  width: 5, height: 5,
                                  cornerRadius: 3
                              }
                          }).drawLayers();
                      },
                      dblclick: function (layer) {
                          $rootScope.IsTextAlreadySaveCI = true;
                          $rootScope.isTextAreaClosedButtonActiveCI = false;
                          var _rectLayerOnSave = layer.name;
                          var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
                          var TextAreaRectName = "TextArea_";
                          var TextAreaRectNameConcatenated = TextAreaRectName.concat(_rectLayerOnSaveSplit[1]);
                          $rootScope.modifySavedTextCI.push({ TextName: layer.name, RectText: TextAreaRectNameConcatenated });
                          $rootScope.rectDimensionCI.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
                          var _rectLayerOnSaveSplitInt;
                          //if (_rectLayerOnSaveSplit[1] >= 3)
                          //    _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1] - 2);
                          //else
                         _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]);
                          var b = $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].Text1;
                          $("#text_area").val(b);
                          var fontStyleProp = $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].FontStyle;
                          var fontWeightProp = fontStyleProp.split(" ");

                          $("#text_area").css("font-size", $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].FontSize);
                          $("#text_area").css("font-weight", fontWeightProp[0]);
                          $("#text_area").css("font-style", fontWeightProp[1]);
                          $("#text_area").css("text-align", $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].Align);
                          $("#text_area").css("color", $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].FontColor);
                          $("#text_area").css("font-family", $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].FontFamily);
                          $("#text_area").css("text-decoration", $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].TextDecoration);


                          //adding text text decoration active class in text edit pop-up

                          if ($rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].TextDecoration == "underline") {
                              $("#text-underline").addClass("ActiveFormattingButtonClass");
                          }
                          else {
                              $("#text-underline").removeClass("ActiveFormattingButtonClass");
                          }

                          //adding text font weight active class in text edit pop-up

                          if (fontWeightProp[0] == 700) {
                              $("#text-bold").addClass("ActiveFormattingButtonClass");
                          }
                          else {
                              $("#text-bold").removeClass("ActiveFormattingButtonClass");
                          }

                          //adding text font style active class in text edit pop-up

                          if (fontWeightProp[1] == "italic") {
                              $("#text-italic").addClass("ActiveFormattingButtonClass");
                          }
                          else {
                              $("#text-italic").removeClass("ActiveFormattingButtonClass");
                          }



                          //adding text alignment active class in text edit pop-up

                          if ($rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].Align == "left") {
                              $("#text-right").removeClass("ActiveFormattingButtonClass");
                              $("#text-center").removeClass("ActiveFormattingButtonClass")
                              $("#text-left").addClass("ActiveFormattingButtonClass");
                          }

                          else if ($rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].Align == "right") {
                              $("#text-center").removeClass("ActiveFormattingButtonClass")
                              $("#text-left").removeClass("ActiveFormattingButtonClass");
                              $("#text-right").addClass("ActiveFormattingButtonClass");
                          }

                          else if ($rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].Align == "center") {
                              $("#text-left").removeClass("ActiveFormattingButtonClass");
                              $("#text-right").removeClass("ActiveFormattingButtonClass");
                              $("#text-center").addClass("ActiveFormattingButtonClass");
                          }


                          _rectLayerOnSaveSplitInt = ''; b = '';
                          $("#annotationTextModal").modal("toggle");
                      },
                      mouseout: function (layer) {
                          $rootScope.canvasLayerNameCollectionCI = [];
                          $('#canvas').setLayer(layer.name, {
                              handle: {
                                  type: 'rectangle',
                                  fillStyle: 'pink',
                                  strokeStyle: 'yellow',
                                  strokeWidth: 0,
                                  width: 0, height: 0,
                                  cornerRadius: 0
                              }
                          }).drawLayers();
                      },
                      mouseover: function (layer) {
                          $('#canvas').setLayer(layer.name, {
                              handle: {
                                  type: 'rectangle',
                                  fillStyle: '#fff',
                                  strokeStyle: '#c33',
                                  strokeWidth: 2,
                                  width: 5, height: 5,
                                  cornerRadius: 3
                              }
                          }).drawLayers();

                      }
                  });
            $("#text_area").val('');
            $("#text_area").css({ " font-family": "'Verdana, sans-serif'", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
            $("#text-italic").removeClass("ActiveFormattingButtonClass");
            $("#text-bold").removeClass("ActiveFormattingButtonClass");
            $("#text-underline").removeClass("ActiveFormattingButtonClass");
            $("#text-left").removeClass("ActiveFormattingButtonClass");
            $("#text-right").removeClass("ActiveFormattingButtonClass");
            $("#text-center").removeClass("ActiveFormattingButtonClass");
        }

            // this part will work second time when save button will be clicked
        else {
            // getting textarea style properties
            var _modifiedText = $("#text_area").val();
            var _modifiedFontSize = $("#text_area").css("font-size");
            var _modifiedFontWeight = $("#text_area").css("font-weight");
            var _modifiedFontStyle = $("#text_area").css("font-style");
            var _modifiedTextAlign = $("#text_area").css("text-align");
            var _modifiedFontColor = $("#text_area").css("color");
            var _modifiedFontFamily = $("#text_area").css("font-family");
            var _modifiedFontDecoration = $("#text_area").css("text-decoration");

            // deleting previous textarea
            $("#canvas").removeLayer($rootScope.modifySavedTextCI[0].RectText).drawLayers();
            $("#canvas").removeLayer($rootScope.modifySavedTextCI[0].TextName).drawLayers();
            $rootScope.resetTextRectSaveCI = $rootScope.ObjectIndexSaveCI++;
            $rootScope.resetTextSaveCI = $rootScope.ObjectIndexSaveCI++;

            // generating new text area 
            $('#canvas').drawText({
                layer: true,
                draggable: true,
                name: 'TextAreaAfterEdit_' + $rootScope.resetTextSaveCI,
                groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSaveCI],
                dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSaveCI],
                fillStyle: _modifiedFontColor,
                fontStyle: _modifiedFontWeight + " " + _modifiedFontStyle,
                fontSize: _modifiedFontSize,
                fontFamily: _modifiedFontFamily,
                align: _modifiedTextAlign,
                strokeWidth: 0,
                text: _modifiedText,
                x: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].x, y: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].y,
                maxWidth: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].width,
                maxHeight: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].height

            })
                  // Draw rect as wide as the text
                  .drawRect({
                      name: 'TextAreaAfterEditRect_' + $rootScope.resetTextSaveCI,
                      layer: true,
                      draggable: true,
                      groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSaveCI],
                      dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSaveCI],
                      opacity: $rootScope.shapestyleOpacity,
                      strokeStyle: $rootScope.shapestyleborderColor,
                      strokeWidth: $rootScope.shapestyleborderWidth,
                      x: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].x, y: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].y,
                      width: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].width,
                      height: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].height,
                      click: function (layer) {
                          $rootScope.shapeTypeTextCI = "textAreaRect";
                          var layerNameSplit = layer.name;
                          var splitedName = layerNameSplit.split("_");
                          var textValName = "TextAreaAfterEdit_";
                          var concatinateResult = textValName.concat(splitedName[1]);
                          $rootScope.canvasLayerNameCollectionCI = [];
                          $rootScope.canvasLayerNameCollectionCI.push({ textareaRectangle: layer.name, textareaString: concatinateResult });

                          $('#canvas').setLayer(layer.name, {
                              handle: {
                                  type: 'rectangle',
                                  fillStyle: '#fff',
                                  strokeStyle: '#c33',
                                  strokeWidth: 2,
                                  width: 5, height: 5,
                                  cornerRadius: 3
                              }
                          }).drawLayers();

                      },
                      dblclick: function (layer) {
                          //debugger;
                          $rootScope.isTextAreaClosedButtonActiveCI = false;
                          $rootScope.IsTextAlreadySaveCI = true;
                          var _rectLayerOnSave = layer.name;
                          var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
                          var RectNameAfterEdit = "TextAreaAfterEdit_";
                          var RectNameAfterEditResult = RectNameAfterEdit.concat(_rectLayerOnSaveSplit[1]);
                          $rootScope.modifySavedTextCI.push({ TextName: layer.name, RectText: RectNameAfterEditResult });
                          $rootScope.rectDimensionCI.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
                          $("#text_area").val(_modifiedText);
                          $("#text_area").css("font-size", _modifiedFontSize);
                          $("#text_area").css("font-weight", _modifiedFontWeight);
                          $("#text_area").css("font-style", _modifiedFontStyle);
                          $("#text_area").css("text-align", _modifiedTextAlign);
                          $("#text_area").css("color", _modifiedFontColor);
                          $("#text_area").css("font-family", _modifiedFontFamily);
                          $("#text_area").css("text-decoration", _modifiedFontDecoration);

                          //adding text text decoration active class in text edit pop-up
                          if (_modifiedFontDecoration == "underline") {
                              $("#text-underline").addClass("ActiveFormattingButtonClass");
                          }
                          else {
                              $("#text-underline").removeClass("ActiveFormattingButtonClass");
                          }

                          //adding text font weight active class in text edit pop-up
                          if (_modifiedFontWeight == 700) {

                              $("#text-bold").addClass("ActiveFormattingButtonClass");
                          }
                          else {

                              $("#text-bold").removeClass("ActiveFormattingButtonClass");

                          }

                          //adding text font style active class in text edit pop-up
                          if (_modifiedFontStyle == "italic") {

                              $("#text-italic").addClass("ActiveFormattingButtonClass");
                          }
                          else {
                              $("#text-italic").removeClass("ActiveFormattingButtonClass");

                          }

                          //adding text alignment active class in text edit pop-up
                          if (_modifiedTextAlign == "left") {
                              $("#text-right").removeClass("ActiveFormattingButtonClass");
                              $("#text-center").removeClass("ActiveFormattingButtonClass")
                              $("#text-left").addClass("ActiveFormattingButtonClass");
                          }
                          else if (_modifiedTextAlign == "right") {

                              $("#text-center").removeClass("ActiveFormattingButtonClass")
                              $("#text-left").removeClass("ActiveFormattingButtonClass");
                              $("#text-right").addClass("ActiveFormattingButtonClass");

                          }
                          else if (_modifiedTextAlign == "center") {
                              $("#text-left").removeClass("ActiveFormattingButtonClass");
                              $("#text-right").removeClass("ActiveFormattingButtonClass");
                              $("#text-center").addClass("ActiveFormattingButtonClass");

                          }

                          $("#annotationTextModal").modal("toggle");
                      },
                      mouseout: function (layer) {
                          $rootScope.canvasLayerNameCollectionCI = [];
                          $('#canvas').setLayer(layer.name, {
                              handle: {
                                  type: 'rectangle',
                                  fillStyle: 'pink',
                                  strokeStyle: 'yellow',
                                  strokeWidth: 0,
                                  width: 0, height: 0,
                                  cornerRadius: 0
                              }
                          }).drawLayers();
                      },
                      mouseover: function (layer) {
                          $('#canvas').setLayer(layer.name, {
                              handle: {
                                  type: 'rectangle',
                                  fillStyle: '#fff',
                                  strokeStyle: '#c33',
                                  strokeWidth: 2,
                                  width: 5, height: 5,
                                  cornerRadius: 3
                              }
                          }).drawLayers();

                      }
                  });
            $rootScope.modifySavedTextCI = [];

        }
    }

    // deleting text area on close button
    $rootScope.closeModal = function () {
        if ($rootScope.isTextAreaClosedButtonActiveCI == true) {
            $("#canvas").removeLayer('TextArea_' + $rootScope.resetTextCI).drawLayers();
            $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRectCI).drawLayers();
        }
    }


    $(document).keydown(function (event) {


        if (event.which == 46) {

            if ($rootScope.shapeTypePinCI == "Pin") {


                $("#canvas").removeLayer($rootScope.canvasLayerNameCollectionCI[0].pinName).drawLayers();
                $("#canvas").removeLayer($rootScope.canvasLayerNameCollectionCI[0].ArcName).drawLayers();
                $rootScope.shapeTypePinCI = "";

            }
            else if ($rootScope.shapeTypeTextCI == "textAreaRect") {



                $("#canvas").removeLayer($rootScope.canvasLayerNameCollectionCI[0].textareaRectangle).drawLayers();
                $("#canvas").removeLayer($rootScope.canvasLayerNameCollectionCI[0].textareaString).drawLayers();
                $rootScope.shapeTypeTextCI = "";

            }
            else {

                // alert($rootScope.canvasLayerNameCollection);
                $("#canvas").removeLayer($rootScope.canvasLayerNameCollectionCI).drawLayers();
            }


        }

    });

}]


);