--- a/swtr/static/css/swtmaker.css
+++ b/swtr/static/css/swtmaker.css
@@ -72,6 +72,7 @@
   background: #fff;
   height: 60px;
   margin-left: -15px;
+  display: none;
 }
 .ocd-item .text{
   margin-top: 3px;
--- a/swtr/static/js/img_swtr.js
+++ b/swtr/static/js/img_swtr.js
@@ -35,7 +35,7 @@
       var where = options.where,
     who = options.who || null;
       url = swtr.swtstoreURL() + swtr.endpoints.get + '?where=' +
-        encodeURIComponent(where) + '&access_token=' + swtr.access_token;
+        encodeURIComponent(where);// '&access_token=' + swtr.access_token;
       if(who) {
         url += '&who=' + who;
       }



@@ -100,13 +100,15 @@
     update: function() {
     }
   });
+
   swtr.ImgAnnoView = Backbone.View.extend({
-    el: $("#img-annotation-wrapper"),
+    el: $('#img-annotation-wrapper'),
     events: {
-      'change #custom-dropdown ': 'getFormValue',
-      'click #setbox': 'showHide'
+      'change #custom-dropdown': 'getFormValue',
+      'click #toggle-anno-areas': 'toggleAnnoAreas'
     },
     initialize: function(options) {
+      this.$el = $('#img-annotation-wrapper');
       this.listenTo(this.collection, 'add', this.render);
       // attach event handlers to the anno object
       anno.addHandler('onAnnotationCreated', this.showSwtHelp);

@@ -125,8 +127,15 @@
         this.$img = options.$img;
         options.$img.on('load', this, this.imageLoaded);
         options.$img.on('error', this, this.onImageLoadError);
-        this.setImage(options.url);
       }
+      if(!options.helpview) {
+        //TODO: figure out a better way so that everyone can communicate with
+        //helpview independently
+        throw new Error('Image annotation view must be passed a reference to the helpview');
+      }
+      this.helpview = options.helpview;
+      //console.log('initing img annoview; helpview in opts', options.helpview);
+      this.setImage(options.url);
     },
     render: function(model) {
       var swt = model.toJSON();
@@ -140,7 +149,7 @@
     },
     showSwtHelp: function(annotation) {
       var self = swtr.imgAnnoView;//TODO: figure out how we can bind the scope when this func is called as a callback
-      swtr.appView.helpview.step(3);
+      self.helpview.step(3);
       $('#sweet').show();
     },
     updateNewAnno: function(annotation) {


@@ -260,14 +269,13 @@
     },
     setImage: function(url) {
       this.imgURL = url;
-      console.log(url);
+      //console.log(url);
       if(this.$img.attr('src') === this.imgURL) {
         return;
       }
       anno.reset();
-      var self = this;
       swtr.appView.$overlay.show();
-      swtr.appView.helpview.step(7);
+      this.helpview.step(7);
       this.$img.attr('src', this.imgURL);
     },
     imageLoaded: function(event) {
@@ -277,7 +285,7 @@
       // reset the collection
       swtr.sweets.reset();
       anno.makeAnnotatable(swtr.imgAnnoView.img);
-      swtr.imgAnnoView.getExistingAnnotations();
+      self.getExistingAnnotations();
     },
     // when image fails to load - could be because of broken URL or network
     // issues
@@ -285,7 +293,7 @@
       var self = event.data;
       console.log('error while loading image');
       swtr.appView.$overlay.hide();
-      swtr.appView.helpview.step(8);
+      self.helpview.step(8);
     },
     initImageAnno: function() {
       // img is a jquery object which annotorious doesn't accept; instead it
@@ -297,7 +305,7 @@
     },
     getExistingAnnotations: function() {
       var self = this;
-      swtr.appView.helpview.step(0);
+      this.helpview.step(0);
       swtr.appView.$overlay.show();
       swtr.sweets.getAll({
         where: this.imgURL,
@@ -305,7 +313,7 @@
           if(_.isArray(data)) {
             swtr.sweets.add(data);
             swtr.appView.$overlay.hide();
-            swtr.appView.helpview.step(2);
+            self.helpview.step(2);
           }
         },
         error: function(jqxhr, error, statusText) {


@@ -313,16 +321,16 @@
             console.log('annotations don\'t exist for this image. Create one!');
           }
           swtr.appView.$overlay.hide();
-          swtr.appView.helpview.step(2);
+          self.helpview.step(2);
         }
       });
     },
