diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index 7d876db..eedaf70 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -1380,6 +1380,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 //    $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top);
                 $scope.MultiLanguageAnnationArray = [];
                 $scope.MultiLanguageAnnationArray.push(annotationText);
+                
                 $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
             }
             else {
@@ -1395,6 +1396,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     // $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top);
                     $scope.MultiLanguageAnnationArray = [];
                     $scope.MultiLanguageAnnationArray.push(annotationText);
+
+                   
                     $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
                 }
                 else {
@@ -1402,6 +1405,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     //  $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top);
                     $scope.MultiLanguageAnnationArray = [];
                     $scope.MultiLanguageAnnationArray.push(annotationText);
+
+                    
                     $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
                 }
 
@@ -1461,6 +1466,22 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                                                 }
                                                );
 
+                //-NIKI-for solving extarct issue 8286
+
+                var imageCanvas = document.getElementById('imageCanvas' + bodyRegionId + '_MR');
+
+                var width = imageCanvas.width;
+                var ht = imageCanvas.height;
+
+                var coloredCanvasContext = imageCanvas.getContext("2d");
+                var coloredImageData = coloredCanvasContext.getImageData(0, 0, width, ht);
+                var coloredImageDataVar = coloredImageData;
+             
+                    $rootScope.coloredImageMRCanvasList[parseInt(bodyRegionId)] = coloredImageDataVar;
+                
+                                  
+
+                //
 
                 //   console.log('$rootScope.isListManagerSelected= ' + $rootScope.isListManagerSelected + ' length= ' + $scope.ColoredImageSRC.length)
 
@@ -1717,6 +1738,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 //   $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top);
                 $scope.MultiLanguageAnnationArray = [];
                 $scope.MultiLanguageAnnationArray.push(annotationText);
+              
                 $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
             }
             else {
@@ -1752,6 +1774,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     $scope.MultiLanguageAnnationArray.push(annotationText);
 
                     console.log('3. annotationText: ' + annotationText + ' , length: ' + $scope.MultiLanguageAnnationArray.length);
+
                     $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
                 }
 
@@ -1797,6 +1820,21 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                                       );
 
 
+                    //-NIKI-for solving extarct issue 8286
+
+                    var imageCanvas = document.getElementById('imageCanvas' + bodyRegionId);
+
+                    var width = imageCanvas.width;
+                    var ht = imageCanvas.height;
+
+                    var coloredCanvasContext = imageCanvas.getContext("2d");
+                    var coloredImageData = coloredCanvasContext.getImageData(0, 0, width, ht);
+                    var coloredImageDataVar = coloredImageData;
+             
+
+                    $rootScope.coloredImageCanvasList[parseInt(bodyRegionId - 1)] = coloredImageDataVar;
+                    //
+
                     if (($scope.ColoredImageSRC != null || $scope.ColoredImageSRC != undefined)) {
 
                         if ((($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) && ($scope.ColoredImageSRC.length == 9)) {
@@ -2016,8 +2054,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
 
                             grayCanvasContext.putImageData(updatedData, 0, 0);
-
-
+                          
+                        
                             //to resolve lateral arm black issue in highlight mode
 
                             if ($rootScope.viewOrientationId == 5 && (bodyRegionId == 6 || bodyRegionId == 4)) {
@@ -2761,8 +2799,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $(".com").css("display", "none");
                 $("#bord").css({ "width": "0px", "display": "none" });
                 var sppechBubbleDotHTML = '<div id="dot" 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" style="height:auto!important;z-index:10000;margin-left:25px;border:1px solid #000;display:none;padding:5px 10px;position:absolute;color:#000;text-align:left;font-size:12px;background-color:#fff;font-weight:bold;">'
-           + '<span style="position:absolute;right:-4px;top:-4px;color:#ffffff;cursor:pointer;">'
+           + '<div id="sppeachBubble" 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;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:0px;top:0px;color:#ffffff;cursor:pointer;">'
            + '<img class="crossDiv_temp" src=' + $rootScope.path + '></span></div>'
 
            + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="bord">'
@@ -2903,7 +2941,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:#000;text-align:left;font-size: 12px;background-color:#fff;font-weight:bold;left:" + x + "px;top:" + y + "px;'><div style='z-index:7000;position:absolute;right:-4px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.j + " class='dynCross_anno' 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: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:0px;top:0px;color:#ffffff;cursor:pointer;'><img id=" + $scope.j + " class='dynCross_anno' 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);
@@ -3006,7 +3044,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                             $("#" + sub_id_annotation).append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T1 + "</p>");
                         }
 
-                        $("#" + sub_id_annotation).append("<p style='border-bottom:1px solid black;margin-bottom:0;'></p>");
+                        $("#" + sub_id_annotation).append("<p style='border-bottom:1px dotted white;margin-bottom:0;'></p>");
 
                         for (var k = 0; k <= $scope.annotationTextArrayT2.length - 1; k++) {
                             var MultipleLang_annotation_T2 = $scope.annotationTextArrayT2[k];
@@ -3129,8 +3167,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $("#bord_annotation").css({ "width": "0px", "display": "none" });
 
                 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:#000;text-align:left;font-size:12px;background-color:#fff;font-weight:bold;">'
-           + '<span style="position:absolute;right:-4px;top:-4px;color:#ffffff;cursor:pointer;">'
+           + '<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;">'
+           + '<span style="position:absolute;right:0px;top:0px;color:#ffffff;cursor:pointer;">'
            + '<img class="crossDiv_temp_annotation" src=' + $rootScope.path + '></span></div>'
 
            + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="bord_annotation">'
@@ -3147,7 +3185,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T1 + "</p>");
                     }
 
-                    $("#sppeachBubble_annotation").append("<p style='border-bottom:1px solid black;margin-bottom:0;'></p>");
+                    $("#sppeachBubble_annotation").append("<p style='border-bottom:1px dotted white;margin-bottom:0;'></p>");
 
                     for (var k = 0; k <= $scope.annotationTextArrayT2.length - 1; k++) {
                         var MultipleLang_annotation_T2 = $scope.annotationTextArrayT2[k];
@@ -3224,7 +3262,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T1 + "</p>");
                     }
 
