diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index 6b58486..c5e2236 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -20,7 +20,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $scope.layerNumber;
     $scope.daCounter = 1;
     $scope.bagartDetails;
-
+    $scope.transNumber = 50;
 
     $scope.isBodylayerdataLoaded = false;
     $scope.isBodyRegionDataLoaded = false;
@@ -1518,6 +1518,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
             }
         })
+
+        $('#transparencyScale').modal('show');
+
         document.getElementById('canvasDiv').removeEventListener("mouseup", mouseUpListener);
     }
 
@@ -1633,9 +1636,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         //data on tras canvas irrespective of the trans number, so we can chnage the transparnecy of original data not the manipulated)
         if (isTransparencyChanged == true) {
 
-            var txtTransparencyChange = document.getElementById("txtTransparencyChange");
+           // var txtTransparencyChange = document.getElementById("txtTransparencyChange");
 
-            var transNumber = txtTransparencyChange.value;
+            var transNumber = $scope.transNumber;
 
             var ctx = document.getElementById('transparencyCanvas').getContext('2d');
 
@@ -1768,22 +1771,22 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 }
 
 
+                // niki 3june
+                //var txtTransparencyChange = document.getElementById("txtTransparencyChange");
+                ////for first time, the transparency should be 50%
+                //if ($scope.isTboxDrwan) {
 
-                var txtTransparencyChange = document.getElementById("txtTransparencyChange");
-                //for first time, the transparency should be 50%
-                if ($scope.isTboxDrwan) {
+                //    if (txtTransparencyChange != null)
+                //        txtTransparencyChange.value = 50;
 
-                    if (txtTransparencyChange != null)
-                        txtTransparencyChange.value = 50;
+                //    $scope.isTboxDrwan = false;
 
-                    $scope.isTboxDrwan = false;
-
-                }
+                //}
 
                 //check if transparency  is activated
 
 
-                var transNumber = 50;//txtTransparencyChange.value;
+                var transNumber = $scope.transNumber;//txtTransparencyChange.value;
                 // debugger;
                 //this changes the transparency when transparency is already activated(on scale the value is >0) and user resizes or chage the layer
 
