diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index 23a1569..0ad0b3a 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -1471,7 +1471,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
         FlipedImgCanvas.addEventListener('click', function (evt) {
 
-
+            var canvasDiv = document.getElementById('canvasDiv');
+            $scope.imageVerticalScrollPosition = canvasDiv.scrollTop;
             //to get correct data on multihighlight highlight
             if ($scope.isLayerChange == true) {
                 $scope.isLayerChange = false;
@@ -1872,8 +1873,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         }
 
         imgCanvas.addEventListener('click', function (evt) {
-
-     
+            var canvasDiv = document.getElementById('canvasDiv');
+            $scope.imageVerticalScrollPosition = canvasDiv.scrollTop;
             if ($scope.isLayerChange == true) {
                 $scope.isLayerChange = false;
             }
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index 0c3587d..7528d60 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -353,99 +353,6 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
     $rootScope.lexiconLanguageArray = [];
     $rootScope.lexiconLanguageArray.push({ id: "1", language: "English" });
     $(document).ready(function () {
-        // getUserDetails();
-
-        //  var ajaxResult = [];
-        //   var ajaxResult1 = [];
-
-        function onBrushSizeChange() {
-            $('.btnCursor').addClass('activebtncolor');
-            $(".btn-annotation").removeClass("activebtncolor");
-            $(".btn-annotation-erase").removeClass("activebtncolor");
-            $(".btn-annotation-erase").removeClass("activebtncolor");
-            $(".annotationpaintbrushsize").removeClass("activebtncolor");
-            var x = $('#canvasPaint').css("z-index");
-
-            var y = $('#canvas').css("z-index");
-            if (x > y) {
-                y = parseInt(x) + 1;
-            } else {
-                y = parseInt(y) + 1;
-            }
-            $('#canvas').css("z-index", y);
-        }
-
-        $("#slider-range-min-2").slider({
-            range: "min",
-            min: 1,
-            max: 60,
-            value: 1,
-            slide: function (event, ui) {
-
-                onBrushSizeChange();
-                console.log("sliding");
-                $("#btnBrushSize").val(ui.value);
-
-            },
-            stop: function (event, ui) {
-
-                $("#paintLine").attr("data-size", ui.value);
-
-            }
-
-        });
-
-
-        $("#btnBrushSize").keydown(function () {
-            onBrushSizeChange();
-            var brushSizevalue = this.value;
-            $("#slider-range-min-2").slider("value", parseInt(brushSizevalue));
-        });
-        $("#btnBrushSize").keyup(function () {
-            onBrushSizeChange();
-            var brushSizevalue = this.value;
-            $("#slider-range-min-2").slider("value", parseInt(brushSizevalue));
-        });
-        $("#btnBrushSizeIncrement").click(function () {
-            onBrushSizeChange();
-            var brushIncrementVar = $("#btnBrushSize").val();
-            if (brushIncrementVar >= 60) {
-                $("#slider-range-min-2").slider("value", 60);
-            }
-            else if (brushIncrementVar == "") {
-                var brushIncrementedValue = 1;
-                $("#btnBrushSize").val(brushIncrementedValue);
-                $("#slider-range-min-2").slider("value", parseInt(brushIncrementedValue));
-            }
-            else {
-                var brushIncrementedValue = parseInt(brushIncrementVar) + 1;
-                $("#btnBrushSize").val(brushIncrementedValue);
-                $("#slider-range-min-2").slider("value", parseInt(brushIncrementedValue));
-            }
-        });
-        $("#btnBrushSizeDecrease").click(function () {
-            onBrushSizeChange();
-            var brushDecreaseVar = $("#btnBrushSize").val();
-            if (brushDecreaseVar == "") {
-                var brushDecrementedValue = 1;
-                $("#btnBrushSize").val(brushDecrementedValue);
-                $("#slider-range-min-2").slider("value", parseInt(brushDecrementedValue));
-            }
-            else if (brushDecreaseVar <= 1) {
-                $("#slider-range-min-2").slider("value", 1);
-            }
-            else {
-                var brushDecrementedValue = parseInt(brushDecreaseVar) - 1;
-                $("#btnBrushSize").val(brushDecrementedValue);
-                $("#slider-range-min-2").slider("value", parseInt(brushDecrementedValue));
-            }
-        });
-
-        $("#btnBrushSize").val($("#slider-range-min-2").slider("value"));
-
-
-        // annotation slider ends
-
         $rootScope.isLexiconTabClicked = true;
         $rootScope.lexiconData = function () {
             if ($rootScope.isLexiconTabClicked == true) {
@@ -841,6 +748,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
         $("#DrawMode").removeClass("annotationtoolbartab");
         $('.btnCursor').removeClass('activebtncolor');
         $("#annotationButton").removeClass("active");
+        $("#annotationButton").blur();
         $("#annotationToolBarOptions").removeClass("active");
 
 
@@ -3555,8 +3463,6 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
 
                 OpenJSPanel();  // open jsPanel here
                 if ($('#jsPanel-1').length > 0) {
-                    $('.jsPanel-btn-min').attr('style', 'display: none');
-                    $('.jsPanel-btn-max').attr('style', 'display: none');
                     $('.jsPanel-btn-norm').attr('style', 'display: none');
                 }
 
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
index 6f2e2af..6fb8118 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -927,7 +927,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 c2: 'rgb(216, 216, 216)'
             });
             $('#' + canvasId).drawLine({
-
                 layer: true,
                 name: "Pin_" + PinId,
                 groups: ["Pin_" + PinId],
@@ -950,17 +949,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 radius: 5 * $scope.sliderPercentValue,
 
                 click: function (clickedPin) {
-                   // alert('pin clciked = ' + clickedPin.name)
-                    //change the head color to green
-                    var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
-                        x1: 50, y1: 50,
-                        x2: 50, y2: 50,
-                        r1: 10, r2: 30,
-                        c1: 'rgba(100, 50, 0,0)',
-                        c2: 'rgb(126, 187, 83)'
-                    });
-
-                    clickedPin.fillStyle = radialAfterClick;
+                    // alert('pin clciked = ' + clickedPin.name)
+
+                    if (clickedPin.event.ctrlKey == false) {
+                                            $scope.clickedPins = [];
+                    }
 
                     var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
                     // alert('pinId: ' + pinID);
@@ -991,112 +984,56 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     }
 
                     var selectedPinData = new jinqJs()
-                                .from($scope.aaPinData)
+                                .from($scope.aaPinData) 
                                 .where("_PinId == " + pinID)
                                 .select();
                     if (clickedPin.event.ctrlKey == true) {
+
+                        var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
+                            x1: 50, y1: 50,
+                            x2: 50, y2: 50,
+                            r1: 10, r2: 30,
+                            c1: 'rgba(100, 50, 0,0)',
+                            c2: 'rgb(126, 187, 83)'
+                        });
+
+                        clickedPin.fillStyle = radialAfterClick;
                         $scope.showAnnotation(selectedPinData, true, true, false);
 
                     }
                     else {
-                        $scope.showAnnotation(selectedPinData, false, true, false);
-
-                    }
-
-
-                }
-
-            }).drawLayers();
-        //}
-    //    else
-    // {
-    //    var radial = $('#' + canvasId).createGradient({
-    //        x1: 50, y1: 50,
-    //        x2: 50, y2: 50,
-    //        r1: 10, r2: 30,
-    //        c1: 'rgba(100, 50, 0,0)',
-    //        c2: 'rgb(216, 216, 216)'
-    //    });
-    //    $('#' + canvasId).drawLine({
-
-    //        layer: true,
-    //        name: "Pin_" + PinId,
-    //        groups: ["Pin_" + PinId],
-    //        strokeStyle: 'black',
-    //        strokeWidth: 2,
-    //        visible: true,
-    //        x1: offsetX1, y1: offsetY1,
-    //        x2: x, y2: y,
-
-    //    }).drawArc({
-    //        name: "PinArc_" + PinId,
-    //        layer: true,
-    //        groups: ["Pin_" + PinId],
-    //        strokeStyle: 'grey',
-    //        strokeWidth: 2,
-    //        visible: true,
-    //        fillStyle: radial,
-    //        x: x, y: y,
-    //        radius: 5,
-
-    //        click: function (clickedPin) {
-    //            alert('pin clciked = ' + clickedPin.name)                //change the head color to green
-    //            var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
-    //                x1: 50, y1: 50,
-    //                x2: 50, y2: 50,
-    //                r1: 10, r2: 30,
-    //                c1: 'rgba(100, 50, 0,0)',
-    //                c2: 'rgb(126, 187, 83)'
-    //            });
-
-    //            clickedPin.fillStyle = radialAfterClick;
-
-    //            var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
-    //            // alert('pinId: ' + pinID);
-    //            //showAnnotation();
-
-    //            var pinData = new jinqJs()
-    //                          .from($scope.aaPinData)
-    //                          .where("_PinId == " + pinID)
-    //                          .select();
-
-
-    //            var pinTermNumber = pinData[0]._TermId;
-
-    //            var pinWithSameTerm = new jinqJs()
-
-    //                                 .from($scope.aaPinData)
-    //                                 .where("_TermId == " + pinTermNumber)
-    //                                 .select();
-
-
-    //            if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
-
-    //                for (var i = 0; i < pinWithSameTerm.length; i++) {
+                        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)'
+                        });
 