-                    $("#sppeachBubble_annotation").append("<p style='border-bottom:1px solid black;margin-bottom:0;'></p>");
+                    $("#sppeachBubble_annotation").append("<p style='border-bottom:1px dotted white;margin-bottom:0;'></p>");
 
                     for (var k = 0; k <= $scope.annotationTextArrayT2.length - 1; k++) {
                         var MultipleLang_annotation_T2 = $scope.annotationTextArrayT2[k];
@@ -3334,7 +3372,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     }
 
     $scope.createSpeechBubbleBasedOnAnnotationLength = function (pointClicked, x, y, id) {
-        var sppechBubbleHTML = "<div id ='" + pointClicked + "' class='com'><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.speechBubbleCounter + "'></div><div data=" + $scope.speechBubbleCounter + " id=" + id + " class='appendDragg' style='z-index:10000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#000;text-align:left;font-size: 12px;background-color:#fff;font-weight:bold;left:" + x + "px;top:" + y + "px;'><div style='z-index:7000;position:absolute;right:-4px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.speechBubbleCounter + " class='dynCross' src=" + $rootScope.path + "></div></div><div style='position:absolute;border:1px solid #000;display:none;z-index:9000;' id='bord" + $scope.speechBubbleCounter + "'></div></div>";
+        var sppechBubbleHTML = "<div id ='" + pointClicked + "' class='com'><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.speechBubbleCounter + "'></div><div data=" + $scope.speechBubbleCounter + " id=" + id + " class='appendDragg' style='z-index:10000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size: 12px;font-weight:bold;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:0px;top:0px;color:#ffffff;cursor:pointer;'><img id=" + $scope.speechBubbleCounter + " class='dynCross' src=" + $rootScope.path + "></div></div><div style='position:absolute;border:1px solid #000;display:none;z-index:9000;' id='bord" + $scope.speechBubbleCounter + "'></div></div>";
         //Issue #7286 :Undefined annotation should not appear
         for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
             var annotation = $scope.MultiLanguageAnnationArray[i];
@@ -4404,7 +4442,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     $scope.annotationTextArrayT2 = [];
                     $scope.annotationTextArrayT1.push(annotations.annotationT1);
                     $scope.annotationTextArrayT2.push(annotations.annotationT2);
-
+                  
                     $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
                 }
                 tempMaskImg.src = "http://localhost/AIAHtml/" + tranparencyMaskImgSrc;
