diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index 384caec..029c8a3 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -1,5 +1,4 @@
-/// <reference path="../views/da/da-view.html" />
-/// <reference path="../views/da/da-view.html" />
+
 'use strict';
 
 AIA.controller("DAController", ["$scope", "$rootScope", "$compile", "$http", "$log", "$location", "$timeout", "DA", "$routeParams",
@@ -15,7 +14,6 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route
         $scope.BodyLayerData = null;
         $scope.VocabTermData = null;
         $scope.bodyViewId = 0;
-
     //view specific constants
         $scope.voId ;
         $scope.layerNo;
@@ -88,14 +86,14 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route
 
                 },
             })
-           debugger
+         //  debugger
             return result;
         }
 
        
       
         $scope.openView = function ($event) {
-            debugger;
+           // debugger;
             $rootScope.pageToOpen = 'app/views/da/da-body-view.html';
             $scope.voId = $event.currentTarget.id;
            
@@ -171,7 +169,7 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route
                 },
                 //overflow: { horizontal: 'scroll', vertical: 'scroll' },
                 
-                size: { width: $(window).outerWidth() - 120, height: $(window).outerHeight()-110  },
+                size: { width: $(window).outerWidth() - 110, height: $(window).outerHeight()-110  },
                 //size: { width: 500, height: 500 },
 
             });
