diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index c4f366c..210e616 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -95,7 +95,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $scope.dragdivtop = 0;
 
     $scope.IsSearchVisible = false;
-
+    $scope.shapesize = 1;
     $scope.dragdivposition = {
         "left": $scope.dragdivleft,
         "top": $scope.dragdivtop
@@ -5617,7 +5617,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         var canvasElement = document.getElementById("canvas");
         var ctx = canvasElement.getContext("2d");
 
-      
+        var canvasElement1 = document.getElementById("canvasPaint");
+        var ctx1 = canvasElement1.getContext("2d");
 
        /* if ($rootScope.shapeType == "FreeStylePaint") {
             var canvasPaint_zIndex = $('#canvasPaint').css("z-index");
@@ -5638,6 +5639,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 case "cursor":
                   //  ctx.clearRect(0, 0, 2277, 3248);
                     ctx.beginPath();
+                    ctx1.beginPath();
                
 
                     break;
@@ -5781,7 +5783,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     break;
 
                 case "Circle":
-                 //   alert($rootScope.shapestyleFillColor);
+                   //   alert($rootScope.shapestyleborderWidth);
                     $rootScope.resetCircle = $rootScope.ObjectIndex++;
                     $('#canvas').addLayer({
                         layer: true,
@@ -6277,7 +6279,28 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
      
     }
     $scope.OnPaintBrushCanvasMouseDown = function (event) {
+        switch ($rootScope.shapeType) {
+
+            case "FreeStylePaint":
+
+                debugger;
+
+                if ($("#amount-2").val() == '') {
+                    $('#canvasPaint').sketch({ defaultSize: $scope.shapesize });
+                }
+                else {
 
+                    var a = $("#amount-2").val();
+                    $scope.shapesize = parseInt(a);
+                 //   alert(JSON.stringify({ defaultSize: $scope.shapesize }));
+                    $('#canvasPaint').sketch({ defaultSize: $scope.shapesize });
+
+                }
+
+
+                break;
+
+        }
     }
     $scope.OnPaintBrushCanvasMouseUp = function (event) {
    
@@ -6285,19 +6308,36 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
      //   var canvasElement1 = document.getElementById("canvasPaint");
      //   var ctx1 = canvasElement1.getContext("2d");
              
-        switch($rootScope.shapeType)
-        {
-            case "FreeStylePaint":
-        
-                $('#canvasPaint').sketch({ defaultSize: 1 });
+        //switch($rootScope.shapeType)
+        //{
+
+        //    case "FreeStylePaint":
+
+        //        debugger;
+               
+        //        if ($("#amount-2").val() == '')
+        //        {
+        //            $('#canvasPaint').sketch({ defaultSize: $scope.shapesize });
+        //        }
+        //        else 
+        //        {
+                  
+        //            var a = $("#amount-2").val();
+        //            $scope.shapesize = parseInt(a);
+        //            alert(JSON.stringify({ defaultSize: $scope.shapesize }));
+        //            $('#canvasPaint').sketch({ defaultSize: $scope.shapesize });
+
+        //        }
+              
            
-                break;
+        //        break;
       
-             
-        }
+        //}
 
     }
 
+    
+
     $(document).keydown(function (event) {
 
 
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index 9fbc95d..fea551b 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -175,6 +175,8 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             $(".btn-annotation-rectangle").addClass("activebtncolor");
         }
         $rootScope.paintBrush = function () {
+
+                $('.btnCursor').addClass('activebtncolor');
             $rootScope.switchCanvasToPaintCanvas();
 
             $rootScope.shapeType = "FreeStylePaint";
@@ -258,28 +260,36 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
         $rootScope.shapestyleFillColor = "#fff";
         $rootScope.shapestyleFillBorderColor = "black";
         $rootScope.shapestyleborderWidth=2;
-
+        $rootScope.shapestyleborderStyles = "solid";
         $rootScope.shapestyle = function (id) {
 
+            document.getElementById('modelbackground').style.display = "none";
+
             $rootScope.shapestyleOpacity = $("#" + id).css('opacity');
             $rootScope.shapestyleFillColor = $("#" + id).parent().css('background-color');
-            $rootScope.shapestyleFillBorderColor = $("#" + id).parent().css('border');
-            var a = $rootScope.shapestyleFillBorderColor;
-            var b = a.split("px");
-            //  alert(b);
-            $rootScope.shapestyleborderWidth = b[0];
-          
-         //  alert(b[0]);
-            //alert(b[1]);
-            var c = b[1].split("solid");
-          //  alert(c[1]);
-            $rootScope.shapestyleborderColor = c[1];
+            $rootScope.shapestyleborderColor = $("#" + id).parent().css("border-top-color");
+            $rootScope.shapestyleborderWidthSeparatingPixel = $("#" + id).parent().css("border-top-width");
+            var pixelSeparation = $rootScope.shapestyleborderWidthSeparatingPixel;
+            var intPart = pixelSeparation.split("p");
+        
+            $rootScope.shapestyleborderWidth = intPart[0];
+             $rootScope.shapestyleborderStyles = "solid";
+        
+             $('#editshapestyle').modal('hide');
+        }
 
+        $rootScope.backOpacity = function () {
+
+            document.getElementById('modelbackground').style.display = "block";
+            $("#editshapestyle").modal('show');
 
-            //     alert($rootScope.shapestyleFillColor);
-            $('#editshapestyle').modal('hide');
         }
 
+        $rootScope.closeBackOpacity = function () {
+
+            document.getElementById('modelbackground').style.display = "none";
+
+        }
 
 
         //----End-------------
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index 790a659..6eca1e0 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -423,7 +423,7 @@
                                 </div>
                             </div>
                             <div class="well-popup well">
-                                <img src="content/images/blank-shape.jpg" alt="..." class="img-rounded img-responsive" data-toggle="modal" data-target="#editshapestyle">
+                                <img src="content/images/blank-shape.jpg" alt="..." class="img-rounded img-responsive"  ng-click="backOpacity()">
                             </div>
                             <div class="well well-popup">
                                 <div class="" role="group" aria-label="...">
@@ -656,7 +656,9 @@
         </div>
     </div>
 
-
+    <!--background disable div-->
+    
+    <div id="modelbackground"></div>
 
 
     <!--Edit Shape Modal-->
@@ -783,7 +785,7 @@
                     <button type="button" class="btn btn-primary btn-sm" ng-click="shapestyle('imgOpacity')">
                         OK
                     </button>
-                    <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" ng-click="closeBackOpacity()">Cancel</button>
                 </div>
             </div>
         </div>
@@ -791,9 +793,6 @@
 
 
 
-
-
-
     <script>
         function mytoggle() {
             var div = document.getElementById("divSection");
@@ -806,11 +805,6 @@
     </script>
 
 
-
-  
-  
-
-
     <script>
         function mytoggle() {
             var div = document.getElementById("divSection");
@@ -880,9 +874,26 @@
                 max: 60,
                 value: 10,
                 slide: function (event, ui) {
+                  
                     $("#amount-2").val(ui.value);
-                }
+                   
+                
+                
+                },
+
+              
+            });
+            $("#slider-range-min-2").on("slidestart", function (event, ui) {
+
+                $('.btnCursor').trigger('click');
+                $(".btn-annotation").removeClass("activebtncolor");
+                $('.btnCursor').addClass('activebtncolor');
+              //  ctx.clearRect(0, 0, canvasPaint.width, canvasPaint.height);
+
+
             });
+            //  $("#slider-range-min-2").on("slidechange", function (event, ui) { alert("ssasa"); });
+           
             $("#amount-2").val($("#slider-vertical-2").slider("value"));
 
             $(function () {
@@ -1009,15 +1020,17 @@
     <script>
         $(document).ready(function () {
             var borderWidth = 1;
-            var borderColor;
+            var borderColor = "#000";
             $("#borderWidthCanvasElement").change(function () {
 
                 borderWidth = $(this).val();
-         
+                
                 if (borderColor != null) {
+                  
                     $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor);
                 } else {
-                    $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid");
+               
+                   $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid");
                 }
             });
             
@@ -1039,13 +1052,11 @@
                         if (opacity) value += ', ' + opacity;
                         if (typeof console === 'object') {
                             console.log(value);
-                            console.log(borderWidth);
-                            // alert(borderWidth);
-                            
+                         
                             borderColor = value;
-                            $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + value);
-
-                         //   alert($("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + value));
+                            $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor);
+                       
+                                                    
                         }
                     },
                     theme: 'bootstrap'
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 cc7d516..27dede1 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
@@ -825,3 +825,21 @@ cursor:pointer;
     color: #ffffff;
 }
 
+/*disable background css*/
+
+#modelbackground
+ {
+    background-color: black;
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 12000000;
+    opacity: 0.5;
+    display:none;
+    width:100%;
+    height:100%;
+  
+    filter: Alpha(opacity=50); / IE8 and earlier /
+}
\ No newline at end of file