diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
index 6f2e2af..a876757 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -927,7 +927,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 c2: 'rgb(216, 216, 216)'
             });
             $('#' + canvasId).drawLine({
-
                 layer: true,
                 name: "Pin_" + PinId,
                 groups: ["Pin_" + PinId],
@@ -950,17 +949,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 radius: 5 * $scope.sliderPercentValue,
 
                 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;
+                    // alert('pin clciked = ' + clickedPin.name)
+
+                
 
                     var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
                     // alert('pinId: ' + pinID);
@@ -991,14 +982,47 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     }
 
                     var selectedPinData = new jinqJs()
-                                .from($scope.aaPinData)
+                                .from($scope.aaPinData) 
                                 .where("_PinId == " + pinID)
                                 .select();
                     if (clickedPin.event.ctrlKey == true) {
+
+                        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;
                         $scope.showAnnotation(selectedPinData, true, true, false);
 
                     }
                     else {
+                        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)'
+                        });
+
+
+                        $('#aaDetailViewCanvas').setLayers({
+                            fillStyle: radial,
+                        }).drawLayers();
+
+                        //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;
                         $scope.showAnnotation(selectedPinData, false, true, false);
 
                     }