@@ -195,10 +193,10 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route
 
 
         $scope.LoadDefaultLayerImage = function () {
-            debugger;
+           // debugger;
 
             $http({ method: 'GET', url: 'http://localhost/AIA/content/data/json/da_dat_brview.json' }).success(function (data) {
-                debugger;
+             //   debugger;
                 $scope.BodyRegionData = data;
                 console.log($scope.BodyRegionData);
             })
@@ -209,7 +207,7 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route
 
             //  Load Layer data
             $http({ method: 'GET', url: 'http://localhost/AIA/content/data/json/da_dat_layer_1.json' }).success(function (data) {
-                debugger
+              //  debugger
                 $scope.BodyLayerData = data;
                 console.log($scope.BodyLayerData);
 
@@ -231,12 +229,15 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route
     //calculate coordinates for body region images
         $scope.CalculateImageCordinates = function (viewOrientationId) {
 
-            debugger;
+            //debugger;
             //set height of canvas div and left tool bar as per window size
             $scope.BodyRegionCordinatesData = []; // create an empty array
 
-            //$('#canvasDiv').css('height', $('#daImagePanel').outerHeight() - 124)
-            //$('#leftToolBar').css('height', $('#daImagePanel').outerHeight() - 124)
+            $('#canvasDiv').css('height', $('#daImagePanel').outerHeight() - 134)
+            //$('#canvasDiv').css('width', $('#daImagePanel').outerWidth() - 100)
+            $('#leftToolBar').css('height', $('#daImagePanel').outerHeight() - 124)
+
+          
 
             //calculate image coordinates and draw image
             var bodyRegionCoordinates = $scope.BodyRegionData.BodyRegionViews;
@@ -261,10 +262,10 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route
                     //1.Get image source
                     var src = $scope.GetImageSource(value._BodyRegionId);
                     $scope.imageSource = src;
-                    debugger;
+                 //   debugger;
                     //2.Draw mirror image
                     $scope.DrawMirroredImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N');
-                    debugger;
+                  //  debugger;
                     $scope.BodyRegionCordinatesData.push(
                                              {
                                                  "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth),
@@ -274,7 +275,7 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route
 
                     //3.GetMaskImageSource               
                     var maskImageSrc = $scope.GetMaskImageSource($scope.imageSource);
-                    debugger;
+                   // debugger;
                     //4 Draw Mask Mirror Image                    
                     $scope.DrawMirroredImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskImageSrc, value._BodyRegionId, 'Y');
                     
@@ -333,7 +334,8 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route
             $('#daLoaderLabel').css('visibility', 'hidden')
             $('#canvasDiv').css('overflow', 'scroll')
             $('#canvasDiv').scrollLeft($('#canvasDiv').width() / 2)
-
+           // $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition)
+            $('#canvasDiv').scrollTop(50)
             var abc = $scope.BodyRegionCordinatesData
         }
 
@@ -382,7 +384,7 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route
 
 
         $scope.GetImageSource = function (bodyRegionId) {
-            debugger;
+           // debugger;
             var dataLength = $scope.BodyLayerData.Layers.DataLayer.length;
 
             //set max for LayerNumber input
@@ -745,7 +747,10 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route
         }
 
 
-
+    //layer change function
+        $scope.LayerChange = function () {
+            alert('layer changed');
+        }
 
 
 
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
index a699e14..db8ecca 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
+++ b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
@@ -1,5 +1,5 @@
 <div class=" ">
-    <div class="tools pull-left">
+    <div class="tools pull-left" id="leftToolBar">
         <div class="toggle-icon toggleBar toggleHeadingButton" title="Show/Hide Sidebar"></div>
         <div class="">
             <div class="col-sm-6" title="Identify">
@@ -63,9 +63,10 @@
         </div>
         <div class="">
             <p>
-                <input type="number" id="amount" value="0" step="1" max="100" min="0" style="width:80px; margin:10px 0 0 15px;">
+                <input type="number" id="txtlayerNumber" value="0" step="1" max="100" min="0" style="width:80px; margin:10px 0 0 15px;" ng-model="layerNo" ng-change="LayerChange()">
+
             </p>
-            <div id="slider-vertical" style="height:140px;" class="vert_slider "></div>
+            <div id="layerChangeSlider" style="height:140px;" class="vert_slider "></div>
         </div>
     </div>
 </div>
@@ -98,11 +99,11 @@
             </div>
         </div>
     </div>
-    <div class="col-sm-12">
-        <div class="container-fluid">
-            <div class="">
+    <div style="top:100px;" >
+        <div >
+            <div >
                 <!--<div class="col-sm-12 img-thumbnail" align="center"><img src="http://localhost/AIA/content/images/1000x600.jpg" alt="" title="" class="img-responsive"></div>-->
-                <div id="canvasDiv"  style="  width: 100% !important;top:2px;">
+                <div id="canvasDiv"  style="  width: 99% !important;top:2px;overflow:scroll;">
                     <div id="daLoaderLabel">Loading....</div>
 
                 </div>
@@ -112,3 +113,64 @@
     </div>
     <div class="clearfix"></div>
 </div>
+<script>$(window).load(function () {
+    $(".stickey-area").sticky();
+});</script>
+<script>
+    $(function () {
+        $("#layerChangeSlider").slider({
+            orientation: "vertical",
+            range: "max", // <--- needed...
+            min: 0,
+            max: 100,
+            value: 50,
+            slide: function (event, ui) {
+                $("#txtlayerNumber").val(100 - ui.value); // basic math operation..
+            }
+        });
+        $("#txtlayerNumber").val($("#layerChangeSlider").slider("value"));
+    });
+</script>
+
+<script>
+    $(function () {
+        $("#slider-range-min-2").slider({
+            range: "min",
+            min: 1,
+            max: 60,
+            value: 10,
+            slide: function (event, ui) {
+                $("#amount-2").val(ui.value);
+            }
+        });
+        $("#amount-2").val($("#slider-vertical-2").slider("value"));
+
+    });
+</script>
+<script src="js/jquery-ui-slider-pips.js"></script>
+<script>
+    $(".slider")
+
+    .slider({
+        min: 0,
+        max: 100,
+        value: 40,
+        range: "min",
+        orientation: "horizontal"
+    })
+
+    .slider("pips", {
+        rest: "label",
+        step: "25"
+    });
+</script>
+<script>
+    $(document).ready(function () {
+        $('[data-toggle="tooltip"]').tooltip();
+    });
+</script>
+<script>
+    $(function () {
+        $(".modal").draggable();
+    });
+</script>
\ No newline at end of file