diff --git a/400-SOURCECODE/AIAHTML5.API/Web.config b/400-SOURCECODE/AIAHTML5.API/Web.config
index a3f2c58..c80ebf6 100644
--- a/400-SOURCECODE/AIAHTML5.API/Web.config
+++ b/400-SOURCECODE/AIAHTML5.API/Web.config
@@ -39,7 +39,7 @@
     <add key="EnableSSL" value="false" />
     <add key="Site_Url" value ="//52.2.38.120"/>
     <add key ="HostAddress" value="10.100.12.13" />
-    <add key="isUserAuthenticated" value="false"/>
+    <add key="isUserAuthenticated" value="true"/>
     <add key="AdminSupport" value="amrita.vishnoi@ebix.com,nikita.kulshreshtha@ebix.com"/>
   </appSettings>  
   <system.web>
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index 2e37ee0..901357b 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -3112,41 +3112,27 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
 
     $scope.createDynamicSpeechBubble = function (event, x, y, isAnnotationForTBox) {
-
-     
         if (isAnnotationForTBox == true) {
             //1. In transparency box we shows two annotation at a time, so we need to decide the max length of annotation in btween two annotation because based on that 
             // we decide the size of speech bubble
             $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });
-
             //2.
             if (event.ctrlKey) {
-
                 console.log('ctrl pressed');
-
                 $scope.multiAnnotationIsON = true;
-
                 //2.1 create unique speech bubbles
                 $scope.speechBubbleCounter = $scope.speechBubbleCounter + 1;
                 var id = "speechBubble" + $scope.speechBubbleCounter;
-
                 //2.2 Get clicked locationa and find if it is already clicked earlier too on same location
                 var pointClicked = parseInt(x) + parseInt(y);
-
                 var isClickedOnSamePoint = $("#canvasDiv").find("div[id=" + pointClicked + "]").length;
-
                 console.log('isClickedOnSamePoint: ' + isClickedOnSamePoint);
-
                 // if user has not clciked on smae point then create speech bubble otherwise not
                 if (isClickedOnSamePoint == 0) {
                     console.log('not clicked on same point')
                     $scope.createSpeechBubbleBasedOnAnnotationLength(pointClicked, x, y, id);
-
                     $scope.speechbubbleList.push({ xaxis: x, yaxis: y, ids: id });
-
                 }
-
-
                 $('.appendDragg').draggable({
                     drag: function (evt) {
                         $(this).prev('div').css("display", "none");
@@ -3154,384 +3140,59 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         var sub_id1 = $(this).attr('id');
                         var verticalScrollPosition = canvasDiv.scrollTop;
                         var horizontlScrollPosition = canvasDiv.scrollLeft;
-
                         if ($scope.speechbubbleList != null || $scope.speechbubbleList != undefined) {
                             for (var m = 0; m <= $scope.speechbubbleList.length - 1; m++) {
                                 if ($scope.speechbubbleList[m].ids == sub_id1) {
-
                                     $scope.angle1($scope.speechbubbleList[m].xaxis, $scope.speechbubbleList[m].yaxis, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, bor_id);
                                     break;
-
                                 }
                             }
                         }
-
                     },
                 });
-
-
-
                 $('.dynCross').on('click', function (evt) {
                     //$(this).parent().parent().parent().css('display', 'none');
                     $(this).parent().parent().parent().remove();
-
                 });
-
             }
-
-
             else {
                 $scope.multiAnnotationIsON = false;
-              
-                //$(".com").css("display", "none");
-                //$("#bord").css({ "width": "0px", "display": "none" });
-
                 //history maintained issue
                 if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) {
                     $("#sppeachBubble").remove();
                     $("#dot").remove();
                 }
-
-
-
                 $(".com").remove();
                 $("#bord").remove();
