diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index 24ae176..133143e 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -77,7 +77,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
     //extract
     $rootScope.isExtract = false;
-
+    $rootScope.UIWrapperZIndex = 12000;
 
     $rootScope.whiteImageDataList = [];
     $rootScope.whiteImageMRDataList = [];
@@ -2880,6 +2880,34 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         }
 
         $('#layerChangeSlider').slider("option", "value", parseInt($rootScope.totalLayers) - parseInt($scope.layerNumber));
+    
+        if (($("#canvasPaint").css("display") == "block") && ($("#canvas").css("display") == "block")){
+            if ($rootScope.isAnnotatiomToolBarPopupOpenOnLayerChange == false) {
+                
+            if ($("#transparencyScale").css("display") == "block") {
+                $rootScope.switchToTransparencycanvas();
+            }
+        }
+        else {
+
+                if ($("#OnIdentify").hasClass("annotationtoolbartab")) {
+                    $rootScope.switchToTransparencycanvas();
+                }
+                else {
+                    $('.btnCursor').addClass('activebtncolor');
+                    $rootScope.switchCanvas();
+                }
+        }
+
+        }
+        else
+        {
+            if ($rootScope.isAnnotatiomToolBarPopupOpenOnLayerChange == true) {
+
+                $rootScope.CloseAnnotationTool();
+
+            }
+        }
     }
     $rootScope.PreviouslayerNumbr = 0;
     $scope.LayerChangeOnMouseUpDown = function (e) {
@@ -3247,7 +3275,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 var Exists_annotation = $("#canvasDiv").find("div[id=" + pointClicked_annotation + "]").length;
                 // alert(Exists_annotation);
                 //  alert(pointClicked_annotation);
-                var sppechBubbleHTML_annotation = "<div id ='" + pointClicked_annotation + "' class='com_anno'><div style='z-index:10000;position:absolute;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);height:15px;width:35px;left:" + (x - 10) + "px;top:" + (y + 10) + "px;'' id='bubble" + $scope.j + "'></div><div data=" + $scope.j + " id=" + sub_id_annotation + " class='appendDragg_annotation' style='z-index:10000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size: 12px;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;left:" + x + "px;top:" + y + "px;'><div style='z-index:7000;position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.j + " class='dynCross_anno' style='width:18px' src=" + $rootScope.path + "></div></div><div style='position:absolute;border:1px solid #000;display:none;z-index:9000;' id='bord_annotation" + $scope.j + "'></div></div>";
+                var sppechBubbleHTML_annotation = "<div id ='" + pointClicked_annotation + "' class='com_anno'><div style='z-index:10000;position:absolute;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);height:15px;width:35px;left:" + (x - 10) + "px;top:" + (y + 10) + "px;'' id='bubble" + $scope.j + "'></div><div data=" + $scope.j + " id=" + sub_id_annotation + " class='appendDragg_annotation' style='z-index:60000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size: 12px;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;left:" + x + "px;top:" + y + "px;'><div style='z-index:7000;position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.j + " class='dynCross_anno' style='width:18px' src=" + $rootScope.path + "></div></div><div style='position:absolute;border:1px solid #000;display:none;z-index:9000;' id='bord_annotation" + $scope.j + "'></div></div>";
                 if ($scope.longest_annotationT1.length > $scope.longest_annotationT2.length) {
                     if (Exists_annotation == 0) {
                         $("#canvasDiv").append(sppechBubbleHTML_annotation);
@@ -3473,7 +3501,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $("#bord_annotation").css({ "width": "0px", "display": "none" });
                 $('.dynCross_anno').parent().parent().parent().remove();
                 var sppechBubbleDotHTML_annotation = '<div id="dot_annotation" style="position:absolute;height:15px;width:35px;display:none;z-index:10000;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);"></div>'
-           + '<div id="sppeachBubble_annotation" style="height:auto!important;z-index:10000;margin-left:25px;border:1px solid #000;display:none;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size:12px;background-color:#19100e;font-weight:bold;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;">'
+           + '<div id="sppeachBubble_annotation" style="height:auto!important;z-index:60000;margin-left:25px;border:1px solid #000;display:none;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size:12px;background-color:#19100e;font-weight:bold;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;">'
            + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
            + '<img class="crossDiv_temp_annotation" style="width:18px" src=' + $rootScope.path + '></span></div>'
 
@@ -4115,7 +4143,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         //bind click listener
                         transparencyCanvas.addEventListener('click', TransparencyCanvasClickListener);
 
-                        $(".ui-wrapper").css("z-index", "600");
+                        $(".ui-wrapper").css("z-index", $rootScope.UIWrapperZIndex);
 
                     }
                     if ($scope.TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && $scope.TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {
@@ -4201,6 +4229,24 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             $('#canvasPaint').sketch().actions = [];
             $("#annotationpaintbrushsize").removeClass("activebtncolor");
             $("#annotationpainteraser").removeClass("activebtncolor");
+            if ($("#DrawMode").hasClass("annotationtoolbartab"))
+            {
+                var drawCanvasZindex = $("#canvas").css("z-index");
+                var paintCanvasZindex = $("#canvasPaint").css("z-index");
+                drawCanvasZindex = parseInt(drawCanvasZindex) - 1;
+                paintCanvasZindex = parseInt(paintCanvasZindex) - 1;
+                if (drawCanvasZindex > paintCanvasZindex) {
+                    $(".ui-wrapper").css("z-index", drawCanvasZindex);
+                    $rootScope.UIWrapperZIndex = drawCanvasZindex;
+                }
+                else {
+                    $(".ui-wrapper").css("z-index", paintCanvasZindex);
+                    $rootScope.UIWrapperZIndex = paintCanvasZindex;
+                }
+            }
+            else {
+                $rootScope.switchToTransparencycanvas();
+            }
         }
 
         //hide the speechbubble
@@ -5079,7 +5125,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             document.getElementById('canvasDiv').appendChild(transparencyCanvas);
 
             $('#transparencyCanvas').resizable({ handles: "e,s,se,w,n,ne,nw,sw", stop: function (event, ui) { resizeTransparencyBox(); }, start: function (event, ui) { clearTransCanvas(); } });
-            $(".ui-wrapper").css("z-index", "600");
+            $(".ui-wrapper").css("z-index", $rootScope.UIWrapperZIndex);
 
             //bind click listener
             transparencyCanvas.addEventListener('click', TransparencyCanvasClickListener);
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index 18c368e..7f69ee1 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -511,6 +511,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
     //annotation tool custom events
     $rootScope.ShowAnnotationWindow = function () {
         //7904
+        $rootScope.isAnnotatiomToolBarPopupOpenOnLayerChange = true;
         $rootScope.isAnnotatiomToolBarPopupClosed = false;
         $rootScope.isAnnotaionToolBarDrawingModeActive = false;
         if ($rootScope.MenuModuleName == "DA" || $rootScope.MenuModuleName == "CI") {
@@ -570,10 +571,16 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
 
         }
 
+        if ($("#transparencyScale").css("display") == "block") {
+
+            $rootScope.switchToTransparencycanvas();
+        }
+
     }
 
     $rootScope.CloseAnnotationTool = function () {
         console.log('close');
+        $rootScope.isAnnotatiomToolBarPopupOpenOnLayerChange = false;
         $rootScope.isAnnotatiomToolBarPopupClosed = true;
         $("#OnIdentify").removeClass("annotationtoolbartab");
         $("#DrawMode").removeClass("annotationtoolbartab");
@@ -589,8 +596,14 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
         $('.btnCursor').removeClass('activebtncolor');
         $(".btn-annotation").removeClass("activebtncolor");
         $rootScope.isAnnotaionToolBarDrawingModeActive = false;
-
-        $rootScope.switchCanvas();
+     
+        if ($("#transparencyScale").css("display") == "block") {
+            $rootScope.switchToTransparencycanvas();
+        }
+        else
+        {
+            $rootScope.switchCanvas();
+        }
         $rootScope.shapeType = '';
     }
     $rootScope.CIAnotationIdentifyModeOff = false;
@@ -620,9 +633,33 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
 
         $rootScope.isAnnotaionToolBarDrawingModeActive = false;
         $rootScope.switchCanvas();
+
+        if ($("#transparencyScale").css("display") == "block") {
+
+            $rootScope.switchToTransparencycanvas();
+        }
+     
     }
 
+    $rootScope.switchToTransparencycanvas = function () {
 
+        var x = $("#canvas").css("z-index");
+        var y = $("#canvasPaint").css("z-index");
+        x = parseInt(x) + 1;
+        y = parseInt(y) + 1;
+        if (x > y) {
+            $(".ui-wrapper").css("z-index", x);
+            $("#canvas").css("z-index", x);
+            $rootScope.UIWrapperZIndex = x;
+
+        }
+        else {
+            $(".ui-wrapper").css("z-index", y);
+            $("#canvas").css("z-index", y);
+            $rootScope.UIWrapperZIndex = y;
+        }
+
+    }
 
     $rootScope.DrawingMode = function () {
         //Annotation History
@@ -634,9 +671,6 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
         $("#annotationpaintbrushsize").removeClass("activebtncolor");
         $("#annotationpainteraser").removeClass("activebtncolor");
         $rootScope.isEraseToolSelected = false;
-        //   $("#canvasPaint").css("display", "block");
-        //   $("#canvas").css("display", "block");
-
     }
 
     //   Dissectible Anatomy > Settings should be disable if Annotation is Open.
@@ -1919,7 +1953,14 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                 width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
                 height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
                 resizeFromCenter: false,
+                add: function(layer){
+                    var TextAreaLayerName = layer.name;
+                    var TextAreaLayerNameAftrSplit = TextAreaLayerName.split("_");
+                    $rootScope.postFixLayerNumber = TextAreaLayerNameAftrSplit[1];
+                },
+             
                 click: function (layer) {
+                  
                     if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
                         //jcanvas property
                         layer.draggable = true;
@@ -1939,8 +1980,10 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                                 strokeWidth: 2,
                                 width: 5, height: 5,
                                 cornerRadius: 3
+                                
                             }
                         }).drawLayers();
