diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index c1860fb..cde52ec 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -855,7 +855,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         // annotation toolbar canvas
 
         //history code
-
+       
         if ($("#canvasDiv").find("canvas[id='canvasPaint']").length == 0) {
             var ATBarHtml = $("#canvasDiv").append('<canvas id="canvasPaint" width="2277" height="3248" ng-click="FreeStylePaint($event)" class="canvas-annotationStyle1"></canvas><canvas id="canvas" ng-click="onDrawingCanvasClick($event)" width="2277" height="3248" class="canvas-annotationStyle"></canvas>');
             $compile(ATBarHtml)($scope);
@@ -910,7 +910,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $scope.bagartDetails = new jinqJs()
                                .from($rootScope.bgartData.BackgroundArts.BackgroundArtDetail)
                                .where('_ViewOrientationId == ' + viewOrientationId)
-                               .select();
+                               .select();   
 
         if ($scope.ColoredImageSRC != null && $scope.ColoredImageSRC.length > 0) {
             $scope.ColoredImageSRC = null;
@@ -3690,6 +3690,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
           
 
         }
+       
+        if ($rootScope.isTBCompleted == true) {
+            $('#sppeachBubble').remove();
+            $('#dot').remove();
+            $('#bord').remove();
+            $('.com').remove();
+            $rootScope.isTBCompleted = false;
+        }
     }
 
     $scope.showAnnotation = function()
@@ -3856,14 +3864,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         });
 
         $('#canvasDiv').attr("data-bubbleid", "speechBubble")
-
-
+        
     };
 
 
     $scope.createTransparencyBox = function () {
 
-        
         $scope.isTransparencyBtnClicked = true;
 
         //do not create TBOX if in extarct mode otherwise create
@@ -3899,6 +3905,22 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             //  console.log("extract button is active");
 
         }
+        //in case of annotation toolbar is open below code will be executed to draw Tbox
+        if ($rootScope.isAnnotationWindowOpen == true) {
+            if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
+                $rootScope.DrawingMode();
+                $rootScope.shapeType = "";
+                $(".btn-annotation").removeClass("activebtncolor");
+                $("#annotationpaintbrushsize").removeClass("activebtncolor");
+                $("#annotationpainteraser").removeClass("activebtncolor");
+            }
+            else {
+
+                $rootScope.switchCanvas();
+            }
+        }
+      
+
     }
 
     function mouseDownListener(e) {
@@ -3954,6 +3976,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             $('#layerChangeSlider').slider("option", "value", parseInt($rootScope.totalLayers) - parseInt($scope.currentLayerNumber));
             $("#txtlayerNumber").val(parseInt($scope.currentLayerNumber));
         }
+
     }
 
     function mouseMoveListener(e) {
@@ -3980,13 +4003,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
         });
 
-
-
     }
 
 
     function mouseUpListener(e) {
-        
+       
         $scope.isTBDrawnOnBodyRegion = false;
       
         $(".com").remove();
@@ -3994,7 +4015,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $('#bord').remove();
         $('#sppeachBubble').remove();
 
-
         var previewRectangleWidth = $('.rectangle').width();
         var previewRectangleHeight = $('.rectangle').height()
       
@@ -4157,13 +4177,29 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $('#btnTranparency').removeClass('btn-black');
 
         $('#btnTranparency').addClass('tButtonActive');
-        //debugger;
+      
         //  $('#txtlayerNumber').val((parseInt($scope.currentLayerNumber)) + 1);
         //Dated:18-07-2016 Issue#4975: Transparency box should not be clickable if it is already selected.
         $('#btnTranparency').removeClass('tButtonActive');
         $('#btnTranparency').addClass('btn-black');
         $('#btnIdentity').removeClass('btn-black');
         $('#btnIdentity').addClass('btn-primary');
+
+        // clear canvas before drawing transparency box 
+              $('#canvas').removeLayers();
+             var paintCanvasObj = document.getElementById("canvasPaint");
+             var ctx = paintCanvasObj.getContext("2d");
+           ctx.clearRect(0, 0, 2277, 3248);
+           var sktch = $('#canvasPaint').sketch();
+           $('#canvasPaint').sketch().actions = [];
+           $("#annotationpaintbrushsize").removeClass("activebtncolor");
+           $("#annotationpainteraser").removeClass("activebtncolor");
+
+        //hide the speechbubble
+        
+           
+           if($rootScope.isAnnotationWindowOpen == true)
+              $rootScope.isTBCompleted = true;
     }
 
     $scope.getCanavsDivScrollPosition = function () {
@@ -4868,9 +4904,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
     // History Maintained Issue//
 
-     $rootScope.getAnnotationTextBasedOnSelectedBodyRegion = function (event) {
+    $rootScope.getAnnotationTextBasedOnSelectedBodyRegion = function (event) {
    
-       
         var canvasDiv = document.getElementById('canvasDiv');
         var verticalScrollPosition = canvasDiv.scrollTop;
         var horizontlScrollPosition = canvasDiv.scrollLeft;
@@ -4903,7 +4938,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             //alert(mirrorCanvasX);
             var mirrorImageCanvas = document.getElementById(maskCanvasId);
             var mirrorCanvasWidth = mirrorImageCanvas.clientWidth;
-           // alert(mirrorCanvasWidth);
+            // alert(mirrorCanvasWidth);
             var maskCanvas = document.getElementById(maskCanvasId);
             var maskCanvasContext = maskCanvas.getContext("2d");
           
@@ -4938,7 +4973,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 Blue = (pixelData.data[2]).toString()
             }
             var RGBColor = (Red + Green + Blue);
-           // alert(RGBColor);
+            // alert(RGBColor);
             //$rootScope.previousHighlightList.push(RGBColor);
 
         }
@@ -4953,8 +4988,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         else {
             $scope.createDynamicSpeechBubble(event, event.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, event.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true)
         }
-
-
+    
     }
 
 
@@ -5625,6 +5659,22 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $('#dot_annotation').remove();
         $('#bord_annotation').remove();
 
+        $('#dot').remove();
+        $('#sppeachBubble').remove();
+        $(".com").remove();
+        $("#bord").remove();
+
+        // clear canvas on closing of transparency box 
+        $('#canvas').removeLayers();
+        var paintCanvasObj = document.getElementById("canvasPaint");
+        var ctx = paintCanvasObj.getContext("2d");
+        ctx.clearRect(0, 0, 2277, 3248);
+        var sktch = $('#canvasPaint').sketch();
+        $('#canvasPaint').sketch().actions = [];
+       // $("#annotationpaintbrushsize").removeClass("activebtncolor");
+       // $("#annotationpainteraser").removeClass("activebtncolor");
+
+
         var tBox = document.getElementById('transparencyCanvas');
 
 
@@ -5691,7 +5741,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $('#btnIdentity').addClass('btn-primary');
 
         document.getElementById('btnTranparency').removeEventListener("click", $scope.createTransparencyBox);
-
+            
     }
 
     $scope.createSpeechBubbleOnTransparencyBox = function (event, text1, text2, x, y) {
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index fe4c5c4..824563c 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -2402,7 +2402,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
         // annotation history
         if (event != undefined) {
             if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) {
-
+             
                 $rootScope.getAnnotationTextBasedOnSelectedBodyRegion(event);
 
             }