diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index c5e2236..d69cce0 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -844,7 +844,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
             var annotationText = $scope.GetAnnotationText(parseInt(RGBColor));
 
-            if ($('#speechBubbleTrns').length > 0) 
+            if ($('#speechBubbleTrns').length > 0) 
                 $('#speechBubbleTrns').remove();
 
             if ($('#speechBubble').length > 0) {
@@ -1005,7 +1005,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
             }
 
-            if ($('#speechBubbleTrns').length > 0)
+            if ($('#speechBubbleTrns').length > 0)
                 $('#speechBubbleTrns').remove();
           
             if ($('#speechBubble').length > 0) {
@@ -1347,7 +1347,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         
             $scope.isTransparencyActivated = true;
             //   alert('transparencyClicked' + $scope.isTransparencyActivated)
-            document.getElementById('btnTranparency').className = 'transparencySelected'
+            $('#btnTranparency').addClass('tButtonActive');
             var canvasDiv = document.getElementById('canvasDiv');
             var verticalScrollPosition = canvasDiv.scrollTop;
             var horizontlScrollPosition = canvasDiv.scrollLeft;
@@ -1506,7 +1506,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
                 $(".ui-wrapper").css("z-index", "6000");
 
-                //  $('#transparencyScale').modal('show');
+                // $('#transparencyScale').modal('show');
+               
                 //canvasDiv.removeEventListener('mouseup', arguments.callee);
                 //canvasDiv.removeEventListener('mousedown', arguments.callee);
                 //canvasDiv.removeEventListener('mousemove', arguments.callee);
@@ -1519,9 +1520,20 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             }
         })
 
-        $('#transparencyScale').modal('show');
+        // $('#transparencyScale').modal('show');
+        $('#transparencyScale').css('position', 'absolute')
+        $('#transparencyScale').css('top', parseInt(transparencyCanvas.style.top) - 100)
+        $('#transparencyScale').css('left', parseInt(transparencyCanvas.style.left))
+        $('#transparencyScale').css('visibility', 'visible')
+        $('#transparencyScale').css("z-index", "9000")
+
+
+
 
         document.getElementById('canvasDiv').removeEventListener("mouseup", mouseUpListener);
