diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
index 0fb2cbb..187bf34 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -8,7 +8,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     var ATLAS_ANATOMY = 'Atlas Anatomy';
     var CLINICAL_ILLUSTRATION = 'Clinical Illustrations';
     var CLINICAL_ANIMATION = 'Clinical Animations';
-    $rootScope.path = "~/../content/images/speeachBubbleClose.png";
+    $rootScope.closeBtnImgPath = "~/../content/images/speeachBubbleClose.png";
     //variables to bind Filter by Controls
     $scope.searchAAListViewData = [];
     $scope.SelectedAAthumbImage = [];
@@ -425,7 +425,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $scope.aaPinData = result.data.Root.Item;
 
                 //3. get termText info
-                alert('$scope.moduleName= ' + $scope.moduleName);
                 var promise = ModuleService.getTermTextForPin($scope.moduleName)
                .then(
                 function (response) {
@@ -477,7 +476,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
     $scope.showAnnotation = function (selectedSystemPinData)
     {
-        alert("Annotation Called First Time");
 
         var firstPinId = selectedSystemPinData[0]._PinId;
         var pinTermNumber = selectedSystemPinData[0]._TermId;
@@ -664,7 +662,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:60000;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:60000;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:-3px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.speechBubbleCounter + " class='dynCross' style='width:18px' 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:60000;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:60000;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:-3px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.speechBubbleCounter + " class='dynCross' style='width:18px' src=" + $rootScope.closeBtnImgPath + "></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];
@@ -715,16 +713,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             }
         }
     }
+    $rootScope.Globe1 = [];
     $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl = function (x, y, PinId) {
-
-
-
-        var sppechBubbleDotHTML = '<div id="dot' + PinId + '" 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>'
+        var sppechBubbleDotHTML = '<div id="speechBubbleLine' + PinId + '" 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' + PinId + '" class="common-drag" style="height:auto!important;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;">'
                   + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
-                  + '<img class="crossDiv_temp" style="width:18px" src=' + $rootScope.path + '></span></div>'
+                  + '<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:9000;" id="bord' + PinId + '">'
+                  + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="speechBubbleDraggedLine' + PinId + '">'
                  + '</div>';
 
         //Issue #7286 :Undefined annotation should not appear
@@ -795,37 +791,55 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             }
         }
         var Globe = [];
-        Globe.push({ currentX: x, currentY: y });
-        document.getElementById('dot' + PinId + '').style.display = 'block';
-        document.getElementById('dot' + PinId + '').style.left = ((Globe[0].currentX - 45)) + 'px';
-        document.getElementById('dot' + PinId + '').style.top = ((Globe[0].currentY) - 20) + 'px';
+        debugger;
+        $rootScope.Globe1.push({ "currentX": x, "currentY": y, "id": PinId });
+        Globe.push({ currentX: x, currentY: y});
+        document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
+        document.getElementById('speechBubbleLine' + PinId + '').style.left = ((Globe[0].currentX - 45)) + 'px';
+        document.getElementById('speechBubbleLine' + PinId + '').style.top = ((Globe[0].currentY) - 20) + 'px';
         document.getElementById('sppeachBubble' + PinId + '').style.display = 'block';
         document.getElementById('sppeachBubble' + PinId + '').style.left = (Globe[0].currentX - 70) + 'px';
         document.getElementById('sppeachBubble' + PinId + '').style.top = (Globe[0].currentY - 58) + 'px';
-
+      
         $('.common-drag').draggable(
         {
             drag: function (evt) {
-              //  $("#dot").css("visibility", "hidden");
+                //  $("#dot").css("visibility", "hidden");
                 var verticalScrollPosition = document.getElementById('imageDiv').scrollTop;
                 var horizontlScrollPosition = document.getElementById('imageDiv').scrollLeft;
                 var a = $(this).attr("id");
               
                 var res = a.substring(13, a.length);
-                $("#dot" + res).css("visibility", "hidden");
-              //  var c = ($("#sppeachBubble" + res).css("left")).toString().replace("px", "");
-               // alert(c);
-               // var d = ($("#sppeachBubble" + res).css("top")).toString().replace("px", "");
-               // alert(d);
-
-            //   alert(evt.pageX + "X" + evt.pageY + "horizontlScrollPosition" + horizontlScrollPosition + "verticalScrollPosition" + verticalScrollPosition);
-                $scope.angle(res, x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
+                $("#speechBubbleLine" + res).css("visibility", "hidden");
+                
+                 // var c = ($("#sppeachBubble" + res).css("left")).toString().replace("px", "");
+                // alert(c);
+                 //var d = ($("#sppeachBubble" + res).css("top")).toString().replace("px", "");
+                // alert(d);
+               console.log("res= " + res + "x= " + x + ",y= " + y + ",evt.pageY= " + evt.page + ",evt.pageX= " + evt.pageX + ",horizontlScrollPosition= " + horizontlScrollPosition + ",verticalScrollPosition= " + verticalScrollPosition);
+
+             //   alert(evt.pageX + "X" + evt.pageY + "horizontlScrollPosition" + horizontlScrollPosition + "verticalScrollPosition" + verticalScrollPosition);
+               for (var i = 0; i <= $rootScope.Globe1.length - 1; i++) {
+                   if ($rootScope.Globe1[i].id == res) {
+                     //  alert($rootScope.Globe1[i].currentX);
+                       $scope.angle(res, $rootScope.Globe1[i].currentX, $rootScope.Globe1[i].currentY, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
+                   }
+               }
+               
             },
         });
-
-
+        $('.crossDiv_temp').on('click', function (evt) {
+            var imgId = $(this).attr("id");
+            var pinId = imgId.substring(8, imgId.length);
+            $('#sppeachBubble' + pinId).remove();
+            $("#speechBubbleDraggedLine" + pinId).remove();
+            $("#speechBubbleLine" + pinId).remove();
+        });
+    }
+      
+        
         $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
-
+         //   debugger;
           //  alert(ex + " " + ey);
             var dy = ey - cy;
             var dx = ex - cx;
@@ -849,7 +863,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             var f = cx;
          //   alert(d);
             if (BoolValues == true) {
-                $("#bord"+id).css({ 'display': 'block', 'width': d + 'px', 'top': e + 'px', 'left': f + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
+                $("#speechBubbleDraggedLine"+id).css({ 'display': 'block', 'width': d + 'px', 'top': e + 'px', 'left': f + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
             }
             else {
                 $("#bord_annotation").css({ 'display': 'block', 'width': d + 'px', 'top': e + 'px', 'left': f + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
@@ -859,7 +873,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
         }
 
-    }
+    
 }]);
 
 function showSelectedSystemPins(event) {