-
-                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:#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:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
-           + '<img class="crossDiv_temp" style="width:18px" src=' + $rootScope.path + '></span></div>'
-
-           + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="bord">'
-          + '</div>';
-
-                //Issue #7286 :Undefined annotation should not appear
-                for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
-                    var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
-                }
-
-                if (MultipleLanguage == undefined) {
-                    console.log("No text is found");
-                } else {
-                    $('#canvasDiv').append(sppechBubbleDotHTML);
-
-                    if ($scope.MultiLanguageAnnationArray.length > 0) {
-                        for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
-                            var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
-                            $("#sppeachBubble").append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
-                        }
-                    }
-                    else {
-                        console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length)
-                    }
-                    if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) {
-                        if ($scope.longestAnnotation.length <= 10) {
-
-
-                            $("#sppeachBubble").css("width", "100px");
-
-                        }
-
-                        else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
-
-
-
-                            $("#sppeachBubble").css("width", "140px");
-
-                        }
-                        else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
-
-
-                            $("#sppeachBubble").css("width", "195px");
-
-                        }
-                        else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
-
-                            $("#sppeachBubble").css("width", "248px");
-
-                        }
-                        else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
-
-
-                            $("#sppeachBubble").css("width", "300px");
-                        }
-
-                        else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
-
-                            $("#sppeachBubble").css("width", "370px");
-
-                        }
-
-                        else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
-
-
-                            $("#sppeachBubble").css("width", "450px");
-
-                        }
-
-                        else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
-
-
-                            $("#sppeachBubble").css("width", "510px");
-
-                        }
-
-                        else {
-
-
-                            $("#sppeachBubble").css("width", ($scope.longestAnnotation.length) + "%");
-
-
-                        }
-
-                    }
-                }
-                var Globe = [];
-                Globe.push({ currentX: x, currentY: y });
-
-                document.getElementById('dot').style.display = 'block';
-                document.getElementById('dot').style.left = ((Globe[0].currentX) - 10) + 'px';
-                document.getElementById('dot').style.top = ((Globe[0].currentY) + 10) + 'px';
-                document.getElementById('sppeachBubble').style.display = 'block';
-                document.getElementById('sppeachBubble').style.left = (Globe[0].currentX) + 'px';
-                document.getElementById('sppeachBubble').style.top = (Globe[0].currentY) + 'px';
-
-
+                $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl(x, y);
                 //history maintained issue
                 if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) { document.getElementById('sppeachBubble').style.zIndex = "60000"; }
-               
-
-
-
                 $('#sppeachBubble').draggable(
-         {
-             drag: function (evt) {
-
-                 //$("#dot").css("display", "none");
+                {
+                drag: function (evt) {
                  $("#dot").css("visibility", "hidden");
                  var verticalScrollPosition = canvasDiv.scrollTop;
                  var horizontlScrollPosition = canvasDiv.scrollLeft;
                  $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
-
-
-             },
-         });
-
-
+                },
+                });
                 $('.crossDiv_temp').on('click', function (evt) {
-                    //$('#sppeachBubble').css('display', 'none');
-
-                    //$("#bord").css("display", "none");
-                    //$("#dot").css("display", "none");
                     $('#sppeachBubble').remove();
-
                     $("#bord").remove();
                     $("#dot").remove();
-
                 });
-
             }
         }