-    //                    $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
-    //                }
 
-    //            }
+                        $('#aaDetailViewCanvas').setLayers({
+                            fillStyle: radial,
+                        }).drawLayers();
 
-    //            var selectedPinData = new jinqJs()
-    //                        .from($scope.aaPinData)
-    //                        .where("_PinId == " + pinID)
-    //                        .select();
-    //            if (clickedPin.event.ctrlKey == true) {
-    //                $scope.showAnnotation(selectedPinData, true, true, false);
+                        //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)'
+                        });
 
-    //            }
-    //            else {
-    //                $scope.showAnnotation(selectedPinData, false, true, false);
+                        clickedPin.fillStyle = radialAfterClick;
+                        $scope.showAnnotation(selectedPinData, false, true, false);
 
-    //            }
+                    }
 
 
-    //        }
+                }
 
-    //    }).drawLayers();
-    //}
+            }).drawLayers();
+   
 
     }
 
@@ -1602,7 +1539,6 @@ $(document).ready(function () {
                 }
             }
 
-                console.log('ui.value= '+ui.value+' ,relativeWidth= ' + relativeWidth + ',relativeHeight= ' + relativeHeight)
                 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");
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 6c3aa72..32876ad 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
@@ -16,6 +16,11 @@
         left: 0;
         right: 0;
     }