-    showHide: function() {
-      if($("#setbox:checked").length) {
-        $('.annotorious-item-unfocus').css("opacity",  "0.5");
+    toggleAnnoAreas: function() {
+      if($('#toggle-anno-areas').is(':checked')) {
+        $('.annotorious-item-unfocus').css('opacity',  '0.5');
       }
       else {
-        $('.annotorious-item-unfocus').css("opacity", "0");
+        $('.annotorious-item-unfocus').css('opacity', '0');
       }
     }
   });
--- a/swtr/static/js/main.js
+++ b/swtr/static/js/main.js
@@ -45,8 +45,10 @@
       'click #sweet-cancel': 'cancelSweeting',
       'click #post-sweet': 'postSweets'
     },
-    initialize: function() {
+    initialize: function(opts) {
       this.template = _.template($('#sweet-template').html());
+      this.helpview = opts.helpview;
+      //this.setElement(opts.el);
     },
     render: function() {
       $('#sweet-list').html('<h4>These are your sweet annotations!</h4>');
@@ -61,7 +63,7 @@
           how: JSON.stringify(this.getHumanReadableParts(swt.get('how')))
         }));
       }, this);
-      $(this.el).fadeIn(300);
+      this.$el.fadeIn(300);
     },
     getHumanReadableParts: function(how) {
       var human_readable_json = {};




@@ -90,42 +92,27 @@
       this.collection.remove(notPosted);
     },
     postSweets: function() {
-      console.log("postSWr");
       var appView = swtr.appView;
-      appView.helpview.step(5);
+      this.helpview.step(5);
       appView.$overlay.show();
       try {
         this.collection.post({
           success: function(collection, response) {
             console.log(collection, response);
             swtr.sweets.set(collection);
-            //TODO: move this to a annotation view or something
-//            anno.removeAll();
-            // _.each(swtr.sweets.models, function(swt) {
-            //   if(!_.has(swt.get('how'), 'editable')) {
-            //     swt.get('how')['editable'] = false;
-            //     //console.log(swt.get('how').text.Comment);
-            //     swt.get('how').text = swtr.imgAnnoView.createPopupText(swt.get('how'));
-            //     //console.log(swt.get('how'));
-            //     swt.get('how').text += '\n - by ' + swt.get('who');
-            //   }
-            //   //console.log(swt.get('how'));
-            //   anno.addAnnotation(swt.get('how'));
-            // });
-            //console.log(swtr.sweets.toJSON());
-            swtr.appView.$overlay.hide();
-            swtr.appView.helpview.step(6);
+            appView.$overlay.hide();
+            this.helpview.step(6);
           },
           error: function(jqxhr, error, text) {
             console.log(jqxhr, error, text);
-            swtr.appView.$overlay.hide();
-            swtr.appView.helpview.step(10);
+            appView.$overlay.hide();
+            this.helpview.step(10);
           }
         });
       } catch(e) {
         if(e.message == 'Access Token is required to sweet') {
           appView.$overlay.hide();
-          appView.helpview.step(9);
+          this.helpview.step(9);
         }
       }
       this.cleanUp();
@@ -133,7 +120,7 @@
     },
     cleanUp: function() {
       //console.log('cleaning up');
-      $(this.el).hide();
+      this.$el.hide();
     }
   });
 
@@ -162,6 +149,7 @@
       // pluck uniq tags of sweets
       var tags = _.chain(this.collection.pluck('how')).pluck('tags').flatten().
         uniq().value();
+
       // render them as filter controls
       _.each(tags, function(tag) {
         if(tag) {

@@ -229,45 +217,12 @@
           anno.addAnnotation(swt.get('how'));
         });
       }