@@ -4442,6 +4480,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $scope.annotationTextArrayT1.push(annotations.annotationT1);
                 $scope.annotationTextArrayT2.push(annotations.annotationT2);
 
+               
                 $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
             }
             else
@@ -4453,6 +4492,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             $scope.annotationTextArrayT1.push(annotations.annotationT1);
             $scope.annotationTextArrayT2.push(annotations.annotationT2);
 
+            
             $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
 
 
@@ -5275,15 +5315,15 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         var coloredImageDataVar = coloredImageData;
 
 
-                        if (value.haveMirror == 'true') {
-                            $rootScope.coloredImageMRCanvasList[parseInt(value.bodyRegionId)] = coloredImageDataVar;
-                        }
-                        else {
+                        //if (value.haveMirror == 'true') {
+                        //    $rootScope.coloredImageMRCanvasList[parseInt(value.bodyRegionId)] = coloredImageDataVar;
+                        //}
+                        //else {
 
 
-                            $rootScope.coloredImageCanvasList[parseInt(value.bodyRegionId - 1)] = coloredImageDataVar;
+                        //    $rootScope.coloredImageCanvasList[parseInt(value.bodyRegionId - 1)] = coloredImageDataVar;
 
-                        }
+                        //}
 
 
                         var context_gray = imageCanvas.getContext('2d');
@@ -5482,14 +5522,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         var coloredImageDataVar = coloredImageData;
 
 
-                        if (value.haveMirror == 'true') {
-                            $rootScope.coloredImageMRCanvasList[parseInt(value.bodyRegionId)] = coloredImageDataVar;
-                        }
-                        else {
+                        //if (value.haveMirror == 'true') {
+                        //    $rootScope.coloredImageMRCanvasList[parseInt(value.bodyRegionId)] = coloredImageDataVar;
+                        //}
+                        //else {
 
-                            $rootScope.coloredImageCanvasList[parseInt(value.bodyRegionId - 1)] = coloredImageDataVar;
+                        //    $rootScope.coloredImageCanvasList[parseInt(value.bodyRegionId - 1)] = coloredImageDataVar;
 
-                        }
+                        //}
 
 
                         var context = imageCanvas.getContext('2d');
@@ -6679,9 +6719,25 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
                 $("#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" });
+              
+                    $("#text-italic").removeClass("ActiveFormattingButtonClass");
+             
+                  $("#text-bold").removeClass("ActiveFormattingButtonClass");
+             
+                    $("#text-underline").removeClass("ActiveFormattingButtonClass");
+            
+                      $("#text-left").removeClass("ActiveFormattingButtonClass");
+            
+                      $("#text-right").removeClass("ActiveFormattingButtonClass");
+            
+                      $("#text-center").removeClass("ActiveFormattingButtonClass");
+          
                 $(".btn-annotation").removeClass("activebtncolor");
+              
                 $('.btnCursor').addClass('activebtncolor');
                 break;
 
@@ -6740,7 +6796,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 groups: ['TextArea_' + $rootScope.resetText],
                 dragGroups: ['TextArea_' + $rootScope.resetText],
                 fillStyle: $rootScope.fontColor,
-                fontStyle: $rootScope.fontStyle,
+                fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle,
                 fontSize: $rootScope.fontSizes,
                 fontFamily: $rootScope.fontFamily,
                 align: $rootScope.textAlignmt,
@@ -6751,7 +6807,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 maxHeight: $scope.y - $scope.offsetY1,
                 add: function (layer) {
                     $rootScope.TextPropertyArray.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });
-                    $rootScope.TextPropertyArray.push({ Text1: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily });
+                    $rootScope.TextPropertyArray.push({ Text1: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily, TextDecoration: $rootScope.underlineText });
                 }
             })
                   // Draw rectangle  
