--- a/swtr/static/js/swtmaker.js
+++ b/swtr/static/js/swtmaker.js
@@ -177,7 +177,8 @@
     events: {
       'click #img-url-submit': 'setImage',
       'click #sweet': 'sweet',
-      'click #signin-credentials': 'getSignInCredentials'
+      'click #signin-credentials': 'getSignInCredentials',
+      'click #setbox': 'showHide'
     },
     initialize: function() {
       //var allElements = $('body *');
@@ -189,8 +190,8 @@
         anno.hideAnnotations();});
       anno.addHandler('onSelectionCompleted', function(annotation) {
         anno.showAnnotations(); });
-      anno.addHandler('onEditorShown', function(annotation) {
-        anno.hideAnnotations();} );
+ 
+        
       this.$overlay = $('#app-overlay');
       this.$img = $('#annotatable-img');
       this.imgURL = this.$img.attr('src');
@@ -202,6 +203,16 @@
         this.helpview.step(1);
       }
     },
+    showHide: function() {
+      if($("input:checked").length) { 
+        $('.annotorious-item-unfocus').css("opacity",  "0.5");
+      }
+      else { 
+        $('.annotorious-item-unfocus').css("opacity", "0");
+      }
+                           
+    },
+
     setImage: function() {
       anno.reset();
       this.imgURL = $('#img-url-input').val();
--- a/swtr/templates/index.html
+++ b/swtr/templates/index.html
@@ -31,6 +31,7 @@
         </div>
         <button class="btn btn-default" id="img-url-submit">GO</button>
         <button class="btn btn-default" id="sweet">Sweet</button>
+        <input id="setbox" type="checkbox"  >Show/Hide Box</input>
       </div>
       <div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well">
         {% if url %}