-
         else {
-
-            // alert("false");
             $scope.longest_annotationT1 = $scope.annotationTextArrayT1.reduce(function (a, b) { return a.length > b.length ? a : b; });
             $scope.longest_annotationT2 = $scope.annotationTextArrayT2.reduce(function (a, b) { return a.length > b.length ? a : b; });
-
             if (event.ctrlKey) {
-
-                //   $scope.multiAnnotationIsON = true;
-
                 $scope.j = $scope.j + 1;
-
                 var sub_id_annotation = "black_annotation" + $scope.j;
-                //  alert(sub_id_annotation);
                 var pointClicked_annotation = parseInt(x) + parseInt(y);
                 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:59000;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:59000;' id='bord_annotation" + $scope.j + "'></div></div>";
-                if ($scope.longest_annotationT1.length > $scope.longest_annotationT2.length) {
-                    if (Exists_annotation == 0) {
-                        $("#canvasDiv").append(sppechBubbleHTML_annotation);
-
-                        for (var l = 0; l <= $scope.annotationTextArrayT1.length - 1; l++) {
-                            var MultipleLang_annotation_T1 = $scope.annotationTextArrayT1[l];
-                            //   alert(MultipleLang_annotation_T1);
-                            // alert(sub_id_annotation);
-                            $("#" + 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>");
-
-                        for (var k = 0; k <= $scope.annotationTextArrayT2.length - 1; k++) {
-                            //    alert(MultipleLang_annotation_T2);
-                            var MultipleLang_annotation_T2 = $scope.annotationTextArrayT2[k];
-                            $("#" + sub_id_annotation).append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T2 + "</p>");
-                        }
-
-
-
-                        if ($scope.longest_annotationT1.length <= 10) {
-
-
-                            $("#" + sub_id_annotation).css("width", "100px");
-
-
-                        }
-
-                        else if ($scope.longest_annotationT1.length > 10 && $scope.longest_annotationT1.length <= 17) {
-
-
-                            $("#" + sub_id_annotation).css("width", "140px");
-
-
-                        }
-
-                        else if ($scope.longest_annotationT1.length > 17 && $scope.longest_annotationT1.length <= 26) {
-
-
-
-                            $("#" + sub_id_annotation).css("width", "195px");
-
-                        }
-                        else if ($scope.longest_annotationT1.length > 26 && $scope.longest_annotationT1.length <= 34) {
-
-
-
-                            $("#" + sub_id_annotation).css("width", "248px");
-                        }
-                        else if ($scope.longest_annotationT1.length > 34 && $scope.longest_annotationT1.length <= 44) {
-
-
-
-                            $("#" + sub_id_annotation).css("width", "300px");
-                        }
-
-                        else if ($scope.longest_annotationT1.length > 44 && $scope.longest_annotationT1.length <= 54) {
-
-
-
-                            $("#" + sub_id_annotation).css("width", "370px");
-                        }
-                        else if ($scope.longest_annotationT1.length > 54 && $scope.longest_annotationT1.length <= 69) {
-
-
-
-                            $("#" + sub_id_annotation).css("width", "450px");
-                        }
-                        else if ($scope.longest_annotationT1.length > 69 && $scope.longest_annotationT1.length <= 75) {
-
-
-                            $("#" + sub_id_annotation).css("width", "510px");
-
-                        }
-                        else {
-
-
-                            $("#" + sub_id_annotation).css("width", ($scope.longest_annotationT1.length) + "%");
-                        }
-                    }
-                    else {
-
-                        $("#canvasDiv").find("div[id=" + pointClicked_annotation + "]").css("display", "block");
-
-                    }
-
-                }
-                else {
-
-                    if (Exists_annotation == 0) {
-
-
-
-                        $("#canvasDiv").append(sppechBubbleHTML_annotation);
-
-                        for (var l = 0; l <= $scope.annotationTextArrayT1.length - 1; l++) {
-                            var MultipleLang_annotation_T1 = $scope.annotationTextArrayT1[l];
-                            //  alert(MultipleLang_annotation_T1);
-                            $("#" + sub_id_annotation).append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T1 + "</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];
-                            // alert(MultipleLang_annotation_T2);
-                            $("#" + sub_id_annotation).append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T2 + "</p>");
-                        }
-
-                        if ($scope.longest_annotationT2.length <= 10) {
-
-
-                            $("#" + sub_id_annotation).css("width", "100px");
-
-
-                        }
-
-                        else if ($scope.longest_annotationT2.length > 10 && $scope.longest_annotationT2.length <= 17) {
-
-
-                            $("#" + sub_id_annotation).css("width", "140px");
-
-
-                        }
-
-                        else if ($scope.longest_annotationT2.length > 17 && $scope.longest_annotationT2.length <= 26) {
-
-
-
-                            $("#" + sub_id_annotation).css("width", "195px");
-
-                        }
-                        else if ($scope.longest_annotationT2.length > 26 && $scope.longest_annotationT2.length <= 34) {
-
-
-
-                            $("#" + sub_id_annotation).css("width", "248px");
-                        }
-                        else if ($scope.longest_annotationT2.length > 34 && $scope.longest_annotationT2.length <= 44) {
-
-
-
-                            $("#" + sub_id_annotation).css("width", "300px");
-                        }
-
-                        else if ($scope.longest_annotationT2.length > 44 && $scope.longest_annotationT2.length <= 54) {
-
-
-
-                            $("#" + sub_id_annotation).css("width", "370px");
-                        }
-                        else if ($scope.longest_annotationT2.length > 54 && $scope.longest_annotationT2.length <= 69) {
-
-
-
-                            $("#" + sub_id_annotation).css("width", "450px");
-                        }
-                        else if ($scope.longest_annotationT2.length > 69 && $scope.longest_annotationT2.length <= 75) {
-
-
-                            $("#" + sub_id_annotation).css("width", "510px");
-
-                        }
-                        else {
-
-
-                            $("#" + sub_id_annotation).css("width", ($scope.longest_annotationT2.length) + "%");
-                        }
-                    }
-                    else {
-
-                        $("#canvasDiv").find("div[id=" + pointClicked_annotation + "]").css("display", "block");
-
-                    }
-
-                }
-
+                $scope.createSpeechBubbleBasedOnTransparencyWithCtrl(pointClicked_annotation, Exists_annotation, x, y, sub_id_annotation);
                 $scope.speachBubbleArrayAnnotation.push({ xaxis: x, yaxis: y, ids: sub_id_annotation });
-
                 $('.appendDragg_annotation').draggable({
                     drag: function (evt) {
                         $(this).prev('div').css("display", "none");
@@ -3539,264 +3200,48 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         var sub_id1_anno = $(this).attr('id');
                         var verticalScrollPosition = canvasDiv.scrollTop;
                         var horizontlScrollPosition = canvasDiv.scrollLeft;
-
                         if ($scope.speachBubbleArrayAnnotation != null || $scope.speachBubbleArrayAnnotation != undefined) {
                             for (var m = 0; m <= $scope.speachBubbleArrayAnnotation.length - 1; m++) {
                                 if ($scope.speachBubbleArrayAnnotation[m].ids == sub_id1_anno) {
-
                                     $scope.angle1($scope.speachBubbleArrayAnnotation[m].xaxis, $scope.speachBubbleArrayAnnotation[m].yaxis, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, bor_id_anno);
                                     break;
-
                                 }
                             }
                         }
-
                     },
                 });
-
-
-
                 $('.dynCross_anno').on('click', function (evt) {
-                    //$(this).parent().parent().parent().css('display', 'none');
                     $(this).parent().parent().parent().remove();
-                    // $("#bord").css("display", "none");
-                    //  $("#dot").css("display", "none");
-
-
                 });
-
-
-
             }
-
             else {
-              
                 $scope.multiAnnotationIsON = false;
-
                 $(".com_annotation").css("display", "none");
                 $("#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:59000;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: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>'
-
-           + '<div style="position:absolute;border:1px solid #000;display:none;z-index:59000;" id="bord_annotation">'
-          + '</div>';
-
-
-
-                if ($scope.longest_annotationT1.length > $scope.longest_annotationT2.length) {
-
-                    $("#sppeachBubble_annotation p").remove();
-                    $('#canvasDiv').append(sppechBubbleDotHTML_annotation);
-                    for (var l = 0; l <= $scope.annotationTextArrayT1.length - 1; l++) {
-                        var MultipleLang_annotation_T1 = $scope.annotationTextArrayT1[l];
-                        $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T1 + "</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];
-                        $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T2 + "</p>");
-                    }
-
-                    if ($scope.longest_annotationT1.length <= 10) {
-
-
-                        $("#sppeachBubble_annotation").css("width", "100px");
-
-
-                    }
-
-                    else if ($scope.longest_annotationT1.length > 10 && $scope.longest_annotationT1.length <= 17) {
-
-
-                        $("#sppeachBubble_annotation").css("width", "140px");
-
-
-                    }
-
-                    else if ($scope.longest_annotationT1.length > 17 && $scope.longest_annotationT1.length <= 26) {
-
-
-
-                        $("#sppeachBubble_annotation").css("width", "195px");
-
-                    }
-                    else if ($scope.longest_annotationT1.length > 26 && $scope.longest_annotationT1.length <= 34) {
-
-
-
-                        $("#sppeachBubble_annotation").css("width", "248px");
-                    }
-                    else if ($scope.longest_annotationT1.length > 34 && $scope.longest_annotationT1.length <= 44) {
-
-
-
-                        $("#sppeachBubble_annotation").css("width", "300px");
-                    }
-
-                    else if ($scope.longest_annotationT1.length > 44 && $scope.longest_annotationT1.length <= 54) {
-
-
-
-                        $("#sppeachBubble_annotation").css("width", "370px");
-                    }
-                    else if ($scope.longest_annotationT1.length > 54 && $scope.longest_annotationT1.length <= 69) {
-
-
-
-                        $("#sppeachBubble_annotation").css("width", "450px");
-                    }
-                    else if ($scope.longest_annotationT1.length > 69 && $scope.longest_annotationT1.length <= 75) {
-
-
-                        $("#sppeachBubble_annotation").css("width", "510px");
-
-                    }
-                    else {
-
-
-                        $("#sppeachBubble_annotation").css("width", ($scope.longest_annotationT1.length) + "%");
-                    }
-                }
-
-
-                else {
-                    $("#sppeachBubble_annotation p").remove();
-                    $('#canvasDiv').append(sppechBubbleDotHTML_annotation);
-                    for (var l = 0; l <= $scope.annotationTextArrayT1.length - 1; l++) {
-                        var MultipleLang_annotation_T1 = $scope.annotationTextArrayT1[l];
-                        $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T1 + "</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];
-                        $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T2 + "</p>");
-                    }
-
-                    if ($scope.longest_annotationT2.length <= 10) {
-
-
-                        $("#sppeachBubble_annotation").css("width", "100px");
-
-
-                    }
-
-                    else if ($scope.longest_annotationT2.length > 10 && $scope.longest_annotationT2.length <= 17) {
-
-
-                        $("#sppeachBubble_annotation").css("width", "140px");
-
-
-                    }
-
-                    else if ($scope.longest_annotationT2.length > 17 && $scope.longest_annotationT2.length <= 26) {
-
-
-
-                        $("#sppeachBubble_annotation").css("width", "195px");
-
-                    }
-                    else if ($scope.longest_annotationT2.length > 26 && $scope.longest_annotationT2.length <= 34) {
-
-
-
-                        $("#sppeachBubble_annotation").css("width", "248px");
-                    }
-                    else if ($scope.longest_annotationT2.length > 34 && $scope.longest_annotationT2.length <= 44) {
-
-
-
-                        $("#sppeachBubble_annotation").css("width", "300px");
-                    }
-
-                    else if ($scope.longest_annotationT2.length > 44 && $scope.longest_annotationT2.length <= 54) {
-
-
-
-                        $("#sppeachBubble_annotation").css("width", "370px");
-                    }
-                    else if ($scope.longest_annotationT2.length > 54 && $scope.longest_annotationT2.length <= 69) {
-
-
-
-                        $("#sppeachBubble_annotation").css("width", "450px");
-                    }
-                    else if ($scope.longest_annotationT2.length > 69 && $scope.longest_annotationT2.length <= 75) {
-
-
-                        $("#sppeachBubble_annotation").css("width", "510px");
-
-                    }
-                    else {
-
-
-                        $("#sppeachBubble_annotation").css("width", ($scope.longest_annotationT2.length) + "%");
-                    }
-                    var Globe = [];
-                    Globe.push({ currentX: x, currentY: y });
-
-                    document.getElementById('dot_annotation').style.display = 'block';
-                    document.getElementById('dot_annotation').style.left = ((Globe[0].currentX) - 10) + 'px';
-                    document.getElementById('dot_annotation').style.top = ((Globe[0].currentY) + 10) + 'px';
-                    document.getElementById('sppeachBubble_annotation').style.display = 'block';
-                    document.getElementById('sppeachBubble_annotation').style.left = (Globe[0].currentX) + 'px';
-                    document.getElementById('sppeachBubble_annotation').style.top = (Globe[0].currentY) + 'px';
-
-                    $('#sppeachBubble_annotation').draggable(
-             {
-                 drag: function (evt) {
-
-                     //$("#dot_annotation").css("display", "none");
-                     $("#dot_annotation").remove();
-
-                     var verticalScrollPosition = canvasDiv.scrollTop;
-                     var horizontlScrollPosition = canvasDiv.scrollLeft;
-                     $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
-
-
-                 },
-             });
-
-
-                    $('.crossDiv_temp_annotation').on('click', function (evt) {
-                        //$('#sppeachBubble_annotation').css('display', 'none');
-
-                        //$("#bord_annotation").css("display", "none");
-                        //$("#dot_annotation").css("display", "none");
-
-
-                        $('#sppeachBubble_annotation').remove();
-
-                        $("#bord_annotation").remove();
-                        $("#dot_annotation").remove();
-
-                    });
-                }
-
-
-
+                $scope.createSpeechBubbleBasedOnTransparencyWithoutCtrl(x, y);
+                $('#sppeachBubble_annotation').draggable(
+            {
+                drag: function (evt) {
+                    $("#dot_annotation").remove();
+                    var verticalScrollPosition = canvasDiv.scrollTop;
+                    var horizontlScrollPosition = canvasDiv.scrollLeft;
+                    $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
+                },
+            });
+                $('.crossDiv_temp_annotation').on('click', function (evt) {
+                    $('#sppeachBubble_annotation').remove();
+                    $("#bord_annotation").remove();
+                    $("#dot_annotation").remove();
+                });
             }
