diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
index 435706f..a99997b 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -176,7 +176,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     canvas.style.left = '0px';
                     canvas.style.top = '0px';
                     canvas.style.position = "absolute";
-
+                    canvas.addEventListener('click', function () {
+                        alert('canvas clicked');
+                        var clickedPint = $scope.getMousePos(event);
+                        alert('x: ' + clickedPint.x + ', y:' + clickedPint.y);
+                    })
                     $("#canvasDiv").append(canvas);
                     $scope.context = canvas.getContext("2d")
 
@@ -226,7 +230,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     })
 
     $scope.showAllPins = function () {
-
+       
         var promise = ModuleService.getPinDataForImage($rootScope.imageName)
 
           .then(
@@ -903,6 +907,97 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
     $scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
 
+        if ($rootScope.isSliderChanged == true) {
+            var radial = $('#' + canvasId).createGradient({
+                x1: 50, y1: 50,
+                x2: 50, y2: 50,
+                r1: 10, r2: 30,
+                c1: 'rgba(100, 50, 0,0)',
+                c2: 'rgb(216, 216, 216)'
+            });
+            $('#' + canvasId).drawLine({
+
+                layer: true,
+                name: "Pin_" + PinId,
+                groups: ["Pin_" + PinId],
+                strokeStyle: 'black',
+                strokeWidth: 2,
+                visible: true,
+                x1: offsetX1, y1: offsetY1,
+                x2: x * 0.85, y2: y * 0.85,
+
+            }).drawArc({
+                name: "PinArc_" + PinId,
+                layer: true,
+                groups: ["Pin_" + PinId],
+                strokeStyle: 'grey',
+                strokeWidth: 2,
+                visible: true,
+                fillStyle: radial,
+                x: x * 0.85, y: y * 0.85,
+                radius: 5 * 0.85,
+
+                click: function (clickedPin) {
+                    alert('pin clciked = ' + clickedPin.name)
+                    //change the head color to 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)'
+                    });
+
+                    clickedPin.fillStyle = radialAfterClick;
+
+                    var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
+                    // alert('pinId: ' + pinID);
+                    //showAnnotation();
+
+                    var pinData = new jinqJs()
+                                  .from($scope.aaPinData)
+                                  .where("_PinId == " + pinID)
+                                  .select();
+
+
+                    var pinTermNumber = pinData[0]._TermId;
+
+                    var pinWithSameTerm = new jinqJs()
+
+                                         .from($scope.aaPinData)
+                                         .where("_TermId == " + pinTermNumber)
+                                         .select();
+
+
+                    if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
+
+                        for (var i = 0; i < pinWithSameTerm.length; i++) {
+
+                            $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
+                        }
+
+                    }
+
+                    var selectedPinData = new jinqJs()
+                                .from($scope.aaPinData)
+                                .where("_PinId == " + pinID)
+                                .select();
+                    if (clickedPin.event.ctrlKey == true) {
+                        $scope.showAnnotation(selectedPinData, true, true, false);
+
+                    }
+                    else {
+                        $scope.showAnnotation(selectedPinData, false, true, false);
+
+                    }
+
+
+                }
+
+            }).drawLayers();
+        }
+        else
+     {
         var radial = $('#' + canvasId).createGradient({
             x1: 50, y1: 50,
             x2: 50, y2: 50,
@@ -930,11 +1025,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             visible: true,
             fillStyle: radial,
             x: x, y: y,
-            radius: 5,
+            radius: 2,
 
             click: function (clickedPin) {
-
-                //change the head color to green
+                alert('pin clciked = ' + clickedPin.name)                //change the head color to green
                 var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
                     x1: 50, y1: 50,
                     x2: 50, y2: 50,
@@ -990,10 +1084,19 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             }
 
         }).drawLayers();
+    }
 
     }
 
 
+    $scope.getMousePos = function (evt) {
+
+        return {
+            x: Math.round(evt.pageX - $('#canvasDiv').offset().left),
+            y: Math.round(evt.pageY - $('#canvasDiv').offset().top)
+        }
+    }
+
     $scope.removePin = function (canvasId, pinId) {
 
         // var pinName = 'Pin_' + pinId;