+
                     }
                     else {
                         //jcanvas property
@@ -2090,6 +2133,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
 
                 },
                 mouseout: function (layer) {
+                    
                     if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
                         //jcanvas property
                         layer.draggable = true;
@@ -2102,13 +2146,17 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                                 strokeWidth: 0,
                                 width: 0, height: 0,
                                 cornerRadius: 0
+                                                            
                             }
                         }).drawLayers();
+                        $rootScope.TextAreaRectXAxisAftrResize = layer.x;
+                        $rootScope.TextAreaRectYAxisAftrResize = layer.y;
                     }
                     else {
                         //jcanvas property
                         layer.draggable = false;
                     }
+                 
                 },
                 mouseover: function (layer) {
                     if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
@@ -2122,6 +2170,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                                 strokeWidth: 2,
                                 width: 5, height: 5,
                                 cornerRadius: 3
+                              
                             }
                         }).drawLayers();
                     }
@@ -2129,6 +2178,17 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                         //jcanvas property
                         layer.draggable = false;
                     }
+                },
+                change: function (layer) {
+                    if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
+                        if ((layer.x > $rootScope.TextAreaRectXAxisAftrResize && layer.y > $rootScope.TextAreaRectYAxisAftrResize) || (layer.x == $rootScope.TextAreaRectXAxisAftrResize && layer.y > $rootScope.TextAreaRectYAxisAftrResize) || (layer.x > $rootScope.TextAreaRectXAxisAftrResize && layer.y == $rootScope.TextAreaRectYAxisAftrResize)) {
+                            var CangedTextAreaName = 'TextAreaNew_' + $rootScope.postFixLayerNumber;
+                            $('#canvas').setLayer(CangedTextAreaName, {
+                                x: layer.x,
+                                y: layer.y
+                            });
+                        }
+                    }
                 }
             }).drawText({
                 layer: true,
@@ -2148,7 +2208,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                 maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
                 maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
                 add: function (layer) {
-
+                 
                     //$rootScope.TextPropertyArray.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });
                     $rootScope.TextPropertyArray.push({ layerName: layer.name, Rect_Text: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily, TextDecoration: $rootScope.underlineText });
                 }
@@ -2221,6 +2281,11 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                 width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
                 height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
                 resizeFromCenter: false,
+                add: function (layer) {
+                    var TextAreaLayerName = layer.name;
+                    var TextAreaLayerNameAftrSplit = TextAreaLayerName.split("_");
+                    $rootScope.postFixLayerNumber = TextAreaLayerNameAftrSplit[1];
+                },
                 click: function (layer) {
                     if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
                         //jcanvas property
@@ -2361,11 +2426,14 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                                 cornerRadius: 0
                             }
                         }).drawLayers();
+                        $rootScope.RectXAxisAftrResize = layer.x;
+                        $rootScope.RectYAxisAftrResize = layer.y;
                     }
                     else {
                         //jcanvas property
                         layer.draggable = false;
                     }
+                
                 },
                 mouseover: function (layer) {
                     if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
@@ -2388,8 +2456,18 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
                         //jcanvas property
                         layer.draggable = false;
                     }
+                },
+                change: function (layer) {
+                    if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
+                        if ((layer.x > $rootScope.RectXAxisAftrResize && layer.y > $rootScope.RectYAxisAftrResize) || (layer.x == $rootScope.RectXAxisAftrResize && layer.y > $rootScope.RectYAxisAftrResize) || (layer.x > $rootScope.RectXAxisAftrResize && layer.y == $rootScope.RectYAxisAftrResize)) {
+                            var CangedTextAreaName = 'TextAreaNew_' + $rootScope.postFixLayerNumber;
+                            $('#canvas').setLayer(CangedTextAreaName, {
+                                x: layer.x,
+                                y: layer.y
+                            });
+                        }
+                    }
                 }
-
             }).drawText({
                 layer: true,
                 draggable: true,