+    .active
+    {
+        margin-left:15px!important;
+    }
+    .tools1{left:-96px;}
 </style>
 <div id="aaDetailPageDiv" class="bodyWrap row" ng-controller="TileViewListController">
 
@@ -27,7 +32,7 @@
     <div class="clearfix"></div>-->
     <!--</div>-->
     <div class="tools pull-left" style="top:44px;">
-        <div class="toggle-icon toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
+        <div class="toggle-icon toggleBar toggleHeadingButton" id="sideBarToggle" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
         <div class="">
             <div class="col-sm-6" title="Hide Pins"><button onclick="hidePins(event)" class="btn btn-black btn-sm"> <img src="../../../content/images/aa/LeftMenu/hide-pin.png" alt="" title=""></button> </div>
             <div class="col-sm-6" title="Show Selected Pins"><button class="btn btn-black btn-sm pull-right" onclick="showSelectedPins(event)"><img src="../../../content/images/aa/LeftMenu/draw-pin.png" alt="" title=""></button></div>
@@ -159,8 +164,24 @@
 </script>
 
 <script>
+    var isSideBarBtnClicked = true;
     $(document).ready(function () {
         $('[data-toggle="tooltip"]').tooltip();
+        $("#sideBarToggle").click(function () {
+            if (isSideBarBtnClicked == true) {
+                $(".main2").addClass("active");
+                $(".tools").addClass("tools1");
+                isSideBarBtnClicked = false;
+
+            }
+            else
+            {
+                $(".main2").removeClass("active");
+                $(".tools").removeClass("tools1");
+                isSideBarBtnClicked = true;
+            }
+           
+        });
     });
 </script>
 <script src="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js"></script>
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index 93f444a..6472997 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -1669,6 +1669,140 @@
 
         });
     </script>
