diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
index 8032934..0a9e514 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -36,19 +36,18 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
     $scope.activePinArray = [];
     $scope.showTabButton = true;
     $scope.isListViewDataLoaded = true;
-  
+
     $scope.setActiveTab = function (tabToSet) {
-       
+
         $scope.activeTab = tabToSet;
         localStorage.setItem("activeTab", $scope.activeTab);
         if ($scope.activeTab == 1) {
-            $('#grid-view').css("display","block");
+            $('#grid-view').css("display", "block");
             $('#list-view').css("display", "none");
             $("#demoView").remove();
         }
-        else
-        {
-        
+        else {
+
 
             $('#grid-view').css("display", "none");
             if ($scope.isListViewDataLoaded == true) {
@@ -75,11 +74,10 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
                 $('#list-view').css("display", "block");
                 $scope.isListViewDataLoaded = false;
             }
-            else
-            {
+            else {
                 $('#list-view').css("display", "block");
             }
-          
+
             $timeout(function () {
                 //  if ($rootScope.isListViewRowClicked == true) {
                 //  $rootScope.isListViewRowClicked = false;
@@ -107,7 +105,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
             }, 2000);
         }
     };
-  
+
     $scope.loadForModuleById = function (moduleId) {
 
         if ($rootScope.refreshcheck == null) {
@@ -127,7 +125,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
               function (result) {
 
                   $scope.moduleLandingData = result;
-               //   setTimeout(function () { $('#' + $rootScope.highlightid).find('.thumbnail').addClass('hightlightstate'); }, 100);
+                  //   setTimeout(function () { $('#' + $rootScope.highlightid).find('.thumbnail').addClass('hightlightstate'); }, 100);
                   if ($rootScope.getLocalStorageValue('AAGridViewHighlightThumbnail') !== null) {
                       setTimeout(function () { $('#' + $rootScope.getLocalStorageValue("AAGridViewHighlightThumbnail")).find('.thumbnail').addClass('HightLightThumbnail'); }, 100);
                   }
@@ -152,11 +150,11 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
     $scope.openModuleItemView = function (event) {
        
         $rootScope.MenuModuleName = "AA";
-     localStorage.setItem("activeTab", $scope.activeTab);
+        localStorage.setItem("activeTab", $scope.activeTab);
         //0. Get selected Image Id
         if ($scope.isListViewButtonClicked == true) {
             if ($scope.isOpenBtnClicked == true) {
-             
+
                 var moduleItemDataToBeSaved = $("#demoText").html();
                 $scope.isOpenBtnClicked = false;
             }
@@ -166,13 +164,12 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
                 var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text();
             }
         }
-        else
-        {
+        else {
             var moduleItemDataToBeSaved = event.target.id;
             localStorage.setItem("listViewSelectedID", event.currentTarget.id);
             $scope.isListViewButtonClicked = false;
         }
-       
+
         //1.Filter selected module ietem data and get the pushed opened moduile array object
         $rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData);
 
@@ -188,7 +185,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
         localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]);
         localStorage.setItem("AAGridViewScroll", $($window).scrollTop());
         localStorage.setItem("AAGridViewHighlightThumbnail", $(event.target).parent().parent().parent().attr('id'));
-       
+
         //3. Navigate to the Module-item-view
         var u = $location.url();
         $location.url('/module-item-view');
@@ -197,7 +194,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
 
 
     $scope.openListViewModuleItem = function (event) {
-      
+
         $("#demoView").remove();
         var moduleItemDataToBeSavedID = event.currentTarget.id;
         $("#list-view table tbody tr").removeClass("active");
@@ -269,7 +266,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
             var openedImage = new Image();
             openedImage.id = 'modItemImage';
             openedImage.name = $rootScope.OpenItemImagePath;
-         
+
             openedImage.onload = function () {
                 $scope.imageWidth = this.width;
                 $scope.imageHeight = this.height;
@@ -284,7 +281,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
                     if (document.getElementById('aaBodyView') != null) {
 
                         //0.4 added some stylesheets
-                     
+
                      
                         $rootScope.canvasDivHeight = $('.jsPanel-content').height() - $('.main2 .stickey-area').height();
 
@@ -349,7 +346,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
         return true;
     }
 
-   
+
     angular.element(document).ready(function (e) {
         $("#ImagePanel").resize(function () {
             $("#canvasDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
@@ -361,14 +358,15 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
             $rootScope.selectedBodySystemName = 'All';
             $rootScope.selectedBodySystemId = 0;
             $rootScope.searchSelectedText = '';
-        
+
         });
     })
 
     $scope.showAllPins = function () {
-        
+
         $scope.allPinDataArray = [];
         var promise = ModuleService.getPinDataForImage($rootScope.imageName)
+
           .then(
             function (result) {
 
@@ -407,7 +405,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
             $timeout(function () {
                 $scope.activePinOnLayerChange();
             }, 1000);
-         
+
         }
 
     }
@@ -526,17 +524,30 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
 
                      if (selectimg === true && count >= filtercount) {
 
+                         if ($scope.activeTab == 1) {
+                             $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName;
 
-                         $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName;
 
-                         
                              var $el = $('<div id="' + value._id + '" class="col-sm-3 col-lg-2" title = "' + value._Title + '" data-ng-click="openModuleItemView($event)">'
                                  + '<div class="thumbnail" >'
                                             + '<img class="tinyImg" id="' + value._Title + '"ng-src="' + $scope.imagePath + '" alt="" title="" >'
                                             + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>').appendTo('#grid-view');
 
-                         
-                         $compile($el)($scope);
+
+                             $compile($el)($scope);
+                         }
+                         else {
+                             var htm = '';
+                             htm += "<table class='table table-hover table-fixed bg-white table-txt12'>  <thead class='clsthead'><tr class='active'><th width='25%'>Title</th> <th width='15%'>Region</th> <th width='30%'>System</th><th width='15%'>View</th> <th width='15%'>Type</th></tr></thead><tbody class='clstbody'>";
+                             //angular.forEach($scope.selectedAAListViewData, function (value, key) {
+                                 htm += "<tr id=" + value._Id + " onclick='openListViewModuleItem(event)' ondblclick='openModuleItemView(event)'>"
+                                 htm += '<td width="25%">' + value._Title + '</td><td width="15%">' + value._BodyRegion + '</td><td width="30%">' + value._BodySystem + '</td><td width="15%">' + value._ViewOrientation + '</td><td width="15%">' + value._ImageType + '</td>';
+                                 htm += "</tr>"
+                             //});
+                             htm += "</tbody></table>";
+                             $("#list-view").html(htm);
+                             $compile(htm)($scope);
+                         }
 
                          $(".sidebar").mCustomScrollbar({
                              autoHideScrollbar: true,
@@ -564,9 +575,8 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
 
                  });
 
-                 //Show Error Message in case of gridview if no data is found
+                 //Show Error Message in case of gridview/ ListView [if no data is found]
                  if ($scope.searchAAListViewData.length == 0) {
-
                      var $el = $('<div class="col-sm-12" style="padding-left:25px;padding-top:10px;"><strong style="color:white">No illustration found for the selected search criteria!</strong></div>').appendTo('#grid-view');
                      $compile($el)($scope);
                      $('table > #ListViewDiv > #searchItem').remove();
@@ -642,7 +652,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
             else {
                 $scope.showAllPins();
             }
-        }   
+        }
         else {
            
             $scope.selectedSystemName = event.currentTarget.title;
@@ -961,8 +971,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
         if ($scope.sliderVal == 25) {
             document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY + 5)) + 'px';
         }
-        else
-        {
+        else {
             document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY)) + 'px';
         }
         document.getElementById('speechBubble' + PinId + '').style.display = 'block';
@@ -1065,7 +1074,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
             else {
                 $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 10) + 'px', 'left': (f - 5) + '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%' });
@@ -1078,118 +1087,118 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
 
     $scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
         $scope.clickedPins = [];
-       // if ($scope.isSliderChange == true) {
-            console.log('isSliderrChange')
-            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: '#565656',
-                strokeWidth: 2,
-                visible: true,
-                x1: offsetX1 * $scope.sliderPercentValue, y1: offsetY1 * $scope.sliderPercentValue,
-                x2: x * $scope.sliderPercentValue, y2: y * $scope.sliderPercentValue,
-              
-
-            }).drawArc({
-                name: "PinArc_" + PinId,
-                layer: true,
-                groups: ["Pin_" + PinId],
-                strokeStyle: 'grey',
-                strokeWidth: 2,
-                visible: true,
-                fillStyle: radial,
-                x: x * $scope.sliderPercentValue, y: y * $scope.sliderPercentValue,
-                radius: 5 * $scope.sliderPercentValue,
-
-                click: function (clickedPin) {
-                    if (clickedPin.event.ctrlKey == false) {
-                                            $scope.clickedPins = [];
-                    }
-                    var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
-                    var pinData = new jinqJs()
-                                  .from($scope.aaPinData)
-                                  .where("_PinId == " + pinID)
-                                  .select();
+        // if ($scope.isSliderChange == true) {
+        console.log('isSliderrChange')
+        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: '#565656',
+            strokeWidth: 2,
+            visible: true,
+            x1: offsetX1 * $scope.sliderPercentValue, y1: offsetY1 * $scope.sliderPercentValue,
+            x2: x * $scope.sliderPercentValue, y2: y * $scope.sliderPercentValue,
+
+
+        }).drawArc({
+            name: "PinArc_" + PinId,
+            layer: true,
+            groups: ["Pin_" + PinId],
+            strokeStyle: 'grey',
+            strokeWidth: 2,
+            visible: true,
+            fillStyle: radial,
+            x: x * $scope.sliderPercentValue, y: y * $scope.sliderPercentValue,
+            radius: 5 * $scope.sliderPercentValue,
+
+            click: function (clickedPin) {
+                if (clickedPin.event.ctrlKey == false) {
+                    $scope.clickedPins = [];
+                }
+                var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
+                var pinData = new jinqJs()
+                              .from($scope.aaPinData)
+                              .where("_PinId == " + pinID)
+                              .select();
 
 
-                    var pinTermNumber = pinData[0]._TermId;
+                var pinTermNumber = pinData[0]._TermId;
 
-                    var pinWithSameTerm = new jinqJs()
+                var pinWithSameTerm = new jinqJs()
 
-                                         .from($scope.aaPinData)
-                                         .where("_TermId == " + pinTermNumber)
-                                         .select();
+                                     .from($scope.aaPinData)
+                                     .where("_TermId == " + pinTermNumber)
+                                     .select();
 
 
-                    if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
+                if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
 
-                        for (var i = 0; i < pinWithSameTerm.length; i++) {
-
-                            $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
-                        }
+                    for (var i = 0; i < pinWithSameTerm.length; i++) {
 
+                        $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
                     }
+
+                }
                     $scope.isSelectedPinBtnClickedAftrSliderCange = false;
-                    var selectedPinData = new jinqJs()
-                                .from($scope.aaPinData) 
-                                .where("_PinId == " + pinID)
-                                .select();
-                    if (clickedPin.event.ctrlKey == true) {
-                      
-                        $scope.activePinArray.push(clickedPin.name);
-                        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 {
-                        $scope.activePinArray = [];
-                        $scope.activePinArray.push(clickedPin.name);
-                        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)'
-                        });
+                var selectedPinData = new jinqJs()
+                            .from($scope.aaPinData)
+                            .where("_PinId == " + pinID)
+                            .select();
+                if (clickedPin.event.ctrlKey == true) {
+
+                    $scope.activePinArray.push(clickedPin.name);
+                    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 {
+                    $scope.activePinArray = [];
+                    $scope.activePinArray.push(clickedPin.name);
+                    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();
+                    $('#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)'
-                        });
+                    //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);
+                    clickedPin.fillStyle = radialAfterClick;
+                    $scope.showAnnotation(selectedPinData, false, true, false);
 
-                    }
+                }
 
 
-                }
+            }
+
+        }).drawLayers();
 
-            }).drawLayers();
-   
 
     }
 
