diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
index be70841..fbe1c36 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -476,6 +476,8 @@ 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;
 
@@ -493,9 +495,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $scope.MultiLanguageAnnationArray.push(termText);
         angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
 
-            var headX = (parseInt(value._HeadX)) - 20;
-            var headY = (parseInt(value._HeadY)) - 15;
-            $scope.createSpeechBubble(headX, parseInt(headY-10));
+            var headX = (parseInt(value._HeadX));
+            var headY = (parseInt(value._HeadY));
+            $scope.createSpeechBubble(headX, parseInt(headY),value._PinId);
            // alert('headX: ' + headX + ', headY: ' + headY + ',termText: ' + termText);
         })
     }
@@ -508,11 +510,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $scope.context.clearRect(0, 0, canvasWidth, canvasHeight);
     };
 
-    $scope.createSpeechBubble = function (x,y) {
+    $scope.createSpeechBubble = function (x, y, PinId) {
 
         //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; });
+        $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl(x, y,PinId);
+        
         //2.
         //if (event.ctrlKey) {
         //    console.log('ctrl pressed');
@@ -553,31 +557,31 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         //    });
         //}
        // else {
-            $scope.multiAnnotationIsON = false;
+          //  $scope.multiAnnotationIsON = false;
             //history maintained issue
-            if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) {
-                $("#sppeachBubble").remove();
-                $("#dot").remove();
-            }
-            $(".com").remove();
-            $("#bord").remove();
-            $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl(x, y);
+            //if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) {
+            //    $("#sppeachBubble").remove();
+            //    $("#dot").remove();
+            //}
+           // $(".com").remove();
+           // $("#bord").remove();
+        
             //history maintained issue
-            if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) { document.getElementById('sppeachBubble').style.zIndex = "60000"; }
-            $('#sppeachBubble').draggable(
-            {
-                drag: function (evt) {
-                    $("#dot").css("visibility", "hidden");
-                    var verticalScrollPosition = canvasDiv.scrollTop;
-                    var horizontlScrollPosition = canvasDiv.scrollLeft;
-                    $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
-                },
-            });
-            $('.crossDiv_temp').on('click', function (evt) {
-                $('#sppeachBubble').remove();
-                $("#bord").remove();
-                $("#dot").remove();
-            });
+            //if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) { document.getElementById('sppeachBubble').style.zIndex = "60000"; }
+            //$('#sppeachBubble').draggable(
+            //{
+            //    drag: function (evt) {
+            //        $("#dot").css("visibility", "hidden");
+            //        var verticalScrollPosition = canvasDiv.scrollTop;
+            //        var horizontlScrollPosition = canvasDiv.scrollLeft;
+            //        $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
+            //    },
+            //});
+            //$('.crossDiv_temp').on('click', function (evt) {
+            //    $('#sppeachBubble').remove();
+            //    $("#bord").remove();
+            //    $("#dot").remove();
+            //});
         //}
     }
 
@@ -710,16 +714,16 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             }
         }
     }
-    $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl = function (x, y) {
+    $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl = function (x, y, PinId) {
 
 
 
-        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;">'
+        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>'
+                  + '<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>'
 
-                  + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="bord">'
+                  + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="bord' + PinId + '">'
                  + '</div>';
 
         //Issue #7286 :Undefined annotation should not appear
@@ -735,7 +739,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             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>");
+                    $("#sppeachBubble"+PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
                 }
             }
             else {
@@ -791,15 +795,60 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         }
         var Globe = [];
         Globe.push({ currentX: x, currentY: y });
-        document.getElementById('dot').style.display = 'block';
-        document.getElementById('dot').style.left = ((Globe[0].currentX-6) ) + 'px';
-        document.getElementById('dot').style.top = ((Globe[0].currentY) + 3) + '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';
+        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';
+        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");
+                var verticalScrollPosition = $('#imageDiv').scrollTop;
+                var horizontlScrollPosition = $('#imageDiv').scrollLeft;
+                $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
+            },
+        });
+
+
+        $scope.angle = function (cx, cy, ex, ey, BoolValues) {
+
+
+            var dy = ey - cy;
+            var dx = ex - cx;
+            var theta = 0;
+            if (dx < 0) {
+                theta = Math.atan(dy / dx) * (180 / Math.PI);
+                theta = theta + 180;
+
+            }
+            else if (dy < 0) {
+                theta = Math.atan(dy / dx) * (180 / Math.PI);
+                theta = theta + 360;
 
+            }
+            else {
+                theta = Math.atan(dy / dx) * (180 / Math.PI);
+            }
+
+            var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
+            var e = cy;
+            var f = cx;
+
+            if (BoolValues == true) {
+                $("#bord").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%' });
+            }
 
 
+
+        }
+
     }
 }]);