diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/CurrBuildController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/CurrBuildController.js
index 5d5cf4f..a4b02e3 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/CurrBuildController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/CurrBuildController.js
@@ -40,7 +40,7 @@ function ($scope, $rootScope, pages, log,Modules,$http,$compile) {
         .select();
         for (var i = 0; i < $scope.countLeftlist; i++) {
             console.log($scope.listCurriculumBuilder.slideshows.slideshow[i]._label);
-            alert($scope.listCurriculumBuilder.slideshows.slideshow[i]._label);
+            //alert($scope.listCurriculumBuilder.slideshows.slideshow[i]._label);
             var $el = $('<li class="list-group-item" data-toggle="modal" data-target="#myModal-1" ng-click="loadSlideShowXmldata()"><a  href="#"><i class="fa fa-check"></i>' + $scope.listCurriculumBuilder.slideshows.slideshow[i]._label + '</a></li>').appendTo('#leftBodyViewList');
             $compile($el)($scope);
         }
@@ -56,7 +56,7 @@ function ($scope, $rootScope, pages, log,Modules,$http,$compile) {
 
     $scope.loadSlideShowXmldata = function (e) {
 
-        alert(e);
+       // alert(e);
         $http({ method: 'GET', url: 'content/data/json/cb/SlideShow/AIA_Curriculum_Builder_Guide.sldshw' }).success(function (data) {
 
             $scope.dataPopup = data;
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index df42355..b5555dd 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -2631,77 +2631,87 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
            + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="bord">'
           + '</div>';
-                $('#canvasDiv').append(sppechBubbleDotHTML);
 
-                if ($scope.MultiLanguageAnnationArray.length > 0) {
-                    for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
-                        var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
-                        $("#sppeachBubble").append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
-                    }
-                }
-                else {
-                    console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length)
+                //Issue #7286 :Undefined annotation should not appear
+                for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
+                    var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
                 }
-                if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) {
-                    if ($scope.longestAnnotation.length <= 10) {
-
 
-                        $("#sppeachBubble").css("width", "100px");
+                if (MultipleLanguage == undefined) {
+                    console.log("No text is found");
+                } else {
+                    $('#canvasDiv').append(sppechBubbleDotHTML);
 
+                    if ($scope.MultiLanguageAnnationArray.length > 0) {
+                        for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
+                            var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
+                            $("#sppeachBubble").append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
+                        }
+                    }
+                    else {
+                        console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length)
                     }
+                    if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) {
+                        if ($scope.longestAnnotation.length <= 10) {
 
-                    else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
 
+                            $("#sppeachBubble").css("width", "100px");
 
+                        }
 
-                        $("#sppeachBubble").css("width", "140px");
+                        else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
 
-                    }
-                    else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
 
 
-                        $("#sppeachBubble").css("width", "195px");
+                            $("#sppeachBubble").css("width", "140px");
 
-                    }
-                    else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
+                        }
+                        else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
 
-                        $("#sppeachBubble").css("width", "248px");
 
-                    }
-                    else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
+                            $("#sppeachBubble").css("width", "195px");
 
+                        }
+                        else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
 
-                        $("#sppeachBubble").css("width", "300px");
-                    }
+                            $("#sppeachBubble").css("width", "248px");
 
-                    else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
+                        }
+                        else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
 
-                        $("#sppeachBubble").css("width", "370px");
 
-                    }
+                            $("#sppeachBubble").css("width", "300px");
+                        }
 
-                    else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
+                        else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
 
+                            $("#sppeachBubble").css("width", "370px");
 
-                        $("#sppeachBubble").css("width", "450px");
+                        }
 
-                    }
+                        else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
 
-                    else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
 
+                            $("#sppeachBubble").css("width", "450px");
 
-                        $("#sppeachBubble").css("width", "510px");
+                        }
 
-                    }
+                        else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
 
-                    else {
 
+                            $("#sppeachBubble").css("width", "510px");
 
-                        $("#sppeachBubble").css("width", ($scope.longestAnnotation.length) + "%");
+                        }
 
+                        else {
 
-                    }
 