-    },
-    filterSweet: function(event) {
-      /*if(!event.currentTarget.checked) {
-        var results = this.collection.filter(function(model) {
-          if(model.get('who') != event.currentTarget.name)
-            return model;
-        });
-        if(results.length) {
-          _.each(results, function(result) {
-            anno.removeAnnotation(result.get('how'));
-          });
-        }
-        else { // if results is empty then remove all anno.
-          anno.removeAll();
-        }
-      }
-      else {
-        results = this.collection.filter(function(model) {
-          if(model.get('who') == event.currentTarget.name)
-            return model;
-        });
-        _.each(results, function(result) {
-          anno.addAnnotation(result.get('how'));
-        });
-
-      }
-      // if(results) {
-      //   anno.removeAll();
-      // }
-      // swtr.annoView.collection = results;
-      // swtr.annoView.renderWith();*/
     }
   });
 
   var AppView = Backbone.View.extend({
     el: $('body'),
     events: {
-      'click #user-input-submit': 'submitUserInput',
-      'click #sweet': 'sweet',
       'click #sign-in': 'signIn',
       //'mouseup .annotorious-editor-button-save': 'addnew_anno'
     },

@@ -275,11 +230,9 @@
       // initialize components
       this.source = 'none';
       //this.helpview = new HelpView();
-      this.sweetsview = new SweetsView({collection: swtr.sweets});
 
       // cache jquery selected elements which are used frequently
       this.$overlay = $('#app-overlay');
-      this.$img = $('#annotatable-img');
 
       //this.helpview.step(1);
       // initialize the oauth stuff








@@ -290,76 +243,105 @@
         scopes: 'email,sweet'
       });
     },
