--- a/swtr/static/css/annotorious.css
+++ b/swtr/static/css/annotorious.css
@@ -234,7 +234,7 @@
   border-bottom:1px solid #ccc;
   margin:0px;
   background-color:#fff;
-  padding:3px;
+  /*padding:3px;*/
   font-family:Verdana, Arial;
   font-size:12px;	
 }
--- /dev/null
+++ b/swtr/static/js/lib/custom-fields-plugin.js
@@ -1 +1,51 @@
+/**
+ * A plugin that adds 'Semantic Tagging' functionality to Annotorious.
+ * While typing an annotation in the editor, the text is sent to the plugin's 
+ * server counterpart for Named Entity Recognition (NER). Recognized entities
+ * are suggested as possible tags, and the user can add them to the annotation
+ * by clicking on them. Tags are Semantic Tags in the sense that they are not
+ * just strings, but (underneath the hood) include a URI pointing to a concept
+ * in a specific 'knowledge context', hosted at the server.
+ * 
+ * The config options for the plugin require a field named 'endpoint_url',
+ * holding the URL of the server endpoint to use as the NER/tag-suggestion
+ * service.
+ *
+ * @param {Object=} opt_config_options the config options
+ */
+annotorious.plugin.CustomFields = function(opt_config_options) {
+
+  //Container for custom fields
+     
+
+  /** @private **/
+  //this._tags = [];
+ // this._link =[];
+ // this._label= [];
+ //annotorious.Annotation(tags);
+ 
+
+  /** @private **/
+/**  this._ENDPOINT_URI = opt_config_options['endpoint_url'];
+
+  if (this._ENDPOINT_URI[this._ENDPOINT_URI.length - 1] != '/')
+    this._ENDPOINT_URI += '/';
+
+  this._ENDPOINT_URI += 
+    'services/wikify?minProbability=0.1&disambiguationPolicy=loose&responseFormat=json&source='; **/
+}
+
+annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {
+     var container = document.createElement('div');
+      container.className = "btn-group";
+      console.log (container);
+
+      var textTemplate= _.template($('#button-template').html());
+                    console.log($(textTemplate));
+                    annotorious.editor.addField(textTemplate);
+
+  //this._EditField(annotorious);
+  //this._popupField(annotator);
+  //this._extendEditor(annotator);
+}
--- /dev/null
+++ b/swtr/static/js/lib/label.js
@@ -1 +1,15 @@
+
+annotorious.plugin.CustomFields.prototype._EditField = function (annotorious) { 
+  //Container for custom fields
+      var container = document.createElement('div');
+      container.className = "btn-group";
+      console.log (container);
+
+
+      window.container = container;
+
+      var textTemplate= _.template($('#button-template').html());
+                    console.log($(textTemplate));
+                    annotorious.editor.addField(textTemplate);
+}
--- a/swtr/static/js/swtmaker.js
+++ b/swtr/static/js/swtmaker.js
@@ -98,7 +98,7 @@
           new_models.push(model);
         }
       });
-      return new_models;
+      return new_models; 
     },
     // update part of the collection after a save on the server
     update: function() {
@@ -144,7 +144,7 @@
       swtr.appView.$overlay.show();
       this.collection.post({
         success: function(collection, response) {
-          //console.log(collection, response);
+          console.log(collection, response);
           swtr.sweets.update(collection);
           //TODO: move this to a annotation view or something
           anno.removeAll();
@@ -153,6 +153,7 @@
               swt.get('how')['editable'] = false;
               swt.get('how').text += '\n - by ' + swt.get('who');
             }
+            console.log(swt.get('how'));
             anno.addAnnotation(swt.get('how'));
           });
           //console.log(swtr.sweets.toJSON());
@@ -178,7 +179,8 @@
       'click #img-url-submit': 'setImage',
       'click #sweet': 'sweet',
       'click #signin-credentials': 'getSignInCredentials',
-      'click #setbox': 'showHide'
+      'click #setbox': 'showHide',
+      'click #comment, #label, #tags, #links ': 'button_custom'
     },
     initialize: function() {
       //var allElements = $('body *');
@@ -190,8 +192,8 @@
         anno.hideAnnotations();});
       anno.addHandler('onSelectionCompleted', function(annotation) {
         anno.showAnnotations(); });
- 
-        
+      anno.addPlugin('CustomFields', this.showSwtHelp); 
+      anno.addHandler('onSelectionCompleted', this.setShape);  
       this.$overlay = $('#app-overlay');
       this.$img = $('#annotatable-img');
       this.imgURL = this.$img.attr('src');
@@ -203,6 +205,9 @@
         this.helpview.step(1);
       }
     },
+    setShape: function(annotation) {
+       window.annotation=annotation;
+      }, 
 
     setImage: function() {
       anno.reset();
@@ -286,6 +291,30 @@
       }
                            
     },
+
+    /*build_txt: function(opt_array) {
+      var textarray = opt_array;
+      var newobj = [textarray];
+      console.log(newarray);
+
+    },*/
+    button_custom: function(event) {
+      var src = $('#img-url-input').val();
+      var newanno= {};
+      var tempinput = $('.annotorious-editor-text:first');
+     //type setting
+     // var type = $(tempinput).attr("placeholder").slice(5);
+      //console.log(type);
+      newanno.text = tempinput.val();
+      newanno.src = src;
+      $(tempinput).val("");
+      var placeHolder = "Add "+event.currentTarget.innerHTML;
+      $(tempinput).attr("placeholder", placeHolder);
+      newanno.shapes = [{'type':annotation.shape.type, 'geometry':{'x':annotation.shape.geometry.x, 'y':annotation.shape.geometry.y, 'width':annotation.shape.geometry.width, 'height':annotation.shape.geometry.height}}];
+      anno.addAnnotation(newanno);
+      //swtr.appView.ShowSwtHelp;
+    },
+
     getSignInCredentials: function(event) {
       event.preventDefault();
       if(swtr.who === 'Guest' && !$('#username').length) {

@@ -343,9 +372,9 @@
                 break;
         case 2: text = 'Annotate the image, or see other annotations';
                 break;
-        case 3: text = 'Now you can sweet this annotation.';
+        case 3: text = 'Now you can sweet this annotation, or add more annotations';
                 break;
-        case 4: text = 'Click button to sweet these sweet annotations';
+        case 4: text = 'Click Sweet button to publish these annotations to the Sweet Store';
                 break;
         case 5: text = 'Publishing your sweets';
                 break;
--- a/swtr/templates/index.html
+++ b/swtr/templates/index.html
@@ -66,6 +66,8 @@
     <script src="{{ url_for('static', filename='js/lib/underscore-1.5.2.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/lib/backbone-1.0.0.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/lib/annotorious.debug.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/lib/custom-fields-plugin.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/lib/label.js') }}"></script>
     <!--script src="https://login.persona.org/include.js"></script-->
     <script src="{{ url_for('static', filename='js/swtmaker.js') }}"></script>
 
@@ -85,7 +87,19 @@
           <label class="sr-only" for="password">Password</label>
           <input type="password" class="form-control" id="password" placeholder="Password">
         </div>
-    </script>
+      </script>
+      <script type="text/template" id="button-template">
+        <div class="btn-group">
+          <button type="button" class="btn-default"
+            id="comment">Comment</button>
+          <button type="button" class="btn-default"
+            id="label">Label</button>
+          <button type="button" class="btn-default"
+            id="tags">Tags</button>
+          <button type="button" class="btn-default "
+            id="links">Links</button>
+        </div>
+      </script>
   </body>
 </html>