@@ -6797,19 +6853,119 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                           $rootScope.modifySavedText.push({ TextName: layer.name, RectText: TextAreaRectNameConcatenated });
                           $rootScope.rectDimension.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]);
+                          //if (_rectLayerOnSaveSplit[1] >= 3)
+                          //    _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1] - 2);
+                          //else
+                          //    _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]);
+
+                          _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]);
                           var b = $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Text1;
                           $("#text_area").val(b);
+                          var fontStyleProp = $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontStyle;
+                           var fontWeightProp = fontStyleProp.split(" ");
+                                                                  
                           $("#text_area").css("font-size", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontSize);
-                          $("#text_area").css("font-weight", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontStyle);
-                          $("#text_area").css("font-style", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontStyle);
+                          $("#text_area").css("font-weight", fontWeightProp[0]);
+                          $("#text_area").css("font-style", fontWeightProp[1]);
                           $("#text_area").css("text-align", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Align);
                           $("#text_area").css("color", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontColor);
                           $("#text_area").css("font-family", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontFamily);
-                          $("#text_area").css("text-decoration", $rootScope.underlineText);
+                          $("#text_area").css("text-decoration", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].TextDecoration);
+
+
+
+
+                          //adding text text decoration active class in text edit pop-up
+                          
+                                             if ($rootScope.TextPropertyArray[_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.TextPropertyArray[_rectLayerOnSaveSplitInt].Align == "left") {
+ 	
+                          $("#text-right").removeClass("ActiveFormattingButtonClass");
+   
+                         $("#text-center").removeClass("ActiveFormattingButtonClass")
+  
+                           $("#text-left").addClass("ActiveFormattingButtonClass");
+ 
+                       }
+  
+                         else if ($rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Align == "right") {
+
+
+
+                       $("#text-center").removeClass("ActiveFormattingButtonClass")
+
+                         $("#text-left").removeClass("ActiveFormattingButtonClass");
+
+                         $("#text-right").addClass("ActiveFormattingButtonClass");
+
+
+
+                      }
+
+                    else if ($rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Align == "center") {
+
+                      $("#text-left").removeClass("ActiveFormattingButtonClass");
+
+                           $("#text-right").removeClass("ActiveFormattingButtonClass");
+
+                        $("#text-center").addClass("ActiveFormattingButtonClass");
+
+
+
+                      }
+
+                       
                           _rectLayerOnSaveSplitInt = ''; b = '';
                           $("#annotationTextModal").modal("toggle");
                       },
