diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index fd92d78..011cea5 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -2583,7 +2583,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 else {
                     console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length)
                 }
-
+                if($scope.longestAnnotation!=null || $scope.longestAnnotation!=undefined){
                 if ($scope.longestAnnotation.length <= 10) {
 
 
@@ -2642,6 +2642,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
 
                 }
+
+            }
                 var Globe = [];
                 Globe.push({ currentX: x, currentY: y });
 
@@ -5681,8 +5683,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         layer: true,
                         type: 'line',
                         draggable: true,
-                        strokeStyle: 'black',
-                        strokeWidth: 2,
+                        strokeStyle: $rootScope.shapestyleborderColor,
+                        strokeWidth: $rootScope.shapestyleborderWidth,
                         rounded: true,
                         x1: $scope.offsetX1, y1: $scope.offsetY1,
                         x2: $scope.x, y2: $scope.y,
@@ -5743,12 +5745,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     $('#canvas').addLayer({
                         layer: true,
                         name: 'Rect_' + $rootScope.resetRect,
-                        fillStyle: '#fff',
+                        fillStyle: $rootScope.shapestyleFillColor,
                         type: 'rectangle',
                         draggable: true,
-                        strokeStyle: 'black',
+                        strokeStyle: $rootScope.shapestyleborderColor,
                         opacity: $rootScope.shapestyleOpacity,
-                        strokeWidth: 2,
+                       strokeWidth: $rootScope.shapestyleborderWidth,
                         x: $scope.offsetX1, y: $scope.offsetY1,
                         width: $scope.x - $scope.offsetX1,
                         height: $scope.y - $scope.offsetY1,
@@ -5812,7 +5814,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     break;
 
                 case "Circle":
-
+                 //   alert($rootScope.shapestyleFillColor);
                     $rootScope.resetCircle = $rootScope.ObjectIndex++;
                     $('#canvas').addLayer({
                         layer: true,
@@ -5820,9 +5822,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         type: 'ellipse',
                         opacity: $rootScope.shapestyleOpacity,
                         draggable: true,
-                        strokeStyle: '#000',
-                        strokeWidth: 2,
-                        fillStyle: '#FFF',
+                        strokeStyle: $rootScope.shapestyleborderColor,
+                        strokeWidth: $rootScope.shapestyleborderWidth,
+                        fillStyle: $rootScope.shapestyleFillColor,
                         x: $scope.offsetX1, y: $scope.offsetY1,
                         width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2,
                         // Place a handle at each side and each corner
@@ -5886,8 +5888,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         layer: true,
                         name: 'Arrow_' + $rootScope.resetArrow,
                         draggable: true,
-                        strokeStyle: '#000',
-                        strokeWidth: 2,
+                        strokeStyle: $rootScope.shapestyleborderColor,
+                        strokeWidth: $rootScope.shapestyleborderWidth,
                         rounded: true,
                         startArrow: true,
                         arrowRadius: 7,
@@ -6089,8 +6091,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         name: "TextRect_" + $rootScope.resetTextRect,
                         dragGroups: ['shapes'],
                         opacity: $rootScope.shapestyleOpacity,
-                        strokeStyle: 'black',
-                        strokeWidth: 2,
+                        strokeStyle: $rootScope.shapestyleborderColor,
+                        strokeWidth: $rootScope.shapestyleborderWidth,
+                        fillStyle: $rootScope.shapestyleFillColor,
                         x: $scope.offsetX1, y: $scope.offsetY1,
                         width: $scope.x - $scope.offsetX1,
                         height: $scope.y - $scope.offsetY1,
@@ -6179,7 +6182,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $rootScope.textArea = $("#text_area").val();
         $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers();
         $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
-
+       // alert($rootScope.fontColor);
         $('#canvas').drawText({
             layer: true,
             draggable: true,
@@ -6215,8 +6218,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                   groups: ['TextArea_' + $rootScope.resetText],
                   dragGroups: ['TextArea_' + $rootScope.resetText],
                   opacity: $rootScope.shapestyleOpacity,
-                  strokeStyle: 'black',
-                  strokeWidth: 2,
+               //   strokeStyle: 'black',
+                 // strokeWidth: 2,
+                  strokeStyle: $rootScope.shapestyleborderColor,
+                  strokeWidth: $rootScope.shapestyleborderWidth,
+                 // fillStyle: $rootScope.shapestyleFillColor,
                   x: $scope.offsetX1, y: $scope.offsetY1,
                   width: $scope.x - $scope.offsetX1,
                   height: $scope.y - $scope.offsetY1,
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index 8e9f8d7..f5752e5 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -72,7 +72,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             if (alreadyOpenThisView != null) {
                 for (var i = 0; i < $rootScope.openViews.length; i++) {
                     k++;
-                    if ($rootScope.openViews[i].body - views == title) {
+                    if ($rootScope.openViews[i].body-views == title) {
                         $rootScope.openViews.splice((k - 1), 1);
 
                         $rootScope.openViews.push(
@@ -255,9 +255,28 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
 
         //opacity code
         $rootScope.shapestyleOpacity = 1;
+        $rootScope.shapestyleFillColor = "#fff";
+        $rootScope.shapestyleFillBorderColor = "black";
+        $rootScope.shapestyleborderWidth=2;
+
         $rootScope.shapestyle = function (id) {
 
             $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];
+
+
+            //     alert($rootScope.shapestyleFillColor);
             $('#editshapestyle').modal('hide');
         }
 
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index b029f5b..790a659 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -437,7 +437,6 @@
                                         <div class="clearfix"></div>
                                     </div>
 
-
                                 </div>
 
 
@@ -674,7 +673,7 @@
                                 <div class="col-sm-12">
                                     <div class="checkbox no-margin">
                                         <label>
-                                            <input type="checkbox" checked> Fill Option
+                                            <input id="fill-option" type="checkbox" checked> Fill Option
                                         </label>
                                     </div>
                                 </div>
@@ -693,7 +692,7 @@
                                           
                                             <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
                                                 <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span> 
-                                                <input type="text" class="form-control demo2" data-control="saturation" style="display:none;" value="#0088cc">
+                                                <input type="text" class="form-control outerBackgroundColor" data-control="saturation" style="display:none;" value="#0088cc">
                                             </div>
 
 
@@ -733,7 +732,7 @@
                                 <div class="col-sm-12">
                                     <div class="checkbox no-margin">
                                         <label>
-                                            <input type="checkbox" checked> Outline Option
+                                            <input id="Outline-Option" type="checkbox" checked> Outline Option
                                         </label>
                                     </div>
                                 </div>
@@ -745,7 +744,7 @@
 
                                         <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
 
-                                            <input type="text" class="form-control demo1" data-control="saturation" style="display:none;" value="#0088cc">
+                                            <input type="text" class="form-control borderColorCanvasPreview" data-control="saturation" style="display:none;" value="#0088cc">
                                         </div>
 
 
@@ -756,10 +755,10 @@
                                 <div class="col-sm-6">
                                     <div class="form-horizontal">
                                         <div class="form-group">
-                                            <label for="inputPassword" class="col-sm-3 control-label" style=" font-weight:normal; padding-top:9px;">Size</label>
+                                            <label class="col-sm-3 control-label" style=" font-weight:normal; padding-top:9px;">Size</label>
                                             <div class="col-sm-9 marginTop5">
-                                                <select class="form-control input-sm">
-                                                    <option value="1" selected>1</option>
+                                                <select id="borderWidthCanvasElement" class="form-control input-sm">
+                                                    <option value="1">1</option>
                                                     <option value="2">2</option>
                                                     <option value="3">3</option>
                                                     <option value="4">4</option>
@@ -1009,8 +1008,21 @@
 
     <script>
         $(document).ready(function () {
+            var borderWidth = 1;
+            var borderColor;
+            $("#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");
+                }
+            });
+            
 
-            $('.demo1').each(function () {
+            $('.borderColorCanvasPreview').each(function () {
              
                 $(this).minicolors({
                     control: $(this).attr('data-control') || 'hue',
@@ -1027,6 +1039,13 @@
                         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));
                         }
                     },
                     theme: 'bootstrap'
@@ -1036,7 +1055,7 @@
 
 
 
-            $('.demo2').each(function () {
+            $('.outerBackgroundColor').each(function () {
 
                 $(this).minicolors({
                     control: $(this).attr('data-control') || 'hue',
@@ -1053,6 +1072,8 @@
                         if (opacity) value += ', ' + opacity;
                         if (typeof console === 'object') {
                             console.log(value);
+                            $("#imgOpacity").parent().css("background-color", value);
+                       
                         }
                     },
                     theme: 'bootstrap'