@@ -2264,6 +2267,94 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     }
 
 
+    $scope.onTransparencyChange = function(ev, ui){
+       debugger;
+        alert('t change')
+       $scope.transNumber = ui.value;
+
+        var tCanvas = document.getElementById('transparencyCanvas');
+        var tCanvasContext = tCanvas.getContext('2d');
+
+        var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', ''));
+
+        var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', ''));
+
+        var tBoxStartX = parseInt((tCanvas.style.left).replace('px', ''));
+        var tBoxEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', '')));
+        var tBoxStartY = parseInt((tCanvas.style.top).replace('px', ''));
+        var tBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', ''));
+        var transparencyBoxBottom = parseInt(tBoxStartY) + parseInt(tCanvasHeight);
+        var transparencyBoxRight = parseInt(tBoxStartX) + parseInt(tCanvasWidth);
+
+        //var scope = angular.element(document.getElementById("DAView")).scope();
+        //scope.$apply(function () {
+            var arr = [];
+            $scope.transparencyChangeCounter++;
+            //before changing the transparency of first canvas, hold the orignal canvas data on temp canvas
+        
+            //put original data on transcanvas so that it can be used to change transparency properly
+            var tempCanavs = document.getElementById('tempCanvas');
+            var tempCanvasContext = tempCanavs.getContext('2d');
+
+            var originalTransparencyData = tempCanvasContext.getImageData(0, 0, $scope.transparencyCanvasWidth, $scope.transparencyCanvasHeight);
+            var ctx = document.getElementById('transparencyCanvas').getContext('2d');
+            ctx.putImageData(originalTransparencyData, 0, 0);
+
+
+            var BodyRegionDictionary = $scope.BodyRegionCordinatesData;
+
+            $scope.IncludedBodyRegions = [];
+            var counter = 0;
+            $.each(BodyRegionDictionary, function (index, value) {
+
+                var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
+                var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
+
+
+           
+                if (tBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && tBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {
+
+                    $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, $scope.TransparencyEndX, $scope.TransparencyBoxStartY, $scope.TransparencyBoxEndY, $scope, false, true);
+
+                }
+
+            });
+
+
+
+      //  });
+    }
+
+    $scope.CloseTransparencyBox = function () {
+        var tBox = document.getElementById('transparencyCanvas');
+
+        // alert('mouseDown is called');
+        if (tBox != null) {
+            tBox.parentNode.removeChild(tBox)
+            var elements = document.getElementsByClassName('ui-icon ui-icon-gripsmall-diagonal-se');
+            while (elements.length > 0) {
+                elements[0].parentNode.removeChild(elements[0]);
+            }
+            var txtTransparencyChange = document.getElementById("txtTransparencyChange");
+            txtTransparencyChange.value = 0;
+            document.getElementById('txtLayerNumber').value = 0;
+            $('#sliderHandle').tabindex = 0;
+            if (document.getElementById('tempCanvas') != null) {
+                $('#tempCanvas').remove();
+            }
+            if ($('#speechBubbleTrns').length > 0) {
+                $('#speechBubbleTrns').remove();
+            }
+            //var scope = angular.element(document.getElementById("DAView")).scope();
+            //scope.$apply(function () {
+                $scope.layerNumber = 0;
+                $scope.isTransparencyActivated = false;
+            //})
+        }
+        document.getElementById('btnTranparency').removeEventListener("click", onTransparencyButtonClick);
+        document.getElementById('btnTranparency').className = 't-transparency'
+    }
+
     $scope.createSpeechBubbleOnTransparencyBox = function (event, text1, text2, x, y) {
 
         $('#canvasDiv').css('cursor', 'pointer');
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 9d6ea02..a7d9595 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
+++ b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
@@ -1,4 +1,19 @@
-<div class=" " id="daView" ng-controller="DAController">
+<!--<style>
+    .slider label {
+        position: absolute;
+        width: 20px;
+        margin-left: -10px;
+        text-align: center;
+        margin-top: 20px;
+    }
+
+    /* below is not necessary, just for style */
+    .slider {
+        width: 50%;
+        margin: 2em auto;
+    }
+</style>-->
+<div class=" " id="daView" ng-controller="DAController">
     <div class="pos-relative leftToolBar tools pull-left">
         <div class="toggle-icon toggleBar toggleHeadingButton" title="Show/Hide Sidebar" style="top:20px;"></div>
         <div class="" style="top:20px">
@@ -117,7 +132,7 @@
         <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"><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">
@@ -184,21 +199,7 @@ $(window).load(function () {
     });
 
    
-	$(".slider")
-                    
-    .slider({ 
-        min: 0, 
-        max: 100,
-        value: 40,
-        range: "min",
-        orientation: "horizontal"
-    })
-                    
-    .slider("pips", {
-        rest: "label",
-        step: "25"
-    });
-    </script> 
+	  </script> 
 
 
 <!--<script>
@@ -226,7 +227,7 @@ $(window).load(function () {
 
     });
 </script>
-<script src="libs/jquery/jquery_plugin/jquery-ui-slider-pips.js"></script>
+<!--<script src="libs/jquery/jquery_plugin/jquery-ui-slider-pips.js"></script>-->
 
 <script>
     $(".slider")
@@ -234,15 +235,24 @@ $(window).load(function () {
     .slider({
         min: 0,
         max: 100,
-        value: 40,
+        value: 50,
         range: "min",
-        orientation: "horizontal"
+        orientation: "horizontal",
+        stop: function (event, ui) {
+            //alert('trans changed')
+            var scope = angular.element(document.getElementById("daView")).scope();
+            scope.$apply(function () {
+                scope.onTransparencyChange(event,ui);
+            });
+         }
     })
 
     .slider("pips", {
         rest: "label",
-        step: "25"
+        step: "10"
     });
+
+    
 </script>
 <script>
     $(document).ready(function () {
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index 1f23918..8acd1b7 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -30,7 +30,7 @@
 
     <link href="libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.css" rel="stylesheet" />
     <link href="libs/jquery/jquery_plugin/SpeechBubble/css/bubble.css" rel="stylesheet" />
-
+    <link href="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.css" rel="stylesheet" />
 
 </head>
 <body ng-controller="HomeController" id="bo">
@@ -143,7 +143,7 @@
     <script src="libs/jinqJs.js"></script>
     <script src="libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.js"></script>
     <script src="libs/jquery/jquery_plugin/SpeechBubble/bubble.js"></script>
-    <script src="libs/jquery/jquery_plugin/jquery-ui-slider-pips.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>
diff --git a/400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.css b/400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.css
new file mode 100644
index 0000000..1702f2b
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.css
@@ -0,0 +1,338 @@
+/*! jQuery-ui-Slider-Pips - v1.11.1 - 2015-11-30
+* Copyright (c) 2015 Simon Goellner <simey.me@gmail.com>; Licensed MIT */
+
+/* HORIZONTAL */
+/* increase bottom margin to fit the pips */
+
+.pips-slider{ background:#fff;
+border:1px solid #E7E7E7;
+
+width:80px;
+margin:0 auto;
+margin-top:110px;}
+
+.pips-slider h3{ width:100%; float:left; background:#CCCCCC; font-size:14px; margin:0; padding:0; margin-bottom:20px; padding:5px 0 5px 10px}
+.pips-slider h3 i{ font-size:14px;}
+.pips-slider #vertical-slider{ margin:40px 0 30px 20px;}
+
+.ui-slider-horizontal.ui-slider-pips {
+  margin-bottom: 1.4em;
+}
+
+/* default hide the labels and pips that arnt visible */
+/* we just use css to hide incase we want to show certain */
+/* labels/pips individually later */
+.ui-slider-pips .ui-slider-label,
+.ui-slider-pips .ui-slider-pip-hide {
+  display: none;
+}
+
+/* now we show any labels that we've set to show in the options */
+.ui-slider-pips .ui-slider-pip-label .ui-slider-label {
+  display: block;
+}
+
+/* PIP/LABEL WRAPPER */
+/* position each pip absolutely just below the default slider */
+/* and also prevent accidental selection */
+.ui-slider-pips .ui-slider-pip {
+  width: 2em;
+  height: 1em;
+  line-height: 1em;
+  position: absolute;
+  font-size: 0.8em;
+  color: #999;
+  overflow: visible;
+  text-align: center;
+  top: 20px;
+  left: 20px;
+  margin-left: -1em;
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.ui-state-disabled.ui-slider-pips .ui-slider-pip {
+  cursor: default;
+}
+
+/* little pip/line position & size */
+.ui-slider-pips .ui-slider-line {
+  background: #999;
+  width: 1px;
+  height: 3px;
+  position: absolute;
+  left: 50%;
+}
+
+/* the text label postion & size */
+/* it overflows so no need for width to be accurate */
+.ui-slider-pips .ui-slider-label {
+  position: absolute;
+  top: 5px;
+  left: 50%;
+  margin-left: -1em;
+  width: 2em;
+}
+
+/* make it easy to see when we hover a label */
+.ui-slider-pips:not(.ui-slider-disabled) .ui-slider-pip:hover .ui-slider-label {
+  color: black;
+  font-weight: bold;
+}
+
+/* VERTICAL */
+/* vertical slider needs right-margin, not bottom */
+.ui-slider-vertical.ui-slider-pips {
+ /* margin-bottom: 1em;
+  margin-right: 2em;*/
+}
+
+/* align vertical pips left and to right of the slider */
+.ui-slider-vertical.ui-slider-pips .ui-slider-pip {
+  text-align: left;
+  top: auto;
+  left: 20px;
+  margin-left: 0;
+  margin-bottom: -0.5em;
+}
+
+/* vertical line/pip should be horizontal instead */
+.ui-slider-vertical.ui-slider-pips .ui-slider-line {
+  width: 3px;
+  height: 1px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+}
+
+.ui-slider-vertical.ui-slider-pips .ui-slider-label {
+  top: 50%;
+  left: 0.5em;
+  margin-left: 0;
+  margin-top: -0.5em;
+  width: 2em;
+}
+
+/* FLOATING HORIZTONAL TOOLTIPS */
+/* remove the godawful looking focus outline on handle and float */
+.ui-slider-float .ui-slider-handle:focus,
+.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,
+.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
+.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,
+.ui-slider-float .ui-slider-handle:focus .ui-slider-tip-label
+.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label {
+  outline: none;
+}
+
+/* style tooltips on handles and on labels */
+/* also has a nice transition */
+.ui-slider-float .ui-slider-tip,
+.ui-slider-float .ui-slider-tip-label {
+  position: absolute;
+  visibility: hidden;
+  top: -40px;
+  display: block;
+  width: 34px;
+  margin-left: -18px;
+  left: 50%;
+  height: 20px;
+  line-height: 20px;
+  background: white;
+  border-radius: 3px;
+  border: 1px solid #888;
+  text-align: center;
+  font-size: 12px;
+  opacity: 0;
+  color: #333;
+  -webkit-transition-property: opacity, top, visibility;
+  transition-property: opacity, top, visibility;
+  -webkit-transition-timing-function: ease-in;
+  transition-timing-function: ease-in;
+  -webkit-transition-duration: 200ms, 200ms, 0ms;
+  transition-duration: 200ms, 200ms, 0ms;
+  -webkit-transition-delay: 0ms, 0ms, 200ms;
+  transition-delay: 0ms, 0ms, 200ms;
+}
+
+/* show the tooltip on hover or focus */
+/* also switch transition delay around */
+.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
+.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,
+.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
+.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,
+.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,
+.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
+  opacity: 1;
+  top: -30px;
+  visibility: visible;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  -webkit-transition-delay: 200ms, 200ms, 0ms;
+  transition-delay: 200ms, 200ms, 0ms;
+}
+
+/* put label tooltips below slider */
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
+  top: 42px;
+}
+
+.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
+  top: 32px;
+  font-weight: normal;
+}
+
+/* give the tooltip a css triangle arrow */
+.ui-slider-float .ui-slider-tip:after,
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+  content: " ";
+  width: 0;
+  height: 0;
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-top-color: white;
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  margin-left: -5px;
+}
+
+/* put a 1px border on the tooltip arrow to match tooltip border */
+.ui-slider-float .ui-slider-tip:before,
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+  content: " ";
+  width: 0;
+  height: 0;
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-top-color: #888;
+  position: absolute;
+  bottom: -11px;
+  left: 50%;
+  margin-left: -5px;
+}
+
+/* switch the arrow to top on labels */
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-bottom-color: white;
+  top: -10px;
+}
+
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-bottom-color: #888;
+  top: -11px;
+}
+
+/* FLOATING VERTICAL TOOLTIPS */
+/* tooltip floats to left of handle */
+.ui-slider-vertical.ui-slider-float .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-tip-label {
+  top: 50%;
+  margin-top: -11px;
+  width: 34px;
+  margin-left: 0px;
+  left: -60px;
+  color: #333;
+  -webkit-transition-duration: 200ms, 200ms, 0;
+  transition-duration: 200ms, 200ms, 0;
+  -webkit-transition-property: opacity, left, visibility;
+  transition-property: opacity, left, visibility;
+  -webkit-transition-delay: 0, 0, 200ms;
+  transition-delay: 0, 0, 200ms;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
+  top: 50%;
+  margin-top: -11px;
+  left: -50px;
+}
+
+/* put label tooltips to right of slider */
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
+  left: 47px;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
+  left: 37px;
+}
+
+/* give the tooltip a css triangle arrow */
+.ui-slider-vertical.ui-slider-float .ui-slider-tip:after,
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-left-color: white;
+  border-top-color: transparent;
+  position: absolute;
+  bottom: 50%;
+  margin-bottom: -5px;
+  right: -10px;
+  margin-left: 0;
+  top: auto;
+  left: auto;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-tip:before,
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-left-color: #888;
+  border-top-color: transparent;
+  position: absolute;
+  bottom: 50%;
+  margin-bottom: -5px;
+  right: -11px;
+  margin-left: 0;
+  top: auto;
+  left: auto;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-right-color: white;
+  right: auto;
+  left: -10px;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-right-color: #888;
+  right: auto;
+  left: -11px;
+}
+
+/* SELECTED STATES */
+/* Comment out this chuck of code if you don't want to have
+        the new label colours shown */
+.ui-slider-pips [class*=ui-slider-pip-initial] {
+  font-weight: bold;
+  color: #0095da;
+}
+
+.ui-slider-pips .ui-slider-pip-initial-2 {
+  color: #1897C9;
+}
+
+.ui-slider-pips [class*=ui-slider-pip-selected] {
+  font-weight: bold;
+  color: #000;
+}
+
+.ui-slider-pips .ui-slider-pip-inrange {
+  color: black;
+}
+
+.ui-slider-pips .ui-slider-pip-selected-2 {
+  color: #E70081;
+}
+
+.ui-slider-pips [class*=ui-slider-pip-selected] .ui-slider-line,
+.ui-slider-pips .ui-slider-pip-inrange .ui-slider-line {
+  background: black;
+}
diff --git a/400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/jquery-ui-slider-pips.js b/400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js
index 7cd8769..7cd8769 100644
--- a/400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/jquery-ui-slider-pips.js
+++ b/400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js