diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
index 3cb8fb4..0f4b78a 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -96,6 +96,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, BodyRegions, Bod
 
     $scope.openModuleItem = function (elSelector)
     {
+        debugger;
+
         alert($rootScope.OpenItemImageName);
 
         var OpendTileData = [];
@@ -146,14 +148,53 @@ function ($scope, $rootScope, $compile, $http, $log, $location, BodyRegions, Bod
         var jsElement = angular.element(document.getElementById("JsPannelContainer"));
 
 
-        $timeout(function () { $compile(jsElement.contents())($scope) }, 250);
+        $timeout(function () {
+            $compile(jsElement.contents())($scope);
+            if ($rootScope.moduleName == ATLAS_ANATOMY) {
+                $scope.addPinDataCanvas();
+            }
+
+          
+
+        }, 250);
 
+           
+       
       
 
+        //document.getElementById('aaDetailPageDiv').appendChild(imgCanvas);
+
+    }
+
+    
+    $scope.addPinDataCanvas = function()
+    {
+        //var pinDataCanvas = document.createElement('addPinDataCanvas');
+        //pinDataCanvas.id = "addPinDataCanvas";
+        //pinDataCanvas.height = 216;
+        //pinDataCanvas.width = 216;
+        //pinDataCanvas.style.position = "absolute";
+        //pinDataCanvas.style.left = 0 + "px";
+        //pinDataCanvas.style.top = 0 + "px";
+        ////pinDataCanvas.style.background = "red";
+        ////pinDataCanvas.style.border = "black 10px solid";
+
+        //var divReference = document.getElementById("imageDiv");
+        //divReference.appendChild(pinDataCanvas);
+
+        debugger;
+        var pinLength1 = Math.sqrt((638 - 604) * (638 - 604) + (83 - 120) * (83 - 120));
+        var pinLength = pinLength1.toPrecision(2);
+
+        var pinData = '<div class="pin" style="border:1px dashed #000;position:absolute;left:604px;top:120px;width:' + pinLength + 'px ><img src="~/content/images/img181.png"/></div></div>'
+        var divReference = document.getElementById("imageDiv");
+        divReference.appendChild(pinData);
+
     }
 
     $scope.showAllPins = function ()
     {
+        
         var promise = ModuleService.getPinDataForImage($rootScope.imageName)
 
           .then(
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html b/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
index c8ae6c1..c27bfde 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
+++ b/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
@@ -86,7 +86,7 @@
             <div class="container-fluid">
                 <div class="row">
 
-                    <div class=" col-sm-12 img-thumbnail" align="center">
+                    <div class=" col-sm-12 img-thumbnail" align="center" id="imageDiv">
                         <img id="modItemImage" src="../../../content/images/aa/images/aa_img_3112.jpg" alt="" title="" class="img-responsive">
                         <div class="clearfix">
                             <!--<img id="modItemImage" ng-init="alert('hi')" alt="" title="" class="img-responsive">-->
@@ -98,7 +98,7 @@
             </div>
 
        
-
+            </div>
 
         </div>
     </div>
diff --git a/400-SOURCECODE/AIAHTML5.Web/content/images/img181.png b/400-SOURCECODE/AIAHTML5.Web/content/images/img181.png
new file mode 100644
index 0000000..206649a
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/content/images/img181.png