diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
index 05d2a7e..c6900cf 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -1040,170 +1040,184 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
     }
     $scope.sliderVal = 100;
     $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
-
         x = x * $scope.sliderPercentValue;
         y = y * $scope.sliderPercentValue;
-
-        var speechBubbleHTML = '<div id="speechBubbleLine' + PinId + '" style="position:absolute;height:15px;width:35px;display:none;z-index:13000;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="speechBubble' + PinId + '" class="common-drag" style="height:auto!important;z-index:13000;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;">'
-                  + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
-                  + '<img id="closeBtn' + PinId + ' " class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
-
-                  + '<div style="position:absolute;border:1px solid #000;display:none;z-index:12000;" id="speechBubbleDraggedLine' + PinId + '">'
-                 + '</div>';
-
-        //Issue #7286 :Undefined annotation should not appear
-        for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
-            var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
+        if ($("#canvasDiv").find("div").length > 0) {
+            $("#canvasDiv").find("div").each(function () {
+                var str = $(this).attr("id");
+                if (str.substr(0, 16) == "speechBubbleLine") {
+                    var res = str.substr(16);
+                    if (res == PinId) {
+                        $scope.isAnnotationDivAlreadyPresent = false;
+                    }
+                    else {
+                        $scope.isAnnotationDivAlreadyPresent = true;
+                    }
+                }
+            });
         }
+        else {
+            $scope.isAnnotationDivAlreadyPresent = true;
+        }
+        if ($scope.isAnnotationDivAlreadyPresent == true) {
+            var speechBubbleHTML = '<div id="speechBubbleLine' + PinId + '" style="position:absolute;height:15px;width:35px;display:none;z-index:13000;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="speechBubble' + PinId + '" class="common-drag" style="height:auto!important;z-index:13000;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;">'
+                      + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
+                      + '<img id="closeBtn' + PinId + ' " class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
 
-        if (MultipleLanguage == undefined) {
-            console.log("No text is found");
-        } else {
-            $('#canvasDiv').append(speechBubbleHTML);
+                      + '<div style="position:absolute;border:1px solid #000;display:none;z-index:12000;" id="speechBubbleDraggedLine' + PinId + '">'
+                     + '</div>';
 
-            if ($scope.MultiLanguageAnnationArray.length > 0) {
-                for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
-                    var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
-                    $rootScope.clickedPinAnnotation = $scope.MultiLanguageAnnationArray[0];
-                    $("#speechBubble" + PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
-                }
-            }
-            else {
-                console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length)
+            //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(speechBubbleHTML);
 
-           
+                if ($scope.MultiLanguageAnnationArray.length > 0) {
+                    for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
+                        var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
+                        $rootScope.clickedPinAnnotation = $scope.MultiLanguageAnnationArray[0];
+                        $("#speechBubble" + PinId).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) {
+                if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) {
+                    if ($scope.longestAnnotation.length <= 10) {
 
 
-                    $("#speechBubble").css("width", "100px");
+                        $("#speechBubble").css("width", "100px");
 
-                }
+                    }
 
-                else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
+                    else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
 
 
 
-                    $("#speechBubble").css("width", "140px");
+                        $("#speechBubble").css("width", "140px");
 
-                }
-                else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
+                    }
+                    else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
 
 
-                    $("#speechBubble").css("width", "195px");
+                        $("#speechBubble").css("width", "195px");
 
-                }
-                else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
+                    }
+                    else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
 
-                    $("#speechBubble").css("width", "248px");
+                        $("#speechBubble").css("width", "248px");
 
-                }
-                else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
+                    }
+                    else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
 
 
-                    $("#speechBubble").css("width", "300px");
-                }
+                        $("#speechBubble").css("width", "300px");
+                    }
 
-                else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
+                    else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
 
-                    $("#speechBubble").css("width", "370px");
-                }
+                        $("#speechBubble").css("width", "370px");
+                    }
 
-                else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
-                    $("#speechBubble").css("width", "450px");
-                }
-                else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
-                    $("#speechBubble").css("width", "510px");
-                }
-                else {
-                    $("#speechBubble").css("width", ($scope.longestAnnotation.length) + "%");
+                    else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
+                        $("#speechBubble").css("width", "450px");
+                    }
+                    else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
+                        $("#speechBubble").css("width", "510px");
+                    }
+                    else {
+                        $("#speechBubble").css("width", ($scope.longestAnnotation.length) + "%");
+                    }
                 }
             }
+            var speechBubbleDims = [];
+
+            $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId });
+            speechBubbleDims.push({ currentX: x, currentY: y });
+            document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
+            document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 12)) + 'px';
+            if ($scope.sliderVal == 25) {
+                document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY + 5)) + 'px';
+            }
+            else {
+                document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY)) + 'px';
+            }
+            document.getElementById('speechBubble' + PinId + '').style.display = 'block';
+            document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 4) + 'px';
+            document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY) + 'px';
         }
