diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index 3e56d80..f1304db 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -5494,8 +5494,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $scope.$on('annotationToolEvent', function (event, data) {
         $("#canvas").css("display", "block");
         $("#canvasPaint").css("display", "block");
-       // $rootScope.FreeStylePaint();
+       
         $scope.doClick();
+        $rootScope.FreeStylePaint();
     });
     $scope.mousePs;
     function OnPaintCanvasClick(event) {
@@ -5572,7 +5573,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
         var canvasElement = document.getElementById("canvas");
         var ctx = canvasElement.getContext("2d");
-        if ($rootScope.shapeType == "FreeStylePaint") {
+
+      
+
+       /* if ($rootScope.shapeType == "FreeStylePaint") {
             var canvasPaint_zIndex = $('#canvasPaint').css("z-index");
             var canvas_zIndex = $('#canvas').css("z-index");
             if (canvas_zIndex > canvasPaint_zIndex) {
@@ -5585,12 +5589,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             $('#canvasPaint').css("z-index", canvasPaint_zIndex);
             $('#canvasPaint').sketch({ defaultColor: "#000", defaultSize: 1 });
         }
-        else {
+        else {*/
             switch ($rootScope.shapeType) {
 
                 case "cursor":
-                    ctx.clearRect(0, 0, 2277, 3248);
+                  //  ctx.clearRect(0, 0, 2277, 3248);
                     ctx.beginPath();
+               
 
                     break;
 
@@ -5668,6 +5673,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         type: 'rectangle',
                         draggable: true,
                         strokeStyle: 'black',
+                        opacity: $rootScope.shapestyleOpacity,
                         strokeWidth: 2,
                         x: $scope.offsetX1, y: $scope.offsetY1,
                         width: $scope.x - $scope.offsetX1,
@@ -5738,6 +5744,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         layer: true,
                         name: 'Circle_' + $rootScope.resetCircle,
                         type: 'ellipse',
+                        opacity: $rootScope.shapestyleOpacity,
                         draggable: true,
                         strokeStyle: '#000',
                         strokeWidth: 2,
@@ -5987,6 +5994,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     $('#canvas').drawText({
                         layer: true,
                         draggable: true,
+                    //    opacity: $rootScope.shapestyleOpacity,
                         name: 'TextArea_' + $rootScope.resetText,
                         groups: ['TextArea_' + $rootScope.resetText],
                         dragGroups: ['TextArea_' + $rootScope.resetText],
@@ -6006,6 +6014,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                         layer: true,
                         name: "TextRect_" + $rootScope.resetTextRect,
                         dragGroups: ['shapes'],
+                        opacity: $rootScope.shapestyleOpacity,
                         strokeStyle: 'black',
                         strokeWidth: 2,
                         x: $scope.offsetX1, y: $scope.offsetY1,
@@ -6070,7 +6079,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     break;
 
             }
-        }
+        //}
 
     }
 
@@ -6131,6 +6140,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                   draggable: true,
                   groups: ['TextArea_' + $rootScope.resetText],
                   dragGroups: ['TextArea_' + $rootScope.resetText],
+                  opacity: $rootScope.shapestyleOpacity,
                   strokeStyle: 'black',
                   strokeWidth: 2,
                   x: $scope.offsetX1, y: $scope.offsetY1,
@@ -6212,11 +6222,34 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $rootScope.FreeStylePaint = function (e) {
         // debugger;
 
-     //   alert("asasssas");
-        $rootScope.shapeType = "FreeStylePaint";
-        canvas.addEventListener('mouseup', $scope.OnPaintCanvasMouseUp, false);
+        
+       // $rootScope.shapeType = "FreeStylePaint";
+        canvasPaint.addEventListener('mouseup', $scope.OnPaintBrushCanvasMouseUp, false);
+        canvasPaint.addEventListener('mousedown', $scope.OnPaintBrushCanvasMouseDown, false);
+       
      
     }
+    $scope.OnPaintBrushCanvasMouseDown = function (event) {
+
+    }
+    $scope.OnPaintBrushCanvasMouseUp = function (event) {
+   
+ 
+     //   var canvasElement1 = document.getElementById("canvasPaint");
+     //   var ctx1 = canvasElement1.getContext("2d");
+             
+        switch($rootScope.shapeType)
+        {
+            case "FreeStylePaint":
+        
+                $('#canvasPaint').sketch({ defaultSize: 1 });
+           
+                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 bd3ef36..8e9f8d7 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(
@@ -94,7 +94,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             //$rootScope.isDrawingToolSelected = true;
             //$rootScope.isLineDrawSelecyed = true;
             $rootScope.shapeType = "Line";
-          //  alert($rootScope.shapeType);
+            //  alert($rootScope.shapeType);
 
 
         }
@@ -133,9 +133,9 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             $rootScope.isIdetifyClicked = true;
             $rootScope.isDrawingToolSelected = false;
         }
-      
+
         //----Annotation Toolbar: Jcanvas-----
-     
+
         $rootScope.DrawLine = function (e) {
             $rootScope.switchCanvas();
             $rootScope.shapeType = "Line";
@@ -175,9 +175,24 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             $(".btn-annotation-rectangle").addClass("activebtncolor");
         }
         $rootScope.paintBrush = function () {
-            $rootScope.switchCanvas();
-            $rootScope.shapeType = "brush";
-           
+            $rootScope.switchCanvasToPaintCanvas();
+
+            $rootScope.shapeType = "FreeStylePaint";
+            //alert($rootScope.shapeType);
+
+        }
+
+        $rootScope.switchCanvasToPaintCanvas = function (e) {
+            var canvasPaint_zIndex = $('#canvasPaint').css("z-index");
+            var canvas_zIndex = $('#canvas').css("z-index");
+            if (canvas_zIndex > canvasPaint_zIndex) {
+                canvasPaint_zIndex = parseInt(canvas_zIndex) + 1;
+
+            }
+            else {
+                canvasPaint_zIndex = parseInt(canvasPaint_zIndex) + 1;
+            }
+            $('#canvasPaint').css("z-index", canvasPaint_zIndex);
         }
 
         $rootScope.DrawCircle = function (e) {
@@ -197,28 +212,23 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
         }
         $rootScope.DrawText = function () {
             $rootScope.switchCanvas();
-          
-           $rootScope.shapeType = "TextArea";
-           $('.btnCursor').removeClass('activebtncolor');
-          $(".btn-annotation").removeClass("activebtncolor");
-         $(".btn-annotation-Text").addClass("activebtncolor");    
-            //   $('.btnCursor').removeClass('activebtncolor');
-            //    $(".btn-annotation").removeClass("activebtncolor");
-            //   $(".btn-annotation-Text").addClass("activebtncolor");
-            //$('.btnCursor').removeClass('activebtncolor');
-            //$(".btn-annotation").removeClass("activebtncolor");
-            //$("#" + e.currentTarget.id).addClass("activebtncolor");
+
+            $rootScope.shapeType = "TextArea";
+            $('.btnCursor').removeClass('activebtncolor');
+            $(".btn-annotation").removeClass("activebtncolor");
+            $(".btn-annotation-Text").addClass("activebtncolor");
+
         }
 
         $rootScope.DrawPolygon = function () {
             $rootScope.shapeType = "DrawPolygon";
-           
+
         }
 
 
         $rootScope.OpacityModal = function () {
-          
-          
+
+
         }
         $rootScope.switchCanvas = function () {
             var x = $('#canvasPaint').css("z-index");
@@ -232,13 +242,30 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             $('#canvas').css("z-index", y);
         }
         $rootScope.EraseDrawing = function () {
-            document.getElementById('paintCanvas').getContext('2d').setTransform(1, 0, 0, 1, 0, 0);
-            document.getElementById('paintCanvas').getContext('2d').clearRect(0, 0, document.getElementById('paintCanvas').getContext('2d').canvas.width, document.getElementById('paintCanvas').getContext('2d').canvas.height);
+            $rootScope.switchCanvasToPaintCanvas();
+     //       $('#canvasPaint').sketch({ defaultColor: "yellow", defaultSize: 1 });
+            var sktch = $('#canvasPaint').sketch();
+           $('#canvasPaint').sketch().actions = [];       // this line empties the actions. 
+            var myCanvas = document.getElementById("canvasPaint");
+            var ctx = myCanvas.getContext('2d');
+           ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
+           $rootScope.switchCanvas();
+      
+        }
 
+        //opacity code
+        $rootScope.shapestyleOpacity = 1;
+        $rootScope.shapestyle = function (id) {
+
+            $rootScope.shapestyleOpacity = $("#" + id).css('opacity');
+            $('#editshapestyle').modal('hide');
         }
+
+
+
         //----End-------------
 
-        $rootScope.AddClick=function (x, y, dragging) {
+        $rootScope.AddClick = function (x, y, dragging) {
             $rootScope.clickX.push(x);
             $rootScope.clickY.push(y);
             $rootScope.clickDrag.push(dragging);
@@ -253,7 +280,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             context.lineJoin = "round";
             context.lineWidth = 5;
 
-          
+
             for (var i = 0; i < $rootScope.clickX.length; i++) {
                 context.beginPath();
                 if ($rootScope.clickDrag[i] && i) {
@@ -267,7 +294,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             }
         }
 
-        $rootScope.PaintCanvasMousedownListener = function (canvasContext,x,y) {
+        $rootScope.PaintCanvasMousedownListener = function (canvasContext, x, y) {
             if ($rootScope.isLineDrawSelecyed == true) {
 
                 canvasContext.lineWidth = 0.1;
@@ -285,14 +312,14 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             }
 
         }
-        
+
         $rootScope.PaintCanvasMouseupListener = function (canvasContext) {
             if ($scope.isLineDrawSelecyed == true) {
 
             }
         }
 
-        $rootScope.PaintCanvasMousemoveListener = function (canvasContext,x,y) {
+        $rootScope.PaintCanvasMousemoveListener = function (canvasContext, x, y) {
             if ($rootScope.isLineDrawSelecyed == true) {
                 console.log('hm moving')
                 canvasContext.lineTo(x, y);
@@ -300,7 +327,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             }
         }
 
-        $rootScope.Draw = function (x, y, isDown,context) {
+        $rootScope.Draw = function (x, y, isDown, context) {
             if (isDown) {
                 context.beginPath();
                 context.strokeStyle = '#000000';
@@ -314,7 +341,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             $rootScope.lastX = x; $rootScope.lastY = y;
         }
 
-       
+
 
 
         //list manager function
@@ -331,7 +358,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             $("#listManager").css("visibility", "visible");
             $('#listManager').draggable();
 
-            
+
             $rootScope.islistManagerEventAlredayDispachted = true;
 
             $rootScope.$broadcast('listManagerEvent', true);
@@ -522,7 +549,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
                 }
             }
         };
-     
+
 
     }]
 );
\ No newline at end of file
diff --git a/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-2burn.jpg b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-2burn.jpg
new file mode 100644
index 0000000..93efc4f
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-2burn.jpg
diff --git a/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-3burn.jpg b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-3burn.jpg
new file mode 100644
index 0000000..d5e7db2
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-3burn.jpg
diff --git a/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-burn.jpg b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-burn.jpg
new file mode 100644
index 0000000..aba0212
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-burn.jpg
diff --git a/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-cot.jpg b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-cot.jpg
new file mode 100644
index 0000000..b13ae45
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-cot.jpg
diff --git a/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-fat.jpg b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-fat.jpg
new file mode 100644
index 0000000..42b5810
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-fat.jpg
diff --git a/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-gauze.jpg b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-gauze.jpg
new file mode 100644
index 0000000..72687d1
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-gauze.jpg
diff --git a/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-picker.png b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-picker.png
new file mode 100644
index 0000000..96de623
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-picker.png
diff --git a/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-scrape.jpg b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-scrape.jpg
new file mode 100644
index 0000000..7c36813
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-scrape.jpg
diff --git a/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-skingraft.jpg b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-skingraft.jpg
new file mode 100644
index 0000000..633d85b
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-skingraft.jpg
diff --git a/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-tumor.jpg b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-tumor.jpg
new file mode 100644
index 0000000..959ae90
--- /dev/null
+++ b/400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-tumor.jpg
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index 88e8183..b029f5b 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -423,12 +423,12 @@
                                 </div>
                             </div>
                             <div class="well-popup well">
-                                <img src="content/images/blank-shape.jpg" alt="..."  class="img-rounded img-responsive"/>
+                                <img src="content/images/blank-shape.jpg" alt="..." class="img-rounded img-responsive" data-toggle="modal" data-target="#editshapestyle">
                             </div>
                             <div class="well well-popup">
                                 <div class="" role="group" aria-label="...">
                                     <div>
-                                        <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Paint" style="margin-right:1%;" ng-click="FreeStylePaint()"><i class="fa fa-paint-brush"></i></button>
+                                        <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Paint" style="margin-right:1%;" ng-click="paintBrush()"><i class="fa fa-paint-brush"></i></button>
                                         <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Erase" ng-click="EraseDrawing()"><i class="fa fa-eraser"></i></button>&nbsp;
                                         <div class="marginL2 pull-left"><input type="number" id="amount-2" value="25" step="1" style="width:60px;"></div>&nbsp;
                                         <div class="pull-left" style="width:45%; margin-left:2%;">
@@ -660,6 +660,140 @@
 
 
 
+    <!--Edit Shape Modal-->
+    <div class="modal fade" id="editshapestyle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" style="z-index:1000000000;width:302px;margin-left:auto;margin-right:auto;overflow:hidden;height:503px;">
+        <div class="modal-dialog modal-sm" role="document">
+            <div class="modal-content">
+                <div class="modal-header annotation-modal-header">
+                    <h4 class="modal-title" id="myModalLabel33">Edit Shape Style</h4>
+                </div>
+                <div class="modal-body">
+                    <div class="marginTopBtm10">
+                        <div class="well well-sm no-margin-btm">
+                            <div class="row">
+                                <div class="col-sm-12">
+                                    <div class="checkbox no-margin">
+                                        <label>
+                                            <input type="checkbox" checked> Fill Option
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="col-sm-6">
+                                    <div class="radio">
+                                        <label>
+                                            <input type="radio" name="filloption" id="filloption1" value="filloption1">
+                                            <span class="">Texture</span> 
+                                            <img src="~/../content/images/common/annotation-tool-bar/pattern-picker.png" alt="" class="pattern-picker" data-toggle="modal" data-target="#pattern">
+                                        </label>
+                                    </div>
+                                    <div class="radio">
+                                        <label>
+                                            <input type="radio" name="filloption" id="filloption2" value="filloption2" checked style="margin-top:8px;">
+
+                                          
+                                            <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">
+                                            </div>
+
+
+                                            <!--<span class="">Color</span> <img src="img/color-picker.png" alt="" class="color-picker">-->
+                                            <!--<span class="demo2" data-control="hue" style="font-weight:normal;">Color</span>--> 
+                                            <!--<img src="img/color-picker.png" alt="" class="color-picker">-->
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="col-sm-6 no-padding marginTop10">
+                                    <div class="row">
+                                        <label class="pull-left" style="font-weight:normal;">Scale</label>
+                                        <div class="pull-left" style="width:62%; margin-left:3%; margin-top:2%;">
+                                            <div id="slider-range-min-3"></div>
+                                            <!--<p>Your slider has a value of <span id="slider-value"></span></p>-->
+                                        </div>
+                                    </div>
+
+                                    <div class="row">
+                                        <label class="pull-left" style="font-weight:normal;">Opacity</label>
+                                        <div class="pull-left" style="width:53%; margin-left:3%; margin-top:2%;">
+                                            <div id="slider-range-min-4"></div>
+                                        </div>
+                                    </div>
+
+                                    <div class="clearfix"></div>
+
+
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div class="marginTopBtm10">
+                        <div class="well well-sm no-margin-btm">
+                            <div class="row">
+                                <div class="col-sm-12">
+                                    <div class="checkbox no-margin">
+                                        <label>
+                                            <input type="checkbox" checked> Outline Option
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="col-sm-6">
+                                    <label class="marginTop5">
+                                        <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span> 
+                                        <!--<span class="demo " data-control="hue" style="float:left;">&nbsp;</span>--> 
+
+
+                                        <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">
+                                        </div>
+
+
+                                        <!--<img src="img/color-picker.png" alt="" class="color-picker">-->
+                                    </label>
+                                </div>
+
+                                <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>
+                                            <div class="col-sm-9 marginTop5">
+                                                <select class="form-control input-sm">
+                                                    <option value="1" selected>1</option>
+                                                    <option value="2">2</option>
+                                                    <option value="3">3</option>
+                                                    <option value="4">4</option>
+                                                    <option value="5">5</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="marginTopBtm10">
+                        <div class="well well-sm no-margin-btm">
+                            <img id="imgOpacity" class="img-rounded img-responsive imgopacity" alt="..." src="content/images/blank-shape.jpg">
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <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>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+
+
 
     <script>
         function mytoggle() {
@@ -872,5 +1006,117 @@
     
     </script>
 
+
+    <script>
+        $(document).ready(function () {
+
+            $('.demo1').each(function () {
+             
+                $(this).minicolors({
+                    control: $(this).attr('data-control') || 'hue',
+                    defaultValue: $(this).attr('data-defaultValue') || '',
+                    format: $(this).attr('data-format') || 'hex',
+                    keywords: $(this).attr('data-keywords') || '',
+                    inline: $(this).attr('data-inline') === 'true',
+                    letterCase: $(this).attr('data-letterCase') || 'lowercase',
+                    opacity: $(this).attr('data-opacity'),
+                    position: $(this).attr('data-position') || 'bottom left',
+                    swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
+                    change: function (value, opacity) {
+                        if (!value) return;
+                        if (opacity) value += ', ' + opacity;
+                        if (typeof console === 'object') {
+                            console.log(value);
+                        }
+                    },
+                    theme: 'bootstrap'
+                });
+
+            });
+
+
+
+            $('.demo2').each(function () {
+
+                $(this).minicolors({
+                    control: $(this).attr('data-control') || 'hue',
+                    defaultValue: $(this).attr('data-defaultValue') || '',
+                    format: $(this).attr('data-format') || 'hex',
+                    keywords: $(this).attr('data-keywords') || '',
+                    inline: $(this).attr('data-inline') === 'true',
+                    letterCase: $(this).attr('data-letterCase') || 'lowercase',
+                    opacity: $(this).attr('data-opacity'),
+                    position: $(this).attr('data-position') || 'bottom left',
+                    swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
+                    change: function (value, opacity) {
+                        if (!value) return;
+                        if (opacity) value += ', ' + opacity;
+                        if (typeof console === 'object') {
+                            console.log(value);
+                        }
+                    },
+                    theme: 'bootstrap'
+                });
+
+            });
+
+
+        });
+    </script>
+
+
+    <script>
+        $(function () {
+            $("#slider-range-min-3").slider({
+                range: "min",
+                min: 0,
+                max: 100,
+                value: 20,
+                change: function (event, ui) {
+
+
+                }
+            });
+
+
+
+        });
+    </script>
+
+    <script>
+        $(function () {
+
+
+
+            $("#slider-range-min-4").slider(
+           {
+               range: "min",
+               value: .5,
+               min: 0,
+               max: 1,
+               step: .1,
+               slide: function (event, ui) {
+
+                   $(".marginTopBtm10 img.imgopacity").css("opacity", ui.value);
+                 //  $("#slider-value").html(ui.value);
+
+               }
+
+           }
+
+);
+
+        });
+
+
+
+    </script>
+
+
+
+
+
+
+
             </body>
 </html>
\ No newline at end of file