+    <script>
+        $(function () {
+            function onBrushSizeChange() {
+                $('.btnCursor').addClass('activebtncolor');
+                $(".btn-annotation").removeClass("activebtncolor");
+                $(".btn-annotation-erase").removeClass("activebtncolor");
+                $(".btn-annotation-erase").removeClass("activebtncolor");
+                $(".annotationpaintbrushsize").removeClass("activebtncolor");
+                var x = $('#canvasPaint').css("z-index");
+
+                var y = $('#canvas').css("z-index");
+                if (x > y) {
+                    y = parseInt(x) + 1;
+                } else {
+                    y = parseInt(y) + 1;
+                }
+                $('#canvas').css("z-index", y);
+            }
+
+            $("#slider-range-min-2").slider({
+                range: "min",
+                min: 1,
+                max: 60,
+                value: 1,
+                slide: function (event, ui) {
+
+                    onBrushSizeChange();
+
+
+
+                    $("#btnBrushSize").val(ui.value);
+
+                    $("#annotationpaintbrushsize").css({ "pointer-events": "auto", "opacity": "1" });
+                    $("#annotationpainteraser").css({ "pointer-events": "auto", "opacity": "1" });
+                    $("#btnBrushSizeDecrease").css({ "pointer-events": "auto", "opacity": "1" });
+                    $("#btnBrushSizeDecrease").css({ "pointer-events": "auto", "opacity": "1" });
+
+                },
+                stop: function (event, ui) {
+
+                    $("#paintLine").attr("data-size", ui.value);
+
+                }
+
+            });
+
+
+            $("#btnBrushSize").keydown(function () {
+                $("#btnBrushSizeDecrease").css({ "pointer-events": "auto", "opacity": "1" });
+                $("#btnBrushSizeDecrease").css({ "pointer-events": "auto", "opacity": "1" });
+                onBrushSizeChange();
+                var brushSizevalue = this.value;
+
+                $("#slider-range-min-2").slider("value", parseInt(brushSizevalue));
+            });
+            $("#btnBrushSize").keyup(function () {
+                onBrushSizeChange();
+                var brushSizevalue = this.value;
+                if (brushSizevalue == "") {
+
+                    $("#slider-range-min-2").slider("value", 0);
+
+                    $("#annotationpaintbrushsize").css({ "pointer-events": "none", "opacity": ".5" });
+                    $("#annotationpainteraser").css({ "pointer-events": "none", "opacity": ".5" });
+                }
+                else {
+                    $("#slider-range-min-2").slider("value", parseInt(brushSizevalue));
+                    $("#annotationpaintbrushsize").css({ "pointer-events": "auto", "opacity": "1" });
+                    $("#annotationpainteraser").css({ "pointer-events": "auto", "opacity": "1" });
+                }
+                // $("#slider-range-min-2").slider("value", parseInt(brushSizevalue));
+            });
+            $("#btnBrushSizeIncrement").click(function () {
+                if ($("#annotationpaintbrushsize").css('pointer-events') == 'none') {
+                    $("#annotationpaintbrushsize").css({ "pointer-events": "auto", "opacity": "1" });
+                    $("#annotationpainteraser").css({ "pointer-events": "auto", "opacity": "1" });
+                    $("#btnBrushSizeDecrease").css({ "pointer-events": "auto", "opacity": "1" });
+                    $("#btnBrushSizeDecrease").css({ "pointer-events": "auto", "opacity": "1" });
+                }
+
+                onBrushSizeChange();
+                var brushIncrementVar = $("#btnBrushSize").val();
+                if (brushIncrementVar >= 60) {
+                    $("#slider-range-min-2").slider("value", 60);
+                }
+                else if (brushIncrementVar == "") {
+                    var brushIncrementedValue = 1;
+                    $("#btnBrushSize").val(brushIncrementedValue);
+                    $("#slider-range-min-2").slider("value", parseInt(brushIncrementedValue));
+                }
+                else {
+
+                    var brushIncrementedValue = parseInt(brushIncrementVar) + 1;
+
+                    $("#btnBrushSize").val(brushIncrementedValue);
+                    $("#slider-range-min-2").slider("value", parseInt(brushIncrementedValue));
+                }
+            });
+            $("#btnBrushSizeDecrease").click(function () {
+              
+                onBrushSizeChange();
+                var brushDecreaseVar = $("#btnBrushSize").val();
+                if (brushDecreaseVar == "") {
+
+                    $("#btnBrushSizeDecrease").css({ "pointer-events": "none", "opacity": ".5" });
+                    $("#btnBrushSizeDecrease").css({ "pointer-events": "none", "opacity": ".5" });
+                    
+                }
+                else if (brushDecreaseVar <= 1) {
+                    $("#slider-range-min-2").slider("value", 1);
+                    if ($("#annotationpaintbrushsize").css('pointer-events') == 'none') {
+                        $("#annotationpaintbrushsize").css({ "pointer-events": "auto", "opacity": "1" });
+                        $("#annotationpainteraser").css({ "pointer-events": "auto", "opacity": "1" });
+                        $("#btnBrushSizeDecrease").css({ "pointer-events": "auto", "opacity": ".5" });
+                        $("#btnBrushSizeDecrease").css({ "pointer-events": "auto", "opacity": ".5" });
+                    }
+                 
+                }
+                else {
+                    var brushDecrementedValue = parseInt(brushDecreaseVar) - 1;
+                    if ($("#annotationpaintbrushsize").css('pointer-events') == 'none') {
+                        $("#annotationpaintbrushsize").css({ "pointer-events": "auto", "opacity": "1" });
+                        $("#annotationpainteraser").css({ "pointer-events": "auto", "opacity": "1" });
+                        $("#btnBrushSizeDecrease").css({ "pointer-events": "auto", "opacity": "1" });
+                        $("#btnBrushSizeDecrease").css({ "pointer-events": "auto", "opacity": "1" });
+                    }
+                    $("#btnBrushSize").val(brushDecrementedValue);
+                    $("#slider-range-min-2").slider("value", parseInt(brushDecrementedValue));
+                }
+            });
+
+            $("#btnBrushSize").val($("#slider-range-min-2").slider("value"));
+        });
+    </script>
 
     <script>
         $(function () {
diff --git a/400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/main.css b/400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/main.css
index 6a46ca3..881b79d 100644
--- a/400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/main.css
+++ b/400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/main.css
@@ -1017,7 +1017,10 @@ background-size:cover;
     height: 95px !important;
 }
 
-  
+  #bodySystemList
+   {
+      z-index:100000;
+  }
  .GridViewDataDivHeight
        {
             height:175px;