+                            $("#sppeachBubble").css("width", ($scope.longestAnnotation.length) + "%");
+
+
+                        }
+
+                    }
                 }
                 var Globe = [];
                 Globe.push({ currentX: x, currentY: y });
@@ -3189,44 +3199,54 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
     $scope.createSpeechBubbleBasedOnAnnotationLength = function (pointClicked, x, y, id) {
         var sppechBubbleHTML = "<div id ='" + pointClicked + "' class='com'><div style='z-index:10000;position:absolute;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);height:15px;width:35px;left:" + (x - 10) + "px;top:" + (y + 10) + "px;'' id='bubble" + $scope.speechBubbleCounter + "'></div><div data=" + $scope.speechBubbleCounter + " id=" + id + " class='appendDragg' style='z-index:10000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#000;text-align:left;font-size: 12px;background-color:#fff;font-weight:bold;left:" + x + "px;top:" + y + "px;'><div style='z-index:7000;position:absolute;right:-4px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.speechBubbleCounter + " class='dynCross' src=" + $rootScope.path + "></div></div><div style='position:absolute;border:1px solid #000;display:none;z-index:9000;' id='bord" + $scope.speechBubbleCounter + "'></div></div>";
-        $("#canvasDiv").append(sppechBubbleHTML);
-
+        //Issue #7286 :Undefined annotation should not appear
         for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
             var annotation = $scope.MultiLanguageAnnationArray[i];
-
-            $("#" + id).append("<p style='margin-bottom:2px;'>" + annotation + "</p>");
         }
 
-        if ($scope.longestAnnotation.length <= 10) {
-            $("#" + id).css("width", "100px");
-        }
+        if (annotation == undefined) {
+            console.log("No text found");
+        } else {
 
-        else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
-            $("#" + id).css("width", "140px");
-        }
-        else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
-            $("#" + id).css("width", "195px");
+            $("#canvasDiv").append(sppechBubbleHTML);
 
-        }
-        else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
-            $("#" + id).css("width", "248px");
-        }
-        else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
-            $("#" + id).css("width", "300px");
-        }
+            for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
+                var annotation = $scope.MultiLanguageAnnationArray[i];
 
-        else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
-            $("#" + id).css("width", "370px");
-        }
-        else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
-            $("#" + id).css("width", "450px");
-        }
-        else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
-            $("#" + id).css("width", "510px");
+                $("#" + id).append("<p style='margin-bottom:2px;'>" + annotation + "</p>");
+            }
 
-        }
-        else {
-            $("#" + id).css("width", ($scope.longestAnnotation.length) + "%");
+            if ($scope.longestAnnotation.length <= 10) {
+                $("#" + id).css("width", "100px");
+            }
+
+            else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
+                $("#" + id).css("width", "140px");
+            }
+            else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
+                $("#" + id).css("width", "195px");
+
+            }
+            else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
+                $("#" + id).css("width", "248px");
+            }
+            else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
+                $("#" + id).css("width", "300px");
+            }
+
+            else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
+                $("#" + id).css("width", "370px");
+            }
+            else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
+                $("#" + id).css("width", "450px");
+            }
+            else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
+                $("#" + id).css("width", "510px");
+
+            }
+            else {
+                $("#" + id).css("width", ($scope.longestAnnotation.length) + "%");
+            }
         }
     }
 
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index ad5c07a..a62431a 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -264,6 +264,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
         $rootScope.shapestyle = function (id) {
 
             document.getElementById('modelbackground').style.display = "none";
+            document.getElementById('modeleditstyle').style.display = "none";
 
             $rootScope.shapestyleOpacity = $("#" + id).css('opacity');
             $rootScope.shapestyleFillColor = $("#" + id).parent().css('background-color');
@@ -275,19 +276,21 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             $rootScope.shapestyleborderWidth = intPart[0];
             $rootScope.shapestyleborderStyles = "solid";
 
-            $('#editshapestyle').modal('hide');
+           // $('#editshapestyle').modal('hide');
         }
 
         $rootScope.enableAnnotationToolBar = function () {
 
             document.getElementById('modelbackground').style.display = "block";
-            $("#editshapestyle").modal('show');
+          //  $("#editshapestyle").modal('show');
+            document.getElementById('modeleditstyle').style.display = "block";
 
         }
 
         $rootScope.disableAnnotationToolBar = function () {
 
             document.getElementById('modelbackground').style.display = "none";
+            document.getElementById('modeleditstyle').style.display = "none";
 
         }
 
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index d02ccc4..186a81f 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -662,7 +662,131 @@
 
 
     <!--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:460px;">