-
-
         }
-
-
         if (document.getElementById("btnStrutureBox").name == "showAnnotationStructure") {
             $scope.showAnnotation()
-           
         }
         else {
             $scope.hideAnnotation()
-          
-
         }
-       
         if ($rootScope.isTBCompleted == true) {
             $('#sppeachBubble').remove();
             $('#dot').remove();
@@ -3883,6 +3328,288 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             }
         }
     }
+    $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl = function (x, y) {
+
+
+
+        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:#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:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
+                  + '<img class="crossDiv_temp" style="width:18px" src=' + $rootScope.path + '></span></div>'
+
+                  + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="bord">'
+                 + '</div>';
+
+        //Issue #7286 :Undefined annotation should not appear
+        for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
+            var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
+        }
+
+        if (MultipleLanguage == undefined) {
+            console.log("No text is found");
+        } else {
+            $('#canvasDiv').append(sppechBubbleDotHTML);
+
+            if ($scope.MultiLanguageAnnationArray.length > 0) {
+                for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
+                    var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
+                    $("#sppeachBubble").append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
+                }
+            }
+            else {
+                console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length)
+            }
+            if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) {
+                if ($scope.longestAnnotation.length <= 10) {
+
+
+                    $("#sppeachBubble").css("width", "100px");
+
+                }
+
+                else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
+
+
+
+                    $("#sppeachBubble").css("width", "140px");
+
+                }
+                else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
+
+
+                    $("#sppeachBubble").css("width", "195px");
+
+                }
+                else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
+
+                    $("#sppeachBubble").css("width", "248px");
+
+                }
+                else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
+
+
+                    $("#sppeachBubble").css("width", "300px");
+                }
+
+                else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
+
+                    $("#sppeachBubble").css("width", "370px");
+                }
+
+                else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
+                    $("#sppeachBubble").css("width", "450px");
+                }
+                else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
+                    $("#sppeachBubble").css("width", "510px");
+                }
+                else {
+                    $("#sppeachBubble").css("width", ($scope.longestAnnotation.length) + "%");
+                }
+            }
+        }
+        var Globe = [];
+        Globe.push({ currentX: x, currentY: y });
+        document.getElementById('dot').style.display = 'block';
+        document.getElementById('dot').style.left = ((Globe[0].currentX) - 10) + 'px';
+        document.getElementById('dot').style.top = ((Globe[0].currentY) + 10) + 'px';
+        document.getElementById('sppeachBubble').style.display = 'block';
+        document.getElementById('sppeachBubble').style.left = (Globe[0].currentX) + 'px';
+        document.getElementById('sppeachBubble').style.top = (Globe[0].currentY) + 'px';
+
+
+
+    }
+    $scope.createSpeechBubbleBasedOnTransparencyWithCtrl = function (pointClicked_annotation, Exists_annotation, x, y, sub_id_annotation) {
+        var sppechBubbleHTML_annotation = "<div id ='" + pointClicked_annotation + "' class='com_anno'><div style='z-index:59000;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:59000;' id='bord_annotation" + $scope.j + "'></div></div>";
+        if ($scope.longest_annotationT1.length > $scope.longest_annotationT2.length) {
+            if (Exists_annotation == 0) {
+                $("#canvasDiv").append(sppechBubbleHTML_annotation);
+                for (var l = 0; l <= $scope.annotationTextArrayT1.length - 1; l++) {
+                    var MultipleLang_annotation_T1 = $scope.annotationTextArrayT1[l];
+                    $("#" + 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>");
+                for (var k = 0; k <= $scope.annotationTextArrayT2.length - 1; k++) {
+                    var MultipleLang_annotation_T2 = $scope.annotationTextArrayT2[k];
+                    $("#" + sub_id_annotation).append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T2 + "</p>");
+                }
+                if ($scope.longest_annotationT1.length <= 10) {
+                    $("#" + sub_id_annotation).css("width", "100px");
+                }
+                else if ($scope.longest_annotationT1.length > 10 && $scope.longest_annotationT1.length <= 17) {
+                    $("#" + sub_id_annotation).css("width", "140px");
+                }
+                else if ($scope.longest_annotationT1.length > 17 && $scope.longest_annotationT1.length <= 26) {
+                    $("#" + sub_id_annotation).css("width", "195px");
+                }
+                else if ($scope.longest_annotationT1.length > 26 && $scope.longest_annotationT1.length <= 34) {
+                    $("#" + sub_id_annotation).css("width", "248px");
+                }
+                else if ($scope.longest_annotationT1.length > 34 && $scope.longest_annotationT1.length <= 44) {
+                    $("#" + sub_id_annotation).css("width", "300px");
+                }
+                else if ($scope.longest_annotationT1.length > 44 && $scope.longest_annotationT1.length <= 54) {
+                    $("#" + sub_id_annotation).css("width", "370px");
+                }
+                else if ($scope.longest_annotationT1.length > 54 && $scope.longest_annotationT1.length <= 69) {
+                    $("#" + sub_id_annotation).css("width", "450px");
+                }
+                else if ($scope.longest_annotationT1.length > 69 && $scope.longest_annotationT1.length <= 75) {
+                    $("#" + sub_id_annotation).css("width", "510px");
+                }
+                else {
+                    $("#" + sub_id_annotation).css("width", ($scope.longest_annotationT1.length) + "%");
+                }
+            }
+            else {
+                $("#canvasDiv").find("div[id=" + pointClicked_annotation + "]").css("display", "block");
+            }
+        }
+        else {
+            if (Exists_annotation == 0) {
+                $("#canvasDiv").append(sppechBubbleHTML_annotation);
+                for (var l = 0; l <= $scope.annotationTextArrayT1.length - 1; l++) {
+                    var MultipleLang_annotation_T1 = $scope.annotationTextArrayT1[l];
+                    $("#" + sub_id_annotation).append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T1 + "</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];
+                    $("#" + sub_id_annotation).append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T2 + "</p>");
+                }
+                if ($scope.longest_annotationT2.length <= 10) {
+                    $("#" + sub_id_annotation).css("width", "100px");
+                }
+                else if ($scope.longest_annotationT2.length > 10 && $scope.longest_annotationT2.length <= 17) {
+                    $("#" + sub_id_annotation).css("width", "140px");
+                }
+                else if ($scope.longest_annotationT2.length > 17 && $scope.longest_annotationT2.length <= 26) {
+                    $("#" + sub_id_annotation).css("width", "195px");
+                }
+                else if ($scope.longest_annotationT2.length > 26 && $scope.longest_annotationT2.length <= 34) {
+                    $("#" + sub_id_annotation).css("width", "248px");
+                }
+                else if ($scope.longest_annotationT2.length > 34 && $scope.longest_annotationT2.length <= 44) {
+                    $("#" + sub_id_annotation).css("width", "300px");
+                }
+                else if ($scope.longest_annotationT2.length > 44 && $scope.longest_annotationT2.length <= 54) {
+                    $("#" + sub_id_annotation).css("width", "370px");
+                }
+                else if ($scope.longest_annotationT2.length > 54 && $scope.longest_annotationT2.length <= 69) {
+                    $("#" + sub_id_annotation).css("width", "450px");
+                }
+                else if ($scope.longest_annotationT2.length > 69 && $scope.longest_annotationT2.length <= 75) {
+                    $("#" + sub_id_annotation).css("width", "510px");
+                }
+                else {
+                    $("#" + sub_id_annotation).css("width", ($scope.longest_annotationT2.length) + "%");
+                }
+            }
+            else {
+                $("#canvasDiv").find("div[id=" + pointClicked_annotation + "]").css("display", "block");
+            }
+        }
+    }
+    $scope.createSpeechBubbleBasedOnTransparencyWithoutCtrl = function (x, y) {
+
+        var sppechBubbleDotHTML_annotation = '<div id="dot_annotation" style="position:absolute;height:15px;width:35px;display:none;z-index:59000;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: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>'
+
+                 + '<div style="position:absolute;border:1px solid #000;display:none;z-index:59000;" id="bord_annotation">'
+                + '</div>';
+        if ($scope.longest_annotationT1.length > $scope.longest_annotationT2.length) {
+            $("#sppeachBubble_annotation p").remove();
+            $('#canvasDiv').append(sppechBubbleDotHTML_annotation);
+            for (var l = 0; l <= $scope.annotationTextArrayT1.length - 1; l++) {
+                var MultipleLang_annotation_T1 = $scope.annotationTextArrayT1[l];
+                $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T1 + "</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];
+                $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T2 + "</p>");
+            }
+            if ($scope.longest_annotationT1.length <= 10) {
+                $("#sppeachBubble_annotation").css("width", "100px");
+            }
+            else if ($scope.longest_annotationT1.length > 10 && $scope.longest_annotationT1.length <= 17) {
+                $("#sppeachBubble_annotation").css("width", "140px");
+            }
+            else if ($scope.longest_annotationT1.length > 17 && $scope.longest_annotationT1.length <= 26) {
+                $("#sppeachBubble_annotation").css("width", "195px");
+            }
+            else if ($scope.longest_annotationT1.length > 26 && $scope.longest_annotationT1.length <= 34) {
+                $("#sppeachBubble_annotation").css("width", "248px");
+            }
+            else if ($scope.longest_annotationT1.length > 34 && $scope.longest_annotationT1.length <= 44) {
+                $("#sppeachBubble_annotation").css("width", "300px");
+            }
+            else if ($scope.longest_annotationT1.length > 44 && $scope.longest_annotationT1.length <= 54) {
+                $("#sppeachBubble_annotation").css("width", "370px");
+            }
+            else if ($scope.longest_annotationT1.length > 54 && $scope.longest_annotationT1.length <= 69) {
+                $("#sppeachBubble_annotation").css("width", "450px");
+            }
+            else if ($scope.longest_annotationT1.length > 69 && $scope.longest_annotationT1.length <= 75) {
+                $("#sppeachBubble_annotation").css("width", "510px");
+            }
+            else {
+                $("#sppeachBubble_annotation").css("width", ($scope.longest_annotationT1.length) + "%");
+            }
+        }
+        else {
+            $("#sppeachBubble_annotation p").remove();
+            $('#canvasDiv').append(sppechBubbleDotHTML_annotation);
+            for (var l = 0; l <= $scope.annotationTextArrayT1.length - 1; l++) {
+                var MultipleLang_annotation_T1 = $scope.annotationTextArrayT1[l];
+                $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T1 + "</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];
+                $("#sppeachBubble_annotation").append("<p style='margin-bottom:2px;'>" + MultipleLang_annotation_T2 + "</p>");
+            }
+            if ($scope.longest_annotationT2.length <= 10) {
+                $("#sppeachBubble_annotation").css("width", "100px");
+            }
+            else if ($scope.longest_annotationT2.length > 10 && $scope.longest_annotationT2.length <= 17) {
+                $("#sppeachBubble_annotation").css("width", "140px");
+            }
+            else if ($scope.longest_annotationT2.length > 17 && $scope.longest_annotationT2.length <= 26) {
+                $("#sppeachBubble_annotation").css("width", "195px");
+            }
+            else if ($scope.longest_annotationT2.length > 26 && $scope.longest_annotationT2.length <= 34) {
+                $("#sppeachBubble_annotation").css("width", "248px");
+            }
+            else if ($scope.longest_annotationT2.length > 34 && $scope.longest_annotationT2.length <= 44) {
+                $("#sppeachBubble_annotation").css("width", "300px");
+            }
+            else if ($scope.longest_annotationT2.length > 44 && $scope.longest_annotationT2.length <= 54) {
+                $("#sppeachBubble_annotation").css("width", "370px");
+            }
+            else if ($scope.longest_annotationT2.length > 54 && $scope.longest_annotationT2.length <= 69) {
+                $("#sppeachBubble_annotation").css("width", "450px");
+            }
+            else if ($scope.longest_annotationT2.length > 69 && $scope.longest_annotationT2.length <= 75) {
+                $("#sppeachBubble_annotation").css("width", "510px");
+            }
+            else {
+                $("#sppeachBubble_annotation").css("width", ($scope.longest_annotationT2.length) + "%");
+            }
+        }
+        var Globe = [];
+        Globe.push({ currentX: x, currentY: y });
+        document.getElementById('dot_annotation').style.display = 'block';
+        document.getElementById('dot_annotation').style.left = ((Globe[0].currentX) - 10) + 'px';
+        document.getElementById('dot_annotation').style.top = ((Globe[0].currentY) + 10) + 'px';
+        document.getElementById('sppeachBubble_annotation').style.display = 'block';
+        document.getElementById('sppeachBubble_annotation').style.left = (Globe[0].currentX) + 'px';
+        document.getElementById('sppeachBubble_annotation').style.top = (Globe[0].currentY) + 'px';
+
+    }
 
     $scope.angle1 = function (cx1, cy1, ex1, ey1, id, id2) {