@@ -6843,6 +6999,20 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             $("#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
@@ -6871,7 +7041,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
                 dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
                 fillStyle: _modifiedFontColor,
-                fontStyle: _modifiedFontStyle,
+                fontStyle: _modifiedFontWeight + " " + _modifiedFontStyle,
                 fontSize: _modifiedFontSize,
                 fontFamily: _modifiedFontFamily,
                 align: _modifiedTextAlign,
@@ -6933,6 +7103,62 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                           $("#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) {
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index 5a6f29e..341d3da 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -41,6 +41,35 @@
 
     <!--Annotation Toolbar: Jcanvas-->
     <style>
+
+
+        .ActiveFormattingButtonClass {
+            background-color: #1B92D0 !important;
+        }
+
+        .Edittext-btn-css {
+            background: #4B4B4B;
+            padding: 4px;
+            cursor: pointer;
+            margin-right: 2px;
+        }
+
+        /*.italic-btn-css {
+            background: #4B4B4B;
+            padding: 4px;
+            cursor: pointer;
+            margin-right: 2px;
+        }*/
+
+        .underline-btn-css {
+            background: #4B4B4B;
+            padding: 4px;
+            cursor: pointer;
+            margin-right: 5px;
+        }
+
+
+
         .activebtncolor {
             background-color: #1B92D0 !important;
             border-color: #1B92D0 !important;
@@ -537,14 +566,14 @@
                                 <option>72</option>
                             </select>
                             <span style="vertical-align:middle;">
-                                <span id="text-bold" style="background: #4B4B4B;padding:4px;cursor:pointer;margin-right:2px;">
+                                <span id="text-bold" class="Edittext-btn-css">
                                     <i aria-hidden="true" class="fa fa-bold" style="color: #fff"></i>
                                 </span>
-                                <span id="text-italic" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 2px;">
+                                <span id="text-italic" class="Edittext-btn-css">
                                     <i class="fa fa-italic" aria-hidden="true" style="color: #fff"></i>
 
                                 </span>
-                                <span id="text-underline" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 5px;">
+                                <span id="text-underline" class="underline-btn-css">
                                     <i class="fa fa-underline" aria-hidden="true" style="color: #fff"></i>
                                 </span>
                             </span>
@@ -555,15 +584,15 @@
                             </div>
 
                             <span style="vertical-align:middle;">
-                                <span id="text-left" style="background: #4B4B4B;padding:4px;cursor:pointer;margin-right:2px;">
+                                <span id="text-left" class="Edittext-btn-css">
                                     <i aria-hidden="true" class="fa fa-align-left" style="color: #fff"></i>
                                 </span>
-                                <span id="text-center" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 2px;">
+                                <span id="text-center" class="Edittext-btn-css">
                                     <i class="fa fa-align-center" aria-hidden="true" style="color: #fff"></i>
 
 
                                 </span>
-                                <span id="text-right" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 5px;">
+                                <span id="text-right" class="underline-btn-css">
                                     <i class="fa fa-align-right" aria-hidden="true" style="color: #fff"></i>
 
 
@@ -1207,41 +1236,83 @@
 
             $("#text-left").on('click', function () {
 
+                //Annotation: Formatting buttons color is not change when select.
+
+                $("#text-center").removeClass("ActiveFormattingButtonClass");
+                $("#text-right").removeClass("ActiveFormattingButtonClass");
+                $("#text-left").addClass("ActiveFormattingButtonClass");
                 $("#text_area").css("text-align", "left");
 
+
             });
 
 
             $("#text-center").on('click', function () {
 
+                //Annotation: Formatting buttons color is not change when select.
+
+                $("#text-right").removeClass("ActiveFormattingButtonClass");
+                $("#text-left").removeClass("ActiveFormattingButtonClass");
+                $("#text-center").addClass("ActiveFormattingButtonClass");
                 $("#text_area").css("text-align", "center");
 
+
             });
 
 
             $("#text-right").on('click', function () {
 
-                $("#text_area").css("text-align", "right");
+                //Annotation: Formatting buttons color is not change when select.
 
+                $("#text-left").removeClass("ActiveFormattingButtonClass");
+                $("#text-center").removeClass("ActiveFormattingButtonClass");
+                $("#text-right").addClass("ActiveFormattingButtonClass");
+                $("#text_area").css("text-align", "right");
             });
 
 
             $("#text-bold").on('click', function () {
 
-                $("#text_area").css("font-weight", "bold");
+                //Annotation: Formatting buttons color is not change when select.
+                $("#text-bold").toggleClass("ActiveFormattingButtonClass");
+
+                if ($("#text-bold").hasClass("ActiveFormattingButtonClass")) {
+                    $("#text_area").css("font-weight", "bold");
+                }
+                else {
+                    $("#text_area").css("font-weight", "normal");
+                }
+
 
             });
 
             $("#text-italic").on('click', function () {
 
-                $("#text_area").css("font-style", "italic");
+                //Annotation: Formatting buttons color is not change when select.
+                $("#text-italic").toggleClass("ActiveFormattingButtonClass");
+                if ($("#text-italic").hasClass("ActiveFormattingButtonClass")) {
+                    $("#text_area").css("font-style", "italic");
+                }
+                else {
+                    $("#text_area").css("font-style", "normal");
+                }
+
 
             });
 
             $("#text-underline").on('click', function () {
 
-                $("#text_area").css("text-decoration", "underline");
+                //Annotation: Formatting buttons color is not change when select.
+                $("#text-underline").toggleClass("ActiveFormattingButtonClass");
+
+                if ($("#text-underline").hasClass("ActiveFormattingButtonClass")) {
+                    $("#text_area").css("text-decoration", "underline");
+                }
+                else {
+                    $("#text_area").css("text-decoration", "none");
+                }
 
+                
             });