+    signIn: function(event) {
+      event.preventDefault();
+      if(swtr.who === 'Guest') {
+        this.oauth.authorize();
+      }
+      return false;
+    },
+    userLoggedIn: function(username) {
+      swtr.who = username;
+      var text = 'Signed in as <b><u>' + swtr.who + '</u></b>';
+      $('#signinview').html(text);
+    },
+    userLoggedOut: function() {
+      swtr.who = 'Guest';
+      $('#signinview').html('Logged out');
+    }
+  });
+
+  var PlayAreaView = Backbone.View.extend({
+    id: '#play-page-container',
+    events: {
+      'click #user-input-submit': 'submitUserInput',
+      'click #sweet': 'sweet'
+    },
+    initialize: function() {
+      this.template = _.template($('#play-page-template').html());
+      this.helpview = new HelpView();
+      this.render();
+      this.sweetsview = new SweetsView({
+        el: $('#sweet-list-wrapper'),
+        collection: swtr.sweets,
+        helpview: this.helpview
+      });
+      this.$img = $('#annotatable-img');
+      this.helpview.step(1);
+    },
+    render: function() {
+      this.$el.html(this.template());
+      $('#play-page').html(this.$el);
+    },
     submitUserInput: function(event) {
       event.preventDefault();
       var input = $('#user-input').val();
-      if(this.source === 'ocd') {
-        this.loadOCDSearch(input);
-      }
-      else if (this.source === 'none') {
-        this.loadURL(input);
-      }
+      this.loadURL(input);
     },
+    getSweets: function() {
+      console.log('getSweets');
+      var annos = _.filter(anno.getAnnotations(), function(anno) {
+        return (!_.has(anno, 'editable') || anno.editable === true);
+      });
+
+      _.each(annos, function(anno) {
+        swtr.sweets.add({
+          who: swtr.who,
+          where: anno.src,
+          // remove the text field; we don't want to store that in the sweets
+          how: _.omit(anno, 'text')
+        });
+      });
+    },
+    showSweets: function() {
+      console.log('showSweets');
+      this.sweetsview.render();
+    },
+    sweet: function() {
+      console.log('sweeting');
+      this.getSweets();
+      this.showSweets();
+      return false;
+    },
     // load a URL for annotation (can be of image or html resource for now)
     loadURL: function(url, type) {
       //console.log('loadURL()');
-      if(this.source !== 'ocd') {
-        $('#ocd-results').hide();
-      }
-      $('#img-annotation-wrapper').show();
       if(!url || !url.match(/http/)) {
         this.helpview.step(13);
         return false;
       }
       // if type is given explicitly; we load it as such.
       if(type === 'image') {
-        if(swtr.imgAnnoView) {
-          swtr.imgAnnoView.setImage(url);
-        }
-        else {
-          swtr.imgAnnoView = new swtr.ImgAnnoView({
-            collection:swtr.sweets,
-            img: this.$img[0],
-            $img: this.$img,
-            url: url
-          });
-        }
+        this.initImageAnno(url);
         return false;
       }
       // else try to find what resource is the URL..
       // if url has an image extension then load the image annotation
       if(url.match(/.jpg|.jpeg|.png|.gif|.bmp|.svg/)) {
-        if(swtr.imgAnnoView) {
-          swtr.imgAnnoView.setImage(url);
-        }
-        else {
-          swtr.imgAnnoView = new swtr.ImgAnnoView({collection:swtr.sweets,
-                                                   img: this.$img[0],
-                                                   $img: this.$img,
-                                                   url: url});
-        }
-
+        this.initImageAnno(url);
         return false;
       }
       // else check with our /media-type endpoint to see what type of resource
       // it is
       else {
         this.helpview.step(12);
-        this.$overlay.show();
+        swtr.appView.$overlay.show();
         var self = this;
         $.get('/media-type', {where: url}, function(response) {
           //console.log(response);
-          self.$overlay.hide();
+          self.appView.$overlay.hide();
           if(response.type === 'image') {
-            if(swtr.imgAnnoView) {
-              swtr.imgAnnoView.setImage(url);
-            }
-            else {
-              swtr.imgAnnoView = new swtr.ImgAnnoView({collection:swtr.sweets,
-                                                       img: self.$img[0],
-                                                       $img: self.$img,
-                                                       url: url});
-            }
+           this.initImageAnno(url);
           }
           else {
             window.location.href = '/annotate?where=' + url;



@@ -367,56 +349,26 @@
         });
       }
     },
-    getSweets: function() {
-      var annos = _.filter(anno.getAnnotations(), function(anno) {
-        return (!_.has(anno, 'editable') || anno.editable === true);
-      });
-
-      _.each(annos, function(anno) {
-        swtr.sweets.add({
-          who: swtr.who,
-          where: anno.src,
-          // remove the text field; we don't want to store that in the sweets
-          how: _.omit(anno, 'text')
+    initImageAnno: function(url) {
+      if(swtr.imgAnnoView) {
+        swtr.imgAnnoView.setImage(url);
+      }
+      else {
+        swtr.imgAnnoView = new swtr.ImgAnnoView({
+          collection: swtr.sweets,
+          img: this.$img[0],
+          $img: this.$img,
+          url: url,
+          helpview: this.helpview
         });
-      });
+      }
     },
-    showSweets: function() {
-      this.sweetsview.render();
-    },
-    sweet: function() {
-      this.getSweets();
-      this.showSweets();
-      return false;
-    },
-    signIn: function(event) {
-      event.preventDefault();
-      this.oauth.authorize();
-      return false;
-    },
-    userLoggedIn: function(username) {
-      swtr.who = username;
-      var text = 'Signed in as <b><u>' + swtr.who + '</u></b>';
-      $('#signinview').html(text);
-    },
-    userLoggedOut: function() {
-      swtr.who = 'Guest';
-      $('#signinview').html('Logged out');
+    destroy: function() {
+      this.helpview.remove();
+      this.remove();
     }
   });
 
-
-  var PlayAreaView = Backbone.View.extend({
-    el: $('#play-page'),
-    events: {
-    },
-    initialize: function() {
-      this.render();
-    },
-    render: function() {
-    }
-  });
-
   var SearchView = Backbone.View.extend({
     id: 'search-page-container',
     events: {





@@ -564,29 +516,30 @@
       //console.log('onImgClick');
       event.preventDefault();
       // TODO: init the image anno
-      this.highlightImg(event);
+      this.drawCoverOnImg(event);
       //swtr.appView.loadURL(url, 'image');
       return false;
     },
-    highlightImg: function(event) {
+    drawCoverOnImg: function(event) {
       //console.log('highlightImg');
       var elem = $(event.currentTarget).parent().parent();
       // if .ocd-item-cover exists return
       if(elem.find('.ocd-item-cover').length) {
+        $(elem.find('.ocd-item-cover')[0]).slideDown();
         return;
       }
       //console.log(elem);
       elem.prepend(this.cover_template());
-      $(elem.find('.ocd-item-cover')[0]).slideDown('slow');
+      $(elem.find('.ocd-item-cover')[0]).slideDown();
     },
     onCoverCloseClick: function(event) {
       var elem = $(event.currentTarget).parent();
-      elem.slideUp('slow');
-      elem.remove();
+      elem.slideUp();
     },
     onMarkClick: function(event) {
       var url = $(event.currentTarget).parent().parent().
         find('img').attr('src');
+      //TODO: load the image in the play area/workbench
       console.log('load image anno', url);
     },
     search: function(data, cb) {

@@ -718,17 +671,18 @@
     initialize: function() {
       var self = this;
       swtr.LDs = new LDSwts();
-      swtr.LDs.getAll({what: 'img-anno',
-                       success: function(data) {
-                         swtr.LDs.add(data);
-                         if(!swtr.tagCloudView) {
-                           swtr.tagCloudView = new TagCloudView({collection: swtr.LDs});
-                         }
-                       }});
+      swtr.LDs.getAll({
+        what: 'img-anno',
+        success: function(data) {
+          swtr.LDs.add(data);
+          if(!swtr.tagCloudView) {
+            swtr.tagCloudView = new TagCloudView({collection: swtr.LDs});
+          }
+        }
+      });
     },
     destroy: function() {
       this.remove();
-
     }
   });
 
@@ -742,7 +696,6 @@
       this.user_tag_el = $('#user-tag-cloud');
       this.tags_tag_el = $('#tags-tag-cloud');
       this.render();
-
     },
     userTagClicked: function(e) {
       console.log(e);
@@ -766,7 +719,6 @@
         .fontSize(function(d) { return d.size; })
         .on("end", this.draw)
         .start();
-
     },
     draw: function (words) {
       var fill = d3.scale.category20();
@@ -783,7 +735,6 @@
         .attr("transform", function(d) {
           return "translate(" + [d.x, d.y] + ")";})
         .text(function(d) { return d.text; });
-
     },
     renderTagsTagCloud: function() {
       var sweetsWithTags = swtr.LDs.filter(function(k) {
@@ -805,7 +756,6 @@
         .fontSize(function(d) { return d.size; })
         .on("end", this.drawTags)
         .start();
-
     },
     drawTags: function(words) {
       var fill = d3.scale.category20();
@@ -824,7 +774,6 @@
         })
         .text(function(d) {console.log(d); return d.text; });
     }
-
   });
 
   var AppRouter = Backbone.Router.extend({
@@ -836,7 +785,7 @@
     },
     components: {
       'linked-data': LDView,
-      'play': DummyView,
+      'play': PlayAreaView,
       'search': SearchView
     },
     home: function() {
--- a/swtr/templates/index.html
+++ b/swtr/templates/index.html
@@ -86,73 +86,18 @@
         </footer>
       </div>
 
-      <div id="play-page" class="page">
-        <!-- second row: image URL input box and Load button -->
-        <div class="row" id="user-input-row">
-          <div class="col-md-8">
-            <form class="form-inline" role="form">
-              <div class="form-group col-md-11">
-                <label class="sr-only" for="user-input">Enter URL of an image or web page</label>
-                <input class="form-control" type="text"
-                  placeholder="Enter URL of an image or web page" id="user-input">
-              </div>
-              <button type="submit" class="btn btn-info" id="user-input-submit">Load</button>
-            </form>
-          </div>
-          <div class="col-md-4">
-          </div>
-        </div> <!-- end second row -->
-        <!-- third row - control panel? -->
-        <div class="row" id="control-panel">
-          <div class="col-md-8">
-            <form class="form-inline" role="form">
-              <div class="form-group">
-                <button class="btn btn-default" id="sweet">Sweet</button>
-              </div>
-            </form>
-          </div>
-          <div class="col-md-4"></div>
-        </div> <!-- end third row -- >
-        <!-- fourth row: the image annotation window -->
-        <div class="row">
-          <div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well">
-            <div id="img-anno-controls">
-              <form class="form-inline" role="form">
-                <div class="form-group">
-                  <label class="checkbox-inline">
-                    <input type="checkbox" id="setbox"> Show annotated areas
-                  </label>
-                </div>
-              </form>
-            </div>
-          {% if url %}
-            <img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
-          {% else %}
-            <img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
-          {% endif %}
-          </div>
-        </div> <!-- end fourth row -->
+      <div id="play-page" class="page"></div>
 
-        <div id="sweet-list-wrapper">
-          <ul id="sweet-list"></ul>
-          <div class="btn-grp">
-            <button class="btn btn-default" id="sweet-cancel">Cancel</button>
-            <button class="btn btn-primary" id="post-sweet">Sweet</button>
-          </div>
-        </div>
+      <!-- the search page -->
+      <div id="search-page" class="page"></div>
 
-      </div>
       <div id="linked-data-page" class="page">
         <div id="tag-cloud">
           <div id="tags-tag-cloud"></div>
           <div id="user-tag-cloud"></div>
         </div>
       </div>
-      <!-- the search page -->
-      <div id="search-page" class="page"></div>
 
-      <div id="linked-data-page" class="page"></div>
-
     </div>
     <div id="app-overlay"></div>
 
@@ -225,6 +170,61 @@
           <li class="custom-popup-line"><span>Related Links: </span><%= Links %></li>
         </ul>
       </span>
+    </script>
+    <script type="text/template" id="play-page-template">
+      <!-- second row: image URL input box and Load button -->
+        <div class="row" id="user-input-row">
+          <div class="col-md-8">
+            <form class="form-inline" role="form">
+              <div class="form-group col-md-11">
+                <label class="sr-only" for="user-input">Enter URL of an image or web page</label>
+                <input class="form-control" type="text"
+                  placeholder="Enter URL of an image or web page" id="user-input">
+              </div>
+              <button type="submit" class="btn btn-info" id="user-input-submit">Load</button>
+            </form>
+          </div>
+          <div class="col-md-4">
+          </div>
+        </div> <!-- end second row -->
+        <!-- third row - control panel? -->
+        <div class="row" id="control-panel">
+          <div class="col-md-8">
+            <form class="form-inline" role="form">
+              <div class="form-group">
+                <button class="btn btn-default" id="sweet">Sweet</button>
+              </div>
+            </form>
+          </div>
+          <div class="col-md-4"></div>
+        </div> <!-- end third row -- >
+        <!-- fourth row: the image annotation window -->
+        <div class="row">
+          <div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well">
+            <div id="img-anno-controls">
+              <form class="form-inline" role="form">
+                <div class="form-group">
+                  <label class="checkbox-inline">
+                    <input type="checkbox" id="toggle-anno-areas"> Show annotated areas
+                  </label>
+                </div>
+              </form>
+            </div>
+          {% if url %}
+            <img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
+          {% else %}
+            <img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
+          {% endif %}
+          </div>
+        </div> <!-- end fourth row -->
+
+        <div id="sweet-list-wrapper">
+          <ul id="sweet-list"></ul>
+          <div class="btn-grp">
+            <button class="btn btn-default" id="sweet-cancel">Cancel</button>
+            <button class="btn btn-primary" id="post-sweet">Sweet</button>
+          </div>
+        </div>
     </script>
     <script type="text/template" id="search-page-template">
       <div class="row" id="search-user-input-row">