+
+
+    <div class="modeleditstyle" id="modeleditstyle" style="z-index: 1000000000; background: white; height: 433px; width: 302px;position:absolute;left:40%;top:70px;">
+        <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 id="fill-option" type="checkbox" checked onclick="enableDisableFillOption()"> Fill Option
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="col-sm-6 enableDisableOpacity">
+                                <div class="radio">
+                                    <label>
+                                        <input type="radio" name="filloption" id="filloption1" value="filloption1">
+                                        <span class="">Texture</span>
+                                        <img id="editstyleTexture" 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 id="editstylebackgroundcolor" 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 outerBackgroundColor" data-control="saturation" style="display:none;" value="#0088cc">
+                                        </div>
+
+
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="col-sm-6 no-padding marginTop10 enableDisableOpacity">
+                                <div class="row">
+                                    <label class="pull-left" style="font-weight:normal;">Scale</label>
+                                    <div id="edit-slider-3" class="pull-left" style="width:62%; margin-left:3%; margin-top:2%;">
+                                        <div id="slider-range-min-3"></div>
+                                    </div>
+                                </div>
+
+                                <div class="row">
+                                    <label class="pull-left" style="font-weight:normal;">Opacity</label>
+                                    <div id="edit-slider-4" 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 id="Outline-Option" onclick="enableDisableOutline()" type="checkbox" checked> Outline Option
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="col-sm-6 setEnableDisableForEditShapeStyle">
+                                <label class="marginTop5">
+                                    <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span>
+                                    <div class="form-group" id="outlineColor" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
+
+                                        <input type="text" class="form-control borderColorCanvasPreview" data-control="saturation" style="display:none;" value="#0088cc">
+                                    </div>
+
+
+                                </label>
+                            </div>
+
+                            <div class="col-sm-6 setEnableDisableForEditShapeStyle">
+                                <div class="form-horizontal">
+                                    <div class="form-group">
+                                        <label class="col-sm-3 control-label" style=" font-weight:normal; padding-top:9px;">Size</label>
+                                        <div class="col-sm-9 marginTop5">
+                                            <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>
+                                                <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" ng-click="disableAnnotationToolBar()">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+
+
+
+    <!--<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:460px;">
         <div class="modal-dialog modal-sm" role="document">
             <div class="modal-content">
                 <div class="modal-header annotation-modal-header">
@@ -698,9 +822,7 @@
                                             </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>
@@ -709,7 +831,7 @@
                                         <label class="pull-left" style="font-weight:normal;">Scale</label>
                                         <div id="edit-slider-3" 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>
 
@@ -741,14 +863,12 @@
                                 <div class="col-sm-6 setEnableDisableForEditShapeStyle">
                                     <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" id="outlineColor" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
 
                                             <input type="text" class="form-control borderColorCanvasPreview" data-control="saturation" style="display:none;" value="#0088cc">
                                         </div>
 
 
-                                        <!--<img src="img/color-picker.png" alt="" class="color-picker">-->
                                     </label>
                                 </div>
 
@@ -787,7 +907,7 @@
                 </div>
             </div>
         </div>
-    </div>
+    </div>-->
 
     <script>
         function enableDisableFillOption()
@@ -977,6 +1097,7 @@
         $(function () {
             $(".modal").draggable();
             $(".annotationTollbar").draggable();
+            $(".modeleditstyle").draggable();
         });
     </script>
 
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 27dede1..94b8ef9 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
@@ -842,4 +842,10 @@ cursor:pointer;
     height:100%;
   
     filter: Alpha(opacity=50); / IE8 and earlier /
+}
+
+	
+.modeleditstyle
+ {
+    display:none;
 }
\ No newline at end of file