+        $('#btnTranparency').removeClass('btn-black');
+
+        $('#btnTranparency').addClass('tButtonActive');
     }
 
     $scope.loadTransparencyImage = function(bodyRegionId, Height, Width, X, Y, IsMirror, TransparencyBoxStartX, TransparencyEndX, TransparencyBoxStartY, TransparencyBoxEndY, scope, isLayerChanged, isTransparencyChanged) {
@@ -1642,19 +1654,20 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
             var ctx = document.getElementById('transparencyCanvas').getContext('2d');
 
-            var image = ctx.getImageData(XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage);
+            var imageDa = ctx.getImageData(XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage);
 
             // get the image data values 
-            var imageData = image.data;
+            var imageData = imageDa.data;
             var length = imageData.length;
             // set every fourth value to 50
             for (var i = 3; i < length; i += 4) {
                 imageData[i] = ((255) * (parseInt(transNumber))) / 100;
             }
             // after the manipulation, reset the data
-            image.data = imageData;
+           // imageDa.data = imageData;
             // and put the imagedata back to the canvas
-            ctx.putImageData(image, XforTransImage, YforTransImage);
+            ctx.putImageData(imageDa, XforTransImage, YforTransImage);
+
 
         }
         else {
@@ -2268,8 +2281,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
 
     $scope.onTransparencyChange = function(ev, ui){
-       debugger;
-        alert('t change')
+       //debugger;
+       // alert('t change')
        $scope.transNumber = ui.value;
 
         var tCanvas = document.getElementById('transparencyCanvas');
@@ -2335,9 +2348,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             while (elements.length > 0) {
                 elements[0].parentNode.removeChild(elements[0]);
             }
-            var txtTransparencyChange = document.getElementById("txtTransparencyChange");
-            txtTransparencyChange.value = 0;
-            document.getElementById('txtLayerNumber').value = 0;
+            //var txtTransparencyChange = document.getElementById("txtTransparencyChange");
+            //txtTransparencyChange.value = 0;
+            //   document.getElementById('txtLayerNumber').value = 0;
+            $("#txtlayerNumber").val(0);
             $('#sliderHandle').tabindex = 0;
             if (document.getElementById('tempCanvas') != null) {
                 $('#tempCanvas').remove();
@@ -2351,8 +2365,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $scope.isTransparencyActivated = false;
             //})
         }
+        $('#transparencyScale').css('visibility', 'hidden')
+
+        // document.getElementById('btnTranparency').className = 't-transparency'
+        $('#btnTranparency').removeClass('tButtonActive');
+        $('#btnTranparency').addClass('btn-black');
         document.getElementById('btnTranparency').removeEventListener("click", onTransparencyButtonClick);
-        document.getElementById('btnTranparency').className = 't-transparency'
+
     }
 
     $scope.createSpeechBubbleOnTransparencyBox = function (event, text1, text2, x, y) {
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 a7d9595..4d8ca14 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
+++ b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
@@ -128,11 +128,12 @@
     </div>
     <div class="clearfix"></div>
 
-    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="transparencyScale">
+    <!--to prevent transparency scale from closing on click anywhere outside set data-backdrop="static" data-keyboard="false" -->
+    <!--<div class="modal fade bs-example-modal-sm" tabindex="-1" aria-labelledby="mySmallModalLabel" id="transparencyScale" data-backdrop="static" data-keyboard="false">
         <div class="modal-dialog modal-sm">
             <div class="modal-content">
                 <div class="modal-header annotation-modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"  ng-click="CloseTransparencyBox()"><span aria-hidden="true">&times;</span></button>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="CloseTransparencyBox()"><span aria-hidden="true">&times;</span></button>
                     <h4 class="modal-title">Transparency</h4>
                 </div>
                 <div class="modal-body">
@@ -146,8 +147,45 @@
                 </div>
             </div>
         </div>
+    </div>-->
+    <!--<div class="ui-widget-content"  id="transparencyScale"  style="width: 350px; height: 130px;visibility:hidden;display:block;float:left">
+        <div class="modal-dialog modal-sm">
+            <div class="modal-content">
+                <div class="modal-header annotation-modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="CloseTransparencyBox()"><span aria-hidden="true">&times;</span></button>
+                    <h4>Transparency</h4>
+                </div>
+                <div>
+                    <div class="row">
+                        <div class="col-sm-12">
+                            <div class="padded25">
+                                <div class="slider"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>-->
+    <div class="ui-widget-content" id="transparencyScale" style="width: 350px; height: 150px;visibility:hidden;display:block;float:left">
+        <div  >
+            <div >
+                <div class="modal-header annotation-modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="CloseTransparencyBox()"><span aria-hidden="true">&times;</span></button>
+                    <h4>Transparency</h4>
+                </div>
+                <div>
+                    <div class="row">
+                        <div class="col-sm-12">
+                            <div class="padded25">
+                                <div class="slider"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-
 </div>
 <script>
 $(window).load(function () {
@@ -210,7 +248,11 @@ $(window).load(function () {
 
 </script>
     });-->
-
+<script>
+    $(function () {
+        $("#transparencyScale").draggable();
+    });
+</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 18bdcad..ba1a4cc 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
@@ -697,3 +697,14 @@ textarea {
         width: 100px; / width of the spinner gif /
         height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
     }
+
+/*to make the background fully visible on transparency box draw*/
+.modal-backdrop.in {
+    opacity: 0;
+}
+
+.tButtonActive {
+ background-color: #1B92D0;
+	border-color: #1B92D0;
+	color: #ffffff;
+}
\ No newline at end of file