diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
index 6f36d07..5a3c1d3 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -260,6 +260,112 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
                         //7. Highlight all system body list in left side
                         $scope.highlightBodySystemList();
                     }
+                    $(".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;
+                                    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;
+                                    }
+                                }
+
+                            });
+                        }
+                    })
+ .slider("pips", {
+     rest: "label",
+     step: "15"
+ });
                 }, 500);
             }
 
@@ -1745,6 +1851,51 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
             }
         }
     }
+    $(document).ready(function () {
+        var $ua = navigator.userAgent;
+        if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {
+
+            var jspanelContainerWidth = $(".jsPanel-content").css("width");
+            $(".jsPanel-content").css({ "width": "100%", "min-width": jspanelContainerWidth });
+            $("#ImagePanel").css("width", "100%");
+
+            //hide pin button clicked
+            $("#hidePinBtn").removeAttr("onclick");
+            $("#hidePinBtn").on("touchstart", function () {
+                var rootScope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+                rootScope.$apply(function () {
+                    rootScope.hidePins(event);
+                });
+            });
+            //selected pin button clicked
+            $("#selectedPin").removeAttr("onclick");
+            $("#selectedPin").on("touchstart", function () {
+                console.log('showSelectedPins is called')
+                var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+                scope.$apply(function () {
+                    scope.showSelectedPins(event);
+                });
+            });
+            //all pin button clicked
+            $("#allPinBtn").removeAttr("onclick");
+            $("#allPinBtn").on("touchstart", function () {
+                var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+                scope.$apply(function () {
+                    scope.showAllPinsAfterHide(event);
+                });
+            });
+            //comment-box button clicked
+            $("#comment-box").removeAttr("onclick");
+            $("#comment-box").on("touchstart", function () {
+                var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+                scope.$apply(function () {
+                    scope.ShowHideAnnotation(event);
+                });
+            });
+
+        }
+    
+    }); 
 }]);
 
 
@@ -1883,153 +2034,3 @@ function onZoom(scope) {
 }
 
 
-$(document).ready(function () {
-    var $ua = navigator.userAgent;
-    if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {
-
-        var jspanelContainerWidth = $(".jsPanel-content").css("width");
-        $(".jsPanel-content").css({ "width": "100%", "min-width": jspanelContainerWidth });
-        $("#ImagePanel").css("width", "100%");
-
-        //hide pin button clicked
-        $("#hidePinBtn").removeAttr("onclick");
-        $("#hidePinBtn").on("touchstart", function () {
-            var rootScope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
-            rootScope.$apply(function () {
-                rootScope.hidePins(event);
-            });
-        });
-        //selected pin button clicked
-        $("#selectedPin").removeAttr("onclick");
-        $("#selectedPin").on("touchstart", function () {
-            console.log('showSelectedPins is called')
-            var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
-            scope.$apply(function () {
-                scope.showSelectedPins(event);
-            });
-        });
-        //all pin button clicked
-        $("#allPinBtn").removeAttr("onclick");
-        $("#allPinBtn").on("touchstart", function () {
-            var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
-            scope.$apply(function () {
-                scope.showAllPinsAfterHide(event);
-            });
-        });
-        //comment-box button clicked
-        $("#comment-box").removeAttr("onclick");
-        $("#comment-box").on("touchstart", function () {
-            var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
-            scope.$apply(function () {
-                scope.ShowHideAnnotation(event);
-            });
-        });
-
-    }
-    $(".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;
-                    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;
-                    }
-                }
-
-            });
-        }
-    })
- .slider("pips", {
-     rest: "label",
-     step: "15"
- });
-});
\ No newline at end of file
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html b/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
index 0a0846f..c19cfa4 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
+++ b/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
@@ -241,12 +241,10 @@
         });
     });
 </script>
-<script src="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js"></script>
+
 
 <script>
     $(function () {
         $("#draggable").draggable();
     });
 </script>
-
-<script src="app/controllers/TileViewListController.js"></script>
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index 79711bb..642d98e 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -1448,7 +1448,6 @@
     <script src="libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.js"></script>
     <script src="libs/video_4_12_11/video_4_12_11.js"></script>
     <script src="libs/jquery/jquery_plugin/SpeechBubble/bubble.js"></script>
-    <script src="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js"></script>
     <!--<script src="libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.min.js"></script>-->
     <script src="app/main/AIA.js"></script>
     <script src="app/main/Link.js"></script>
@@ -1479,6 +1478,7 @@
     <script src="app/services/DataService.js"></script>
     <script src="app/services/TermService.js"></script>
     <script src="libs/jquery/jquery_plugin/jqueryui.js"></script>
+    <script src="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>