-        var speechBubbleDims = [];
-
-        $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId });
-        speechBubbleDims.push({ currentX: x, currentY: y });
-        document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
-        document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 12)) + 'px';
-        if ($scope.sliderVal == 25) {
-            document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY + 5)) + 'px';
-        }
-        else {
-            document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY)) + 'px';
-        }
-        document.getElementById('speechBubble' + PinId + '').style.display = 'block';
-        document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 4) + 'px';
-        document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY) + 'px';
-        $('.common-drag').draggable(
-        {
+            $('.common-drag').draggable(
+            {
 
-            drag: function (evt) {
+                drag: function (evt) {
 
-                var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop;
-                var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft;
-                var clickedSpeechBubbleId = $(this).attr("id");
+                    var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop;
+                    var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft;
+                    var clickedSpeechBubbleId = $(this).attr("id");
 
-                var clickedPinId = clickedSpeechBubbleId.substring(12, clickedSpeechBubbleId.length);
+                    var clickedPinId = clickedSpeechBubbleId.substring(12, clickedSpeechBubbleId.length);
 
-                $("#speechBubbleLine" + clickedPinId).css("visibility", "hidden");
-                $("#speechBubbleLine" + clickedPinId).css("display", "none");
+                    $("#speechBubbleLine" + clickedPinId).css("visibility", "hidden");
+                    $("#speechBubbleLine" + clickedPinId).css("display", "none");
 
-                for (var i = 0; i <= $rootScope.speechBubbleDimaensions.length - 1; i++) {
-                    if ($rootScope.speechBubbleDimaensions[i].id == clickedPinId) {
-                        $scope.angle(clickedPinId, $rootScope.speechBubbleDimaensions[i].currentX, $rootScope.speechBubbleDimaensions[i].currentY, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
+                    for (var i = 0; i <= $rootScope.speechBubbleDimaensions.length - 1; i++) {
+                        if ($rootScope.speechBubbleDimaensions[i].id == clickedPinId) {
+                            $scope.angle(clickedPinId, $rootScope.speechBubbleDimaensions[i].currentX, $rootScope.speechBubbleDimaensions[i].currentY, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
+                        }
                     }
-                }
 
-            },
-        });
-        $('.crossDiv_temp').on('click', function (evt) {
+                },
+            });
+      
+            $('.crossDiv_temp').on('click', function (evt) {
+
+                var imgId = $(this).attr("id");
+                var pinId = imgId.substring(8, imgId.length);
+                $('#speechBubble' + pinId).remove();
+                $("#speechBubbleDraggedLine" + pinId).remove();
+                $("#speechBubbleLine" + pinId).remove();
+
+                //make all pin heads grey
+                var pinHeadName = 'PinArc_' + pinId;
+                var radial = $('#aaDetailViewCanvas').createGradient({
+                    x1: 50, y1: 50,
+                    x2: 50, y2: 50,
+                    r1: 10, r2: 30,
+                    c1: 'rgba(100, 50, 0,0)',
+                    c2: 'rgb(216, 216, 216)'
+                });
 
-            var imgId = $(this).attr("id");
-            var pinId = imgId.substring(8, imgId.length);
-            $('#speechBubble' + pinId).remove();
-            $("#speechBubbleDraggedLine" + pinId).remove();
-            $("#speechBubbleLine" + pinId).remove();
 
-            //make all pin heads grey
-            var pinHeadName = 'PinArc_' + pinId;
-            var radial = $('#aaDetailViewCanvas').createGradient({
+                $('#aaDetailViewCanvas').setLayer(pinHeadName, {
+                    fillStyle: radial,
+                }).drawLayers();
+            });
+
+            //make the head green
+            var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
                 x1: 50, y1: 50,
                 x2: 50, y2: 50,
                 r1: 10, r2: 30,
                 c1: 'rgba(100, 50, 0,0)',
-                c2: 'rgb(216, 216, 216)'
+                c2: 'rgb(126, 187, 83)'
             });
-
+            var pinHeadName = 'PinArc_' + PinId;
+            var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName);
+            // pin.fillStyle = radialAfterClick;
 
             $('#aaDetailViewCanvas').setLayer(pinHeadName, {
-                fillStyle: radial,
+                fillStyle: radialAfterClick,
             }).drawLayers();
-        });
-
-        //make the head green
-        var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
-            x1: 50, y1: 50,
-            x2: 50, y2: 50,
-            r1: 10, r2: 30,
-            c1: 'rgba(100, 50, 0,0)',
-            c2: 'rgb(126, 187, 83)'
-        });
-        var pinHeadName = 'PinArc_' + PinId;
-        var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName);
-        // pin.fillStyle = radialAfterClick;
+       
 
-        $('#aaDetailViewCanvas').setLayer(pinHeadName, {
-            fillStyle: radialAfterClick,
-        }).drawLayers();
     }
-
-
     $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
 
         var dy = ey - cy;