@@ -1204,12 +1213,12 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
 
     $scope.removePin = function (canvasId, pinId) {
 
-         var pinName = 'Pin_' + pinId;
-         var pinArcName = 'PinArc_' + pinId;
-         $('#' + canvasId).removeLayer(pinName).drawLayers();
-         $('#' + canvasId).removeLayer(pinArcName).drawLayers();
+        var pinName = 'Pin_' + pinId;
+        var pinArcName = 'PinArc_' + pinId;
+        $('#' + canvasId).removeLayer(pinName).drawLayers();
+        $('#' + canvasId).removeLayer(pinArcName).drawLayers();
 
-          $scope.removeSpeechBubble();
+        $scope.removeSpeechBubble();
 
         //$rootScope.isSliderChanged = true;
         //$('#aaDetailViewCanvas').removeLayers();
@@ -1226,9 +1235,9 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
         $rootScope.onDrawingCanvasClick();
         $rootScope.FreeStylePaint();
     });
-    
+
     $rootScope.loadSearchData = function () {
-      
+
         //$("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
         var imageId = $rootScope.imageId;
         var promise = ModuleService.getTermTextDataForAAImage(imageId)
@@ -1236,32 +1245,31 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
                   function (response) {
 
                       $scope.AAPinTermData = response.data.PinTermData.TermData;
-                    
+
                       $rootScope.isLoading = false;
                       $('#setting-spinner').css('visibility', 'hidden');
-                   
+
                       $scope.pinTermData = [];
                       var primaryLexicon = $rootScope.lexiconLanguageArray[0].id;
                       $scope.matchedLanguageTermData = new jinqJs()
                                      .from($scope.AAPinTermData)
                                      .where('_LanguageId == ' + primaryLexicon)
                                      .select();
-                     var sortedTermTextArray = [];
+                      var sortedTermTextArray = [];
                       for (var i = 0; i < $scope.matchedLanguageTermData.length; i++) {
                           sortedTermTextArray.push($scope.matchedLanguageTermData[i]._TermText);
                           sortedTermTextArray.sort();
                       }
-                      
+
                       for (var i = 0; i <= sortedTermTextArray.length - 1; i++) {
-                          for(var j = 0;j<= $scope.matchedLanguageTermData.length-1;j++){
-                              if ($scope.matchedLanguageTermData[j]._TermText == sortedTermTextArray[i])
-                              {
+                          for (var j = 0; j <= $scope.matchedLanguageTermData.length - 1; j++) {
+                              if ($scope.matchedLanguageTermData[j]._TermText == sortedTermTextArray[i]) {
                                   $scope.pinTermData.push({ "LanguageId": $scope.matchedLanguageTermData[j]._LanguageId, "TermNumber": $scope.matchedLanguageTermData[j]._TermNumber, "TermTxt": $scope.matchedLanguageTermData[j]._TermText });
                                   break;
                               }
                           }
                       }
-                     
+
                       for (var i = 0; i <= sortedTermTextArray.length - 1; i++) {
                           for (var j = 0; j <= $scope.matchedLanguageTermData.length - 1; j++) {
                               if ($scope.matchedLanguageTermData[j]._TermText == sortedTermTextArray[i]) {
@@ -1271,12 +1279,12 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
                           }
                       }
 
-                   
+
                       $scope.$watch('$scope.pinTermData', function (newValue, oldValue, scope) {
-                        
+
                           if (($('#termlistfilter').html() != ""))
-                         
-                          $('#termlistfilter').empty();
+
+                              $('#termlistfilter').empty();
                           if ($scope.pinTermData.length > 0) {
                               $timeout(function () {
                                   console.log('pinTermData= ' + $scope.pinTermData.length);
@@ -1285,12 +1293,12 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
                                       var $el = $('<li><a id= "' + $scope.pinTermData[j].TermNumber + '" href="" onclick="onSearchItemSelection(event)" >' + $scope.pinTermData[j].TermTxt + '</a></li>').appendTo('#termlistfilter')
                                       $compile($el)($scope);
                                       var $selectedOptions = $('<option title= "' + $scope.pinTermData[j].TermTxt + '" id= "' + $scope.pinTermData[j].TermNumber + '" onclick="onSearchItemSelection(event)" >' + $scope.pinTermData[j].TermTxt + '</option>').appendTo("#termList")
-                                 
+
                                       $compile($selectedOptions)($scope);
-                                     
+
                                       $("#AABodySystems").empty();
-                                      $("#bodySystems").css("display","none");
-                                      $("#AABodySystems").css("display","block");
+                                      $("#bodySystems").css("display", "none");
+                                      $("#AABodySystems").css("display", "block");
                                       $("#bodySystemList li a").each(function (key, value) {
                                           var $systemOptions = $('<option id=' + $(this).attr('id') + ' >' + $(this).text() + '</option>').appendTo("#AABodySystems")
                                           $compile($systemOptions)($scope);
@@ -1311,19 +1319,18 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
 
 
     $scope.$on('listManagerEvent', function (event, data) {
-      
+
         $("#viewName").empty();
         $("#viewName").append("<option>" + $rootScope.listArray[0].text + "</option>");
         $rootScope.isLoading = false;
         $('#spinner').css('visibility', 'hidden');
-       
+
         if ($rootScope.bodySystemSeletedId == null) {
-          
+
             $rootScope.loadSearchData();
         }
-        else
-        {
-         
+        else {
+
             $rootScope.refreshTermListOnAASystemSelection($rootScope.bodySystemSeletedId);
         }
         $timeout(function () {
@@ -1335,13 +1342,13 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
 
 
     $rootScope.refreshTermListOnAASystemSelection = function (bodySystemId) {
-         $('#termList').empty();
+        $('#termList').empty();
         $rootScope.bodySystemSeletedId = bodySystemId;
         $('#termList').empty();
         var bodySystemName = $("#AABodySystems #" + bodySystemId).val();
         if (bodySystemName == "All") {
             for (var j = 0; j <= $scope.pinTermData.length - 1; j++) {
-              
+
                 $compile($selectedOptions)($scope);
             }
             $("#totalTerms").empty();
@@ -1351,7 +1358,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
             var imageId = $rootScope.imageId;
             $scope.pinDataUrl = "aa_dat_pinterm_" + imageId;
             $rootScope.bodySystemTermArray = [];
-          
+
             $.ajax({
                 url: '~/../content/data/json/aa/aa_pinterm/' + $scope.pinDataUrl + '.json',
                 type: 'GET',
@@ -1381,7 +1388,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
         }
     }
     $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
-       
+
 
         var languageArray = $rootScope.lexiconLanguageArray;
 
@@ -1391,11 +1398,11 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
                                        .from($scope.AAPinTermData)
                                        .where('_TermNumber == ' + actualTermNo)
                                        .select();
-            
+
             if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) {
-             
+
                 for (var j = 0; j <= languageArray.length - 1; j++) {
-                  
+
                     $scope.matchedLanguageTermNoData = new jinqJs()
                                       .from($scope.matchedTermNoData)
                                       .where('_LanguageId == ' + languageArray[j].id)
@@ -1463,9 +1470,9 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
         }
     };
 
- 
+
     $scope.showSelectedPins = function () {
-      
+
        
         $rootScope.isLoading = true;
         $('#spinner').css('visibility', 'visible');
@@ -1533,7 +1540,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
         
                 // }
             })
-            
+
             angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
 
                 var pinName = 'Pin_' + aaPinDataValue._PinId;
@@ -1550,6 +1557,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
             })
 
         
+            // $scope.clickedPins = [];
         }
 
         else {
@@ -1618,19 +1626,19 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
     }
 
     $scope.highlightPinBasedOnSerachItem = function (event) {
-     
-            $scope.searchItemId = event.currentTarget.id;
-            $scope.searchItemText = event.currentTarget.innerHTML;
-            $rootScope.searchSelectedText = $("#" + event.currentTarget.id).text();
-            $('#termList option[selected="selected"]').prop("selected", false);
-            $('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true);
-            $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
-            $('#termList option[value="' + $rootScope.searchSelectedText + '"]').css({ "background-color": "#3399FF", "color": "#ffffff" });
 
-            $("#termlistfilter li a").css({ "background-color": "#ffffff", "color": "#000000" });
-            $("#termlistfilter li #" + $scope.searchItemId).css({ "background-color": "#3399FF", "color": "#ffffff" });
-            $scope.searchFilter = event.currentTarget.innerHTML;
-            selectedTermName.placeholder = event.currentTarget.innerHTML;
+        $scope.searchItemId = event.currentTarget.id;
+        $scope.searchItemText = event.currentTarget.innerHTML;
+        $rootScope.searchSelectedText = $("#" + event.currentTarget.id).text();
+        $('#termList option[selected="selected"]').prop("selected", false);
+        $('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true);
+        $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
+        $('#termList option[value="' + $rootScope.searchSelectedText + '"]').css({ "background-color": "#3399FF", "color": "#ffffff" });
+
+        $("#termlistfilter li a").css({ "background-color": "#ffffff", "color": "#000000" });
+        $("#termlistfilter li #" + $scope.searchItemId).css({ "background-color": "#3399FF", "color": "#ffffff" });
+        $scope.searchFilter = event.currentTarget.innerHTML;
+        selectedTermName.placeholder = event.currentTarget.innerHTML;
 
 
         //get data from pindata for this trem
@@ -1644,7 +1652,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
         // maintaing scroll position on selection of options in list manager.
         var annotationTopPos = $(".common-drag").css("top").split("p");
         $("#canvasDiv").scrollTop(annotationTopPos[0]);
-      
+
         $scope.IsSearchVisible = false;
     }
 
@@ -1687,14 +1695,14 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
                 x1: 50, y1: 50,
                 x2: 50, y2: 50,
                 r1: 10, r2: 30,
-               c1: 'rgba(100, 50, 0,0)',
-               c2: 'rgb(126, 187, 83)'
+                c1: 'rgba(100, 50, 0,0)',
+                c2: 'rgb(126, 187, 83)'
             });
             var clickedPin = $scope.activePinArray[i];
             $('#aaDetailViewCanvas').setLayer(clickedPin, {
                 fillStyle: radialAfterClick
             }).drawLayers();
-           
+
         }
     }
 
@@ -1859,7 +1867,7 @@ function openModuleItemView(event) {
 }
 
 function openListViewModuleItem(event) {
-    
+
     var scope = angular.element(document.getElementById("list-view")).scope();
     scope.isListViewButtonClicked = true;
     scope.$apply(function () {
@@ -1878,7 +1886,7 @@ function openCurrentView(event) {
 }
 
 function onZoom(scope) {
-   
+
     //$(".common-drag").remove();
     //$(".commonDot").remove();
     //$(".commonDraggedLine").remove();
@@ -1894,14 +1902,14 @@ function onZoom(scope) {
     //}).drawLayers();
     //  scope.removePin();
     //    scope.showAllPins();
-  
+
 
     //6. Show all pins on AA opened item
 }
 
 
 $(document).ready(function () {
-    
+
     $(".slider").slider({
         min: 25,
         max: 100,
@@ -1916,40 +1924,40 @@ $(document).ready(function () {
                 var relativeWidth = 0;
                 var relativeHeight = 0;
                 if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
-                if (ui.value == 100) {
-                    relativeWidth = scope.ViewImageWidth;
-                    relativeHeight = scope.ViewImageHeight
-                    scope.sliderPercentValue = 1.0;
-                }
-                else if (ui.value == 85) {
-                    relativeWidth = scope.ViewImageWidth * 0.85;
-                    relativeHeight = scope.ViewImageHeight * 0.85;
-                    scope.sliderPercentValue = 0.85;
+                    if (ui.value == 100) {
+                        relativeWidth = scope.ViewImageWidth;
+                        relativeHeight = scope.ViewImageHeight
+                        scope.sliderPercentValue = 1.0;
+                    }
+                    else if (ui.value == 85) {
+                        relativeWidth = scope.ViewImageWidth * 0.85;
+                        relativeHeight = scope.ViewImageHeight * 0.85;
+                        scope.sliderPercentValue = 0.85;
 
-                } else if (ui.value == 70) {
-                    relativeWidth = scope.ViewImageWidth * 0.70;
-                    relativeHeight = scope.ViewImageHeight * 0.70;
-                    scope.sliderPercentValue = 0.70;
-                } else if (ui.value == 55) {
+                    } else if (ui.value == 70) {
+                        relativeWidth = scope.ViewImageWidth * 0.70;
+                        relativeHeight = scope.ViewImageHeight * 0.70;
+                        scope.sliderPercentValue = 0.70;
+                    } else if (ui.value == 55) {
 
-                    relativeWidth = scope.ViewImageWidth * 0.55;
-                    relativeHeight = scope.ViewImageHeight * 0.55;
-                    scope.sliderPercentValue = 0.55;
+                        relativeWidth = scope.ViewImageWidth * 0.55;
+                        relativeHeight = scope.ViewImageHeight * 0.55;
+                        scope.sliderPercentValue = 0.55;
 
-                } else if (ui.value == 40) {
+                    } else if (ui.value == 40) {
 
-                    relativeWidth = scope.ViewImageWidth * 0.40;
-                    relativeHeight = scope.ViewImageHeight * 0.40;
-                    scope.sliderPercentValue = 0.40;
+                        relativeWidth = scope.ViewImageWidth * 0.40;
+                        relativeHeight = scope.ViewImageHeight * 0.40;
+                        scope.sliderPercentValue = 0.40;
 
-                } else if (ui.value == 25) {
+                    } else if (ui.value == 25) {
 
-                    relativeWidth = scope.ViewImageWidth * 0.25;
-                    relativeHeight = scope.ViewImageHeight * 0.25;
-                    scope.sliderPercentValue = 0.25;
+                        relativeWidth = scope.ViewImageWidth * 0.25;
+                        relativeHeight = scope.ViewImageHeight * 0.25;
+                        scope.sliderPercentValue = 0.25;
 
+                    }
                 }
-            }
 
                 if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
                     $("#modItemImage").css("width", relativeWidth + "px");
@@ -1959,7 +1967,7 @@ $(document).ready(function () {
 
                     $("#modItemImage").attr('src', '');
 
-                 
+
                     $("#aaDetailViewCanvas").remove();
                     //0.5 create canvas on the top of image so that I can draw a line over the canvas.
                     var canvas = document.createElement('canvas');
@@ -1970,7 +1978,7 @@ $(document).ready(function () {
                     canvas.style.left = '0px';
                     canvas.style.top = '0px';
                     canvas.style.position = "absolute";
-                   
+
                     $("#canvasDiv").append(canvas);
                     scope.context = canvas.getContext("2d")
                     $("#modItemImage").attr('src', scope.OpenItemImagePath);
@@ -1985,7 +1993,7 @@ $(document).ready(function () {
                     });
                     scope.isSelectedPinBtnClickedAftrSliderCange = true;
                     switch (btnID) {
-                        
+
                         case "hidePinBtn":
                             break;
                         case "allPinBtn":
@@ -2000,7 +2008,7 @@ $(document).ready(function () {
                             break;
                     }
                 }
-              
+
             });
         }
     })
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js.orig b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js.orig
new file mode 100644
index 0000000..b00dcda
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js.orig
@@ -0,0 +1,2113 @@
+'use strict';
+
+AIA.controller("TileViewListController", ["$scope", "$window", "$rootScope", "$compile", "$http", "$log", "$location", "$timeout", "DA", "Modules", "$routeParams", "BodyRegions", "BodySystems", "ViewOrientations", "ImageTypes", "DataService", "ModuleService",
+function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeout, DA, Modules, $routeParam, BodyRegions, BodySystems, ViewOrientations, ImageTypes, DataService, ModuleService) {
+
+
+    $rootScope.OpenedTileData = [];
+    var DISSECTIBLE_ANATOMY = 'Dissectible Anatomy';
+    var ATLAS_ANATOMY = 'Atlas Anatomy';
+    var CLINICAL_ILLUSTRATION = 'Clinical Illustrations';
+    var CLINICAL_ANIMATION = 'Clinical Animations';
+    $rootScope.closeBtnImgPath = "~/../content/images/speeachBubbleClose.png";
+    //variables to bind Filter by Controls
+    $scope.searchAAListViewData = [];
+    $scope.SelectedAAthumbImage = [];
+    $scope.SelectedAAImage = [];
+    $scope.SelectedAASummary = [];
+    $scope.SelectedAAId = [];
+    $scope.SelectedAATitle = [];
+    $scope.selectedAAListViewData = [];
+    $scope.filterstring = false;
+    $scope.AllBodyRegion = [];
+    $scope.AllBodySystem = [];
+    $scope.AllOrientation = [];
+    $scope.AllImageType = [];
+    $rootScope.speechBubbleDimaensions = [];
+    $scope.runningSearchWorkers = [];
+    $scope.clickedPins = [];
+    $scope.sliderPercentValue = 1;
+    $scope.query = {
+        selectedbodyregion: '',
+        selectedbodysystem: '',
+        selectedorientation: '',
+        selectedimagetype: '',
+    };
+    $scope.activePinArray = [];
+    $scope.showTabButton = true;
+    $scope.isListViewDataLoaded = true;
+
+    $scope.setActiveTab = function (tabToSet) {
+
+        $scope.activeTab = tabToSet;
+        localStorage.setItem("activeTab", $scope.activeTab);
+        if ($scope.activeTab == 1) {
+            $('#grid-view').css("display", "block");
+            $('#list-view').css("display", "none");
+            $("#demoView").remove();
+        }
+<<<<<<< HEAD
+        else
+        {
+        
+=======
+        else {
+>>>>>>> 43fbaf7767a7db0e8ec18055b596d1112084dad8
+
+            $('#grid-view').css("display", "none");
+            if ($scope.isListViewDataLoaded == true) {
+                var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName)
+            .then(
+              function (result) {
+                  // alert(JSON.stringify($scope.moduleLandingData));
+                  $scope.moduleLandingData = result;
+                  $scope.selectedAAListViewData = new jinqJs()
+                                                      .from($scope.moduleLandingData.data.root.Item)
+                                                      .orderBy([{ field: '_Title', sort: 'asc' }])
+                                                      .select();
+                  var htm = '';
+                  htm += "<table class='table table-hover table-fixed bg-white table-txt12'>  <thead class='clsthead'><tr class='active'><th width='25%'>Title</th> <th width='15%'>Region</th> <th width='30%'>System</th><th width='15%'>View</th> <th width='15%'>Type</th></tr></thead><tbody class='clstbody'>";
+                  angular.forEach($scope.selectedAAListViewData, function (value, key) {
+                      htm += "<tr id=" + value._Id + " onclick='openListViewModuleItem(event)' ondblclick='openModuleItemView(event)'>"
+                      htm += '<td width="25%">' + value._Title + '</td><td width="15%">' + value._BodyRegion + '</td><td width="30%">' + value._BodySystem + '</td><td width="15%">' + value._ViewOrientation + '</td><td width="15%">' + value._ImageType + '</td>';
+                      htm += "</tr>"
+                  });
+                  htm += "</tbody></table>";
+                  $("#list-view").html(htm);
+                  $compile(htm)($scope);
+              });
+                $('#list-view').css("display", "block");
+                $scope.isListViewDataLoaded = false;
+            }
+            else {
+                $('#list-view').css("display", "block");
+            }
+
+            $timeout(function () {
+                //  if ($rootScope.isListViewRowClicked == true) {
+                //  $rootScope.isListViewRowClicked = false;
+                $("#demoView").remove();
+                $("#viewList").append("<div class='col-xs-12 text-center' style='padding-top:15px;padding-bottom:15px;' id='demoView'><div class='col-xs-12' style='padding:15px;background-color:#fff;'><div class='col-xs-2' style='border:1px solid #000;padding:5px;color:#000;font-size:12px;'><div class='thumbnail' style='margin-bottom:10px;'><img style='width:auto;height:95px!important;' src=" + $rootScope.listArray[0].imageName + "></div><div class='col-xs-12' id='demoText' style='padding:0;'>" + $rootScope.listArray[0].text + "</div></div></div><a style='position:absolute;right:30px;bottom:34px;' onclick='openCurrentView(event)' href='javascript:void(0)' class='pull-right btn btn-primary'>Open</a></div>");
+                var moduleItemDataToBeSavedID
+                $("#list-view table tbody tr").removeClass("active");
+                var moduleItemDataToBeSavedID = $rootScope.getLocalStorageValue("listViewSelectedID");
+                $("#list-view table tbody #" + moduleItemDataToBeSavedID).addClass("active");
+                $scope.isListViewButtonClicked = true;
+                var curAAListViewScroll = $rootScope.getLocalStorageValue("AAListViewScroll");
+
+                if (typeof (curAAListViewScroll) !== "undefined" && curAAListViewScroll !== null && curAAListViewScroll !== '') {
+                    if (typeof InstallTrigger !== 'undefined') {
+
+                        $('#list-view table tbody').animate({ scrollTop: $rootScope.getLocalStorageValue("AAListViewScroll") });
+                    }
+                    else {
+
+                        $('#list-view table tbody').scrollTop($rootScope.getLocalStorageValue("AAListViewScroll"));
+                    }
+
+                }
+                //     }
+            }, 2000);
+        }
+    };
+
+    $scope.loadForModuleById = function (moduleId) {
+<<<<<<< HEAD
+
+=======
+>>>>>>> 43fbaf7767a7db0e8ec18055b596d1112084dad8
+        if ($rootScope.refreshcheck == null) {
+            $location.path('/');
+        }
+        $scope.moduleId = moduleId;
+        $scope.activeTab = 1;
+        console.log('loadForModuleById is called')
+        $rootScope.moduleName = Modules[moduleId].Name;
+        $rootScope.currentActiveModuleTitle = $rootScope.moduleName;
+        $scope.AllBodyRegion = BodyRegions;
+        $scope.AllBodySystem = BodySystems;
+        $scope.AllOrientation = ViewOrientations;
+        $scope.AllImageType = ImageTypes;
+        var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName)
+            .then(
+              function (result) {
+
+                  $scope.moduleLandingData = result;
+<<<<<<< HEAD
+               //   setTimeout(function () { $('#' + $rootScope.highlightid).find('.thumbnail').addClass('hightlightstate'); }, 100);
+                  if ($rootScope.getLocalStorageValue('AAGridViewHighlightThumbnail') !== null) {
+                      setTimeout(function () { $('#' + $rootScope.getLocalStorageValue("AAGridViewHighlightThumbnail")).find('.thumbnail').addClass('HightLightThumbnail'); }, 100);
+=======
+                  //   setTimeout(function () { $('#' + $rootScope.highlightid).find('.thumbnail').addClass('hightlightstate'); }, 100);
+                  if (localStorage.getItem('AAGridViewHighlightThumbnail') !== null) {
+                      setTimeout(function () { $('#' + localStorage.getItem("AAGridViewHighlightThumbnail")).find('.thumbnail').addClass('HightLightThumbnail'); }, 100);
+>>>>>>> 43fbaf7767a7db0e8ec18055b596d1112084dad8
+                  }
+                  //console.log(JSON.stringify(result, null, 4));
+              },
+               function (error) {
+                   // handle errors here
+                   console.log(' error: ' + error.statusText);
+               }
+              )
+        if ($rootScope.getLocalStorageValue('AAGridViewScroll') !== null) {
+            $('html, body').animate({ scrollTop: $rootScope.getLocalStorageValue('AAGridViewScroll') }, 'slow');
+        }
+    }
+
+    //$scope.$on('$viewContentLoaded', function (event) {
+
+    //    $scope.loadForModuleById();
+
+    //});
+    $scope.isOpenBtnClicked = false;
+    $scope.openModuleItemView = function (event) {
+       
+        $rootScope.MenuModuleName = "AA";
+        localStorage.setItem("activeTab", $scope.activeTab);
+        //0. Get selected Image Id
+        if ($scope.isListViewButtonClicked == true) {
+            if ($scope.isOpenBtnClicked == true) {
+
+                var moduleItemDataToBeSaved = $("#demoText").html();
+                $scope.isOpenBtnClicked = false;
+            }
+            else {
+                var moduleItemDataToBeSavedID = event.currentTarget.id;
+                localStorage.setItem("listViewSelectedID", moduleItemDataToBeSavedID);
+                var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text();
+            }
+        }
+        else {
+            var moduleItemDataToBeSaved = event.target.id;
+            localStorage.setItem("listViewSelectedID", event.currentTarget.id);
+            $scope.isListViewButtonClicked = false;
+        }
+
+        //1.Filter selected module ietem data and get the pushed opened moduile array object
+        $rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData);
+
+        //2. Pick the image name to create a source to open
+        $rootScope.imageId = $rootScope.OpenedTileData[0];
+        $rootScope.imageName = $rootScope.OpenedTileData[3];
+        $rootScope.bodySystemName = $rootScope.OpenedTileData[2];
+        $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
+        $scope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
+        $rootScope.listArray = [];
+        $rootScope.listArray.push({ "imageName": $rootScope.OpenItemImagePath, "text": moduleItemDataToBeSaved });
+        //3. set opened module item ti
+        localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]);
+        localStorage.setItem("AAGridViewScroll", $($window).scrollTop());
+        localStorage.setItem("AAGridViewHighlightThumbnail", $(event.target).parent().parent().parent().attr('id'));
+
+        //3. Navigate to the Module-item-view
+        var u = $location.url();
+        $location.url('/module-item-view');
+      
+    }
+
+
+    $scope.openListViewModuleItem = function (event) {
+
+        $("#demoView").remove();
+        var moduleItemDataToBeSavedID = event.currentTarget.id;
+        $("#list-view table tbody tr").removeClass("active");
+        localStorage.setItem("listViewSelectedID", moduleItemDataToBeSavedID);
+        $("#list-view table tbody #" + moduleItemDataToBeSavedID).addClass("active");
+        localStorage.setItem("AAListViewScroll", $("#list-view table tbody").scrollTop());
+        var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text();
+        $rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData);
+        $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
+        $rootScope.listArray = [];
+        $rootScope.listArray.push({ "imageName": $rootScope.OpenItemImagePath, "text": moduleItemDataToBeSaved });
+        $("#viewList").append("<div class='col-xs-12 text-center' style='padding-top:15px;padding-bottom:15px;' id='demoView'><div class='col-xs-12' style='padding:15px;background-color:#fff;'><div class='col-xs-2' style='border:1px solid #000;padding:5px;color:#000;font-size:12px;'><div class='thumbnail' style='margin-bottom:10px;'><img style='width:auto;height:95px!important;' src=" + $rootScope.OpenItemImagePath + "></div><div class='col-xs-12' id='demoText' style='padding:0;'>" + moduleItemDataToBeSaved + "</div></div></div><a style='position:absolute;right:30px;bottom:34px;' onclick='openCurrentView(event)' href='javascript:void(0)' class='pull-right btn btn-primary'>Open</a></div>");
+    }
+
+
+    $scope.openModuleItem = function () {
+<<<<<<< HEAD
+
+=======
+>>>>>>> 43fbaf7767a7db0e8ec18055b596d1112084dad8
+        if ($rootScope.refreshcheck == null) {
+            $location.path('/');
+        }
+        var jsContentURL;
+        var moduleItemViewDivId;
+
+        //1. create a jsPanel and load the module item view
+        if ($rootScope.moduleName == ATLAS_ANATOMY) {
+
+            jsContentURL = 'app/views/aa/atlas-anatomy-detail.html';
+            moduleItemViewDivId = 'aaDetailPageDiv';
+        }
+        else if ($rootScope.moduleName == CLINICAL_ANIMATION) {
+            //to do, in next phase of project 
+
+        }
+        else if ($rootScope.moduleName == CLINICAL_ILLUSTRATION) {
+            //to do, in next phase of project
+
+        }
+
+        //1. create a jsPanel and load the module item view
+        if ($rootScope.moduleName == ATLAS_ANATOMY) {
+            $.jsPanel({
+                id: 'ImagePanel',
+                selector: '.aaBodyView',
+                theme: 'success',
+                currentController: 'TileViewListController',
+                parentSlug: 'tile-view-list',
+                ajax: {
+                    url: jsContentURL
+                },
+                title: $rootScope.getLocalStorageValue("currentViewTitle"),
+
+                position: {
+                    top: 70,
+                    left: 1,
+                },
+
+                size: { width: $(window).outerWidth() - 10, height: $(window).outerHeight() - 110 },
+
+            });
+
+            console.log('jsPanel loaded ImagePanel exist= ' + document.getElementById('ImagePanel'))
+
+            //0.3
+            var aaViewElement = angular.element(document.getElementById(moduleItemViewDivId));
+
+            //0.4 for Opening module item, load it into image
+            $rootScope.isLoading = true;
+            $('#spinner').css('visibility', 'visible');
+            var openedImage = new Image();
+            openedImage.id = 'modItemImage';
+            openedImage.name = $rootScope.OpenItemImagePath;
+
+            openedImage.onload = function () {
+                $scope.imageWidth = this.width;
+                $scope.imageHeight = this.height;
+
+                $('#aaBodyView').css("height", $(window).outerHeight());
+
+                $('#aaBodyView').css("width", $(window).outerWidth());
+                $timeout(function () {
+                    $compile(aaViewElement.contents())($scope);
+
+                    //if (document.getElementById('aaDetailPageDiv') != null) {
+                    if (document.getElementById('aaBodyView') != null) {
+
+                        //0.4 added some stylesheets
+<<<<<<< HEAD
+                     
+                     
+=======
+
+>>>>>>> 43fbaf7767a7db0e8ec18055b596d1112084dad8
+                        $rootScope.canvasDivHeight = $('.jsPanel-content').height() - $('.main2 .stickey-area').height();
+
+                        $('.canvasDivClass').css("height", $rootScope.canvasDivHeight);
+
+                        $scope.currentTitleFromJson = $rootScope.getLocalStorageValue("currentViewTitle");
+                        $("#modItemImage").attr('src', $rootScope.OpenItemImagePath);
+
+
+                        $rootScope.ViewImageWidth = $("#modItemImage").width();
+                        $scope.ViewImageWidth = $("#modItemImage").width();
+                        $scope.ViewImageHeight = $("#modItemImage").height();
+
+                        $scope.relativeDimesion = 0;
+                        $("#modItemImage").css("width", $rootScope.ViewImageWidth + "px");
+                        //0.5 create canvas on the top of image so that I can draw a line over the canvas.
+                        var canvas = document.createElement('canvas');
+                        canvas.id = 'aaDetailViewCanvas';
+                        canvas.className = '.aaCanvas'
+                        canvas.height = parseInt(($scope.imageHeight));
+                        canvas.width = parseInt($scope.imageWidth);
+                        canvas.style.left = '0px';
+                        canvas.style.top = '0px';
+                        canvas.style.position = "absolute";
+                        $("#canvasDiv").append(canvas);
+                        $scope.context = canvas.getContext("2d")
+
+                        //6. Show all pins on AA opened item
+                        $scope.showAllPins();
+
+                        //7. Highlight all system body list in left side
+                        $scope.highlightBodySystemList();
+                    }
+                }, 500);
+            }
+
+            openedImage.onerror = loadFailure;
+            openedImage.src = $rootScope.OpenItemImagePath;
+        }
+      
+    }
+
+    $scope.highlightBodySystemList = function () {
+        $rootScope.bodySystemNames = $rootScope.bodySystemName.trim().split(/\s*,\s*/);
+        var bodySystemListObj = document.getElementById("bodySystemList").getElementsByTagName("a");
+        var bodySystemListlength = bodySystemListObj.length;
+        for (var i = 0; i < bodySystemListlength; i++) {
+           
+            //var boldTag = lis[i];
+            for (var j = 0; j < $rootScope.bodySystemNames.length; j++) {
+                if ((bodySystemListObj[i].innerHTML) == ($rootScope.bodySystemNames[j])) {
+                    $("#" + i).parent().removeClass("disabledSelectedSystem");
+                    
+                }
+                
+            }
+
+        }
+    }
+    function loadFailure() {
+        console.log('unable to load opened module ietem');
+        return true;
+    }
+
+
+    angular.element(document).ready(function (e) {
+        $("#ImagePanel").resize(function () {
+            $("#canvasDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
+            $("#canvasDiv").scrollTop($rootScope.CanvasDivTopPosition);
+        });
+        $(document).on("click", "#ImagePanel .jsPanel-hdr .jsPanel-hdr-r .jsPanel-btn-close .jsglyph-remove", function () {
+            $scope.setActiveTab(parseInt($rootScope.getLocalStorageValue("activeTab")));
+            $(".tools").css("z-index", "15000");
+            $rootScope.selectedBodySystemName = 'All';
+            $rootScope.selectedBodySystemId = 0;
+            $rootScope.searchSelectedText = '';
+
+        });
+    })
+
+    $scope.showAllPins = function () {
+<<<<<<< HEAD
+        
+        $scope.allPinDataArray = [];
+=======
+
+>>>>>>> 43fbaf7767a7db0e8ec18055b596d1112084dad8
+        var promise = ModuleService.getPinDataForImage($rootScope.imageName)
+          .then(
+            function (result) {
+
+                //load navigator image
+                if (result.data.Root._NavigatorImage != undefined) {
+                    document.getElementById('navimg').src = '~/../content/images/aa/images/navigator/' + result.data.Root._NavigatorImage;
+                }
+                else {
+                    document.getElementById('navimg').style.visibility = 'hidden';
+                    document.getElementById('navigatorBtn').style.visibility = 'hidden';
+                    document.getElementById('navigatorDiv').style.visibility = 'hidden';
+
+                }
+
+                //draw pins
+                $scope.aaPinData = result.data.Root.Item;
+                if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
+
+                    angular.forEach($scope.aaPinData, function (value, key) {
+                        $scope.allPinDataArray.push(value._PinId);
+                        $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
+                    })
+
+
+
+                    //load search/vocab data
+                    $rootScope.loadSearchData();
+                }
+            },
+             function (error) {
+
+                 console.log(' error in showAllPins: ' + error.statusText);
+             }
+            )
+        if ($scope.isSliderChange == true) {
+            $timeout(function () {
+                $scope.activePinOnLayerChange();
+            }, 1000);
+
+        }
+
+    }
+
+
+    $scope.FilterByImage = function (moduleId, query) {
+      
+        $scope.moduleId = moduleId;
+
+        console.log('loadForModuleById is called')
+        $rootScope.moduleName = Modules[moduleId].Name;
+        while ($scope.searchAAListViewData.length) {
+            $scope.searchAAListViewData.pop();
+        }
+
+        var filtercount = 0;
+        if (typeof (query.selectedbodyregion) !== "undefined" && (query.selectedbodyregion !== null && query.selectedbodyregion !== "")) {
+            filtercount = filtercount + 1;
+            localStorage.setItem("CurrentBodyRegion", query.selectedbodyregion);
+        }
+        else {
+            localStorage.setItem("CurrentBodyRegion", '');
+        }
+
+        if (typeof (query.selectedbodysystem) !== "undefined" && (query.selectedbodysystem !== null && query.selectedbodysystem !== "")) {
+            filtercount = filtercount + 1;
+            localStorage.setItem("CurrentBodySystem", query.selectedbodysystem);
+        }
+        else {
+            localStorage.setItem("CurrentBodySystem", '');
+        }
+
+        if (typeof (query.selectedorientation) !== "undefined" && (query.selectedorientation !== null && query.selectedorientation !== '')) {
+            filtercount = filtercount + 1;
+            localStorage.setItem("CurrentOrientation", query.selectedorientation);
+        }
+        else {
+            localStorage.setItem("CurrentOrientation", '');
+        }
+
+        if (typeof (query.selectedimagetype) !== "undefined" && (query.selectedimagetype !== null && query.selectedimagetype !== '')) {
+            filtercount = filtercount + 1;
+            localStorage.setItem("CurrentImageType", query.selectedimagetype);
+        }
+        else {
+            localStorage.setItem("CurrentImageType", '');
+        }
+
+        var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName)
+           .then(
+             function (result) {
+                 // alert(JSON.stringify($scope.moduleLandingData));
+                 $scope.moduleLandingData = result;
+                 $scope.selectedAAListViewData = new jinqJs()
+                                                     .from($scope.moduleLandingData.data.root.Item)
+                                                     .orderBy([{ field: '_Title', sort: 'asc' }])
+                                                     .select();
+
+                 $('#grid-view').empty();
+                 //alert(JSON.stringify($scope.selectedAAListViewData))
+                 angular.forEach($scope.selectedAAListViewData, function (value, key) {
+
+                     var selectimg = true;
+                     var count = 0;
+
+
+                     if (typeof (query.selectedbodyregion) !== "undefined" && (query.selectedbodyregion !== null && query.selectedbodyregion !== "")) {
+                         var posbodyregion = value._BodyRegion.indexOf((query.selectedbodyregion.trim()));
+                         if (posbodyregion > -1) {
+                             selectimg = true;
+                             count = count + 1;
+                         }
+                         else {
+                             selectimg = false;
+                             count = count - 1;
+                         }
+
+                     }
+
+                     if (typeof (query.selectedbodysystem) !== "undefined" && (query.selectedbodysystem !== null && query.selectedbodysystem !== "")) {
+                         var posbodysystem = value._BodySystem.indexOf(query.selectedbodysystem);
+                         if (posbodysystem > -1) {
+                             count = count + 1;
+                             selectimg = true;
+                         } else {
+                             selectimg = false;
+                             count = count - 1;
+                         }
+                     }
+
+                     if (typeof (query.selectedorientation) !== "undefined" && (query.selectedorientation !== null && query.selectedorientation !== "")) {
+                         var posorientation = value._ViewOrientation.indexOf(query.selectedorientation);
+                         if (posorientation > -1) {
+                             count = count + 1;
+                             selectimg = true;
+
+                         } else {
+                             selectimg = false;
+                             count = count - 1;
+                         }
+
+                     }
+
+                     if (typeof (query.selectedimagetype) !== "undefined" && (query.selectedimagetype !== null && query.selectedimagetype !== "")) {
+                         var posimagetype = value._ImageType.indexOf(query.selectedimagetype);
+                         if (posimagetype > -1) {
+                             count = count + 1;
+                             selectimg = true;
+
+                         } else {
+                             selectimg = false;
+                             count = count - 1;
+                         }
+
+                     }
+
+                     if (selectimg === true && count >= filtercount) {
+
+                         if ($scope.activeTab == 1) {
+                             $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName;
+
+
+                             var $el = $('<div id="' + value._id + '" class="col-sm-3 col-lg-2" title = "' + value._Title + '" data-ng-click="openModuleItemView($event)">'
+                                 + '<div class="thumbnail" >'
+                                            + '<img class="tinyImg" id="' + value._Title + '"ng-src="' + $scope.imagePath + '" alt="" title="" >'
+                                            + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>').appendTo('#grid-view');
+
+
+                             $compile($el)($scope);
+                         }
+                         else {
+                             var htm = '';
+                             htm += "<table class='table table-hover table-fixed bg-white table-txt12'>  <thead class='clsthead'><tr class='active'><th width='25%'>Title</th> <th width='15%'>Region</th> <th width='30%'>System</th><th width='15%'>View</th> <th width='15%'>Type</th></tr></thead><tbody class='clstbody'>";
+                             //angular.forEach($scope.selectedAAListViewData, function (value, key) {
+                                 htm += "<tr id=" + value._Id + " onclick='openListViewModuleItem(event)' ondblclick='openModuleItemView(event)'>"
+                                 htm += '<td width="25%">' + value._Title + '</td><td width="15%">' + value._BodyRegion + '</td><td width="30%">' + value._BodySystem + '</td><td width="15%">' + value._ViewOrientation + '</td><td width="15%">' + value._ImageType + '</td>';
+                                 htm += "</tr>"
+                             //});
+                             htm += "</tbody></table>";
+                             $("#list-view").html(htm);
+                             $compile(htm)($scope);
+                         }
+
+                         $(".sidebar").mCustomScrollbar({
+                             autoHideScrollbar: true,
+                             //theme:"rounded"
+                         });
+
+
+                         $scope.searchAAListViewData.push(
+                         {
+                             "_id": value._id,
+                             "_ImageId": value._ImageId,
+                             "_Title": value._Title,
+                             "_ImageName": value._contentImage,
+                             "_TileImageName": value._ThumbnailImage,
+                             "_BodySystem": value._BodySystem,
+                             "_BodyRegion": value._BodyRegion,
+                             "_ViewOrientation": value._ViewOrientation,
+                             "_ImageType": value._ImageType
+                             //"$$hashKey": value._Summary
+
+                         });
+
+                     }
+
+
+                 });
+
+<<<<<<< HEAD
+                 //Show Error Message in case of gridview if no data is found
+                 if ($scope.searchAAListViewData.length == 0) {
+
+=======
+                 //Show Error Message in case of gridview/ ListView [if no data is found]
+                 if ($scope.searchAAListViewData.length == 0) {
+>>>>>>> 43fbaf7767a7db0e8ec18055b596d1112084dad8
+                     var $el = $('<div class="col-sm-12" style="padding-left:25px;padding-top:10px;"><strong style="color:white">No illustration found for the selected search criteria!</strong></div>').appendTo('#grid-view');
+                     $compile($el)($scope);
+                     $('table > #ListViewDiv > #searchItem').remove();
+
+                     $('#ListViewDiv').append('<tr id="searchItem"><td colspan="6"><strong style="color:black;">No illustration found for the selected search criteria!</strong></td></tr>');
+                 }
+                 console.log(JSON.stringify(result, null, 4));
+             },
+              function (error) {
+                  // handle errors here
+                  console.log(' error: ' + error.statusText);
+              }
+             )
+
+    }
+
+    $scope.Reset = function (moduleId, query) {
+
+        query.selectedbodyregion = "";
+        query.selectedbodysystem = "";
+        query.selectedorientation = "";
+        query.selectedimagetype = "";
+        query.selectedspecialty = "";
+
+
+        //set localstorage values
+        localStorage.setItem("CurrentBodyRegion", '');
+        localStorage.setItem("CurrentBodySystem", '');
+        localStorage.setItem("CurrentOrientation", '');
+        localStorage.setItem("CurrentImageType", '');
+        //localStorage.setItem("CISelectedRowId", "");
+        //localStorage.setItem("CIListViewScroll", '');
+
+        if ($('.selected').hasClass("selected")) { $('.selected').removeClass("selected"); }
+
+        $('#ListViewDiv').scrollTop(0);
+
+        // $scope.HideListViewDiv();
+
+        $scope.filterstring = false;
+        //while ($scope.searchCIListViewData.length) {
+        //    $scope.searchCIListViewData.pop();
+        //}
+
+        $scope.FilterByImage(1, query);
+
+    }
+
+    $scope.showSelectedSystemPins = function (event) {
+       
+
+        var bodySystemListObj = document.getElementById("bodySystemList").getElementsByTagName("a");
+        var bodySystemListlength = bodySystemListObj.length;
+        for (var i = 0; i < bodySystemListlength; i++)
+        {
+            
+            $("#" + i).parent().removeClass("activeAASystemSelect");
+        }
+        $("#" + event.currentTarget.id).parent().addClass("activeAASystemSelect");
+       
+        $rootScope.isLoading = true;
+        $('#spinner').css('visibility', 'visible');
+
+        $scope.removeSpeechBubble();
+        if (event.currentTarget.id == "0") {
+           
+            $scope.selectedSystemName = null;
+            if ($scope.isHidePinBtnClicked) {
+
+                // $scope.showAllPinsAfterHide($scope.aaPinData);
+                $scope.showAllPinsAfterHide();
+            }
+            else {
+                $scope.showAllPins();
+            }
+        }
+        else {
+           
+            $scope.selectedSystemName = event.currentTarget.title;
+            // get termText info
+            var promise = ModuleService.getTermTextDataForPin($scope.moduleName)
+           .then(
+            function (response) {
+
+                $scope.TermInfo = response.data.Terms.Term;
+
+                //on gettng all required data, draw pins
+                if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
+
+                    $scope.selectedSystemPinData = new jinqJs()
+                            .from($scope.aaPinData)
+                            .where("_BodySystemName == " + $scope.selectedSystemName)
+                            .select();
+                    if ($scope.isHidePinBtnClicked) {
+                        // $scope.showAllPinsAfterHide($scope.selectedSystemPinData);
+                        $scope.showAllPinsAfterHide();
+
+                    }
+                    else {
+                        //remove other system pins
+                        if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) {
+
+                            angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {
+
+                                if (aaPinDataValue._BodySystemName != $scope.selectedSystemName)
+                                    $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId);
+                            })
+
+                            angular.forEach($scope.selectedSystemPinData, function (value, key) {
+
+                           
+                                $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
+
+                            })
+                            //show annotation on first pin of the sysyem
+                            $scope.showAnnotation($scope.selectedSystemPinData, false, false, false);
+                        }
+                    }
+                }
+            },
+           function (error) {
+               // handle errors here
+               console.log(' error: ' + error.statusText);
+           }
+          )
+
+        }
+    }
+
+    $scope.showAnnotation = function (selectedPinData, isCtrlPressed, isPinClicked, isItemSearched) {
+
+        $scope.selectedPin = [];
+        var isSameTermWithMultiPin = false;
+        var firstPinId = selectedPinData[0]._PinId;
+        var pinTermNumber = selectedPinData[0]._TermId;
+
+        //check if other pin have same termNumber
+        if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
+
+            var pinDataWithFirstTermNumber = new jinqJs()
+                                             .from($scope.aaPinData)
+                                             .where("_TermId == " + pinTermNumber)
+                                             .select();
+
+            $scope.MultiLanguageAnnationArray = [];
+
+            $scope.GetAnnotationBasedOnActualTermNo(pinTermNumber);
+
+            if (isCtrlPressed) {
+
+            }
+            else {
+                if (isPinClicked || isItemSearched) {
+                    var existingSpeechBubble = $("div[id*='speechBubble']");
+                    for (var i = 0; i < existingSpeechBubble.length; i++) {
+                        existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
+
+                        //make all pin heads grey
+                        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();
+                    }
+
+                    var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
+                    for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
+                        existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
+                    }
+                    var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
+                    for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
+                        speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
+                    }
+                }
+            }
+            if (pinDataWithFirstTermNumber.length > 1) {
+                isSameTermWithMultiPin = true;
+            }
+
+            angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
+                $scope.selectedPin.push(value._PinId);
+                var headX = (parseInt(value._HeadX));
+                var headY = (parseInt(value._HeadY));
+                $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
+            })
+
+
+
+        }
+
+        $rootScope.isLoading = false;
+        $('#spinner').css('visibility', 'hidden');
+        // $scope.MultiLanguageAnnationArray.push($rootScope.annotationText[i])
+    }
+
+    $scope.removeSpeechBubble = function () {
+
+
+        //clear speech bubbles
+        var speechBubbles = $("div[id*='speechBubble']");
+        if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
+            for (var j = 0; j < speechBubbles.length; j++) {
+
+                speechBubbles[j].parentNode.removeChild(speechBubbles[j]);
+            }
+        }
+        var speechBubbleLines = $("div[id*='speechBubbleLine']");
+        if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
+            for (var j = 0; j < speechBubbleLines.length; j++) {
+
+                speechBubbleLines[j].parentNode.removeChild(speechBubbleLines[j]);
+            }
+        }
+
+        var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']");
+        if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) {
+            for (var j = 0; j < speechBubbleDraggedLines.length; j++) {
+
+                speechBubbleDraggedLines[j].parentNode.removeChild(speechBubbleDraggedLines[j]);
+            }
+        }
+    };
+
+    $scope.showSpeechBubble = function () {
+
+
+        //clear speech bubbles
+        var speechBubbles = $("div[id*='speechBubble']");
+        if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
+            for (var j = 0; j < speechBubbles.length; j++) {
+
+                document.getElementById(speechBubbles[j].id).style.visibility = 'visible';
+            }
+        }
+        var speechBubbleLines = $("div[id*='speechBubbleLine']");
+        if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
+            for (var j = 0; j < speechBubbleLines.length; j++) {
+
+                document.getElementById(speechBubbleLines[j].id).style.visibility = 'visible';
+            }
+        }
+
+        var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']");
+        if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) {
+            for (var j = 0; j < speechBubbleDraggedLines.length; j++) {
+
+                document.getElementById(speechBubbleDraggedLines[j].id).style.visibility = 'visible';
+            }
+        }
+    };
+
+    $scope.hideSpeechBubble = function () {
+
+
+        //clear speech bubbles
+        var speechBubbles = $("div[id*='speechBubble']");
+        if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
+            for (var j = 0; j < speechBubbles.length; j++) {
+
+                document.getElementById(speechBubbles[j].id).style.visibility = 'hidden';
+            }
+        }
+        var speechBubbleLines = $("div[id*='speechBubbleLine']");
+        if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
+            for (var j = 0; j < speechBubbleLines.length; j++) {
+
+                document.getElementById(speechBubbleLines[j].id).style.visibility = 'hidden';
+            }
+        }
+
+        var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']");
+        if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) {
+            for (var j = 0; j < speechBubbleDraggedLines.length; j++) {
+
+                document.getElementById(speechBubbleDraggedLines[j].id).style.visibility = 'hidden';
+            }
+        }
+    };
+
+
+    $scope.createSpeechBubble = function (x, y, PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin) {
+
+        $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });
+
+        $scope.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId);
+
+        $('#speechBubble').draggable(
+        {
+            drag: function (evt) {
+                $("#dot").css("visibility", "hidden");
+                var verticalScrollPosition = canvasDiv.scrollTop;
+                var horizontlScrollPosition = canvasDiv.scrollLeft;
+                $scope.angle(x * $scope.sliderPercentValue, y * $scope.sliderPercentValue, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
+            },
+        });
+
+    }
+    $scope.sliderVal = 100;
+    $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
+
+        x = x * $scope.sliderPercentValue;
+        y = y * $scope.sliderPercentValue;
+
+        var speechBubbleHTML = '<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="speechBubble' + 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 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="speechBubbleDraggedLine' + PinId + '">'
+                 + '</div>';
+
+        //Issue #7286 :Undefined annotation should not appear
+        for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
+            var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
+        }
+
+        if (MultipleLanguage == undefined) {
+            console.log("No text is found");
+        } else {
+            $('#canvasDiv').append(speechBubbleHTML);
+
+            if ($scope.MultiLanguageAnnationArray.length > 0) {
+                for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
+                    var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
+                    $("#speechBubble" + PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
+                }
+            }
+            else {
+                console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length)
+            }
+            if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) {
+                if ($scope.longestAnnotation.length <= 10) {
+
+
+                    $("#speechBubble").css("width", "100px");
+
+                }
+
+                else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
+
+
+
+                    $("#speechBubble").css("width", "140px");
+
+                }
+                else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
+
+
+                    $("#speechBubble").css("width", "195px");
+
+                }
+                else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
+
+                    $("#speechBubble").css("width", "248px");
+
+                }
+                else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
+
+
+                    $("#speechBubble").css("width", "300px");
+                }
+
+                else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
+
+                    $("#speechBubble").css("width", "370px");
+                }
+
+                else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
+                    $("#speechBubble").css("width", "450px");
+                }
+                else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
+                    $("#speechBubble").css("width", "510px");
+                }
+                else {
+                    $("#speechBubble").css("width", ($scope.longestAnnotation.length) + "%");
+                }
+            }
+        }
+        var speechBubbleDims = [];
+
+        $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId });
+        speechBubbleDims.push({ currentX: x, currentY: y });
+        document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
+        document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 12)) + 'px';
+        if ($scope.sliderVal == 25) {
+            document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY + 5)) + 'px';
+        }
+        else {
+            document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY)) + 'px';
+        }
+        document.getElementById('speechBubble' + PinId + '').style.display = 'block';
+        document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 4) + 'px';
+        document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY) + 'px';
+        $('.common-drag').draggable(
+        {
+
+            drag: function (evt) {
+
+                var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop;
+                var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft;
+                var clickedSpeechBubbleId = $(this).attr("id");
+
+                var clickedPinId = clickedSpeechBubbleId.substring(12, clickedSpeechBubbleId.length);
+
+                $("#speechBubbleLine" + clickedPinId).css("visibility", "hidden");
+                $("#speechBubbleLine" + clickedPinId).css("display", "none");
+
+                for (var i = 0; i <= $rootScope.speechBubbleDimaensions.length - 1; i++) {
+                    if ($rootScope.speechBubbleDimaensions[i].id == clickedPinId) {
+                        $scope.angle(clickedPinId, $rootScope.speechBubbleDimaensions[i].currentX, $rootScope.speechBubbleDimaensions[i].currentY, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
+                    }
+                }
+
+            },
+        });
+        $('.crossDiv_temp').on('click', function (evt) {
+
+            var imgId = $(this).attr("id");
+            var pinId = imgId.substring(8, imgId.length);
+            $('#speechBubble' + pinId).remove();
+            $("#speechBubbleDraggedLine" + pinId).remove();
+            $("#speechBubbleLine" + pinId).remove();
+
+            //make all pin heads grey
+            var pinHeadName = 'PinArc_' + pinId;
+            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').setLayer(pinHeadName, {
+                fillStyle: radial,
+            }).drawLayers();
+        });
+
+        //make the head 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)'
+        });
+        var pinHeadName = 'PinArc_' + PinId;
+        var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName);
+        // pin.fillStyle = radialAfterClick;
+
+        $('#aaDetailViewCanvas').setLayer(pinHeadName, {
+            fillStyle: radialAfterClick,
+        }).drawLayers();
+    }
+
+
+    $scope.angle = function (id, 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) {
+            if ($scope.sliderVal == 40) {
+                $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 5) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
+            }
+            else if ($scope.sliderVal == 25) {
+                $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 2) + 'px', 'left': (f - 2) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
+            }
+            else {
+                $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 10) + 'px', 'left': (f - 5) + '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%' });
+        }
+
+
+
+    }
+
+
+    $scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
+        $scope.clickedPins = [];
+        // if ($scope.isSliderChange == true) {
+        console.log('isSliderrChange')
+        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: '#565656',
+            strokeWidth: 2,
+            visible: true,
+            x1: offsetX1 * $scope.sliderPercentValue, y1: offsetY1 * $scope.sliderPercentValue,
+            x2: x * $scope.sliderPercentValue, y2: y * $scope.sliderPercentValue,
+
+
+        }).drawArc({
+            name: "PinArc_" + PinId,
+            layer: true,
+            groups: ["Pin_" + PinId],
+            strokeStyle: 'grey',
+            strokeWidth: 2,
+            visible: true,
+            fillStyle: radial,
+            x: x * $scope.sliderPercentValue, y: y * $scope.sliderPercentValue,
+            radius: 5 * $scope.sliderPercentValue,
+
+            click: function (clickedPin) {
+                if (clickedPin.event.ctrlKey == false) {
+                    $scope.clickedPins = [];
+                }
+                var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
+                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 })
+                    }
+
+                }
+
+<<<<<<< HEAD
+                    }
+                    $scope.isSelectedPinBtnClickedAftrSliderCange = false;
+                    var selectedPinData = new jinqJs()
+                                .from($scope.aaPinData) 
+                                .where("_PinId == " + pinID)
+                                .select();
+                    if (clickedPin.event.ctrlKey == true) {
+                      
+                        $scope.activePinArray.push(clickedPin.name);
+                        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 {
+                        $scope.activePinArray = [];
+                        $scope.activePinArray.push(clickedPin.name);
+                        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)'
+                        });
+=======
+                var selectedPinData = new jinqJs()
+                            .from($scope.aaPinData)
+                            .where("_PinId == " + pinID)
+                            .select();
+                if (clickedPin.event.ctrlKey == true) {
+
+                    $scope.activePinArray.push(clickedPin.name);
+                    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 {
+                    $scope.activePinArray = [];
+                    $scope.activePinArray.push(clickedPin.name);
+                    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)'
+                    });
+
+>>>>>>> 43fbaf7767a7db0e8ec18055b596d1112084dad8
+
+                    $('#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);
+
+                }
+
+
+            }
+
+        }).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;
+        var pinArcName = 'PinArc_' + pinId;
+        $('#' + canvasId).removeLayer(pinName).drawLayers();
+        $('#' + canvasId).removeLayer(pinArcName).drawLayers();
+
+        $scope.removeSpeechBubble();
+
+        //$rootScope.isSliderChanged = true;
+        //$('#aaDetailViewCanvas').removeLayers();
+    }
+
+    $rootScope.$on('annotationToolEvent', function (event, data) {
+        $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(255,255,255)")
+        $('#editstylebackgroundcolor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" });
+        $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(0,0,0)")
+        $('#outlineColor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" });
+
+        $("#canvas").css("display", "block");
+        $("#canvasPaint").css("display", "block");
+        $rootScope.onDrawingCanvasClick();
+        $rootScope.FreeStylePaint();
+    });
+
+    $rootScope.loadSearchData = function () {
+
+        //$("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
+        var imageId = $rootScope.imageId;
+        var promise = ModuleService.getTermTextDataForAAImage(imageId)
+                 .then(
+                  function (response) {
+
+                      $scope.AAPinTermData = response.data.PinTermData.TermData;
+
+                      $rootScope.isLoading = false;
+                      $('#setting-spinner').css('visibility', 'hidden');
+
+                      $scope.pinTermData = [];
+                      var primaryLexicon = $rootScope.lexiconLanguageArray[0].id;
+                      $scope.matchedLanguageTermData = new jinqJs()
+                                     .from($scope.AAPinTermData)
+                                     .where('_LanguageId == ' + primaryLexicon)
+                                     .select();
+                      var sortedTermTextArray = [];
+                      for (var i = 0; i < $scope.matchedLanguageTermData.length; i++) {
+                          sortedTermTextArray.push($scope.matchedLanguageTermData[i]._TermText);
+                          sortedTermTextArray.sort();
+                      }
+
+                      for (var i = 0; i <= sortedTermTextArray.length - 1; i++) {
+                          for (var j = 0; j <= $scope.matchedLanguageTermData.length - 1; j++) {
+                              if ($scope.matchedLanguageTermData[j]._TermText == sortedTermTextArray[i]) {
+                                  $scope.pinTermData.push({ "LanguageId": $scope.matchedLanguageTermData[j]._LanguageId, "TermNumber": $scope.matchedLanguageTermData[j]._TermNumber, "TermTxt": $scope.matchedLanguageTermData[j]._TermText });
+                                  break;
+                              }
+                          }
+                      }
+
+                      for (var i = 0; i <= sortedTermTextArray.length - 1; i++) {
+                          for (var j = 0; j <= $scope.matchedLanguageTermData.length - 1; j++) {
+                              if ($scope.matchedLanguageTermData[j]._TermText == sortedTermTextArray[i]) {
+                                  $scope.pinTermData.push({ "LanguageId": $scope.matchedLanguageTermData[j]._LanguageId, "TermNumber": $scope.matchedLanguageTermData[j]._TermNumber, "TermTxt": $scope.matchedLanguageTermData[j]._TermText });
+                                  break;
+                              }
+                          }
+                      }
+
+
+                      $scope.$watch('$scope.pinTermData', function (newValue, oldValue, scope) {
+
+                          if (($('#termlistfilter').html() != ""))
+
+                              $('#termlistfilter').empty();
+                          if ($scope.pinTermData.length > 0) {
+                              $timeout(function () {
+                                  console.log('pinTermData= ' + $scope.pinTermData.length);
+                                  $('#termList').empty();
+                                  for (var j = 0; j < $scope.pinTermData.length; j++) {
+                                      var $el = $('<li><a id= "' + $scope.pinTermData[j].TermNumber + '" href="" onclick="onSearchItemSelection(event)" >' + $scope.pinTermData[j].TermTxt + '</a></li>').appendTo('#termlistfilter')
+                                      $compile($el)($scope);
+                                      var $selectedOptions = $('<option title= "' + $scope.pinTermData[j].TermTxt + '" id= "' + $scope.pinTermData[j].TermNumber + '" onclick="onSearchItemSelection(event)" >' + $scope.pinTermData[j].TermTxt + '</option>').appendTo("#termList")
+
+                                      $compile($selectedOptions)($scope);
+
+                                      $("#AABodySystems").empty();
+                                      $("#bodySystems").css("display", "none");
+                                      $("#AABodySystems").css("display", "block");
+                                      $("#bodySystemList li a").each(function (key, value) {
+                                          var $systemOptions = $('<option id=' + $(this).attr('id') + ' >' + $(this).text() + '</option>').appendTo("#AABodySystems")
+                                          $compile($systemOptions)($scope);
+                                      });
+                                  }
+                              }, 500);
+                          }
+                      })
+                  },
+                 function (error) {
+                     // handle errors here
+                     console.log(' error: ' + error.statusText);
+                 }
+                )
+    }
+
+
+
+
+    $scope.$on('listManagerEvent', function (event, data) {
+
+        $("#viewName").empty();
+        $("#viewName").append("<option>" + $rootScope.listArray[0].text + "</option>");
+        $rootScope.isLoading = false;
+        $('#spinner').css('visibility', 'hidden');
+
+        if ($rootScope.bodySystemSeletedId == null) {
+
+            $rootScope.loadSearchData();
+        }
+        else {
+
+            $rootScope.refreshTermListOnAASystemSelection($rootScope.bodySystemSeletedId);
+        }
+        $timeout(function () {
+            $("#totalTerms").empty();
+            $("#totalTerms").html("<span class='pull-left marginTop5'>" + $("#termList option").length + " Structures</span>");
+        }, 1000);
+    });
+
+
+
+    $rootScope.refreshTermListOnAASystemSelection = function (bodySystemId) {
+        $('#termList').empty();
+        $rootScope.bodySystemSeletedId = bodySystemId;
+        $('#termList').empty();
+        var bodySystemName = $("#AABodySystems #" + bodySystemId).val();
+        if (bodySystemName == "All") {
+            for (var j = 0; j <= $scope.pinTermData.length - 1; j++) {
+
+                $compile($selectedOptions)($scope);
+            }
+            $("#totalTerms").empty();
+            $("#totalTerms").html("<span class='pull-left marginTop5'>" + $("#termList option").length + " Structures</span>");
+        }
+        else {
+            var imageId = $rootScope.imageId;
+            $scope.pinDataUrl = "aa_dat_pinterm_" + imageId;
+            $rootScope.bodySystemTermArray = [];
+
+            $.ajax({
+                url: '~/../content/data/json/aa/aa_pinterm/' + $scope.pinDataUrl + '.json',
+                type: 'GET',
+                dataType: "json",
+                async: false,
+                success: function (result) {
+                    $(result.PinTermData.TermData).each(function (key, value) {
+                        $rootScope.bodySystemTermArray.push({ "termNumbr": result.PinTermData.TermData[key]._TermNumber, "text": result.PinTermData.TermData[key]._TermText, "language": result.PinTermData.TermData[key]._LanguageId });
+                    });
+                    for (var i = 0; i <= $scope.aaPinData.length - 1; i++) {
+                        if ($scope.aaPinData[i]._BodySystemName.toLowerCase() == bodySystemName.toLowerCase()) {
+                            for (var j = 0 ; j <= $rootScope.bodySystemTermArray.length - 1; j++) {
+                                if ($scope.aaPinData[i]._TermId == $rootScope.bodySystemTermArray[j].termNumbr) {
+                                    if ($rootScope.bodySystemTermArray[j].language == "1") {
+                                        console.log($rootScope.bodySystemTermArray[j].text);
+                                        var $selectedOptions = $('<option title= "' + $rootScope.bodySystemTermArray[j].text + '"  id= "' + $rootScope.bodySystemTermArray[j].termNumbr + '" onclick="onSearchItemSelection(event)">' + $rootScope.bodySystemTermArray[j].text + '</option>').appendTo("#termList")
+                                        $compile($selectedOptions)($scope);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            $("#totalTerms").empty();
+            $("#totalTerms").html("<span class='pull-left marginTop5'>" + $("#termList option").length + " Structures</span>");
+        }
+    }
+    $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
+
+
+        var languageArray = $rootScope.lexiconLanguageArray;
+
+        if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) {
+
+            $scope.matchedTermNoData = new jinqJs()
+                                       .from($scope.AAPinTermData)
+                                       .where('_TermNumber == ' + actualTermNo)
+                                       .select();
+
+            if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) {
+
+                for (var j = 0; j <= languageArray.length - 1; j++) {
+
+                    $scope.matchedLanguageTermNoData = new jinqJs()
+                                      .from($scope.matchedTermNoData)
+                                      .where('_LanguageId == ' + languageArray[j].id)
+                                      .select();
+                    var termText = $scope.matchedLanguageTermNoData[0]._TermText;
+                    $scope.MultiLanguageAnnationArray.push(termText);
+                };
+            }
+        }
+    }
+
+    $scope.hidePins = function () {
+       
+        $rootScope.isLoading = true;
+        $('#spinner').css('visibility', 'visible');
+
+        $scope.hideSpeechBubble();
+
+        $scope.isHidePinBtnClicked = true;
+        angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {
+
+            var pinName = 'Pin_' + aaPinDataValue._PinId;
+            var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
+
+            $('#aaDetailViewCanvas').setLayer(pinName, {
+                visible: false // set to true instead to show the layer again
+            }).drawLayers();
+
+            $('#aaDetailViewCanvas').setLayer(pinArcName, {
+                visible: false // set to true instead to show the layer again
+            }).drawLayers();
+        })
+
+        $rootScope.isLoading = false;
+        $('#spinner').css('visibility', 'hidden');
+        $(".tooltip-custom").removeClass("btn-primary");
+        $(".tooltip-custom").addClass("btn-black");
+        $("#hidePinBtn").addClass("btn-primary");
+    }
+
+    $scope.showAllPinsAfterHide = function (event) {
+      
+        $rootScope.isLoading = true;
+        $('#spinner').css('visibility', 'visible');
+
+
+        $scope.isHidePinBtnClicked = false;
+
+        if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) {
+
+            $scope.showSystemPins($scope.selectedSystemPinData, false);
+
+        } else {
+
+            $scope.showSystemPins($scope.aaPinData, false);
+        }
+        $scope.showSpeechBubble();
+        $(".tooltip-custom").removeClass("btn-primary");
+        $(".tooltip-custom").addClass("btn-black");
+        $("#allPinBtn").addClass("btn-primary");
+        if ($scope.isSliderChange == true) {
+            $scope.isSliderChange = false;
+            $scope.showAllPins();
+
+        }
+    };
+
+
+    $scope.showSelectedPins = function () {
+<<<<<<< HEAD
+      
+       
+        $rootScope.isLoading = true;
+        $('#spinner').css('visibility', 'visible');
+         
+        $scope.isHidePinBtnClicked = false;
+
+        if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) {
+
+            $scope.showSystemPins($scope.selectedSystemPinData, true);
+
+        }
+        else {
+            $scope.showSystemPins($scope.aaPinData, true);
+
+        }
+        $scope.showSpeechBubble();
+        $(".tooltip-custom").removeClass("btn-primary");
+        $(".tooltip-custom").addClass("btn-black");
+        $("#selectedPin").addClass("btn-primary");
+       
+        if ($scope.isSelectedPinBtnClickedAftrSliderCange == true) {
+          
+            for (var i = 0; i <= $scope.activePinArray.length - 1; i++) {
+                var pinName = $scope.activePinArray[i].split("_");
+                var activePinName = 'Pin_' + pinName[1];
+                var pinArcName = 'PinArc_' + pinName[1];
+                $('#aaDetailViewCanvas').setLayer(activePinName, {
+                    visible: true // set to true instead to show the layer again
+                }).drawLayers();
+                $('#aaDetailViewCanvas').setLayer(pinArcName, {
+                    visible: true // set to true instead to show the layer again
+                }).drawLayers();
+            }
+
+        }
+=======
+
+        $rootScope.isLoading = true;
+        $('#spinner').css('visibility', 'visible');
+
+        $scope.isHidePinBtnClicked = false;
+
+        if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) {
+
+            $scope.showSystemPins($scope.selectedSystemPinData, true);
+
+        }
+        else {
+            $scope.showSystemPins($scope.aaPinData, true);
+
+        }
+        $scope.showSpeechBubble();
+        $(".tooltip-custom").removeClass("btn-primary");
+        $(".tooltip-custom").addClass("btn-black");
+        $("#selectedPin").addClass("btn-primary");
+>>>>>>> 43fbaf7767a7db0e8ec18055b596d1112084dad8
+    };
+
+
+    $scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins) {
+       
+        if (isShowSelectedPins) {
+
+            angular.forEach($scope.clickedPins, function (value, key) {
+
+                seletedSystemPinData = new jinqJs()
+                                     .from(seletedSystemPinData)
+                                     .where('_PinId != ' + value.id)
+                                     .select();
+            })
+            angular.forEach($scope.clickedPins, function (value1, key1) {
+
+                // if (aaPinDataValue._PinId != value.id) {
+                var pinName = 'Pin_' + value1.id;
+                var pinArcName = 'PinArc_' + value1.id;
+              
+           
+                    $('#aaDetailViewCanvas').setLayer(pinName, {
+                        visible: true // set to true instead to show the layer again
+                    }).drawLayers();
+
+                    $('#aaDetailViewCanvas').setLayer(pinArcName, {
+                        visible: true // set to true instead to show the layer again
+                    }).drawLayers();
+            
+        
+                // }
+            })
+
+            angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
+
+                var pinName = 'Pin_' + aaPinDataValue._PinId;
+                var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
+           
+                $('#aaDetailViewCanvas').setLayer(pinName, {
+                    visible: false // set to true instead to show the layer again
+                }).drawLayers();
+
+                $('#aaDetailViewCanvas').setLayer(pinArcName, {
+                    visible: false // set to true instead to show the layer again
+                }).drawLayers();
+             
+            })
+
+<<<<<<< HEAD
+        
+=======
+            // })
+            // $scope.clickedPins = [];
+>>>>>>> 43fbaf7767a7db0e8ec18055b596d1112084dad8
+        }
+
+        else {
+            angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
+
+                var pinName = 'Pin_' + aaPinDataValue._PinId;
+                var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
+
+                $('#aaDetailViewCanvas').setLayer(pinName, {
+                    visible: true // set to true instead to show the layer again
+                }).drawLayers();
+
+                $('#aaDetailViewCanvas').setLayer(pinArcName, {
+                    visible: true // set to true instead to show the layer again
+                }).drawLayers();
+            })
+        }
+
+        $rootScope.isLoading = false;
+        $('#spinner').css('visibility', 'hidden');
+
+
+    }
+
+    $scope.showItemsForSearch = function () {
+        console.log('showItemsForSearch is called');
+        //this check is for log only because we are writing length so need to check if its not null or undefined
+
+
+        $timeout(function () {
+            if (($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) && ($scope.AAPinTermData.length > 0)) {
+
+                $scope.IsSearchVisible = true;
+                document.getElementById("termlistfilter").style.display = "block";
+            }
+            else {
+                $rootScope.loadSearchData();
+                if ($scope.AAPinTermData.length > 0) {
+                    $scope.showItemsForSearch();
+                }
+            }
+
+            if ($rootScope.isSearchInputClicked == true) {
+                $rootScope.isSearchInputClicked = false;
+                $rootScope.searchListArray = [];
+                $("#backdrop > #searchListDivAA > #termlistfilter > li").each(function (key, value) {
+                    $rootScope.searchListArray.push({ "name": $(this).find("a").html(), "id": $(this).find("a").attr("id") });
+                });
+
+            }
+
+        }, 500);
+
+    }
+
+
+    $scope.HideSearchList = function () {
+
+        $timeout(function () {
+
+            $("#termlistfilter").css("display", "none");
+
+
+        }, 1000);
+
+    }
+
+    $scope.highlightPinBasedOnSerachItem = function (event) {
+
+        $scope.searchItemId = event.currentTarget.id;
+        $scope.searchItemText = event.currentTarget.innerHTML;
+        $rootScope.searchSelectedText = $("#" + event.currentTarget.id).text();
+        $('#termList option[selected="selected"]').prop("selected", false);
+        $('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true);
+        $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
+        $('#termList option[value="' + $rootScope.searchSelectedText + '"]').css({ "background-color": "#3399FF", "color": "#ffffff" });
+
+        $("#termlistfilter li a").css({ "background-color": "#ffffff", "color": "#000000" });
+        $("#termlistfilter li #" + $scope.searchItemId).css({ "background-color": "#3399FF", "color": "#ffffff" });
+        $scope.searchFilter = event.currentTarget.innerHTML;
+        selectedTermName.placeholder = event.currentTarget.innerHTML;
+
+
+        //get data from pindata for this trem
+
+        var pinDataForTerm = new jinqJs()
+                                         .from($scope.aaPinData)
+                                         .where("_TermId == " + $scope.searchItemId)
+                                         .select();
+
+        $scope.showAnnotation(pinDataForTerm, false, false, true);
+        // maintaing scroll position on selection of options in list manager.
+        var annotationTopPos = $(".common-drag").css("top").split("p");
+        $("#canvasDiv").scrollTop(annotationTopPos[0]);
+
+        $scope.IsSearchVisible = false;
+    }
+
+    $rootScope.isShowHideButtonClicked = true;
+    $scope.ShowHideAnnotation = function () {
+        if ($rootScope.isShowHideButtonClicked == true) {
+            $rootScope.annotationArray = [];
+            $("#canvasDiv").find(".common-drag").each(function () {
+                var speechBubbleID = $(this).attr("id");
+                var sppechBubbleId = $(this).attr("id").substring(12);
+                var b = $("#speechBubbleDraggedLine" + sppechBubbleId).css("display");
+                var speechBubbleLineDispProp = $("#speechBubbleLine" + sppechBubbleId).css("display");
+                var speechBubbleLineID = "speechBubbleLine" + sppechBubbleId;
+                var speechBubbleDraggedLineID = "speechBubbleDraggedLine" + sppechBubbleId;
+                if (speechBubbleLineDispProp == "block") {
+                    $rootScope.annotationArray.push({ "speechBuubleId": speechBubbleID, "speechBubbleLineId": speechBubbleLineID });
+                }
+                else {
+                    $rootScope.annotationArray.push({ "speechBuubleId": speechBubbleID, "speechBubbleLineId": speechBubbleDraggedLineID });
+                }
+            });
+            $rootScope.isShowHideButtonClicked = false;
+            for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) {
+                $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "none");
+                $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none");
+            }
+        }
+        else {
+            $rootScope.isShowHideButtonClicked = true;
+            for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) {
+                $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block");
+                $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "block");
+            }
+        }
+    }
+    $scope.activePinOnLayerChange = function () {
+      
+        for (var i = 0; i <= $scope.activePinArray.length - 1; i++) {
+            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)'
+            });
+            var clickedPin = $scope.activePinArray[i];
+            $('#aaDetailViewCanvas').setLayer(clickedPin, {
+                fillStyle: radialAfterClick
+            }).drawLayers();
+
+        }
+    }
+
+
+    $scope.activePinOnSliderChange = function () {
+            if ($scope.activePinArray.length == 1) 
+            {
+                for (var i = 0; i <= $scope.allPinDataArray.length - 1; i++) {
+                var activeArc = $scope.activePinArray[0].split("_");
+                if ($scope.allPinDataArray[i] == activeArc[1]) {
+                    var pinName = 'Pin_' + $scope.allPinDataArray[i];
+                    var pinArcName = 'PinArc_' + $scope.allPinDataArray[i];
+                        $('#aaDetailViewCanvas').setLayer(pinName, {
+                            visible: true // set to true instead to show the layer again
+                        }).drawLayers();
+                        $('#aaDetailViewCanvas').setLayer(pinArcName, {
+                            visible: true // set to true instead to show the layer again
+                        }).drawLayers();
+                }
+                else {
+                    var pinName = 'Pin_' + $scope.allPinDataArray[i];
+                    var pinArcName = 'PinArc_' + $scope.allPinDataArray[i];
+                    $('#aaDetailViewCanvas').setLayer(pinName, {
+                        visible: false // set to true instead to show the layer again
+                    }).drawLayers();
+                    $('#aaDetailViewCanvas').setLayer(pinArcName, {
+                        visible: false // set to true instead to show the layer again
+                    }).drawLayers();
+                }
+             }
+          }
+            else {
+                var seletedSystemPinData;
+                angular.forEach($scope.activePinArray, function (value, key) {
+                    var pinID = value.split("_");
+                    seletedSystemPinData = new jinqJs()
+                                         .from($scope.allPinDataArray)
+                                         .where('_PinId != ' + pinID[1])
+                                         .select();
+                })
+
+                angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
+                   
+                    var pinName = 'Pin_' + aaPinDataValue;
+                    var pinArcName = 'PinArc_' + aaPinDataValue;
+
+                    $('#aaDetailViewCanvas').setLayer(pinName, {
+                        visible: false // set to true instead to show the layer again
+                    }).drawLayers();
+
+                    $('#aaDetailViewCanvas').setLayer(pinArcName, {
+                        visible: false // set to true instead to show the layer again
+                    }).drawLayers();
+                  
+                })
+                for (var i = 0; i <= $scope.activePinArray.length - 1; i++) {
+                    var pinName = $scope.activePinArray[i].split("_");
+                    var activePinName = 'Pin_' + pinName[1];
+                    var pinArcName = 'PinArc_' + pinName[1];
+                    $('#aaDetailViewCanvas').setLayer(activePinName, {
+                        visible: true // set to true instead to show the layer again
+                    }).drawLayers();
+                    $('#aaDetailViewCanvas').setLayer(pinArcName, {
+                        visible: true // set to true instead to show the layer again
+                    }).drawLayers();
+                }
+             }
+    }
+}]);
+
+
+function refreshTermListOnSystemSel(bodySystemId) {
+    var rootScope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+    rootScope.$apply(function () {
+        rootScope.refreshTermListOnAASystemSelection(bodySystemId);
+    });
+}
+
+
+function showSelectedSystemPins(event) {
+    console.log('OnBodySystem chnaged is called outside ');
+    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+    scope.$apply(function () {
+        scope.showSelectedSystemPins(event);
+    });
+}
+
+function hidePins(event) {
+
+    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+    scope.$apply(function () {
+        scope.hidePins(event);
+    });
+}
+
+function showAllPins(event) {
+
+    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+    scope.$apply(function () {
+        scope.showAllPinsAfterHide(event);
+    });
+}
+
+function onSearchAA(event) {
+    console.log('AA search is called')
+    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+    scope.$apply(function () {
+        scope.showItemsForSearch();
+    });
+}
+
+function hideSearchList(event) {
+    console.log('AA hide search is called')
+    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+    scope.$apply(function () {
+        scope.HideSearchList();
+    });
+}
+
+function onSearchItemSelection(event) {
+    console.log('AA hide search is called')
+    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+    scope.$apply(function () {
+        scope.highlightPinBasedOnSerachItem(event);
+    });
+}
+
+//function onListManagerTermSelection(event) {
+//    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+//    scope.isTermListOptionClicked = true;
+//    scope.$apply(function () {
+//        scope.highlightPinBasedOnSerachItem1(event);
+//    });
+
+//}
+
+
+function showHideAnnotation(event) {
+
+    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+    scope.$apply(function () {
+        scope.ShowHideAnnotation(event);
+    });
+}
+
+function showSelectedPins(event) {
+
+    console.log('showSelectedPins is called')
+    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+    scope.$apply(function () {
+        scope.showSelectedPins(event);
+    });
+}
+
+
+function openModuleItemView(event) {
+    var scope = angular.element(document.getElementById("list-view")).scope();
+    scope.isListViewButtonClicked = true;
+    scope.$apply(function () {
+        scope.openModuleItemView(event);
+    });
+}
+
+function openListViewModuleItem(event) {
+
+    var scope = angular.element(document.getElementById("list-view")).scope();
+    scope.isListViewButtonClicked = true;
+    scope.$apply(function () {
+        scope.openListViewModuleItem(event);
+    });
+}
+
+function openCurrentView(event) {
+
+    var scope = angular.element(document.getElementById("list-view")).scope();
+    scope.isOpenBtnClicked = true;
+    scope.$apply(function () {
+        scope.openModuleItemView(event);
+    });
+
+}
+
+function onZoom(scope) {
+
+    //$(".common-drag").remove();
+    //$(".commonDot").remove();
+    //$(".commonDraggedLine").remove();
+    //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();
+    //  scope.removePin();
+    //    scope.showAllPins();
+
+
+    //6. Show all pins on AA opened item
+}
+
+
+$(document).ready(function () {
+
+    $(".slider").slider({
+        min: 25,
+        max: 100,
+        value: 100,
+        range: "min",
+        orientation: "vertical",
+        slide: function (event, ui) {
+            var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+            scope.$apply(function () {
+                scope.sliderVal = ui.value;
+                scope.removeSpeechBubble();
+                var relativeWidth = 0;
+                var relativeHeight = 0;
+                if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
+                    if (ui.value == 100) {
+                        relativeWidth = scope.ViewImageWidth;
+                        relativeHeight = scope.ViewImageHeight
+                        scope.sliderPercentValue = 1.0;
+                    }
+                    else if (ui.value == 85) {
+                        relativeWidth = scope.ViewImageWidth * 0.85;
+                        relativeHeight = scope.ViewImageHeight * 0.85;
+                        scope.sliderPercentValue = 0.85;
+
+                    } else if (ui.value == 70) {
+                        relativeWidth = scope.ViewImageWidth * 0.70;
+                        relativeHeight = scope.ViewImageHeight * 0.70;
+                        scope.sliderPercentValue = 0.70;
+                    } else if (ui.value == 55) {
+
+                        relativeWidth = scope.ViewImageWidth * 0.55;
+                        relativeHeight = scope.ViewImageHeight * 0.55;
+                        scope.sliderPercentValue = 0.55;
+
+                    } else if (ui.value == 40) {
+
+                        relativeWidth = scope.ViewImageWidth * 0.40;
+                        relativeHeight = scope.ViewImageHeight * 0.40;
+                        scope.sliderPercentValue = 0.40;
+
+                    } else if (ui.value == 25) {
+
+                        relativeWidth = scope.ViewImageWidth * 0.25;
+                        relativeHeight = scope.ViewImageHeight * 0.25;
+                        scope.sliderPercentValue = 0.25;
+
+                    }
+                }
+
+                if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
+                    $("#modItemImage").css("width", relativeWidth + "px");
+                    $("#modItemImage").css("height", relativeHeight + "px");
+                    $("#aaDetailViewCanvas").css("width", relativeWidth + "px");
+                    $("#modItemImage").css("height", relativeHeight + "px");
+
+                    $("#modItemImage").attr('src', '');
+
+
+                    $("#aaDetailViewCanvas").remove();
+                    //0.5 create canvas on the top of image so that I can draw a line over the canvas.
+                    var canvas = document.createElement('canvas');
+                    canvas.id = 'aaDetailViewCanvas';
+                    canvas.className = 'aaCanvas';
+                    canvas.height = relativeHeight;
+                    canvas.width = relativeWidth;
+                    canvas.style.left = '0px';
+                    canvas.style.top = '0px';
+                    canvas.style.position = "absolute";
+
+                    $("#canvasDiv").append(canvas);
+                    scope.context = canvas.getContext("2d")
+                    $("#modItemImage").attr('src', scope.OpenItemImagePath);
+                    scope.isSliderChange = true;
+<<<<<<< HEAD
+                    var btnID = '';
+                    $("div.tools div:eq(1) div").each(function () {
+                        if ($(this).find("button").hasClass("btn-primary")) {
+                             btnID = $(this).find("button").attr("id");
+                            $('#' + btnID).removeClass("btn-black");
+                            $('#' + btnID).addClass("btn-primary");
+                        }
+                    });
+                    scope.isSelectedPinBtnClickedAftrSliderCange = true;
+                    switch (btnID) {
+                        
+                        case "hidePinBtn":
+                            break;
+                        case "allPinBtn":
+                                scope.showAllPins();
+                            break;
+                        case "selectedPin":
+                            scope.showAllPins();
+                            setTimeout(function () {
+                                console.log(scope.allPinDataArray);
+                                scope.activePinOnSliderChange();
+                            }, 1000);
+                            break;
+                    }
+=======
+
+                    scope.showAllPins();
+
+>>>>>>> 43fbaf7767a7db0e8ec18055b596d1112084dad8
+                }
+
+            });
+        }
+    })
+ .slider("pips", {
+     rest: "label",
+     step: "15"
+ });
+});
\ No newline at end of file
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/tile-view.html b/400-SOURCECODE/AIAHTML5.Web/app/views/tile-view.html
index cb230d1..945ee5c 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/views/tile-view.html
+++ b/400-SOURCECODE/AIAHTML5.Web/app/views/tile-view.html
@@ -55,8 +55,8 @@
                                 <h6 class="text-center text-primary txt-white f11">Search</h6>
 
                                 <div class="btn-group col-xs-12" style="padding:0;">
-                                    <button type="button" class="btn btn-primary btn-sm col-xs-9" ng-click="Reset(1,query)"><i class="fa fa-eye"></i> Show All</button>
-                                    <button type="button" class="btn btn-primary btn-sm col-xs-3" ng-click="FilterByImage(1,query)">
+                                    <button type="button" class="btn btn-primary btn-sm col-xs-9" ng-click="Reset(1, query)"><i class="fa fa-eye"></i> Show All</button>
+                                    <button type="button" class="btn btn-primary btn-sm col-xs-3" ng-click="FilterByImage(1, query)">
                                         <i class="fa fa-search"></i>
                                     </button>