diff --git a/Cakefile b/Cakefile
index 49fcf44..48ab389 100644
--- a/Cakefile
+++ b/Cakefile
@@ -35,7 +35,7 @@ task 'build', 'generate unified JavaScript file for whole Hallo', ->
   console.log version
   series [
     (sh "cp -R src tmp")
-    (sh "sed -i 's/{{ VERSION }}/#{version}/' '#{__dirname}/tmp/hallo.coffee'")
+    (sh "sed -ibak 's/{{ VERSION }}/#{version}/' '#{__dirname}/tmp/hallo.coffee'")
     (sh "./node_modules/.bin/coffee -o examples -j hallo.js -c `find tmp -type f -name '*.coffee'`")
     (sh "rm -r tmp")
   ]
@@ -45,7 +45,7 @@ task 'min', 'minify the generated JavaScript file', ->
   console.log version
   series [
     (sh "cp -R src tmp")
-    (sh "sed -i 's/{{ VERSION }}/#{version}/' '#{__dirname}/tmp/hallo.coffee'")
+    (sh "sed -ibak 's/{{ VERSION }}/#{version}/' '#{__dirname}/tmp/hallo.coffee'")
     (sh "./node_modules/.bin/coffee -o examples -j hallo.js -c `find tmp -type f -name '*.coffee'`")
     (sh "./node_modules/.bin/uglifyjs examples/hallo.js > examples/hallo-min.js")
     (sh "rm -r tmp")
diff --git a/examples/hallo.js b/examples/hallo.js
index 3de86db..d9c91e9 100644
--- a/examples/hallo.js
+++ b/examples/hallo.js
@@ -417,151 +417,337 @@ http://hallojs.org
   })(jQuery);
 
   (function(jQuery) {
-    return jQuery.widget('IKS.halloindicator', {
+    var z;
+    z = null;
+    if (this.VIE !== void 0) {
+      z = new VIE;
+      z.use(new z.StanbolService({
+        proxyDisabled: true,
+        url: 'http://dev.iks-project.eu:8081'
+      }));
+    }
+    return jQuery.widget('IKS.halloannotate', {
       options: {
+        vie: z,
         editable: null,
-        className: 'halloEditIndicator'
+        toolbar: null,
+        uuid: '',
+        select: function() {},
+        decline: function() {},
+        remove: function() {},
+        buttonCssClass: null
       },
       _create: function() {
-        var _this = this;
-        return this.element.bind('halloenabled', function() {
-          return _this.buildIndicator();
-        });
-      },
-      populateToolbar: function() {},
-      buildIndicator: function() {
-        var editButton;
-        editButton = jQuery('<div><i class="icon-edit"></i> Edit</div>');
-        editButton.addClass(this.options.className);
-        editButton.hide();
-        this.element.before(editButton);
-        this.bindIndicator(editButton);
-        return this.setIndicatorPosition(editButton);
+        var editableElement, turnOffAnnotate, widget;
+        widget = this;
+        if (this.options.vie === void 0) {
+          throw new Error('The halloannotate plugin requires VIE');
+          return;
+        }
+        if (typeof this.element.annotate !== 'function') {
+          throw new Error('The halloannotate plugin requires annotate.js');
+          return;
+        }
+        this.state = 'off';
+        this.instantiate();
+        turnOffAnnotate = function() {
+          var editable;
+          editable = this;
+          return jQuery(editable).halloannotate('turnOff');
+        };
+        editableElement = this.options.editable.element;
+        return editableElement.bind('hallodisabled', turnOffAnnotate);
       },
-      bindIndicator: function(indicator) {
-        var _this = this;
-        indicator.bind('click', function() {
-          return _this.options.editable.element.focus();
-        });
-        this.element.bind('halloactivated', function() {
-          return indicator.hide();
-        });
-        this.element.bind('hallodisabled', function() {
-          return indicator.remove();
+      populateToolbar: function(toolbar) {
+        var buttonHolder,
+          _this = this;
+        buttonHolder = jQuery("<span class=\"" + this.widgetName + "\"></span>");
+        this.button = buttonHolder.hallobutton({
+          label: 'Annotate',
+          icon: 'icon-tags',
+          editable: this.options.editable,
+          command: null,
+          uuid: this.options.uuid,
+          cssClass: this.options.buttonCssClass,
+          queryState: false
         });
-        return this.options.editable.element.hover(function() {
-          if (jQuery(this).hasClass('inEditMode')) {
-            return;
-          }
-          return indicator.show();
-        }, function(data) {
-          if (jQuery(this).hasClass('inEditMode')) {
+        buttonHolder.bind('change', function(event) {
+          if (_this.state === "pending") {
             return;
           }
-          if (data.relatedTarget === indicator.get(0)) {
-            return;
+          if (_this.state === "off") {
+            return _this.turnOn();
           }
-          return indicator.hide();
+          return _this.turnOff();
         });
+        buttonHolder.buttonset();
+        return toolbar.append(this.button);
       },
-      setIndicatorPosition: function(indicator) {
-        var offset;
-        indicator.css('position', 'absolute');
-        offset = this.element.position();
-        indicator.css('top', offset.top + 2);
-        return indicator.css('left', offset.left + 2);
+      cleanupContentClone: function(el) {
+        if (this.state === 'on') {
+          return el.find(".entity:not([about])").each(function() {
+            return jQuery(this).replaceWith(jQuery(this).html());
+          });
+        }
+      },
+      instantiate: function() {
+        var widget;
+        widget = this;
+        return this.options.editable.element.annotate({
+          vie: this.options.vie,
+          debug: false,
+          showTooltip: true,
+          select: this.options.select,
+          remove: this.options.remove,
+          success: this.options.success,
+          error: this.options.error
+        }).bind('annotateselect', function(event, data) {
+          return widget.options.editable.setModified();
+        }).bind('annotateremove', function() {
+          return jQuery.noop();
+        });
+      },
+      turnPending: function() {
+        this.state = 'pending';
+        this.button.hallobutton('checked', false);
+        return this.button.hallobutton('disable');
+      },
+      turnOn: function() {
+        var widget,
+          _this = this;
+        this.turnPending();
+        widget = this;
+        try {
+          return this.options.editable.element.annotate('enable', function(success) {
+            if (!success) {
+              return;
+            }
+            _this.state = 'on';
+            _this.button.hallobutton('checked', true);
+            return _this.button.hallobutton('enable');
+          });
+        } catch (e) {
+          return alert(e);
+        }
+      },
+      turnOff: function() {
+        this.options.editable.element.annotate('disable');
+        this.state = 'off';
+        if (!this.button) {
+          return;
+        }
+        this.button.attr('checked', false);
+        this.button.find("label").removeClass("ui-state-clicked");
+        return this.button.button('refresh');
       }
     });
   })(jQuery);
 
   (function(jQuery) {
-    return jQuery.widget("IKS.hallolists", {
+    return jQuery.widget('IKS.halloblacklist', {
       options: {
-        editable: null,
-        toolbar: null,
-        uuid: '',
-        lists: {
-          ordered: true,
-          unordered: true
-        },
-        buttonCssClass: null
+        tags: []
       },
-      populateToolbar: function(toolbar) {
-        var buttonize, buttonset,
-          _this = this;
-        buttonset = jQuery("<span class=\"" + this.widgetName + "\"></span>");
-        buttonize = function(type, label) {
-          var buttonElement;
-          buttonElement = jQuery('<span></span>');
-          buttonElement.hallobutton({
-            uuid: _this.options.uuid,
-            editable: _this.options.editable,
-            label: label,
-            command: "insert" + type + "List",
-            icon: "icon-list-" + (label.toLowerCase()),
-            cssClass: _this.options.buttonCssClass
+      _init: function() {
+        if (this.options.tags.indexOf('br') !== -1) {
+          return this.element.bind('keydown', function(event) {
+            if (event.originalEvent.keyCode === 13) {
+              return event.preventDefault();
+            }
           });
-          return buttonset.append(buttonElement);
-        };
-        if (this.options.lists.ordered) {
-          buttonize("Ordered", "OL");
         }
-        if (this.options.lists.unordered) {
-          buttonize("Unordered", "UL");
+      },
+      cleanupContentClone: function(el) {
+        var tag, _i, _len, _ref, _results;
+        _ref = this.options.tags;
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          tag = _ref[_i];
+          _results.push(jQuery(tag, el).remove());
         }
-        buttonset.hallobuttonset();
-        return toolbar.append(buttonset);
+        return _results;
       }
     });
   })(jQuery);
 
   (function(jQuery) {
-    return jQuery.widget("IKS.halloheadings", {
+    return jQuery.widget('IKS.halloblock', {
       options: {
         editable: null,
         toolbar: null,
-        uuid: "",
-        headers: [1, 2, 3]
+        uuid: '',
+        elements: ['h1', 'h2', 'h3', 'p', 'pre', 'blockquote'],
+        buttonCssClass: null
       },
       populateToolbar: function(toolbar) {
-        var button, buttonize, buttonset, header, id, label, markup, widget, _i, _len, _ref,
+        var buttonset, contentId, target;
+        buttonset = jQuery("<span class=\"" + this.widgetName + "\"></span>");
+        contentId = "" + this.options.uuid + "-" + this.widgetName + "-data";
+        target = this._prepareDropdown(contentId);
+        toolbar.append(buttonset);
+        buttonset.hallobuttonset();
+        buttonset.append(target);
+        return buttonset.append(this._prepareButton(target));
+      },
+      _prepareDropdown: function(contentId) {
+        var addElement, containingElement, contentArea, element, _i, _len, _ref,
           _this = this;
-        widget = this;
-        buttonset = jQuery("<span class=\"" + widget.widgetName + "\"></span>");
-        id = "" + this.options.uuid + "-paragraph";
-        label = "P";
-        markup = "<input id=\"" + id + "\" type=\"radio\"        name=\"" + widget.options.uuid + "-headings\"/>        <label for=\"" + id + "\" class=\"p_button\">" + label + "</label>";
-        buttonset.append(jQuery(markup).button());
-        button = jQuery("#" + id, buttonset);
-        button.attr("hallo-command", "formatBlock");
-        button.bind("change", function(event) {
-          var cmd;
-          cmd = jQuery(this).attr("hallo-command");
-          return widget.options.editable.execute(cmd, "P");
-        });
-        buttonize = function(headerSize) {
-          var buttonMarkup;
-          label = "H" + headerSize;
-          id = "" + _this.options.uuid + "-" + headerSize;
-          buttonMarkup = "<input id=\"" + id + "\" type=\"radio\"          name=\"" + widget.options.uuid + "-headings\"/>          <label for=\"" + id + "\" class=\"h" + headerSize + "_button\">" + label + "</label>";
-          buttonset.append(jQuery(buttonMarkup).button());
-          button = jQuery("#" + id, buttonset);
-          button.attr("hallo-size", "H" + headerSize);
-          return button.bind("change", function(event) {
-            var size;
-            size = jQuery(this).attr("hallo-size");
-            return widget.options.editable.execute("formatBlock", size);
-          });
-        };
-        _ref = this.options.headers;
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          header = _ref[_i];
-          buttonize(header);
-        }
-        buttonset.buttonset();
-        this.element.bind("keyup paste change mouseup", function(event) {
-          var format, formatNumber, labelParent, matches, selectedButton;
-          try {
+        contentArea = jQuery("<div id=\"" + contentId + "\"></div>");
+        containingElement = this.options.editable.element.get(0).tagName.toLowerCase();
+        addElement = function(element) {
+          var el, events, queryState;
+          el = jQuery("<button class='blockselector'>          <" + element + " class=\"menu-item\">" + element + "</" + element + ">        </button>");
+          if (containingElement === element) {
+            el.addClass('selected');
+          }
+          if (containingElement !== 'div') {
+            el.addClass('disabled');
+          }
+          el.bind('click', function() {
+            var tagName;
+            tagName = element.toUpperCase();
+            if (el.hasClass('disabled')) {
+              return;
+            }
+            if (jQuery.browser.msie) {
+              _this.options.editable.execute('FormatBlock', "<" + tagName + ">");
+              return;
+            }
+            return _this.options.editable.execute('formatBlock', tagName);
+          });
+          queryState = function(event) {
+            var block;
+            block = document.queryCommandValue('formatBlock');
+            if (block.toLowerCase() === element) {
+              el.addClass('selected');
+              return;
+            }
+            return el.removeClass('selected');
+          };
+          events = 'keyup paste change mouseup';
+          _this.options.editable.element.bind(events, queryState);
+          _this.options.editable.element.bind('halloenabled', function() {
+            return _this.options.editable.element.bind(events, queryState);
+          });
+          _this.options.editable.element.bind('hallodisabled', function() {
+            return _this.options.editable.element.unbind(events, queryState);
+          });
+          return el;
+        };
+        _ref = this.options.elements;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          element = _ref[_i];
+          contentArea.append(addElement(element));
+        }
+        return contentArea;
+      },
+      _prepareButton: function(target) {
+        var buttonElement;
+        buttonElement = jQuery('<span></span>');
+        buttonElement.hallodropdownbutton({
+          uuid: this.options.uuid,
+          editable: this.options.editable,
+          label: 'block',
+          icon: 'icon-text-height',
+          target: target,
+          cssClass: this.options.buttonCssClass
+        });
+        return buttonElement;
+      }
+    });
+  })(jQuery);
+
+  (function(jQuery) {
+    return jQuery.widget("IKS.halloformat", {
+      options: {
+        editable: null,
+        uuid: '',
+        formattings: {
+          bold: true,
+          italic: true,
+          strikeThrough: false,
+          underline: false
+        },
+        buttonCssClass: null
+      },
+      populateToolbar: function(toolbar) {
+        var buttonize, buttonset, enabled, format, widget, _ref,
+          _this = this;
+        widget = this;
+        buttonset = jQuery("<span class=\"" + widget.widgetName + "\"></span>");
+        buttonize = function(format) {
+          var buttonHolder;
+          buttonHolder = jQuery('<span></span>');
+          buttonHolder.hallobutton({
+            label: format,
+            editable: _this.options.editable,
+            command: format,
+            uuid: _this.options.uuid,
+            cssClass: _this.options.buttonCssClass
+          });
+          return buttonset.append(buttonHolder);
+        };
+        _ref = this.options.formattings;
+        for (format in _ref) {
+          enabled = _ref[format];
+          if (!enabled) {
+            continue;
+          }
+          buttonize(format);
+        }
+        buttonset.hallobuttonset();
+        return toolbar.append(buttonset);
+      }
+    });
+  })(jQuery);
+
+  (function(jQuery) {
+    return jQuery.widget("IKS.halloheadings", {
+      options: {
+        editable: null,
+        toolbar: null,
+        uuid: "",
+        headers: [1, 2, 3]
+      },
+      populateToolbar: function(toolbar) {
+        var button, buttonize, buttonset, header, id, label, markup, widget, _i, _len, _ref,
+          _this = this;
+        widget = this;
+        buttonset = jQuery("<span class=\"" + widget.widgetName + "\"></span>");
+        id = "" + this.options.uuid + "-paragraph";
+        label = "P";
+        markup = "<input id=\"" + id + "\" type=\"radio\"        name=\"" + widget.options.uuid + "-headings\"/>        <label for=\"" + id + "\" class=\"p_button\">" + label + "</label>";
+        buttonset.append(jQuery(markup).button());
+        button = jQuery("#" + id, buttonset);
+        button.attr("hallo-command", "formatBlock");
+        button.bind("change", function(event) {
+          var cmd;
+          cmd = jQuery(this).attr("hallo-command");
+          return widget.options.editable.execute(cmd, "P");
+        });
+        buttonize = function(headerSize) {
+          var buttonMarkup;
+          label = "H" + headerSize;
+          id = "" + _this.options.uuid + "-" + headerSize;
+          buttonMarkup = "<input id=\"" + id + "\" type=\"radio\"          name=\"" + widget.options.uuid + "-headings\"/>          <label for=\"" + id + "\" class=\"h" + headerSize + "_button\">" + label + "</label>";
+          buttonset.append(jQuery(buttonMarkup).button());
+          button = jQuery("#" + id, buttonset);
+          button.attr("hallo-size", "H" + headerSize);
+          return button.bind("change", function(event) {
+            var size;
+            size = jQuery(this).attr("hallo-size");
+            return widget.options.editable.execute("formatBlock", size);
+          });
+        };
+        _ref = this.options.headers;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          header = _ref[_i];
+          buttonize(header);
+        }
+        buttonset.buttonset();
+        this.element.bind("keyup paste change mouseup", function(event) {
+          var format, formatNumber, labelParent, matches, selectedButton;
+          try {
             format = document.queryCommandValue("formatBlock").toUpperCase();
           } catch (e) {
             format = '';
@@ -587,99 +773,6 @@ http://hallojs.org
     });
   })(jQuery);
 
-  (function(jQuery) {
-    return jQuery.widget("Liip.hallooverlay", {
-      options: {
-        editable: null,
-        toolbar: null,
-        uuid: "",
-        overlay: null,
-        padding: 10,
-        background: null
-      },
-      _create: function() {
-        var widget;
-        widget = this;
-        if (!this.options.bound) {
-          this.options.bound = true;
-          this.options.editable.element.bind("halloactivated", function(event, data) {
-            widget.options.currentEditable = jQuery(event.target);
-            if (!widget.options.visible) {
-              return widget.showOverlay();
-            }
-          });
-          this.options.editable.element.bind("hallomodified", function(event, data) {
-            widget.options.currentEditable = jQuery(event.target);
-            if (widget.options.visible) {
-              return widget.resizeOverlay();
-            }
-          });
-          return this.options.editable.element.bind("hallodeactivated", function(event, data) {
-            widget.options.currentEditable = jQuery(event.target);
-            if (widget.options.visible) {
-              return widget.hideOverlay();
-            }
-          });
-        }
-      },
-      showOverlay: function() {
-        this.options.visible = true;
-        if (this.options.overlay === null) {
-          if (jQuery("#halloOverlay").length > 0) {
-            this.options.overlay = jQuery("#halloOverlay");
-          } else {
-            this.options.overlay = jQuery("<div id=\"halloOverlay\"            class=\"halloOverlay\">");
-            jQuery(document.body).append(this.options.overlay);
-          }
-          this.options.overlay.bind('click', jQuery.proxy(this.options.editable.turnOff, this.options.editable));
-        }
-        this.options.overlay.show();
-        if (this.options.background === null) {
-          if (jQuery("#halloBackground").length > 0) {
-            this.options.background = jQuery("#halloBackground");
-          } else {
-            this.options.background = jQuery("<div id=\"halloBackground\"            class=\"halloBackground\">");
-            jQuery(document.body).append(this.options.background);
-          }
-        }
-        this.resizeOverlay();
-        this.options.background.show();
-        if (!this.options.originalZIndex) {
-          this.options.originalZIndex = this.options.currentEditable.css("z-index");
-        }
-        return this.options.currentEditable.css('z-index', '350');
-      },
-      resizeOverlay: function() {
-        var offset;
-        offset = this.options.currentEditable.offset();
-        return this.options.background.css({
-          top: offset.top - this.options.padding,
-          left: offset.left - this.options.padding,
-          width: this.options.currentEditable.width() + 2 * this.options.padding,
-          height: this.options.currentEditable.height() + 2 * this.options.padding
-        });
-      },
-      hideOverlay: function() {
-        this.options.visible = false;
-        this.options.overlay.hide();
-        this.options.background.hide();
-        return this.options.currentEditable.css('z-index', this.options.originalZIndex);
-      },
-      _findBackgroundColor: function(jQueryfield) {
-        var color;
-        color = jQueryfield.css("background-color");
-        if (color !== 'rgba(0, 0, 0, 0)' && color !== 'transparent') {
-          return color;
-        }
-        if (jQueryfield.is("body")) {
-          return "white";
-        } else {
-          return this._findBackgroundColor(jQueryfield.parent());
-        }
-      }
-    });
-  })(jQuery);
-
   (function(jQuery) {
     return jQuery.widget('IKS.halloimagecurrent', {
       options: {
@@ -698,9 +791,6 @@ http://hallojs.org
             </div>\
             <img src="" class="activeImage activeImageBg" />\
           </div>\
-          <div class="metadata" style="display: none;">\
-            <input type="text" class="caption" name="caption" />\
-          </div>\
         </div>');
         this.element.hide();
         return this._prepareDnD();
@@ -710,7 +800,6 @@ http://hallojs.org
         editable = jQuery(this.options.editable.element);
         widget = this;
         jQuery('img', editable).each(function(index, elem) {
-          elem.contentEditable = false;
           return widget._initDraggable(elem, editable);
         });
         return jQuery('p', editable).each(function(index, elem) {
@@ -767,7 +856,6 @@ http://hallojs.org
         jQuery('.activeImage', this.element).attr('src', image.url);
         if (image.label) {
           jQuery('input', this.element).val(image.label);
-          jQuery('.metadata', this.element).show();
         }
         return this._initImage(jQuery(this.options.editable.element));
       },
@@ -791,34 +879,15 @@ http://hallojs.org
         }
       },
       _createInsertElement: function(image, tmp) {
-        var imageInsert, maxHeight, maxWidth, tmpImg;
+        var imageInsert, tmpImg;
         imageInsert = jQuery('<img>');
         tmpImg = new Image();
-        maxWidth = this.options.maxWidth;
-        maxHeight = this.options.maxHeight;
-        jQuery(tmpImg).bind('load', function() {
-          var height, ratio, width;
-          width = tmpImg.width;
-          height = tmpImg.height;
-          if (width > maxWidth || height > maxHeight) {
-            if (width > height) {
-              ratio = (tmpImg.width / maxWidth).toFixed();
-            } else {
-              ratio = (tmpImg.height / maxHeight).toFixed();
-            }
-            width = (tmpImg.width / ratio).toFixed();
-            height = (tmpImg.height / ratio).toFixed();
-          }
-          return imageInsert.attr({
-            width: width,
-            height: height
-          });
-        });
+        jQuery(tmpImg).bind('load', function() {});
         tmpImg.src = image.src;
         imageInsert.attr({
           src: tmpImg.src,
           alt: !tmp ? jQuery(image).attr('alt') : void 0,
-          "class": tmp ? 'halloTmp' : ''
+          "class": tmp ? 'halloTmp' : 'imageInText'
         });
         imageInsert.show();
         return imageInsert;
@@ -827,6 +896,9 @@ http://hallojs.org
         return jQuery('<div/>').addClass('halloTmpLine');
       },
       _removeFeedbackElements: function() {
+        this.overlay.big.remove();
+        this.overlay.left.remove();
+        this.overlay.right.remove();
         return jQuery('.halloTmp, .halloTmpLine', this.options.editable.element).remove();
       },
       _removeCustomHelper: function() {
@@ -896,9 +968,9 @@ http://hallojs.org
           window.waitWithTrash = clearTimeout(window.waitWithTrash);
           position = widget._calcDropPosition(widget.options.offset, event);
           jQuery('.trashcan', ui.helper).remove();
-          editable.append(widget.overlay.big);
-          editable.append(widget.overlay.left);
-          editable.append(widget.overlay.right);
+          editable[0].element.append(widget.overlay.big);
+          editable[0].element.append(widget.overlay.left);
+          editable[0].element.append(widget.overlay.right);
           widget._removeFeedbackElements();
           target = jQuery(event.target);
           target.prepend(widget._createFeedback(ui.draggable[0], position));
@@ -1052,82 +1124,6 @@ http://hallojs.org
     });
   })(jQuery);
 
-  (function(jQuery) {
-    return jQuery.widget('IKS.halloimageupload', {
-      options: {
-        uploadCallback: null,
-        uploadUrl: null,
-        imageWidget: null,
-        entity: null
-      },
-      _create: function() {
-        return this.element.html('\
-        <form class="upload">\
-          <input type="file" class="file" name="userfile" accept="image/*" />\
-          <input type="hidden" name="tags" value="" />\
-          <button class="uploadSubmit">Upload</button>\
-        </form>\
-      ');
-      },
-      _init: function() {
-        var widget;
-        widget = this;
-        if (widget.options.uploadUrl && !widget.options.uploadCallback) {
-          widget.options.uploadCallback = widget._iframeUpload;
-        }
-        return jQuery('.uploadSubmit', this.element).bind('click', function(event) {
-          event.preventDefault();
-          event.stopPropagation();
-          return widget.options.uploadCallback({
-            widget: widget,
-            success: function(url) {
-              return widget.options.imageWidget.setCurrent({
-                url: url,
-                label: ''
-              });
-            }
-          });
-        });
-      },
-      _prepareIframe: function(widget) {
-        var iframe, iframeName;
-        iframeName = "" + widget.widgetName + "_postframe_" + widget.options.uuid;
-        iframeName = iframeName.replace(/-/g, '_');
-        iframe = jQuery("#" + iframeName);
-        if (iframe.length) {
-          return iframe;
-        }
-        iframe = jQuery("<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\"        class=\"hidden\" style=\"display:none\" />");
-        this.element.append(iframe);
-        iframe.get(0).name = iframeName;
-        return iframe;
-      },
-      _iframeUpload: function(data) {
-        var iframe, uploadForm, uploadUrl, widget;
-        widget = data.widget;
-        iframe = widget._prepareIframe(widget);
-        uploadForm = jQuery('form.upload', widget.element);
-        if (typeof widget.options.uploadUrl === 'function') {
-          uploadUrl = widget.options.uploadUrl(widget.options.entity);
-        } else {
-          uploadUrl = widget.options.uploadUrl;
-        }
-        iframe.bind('load', function() {
-          var imageUrl;
-          imageUrl = iframe.get(0).contentWindow.location.href;
-          widget.element.hide();
-          return data.success(imageUrl);
-        });
-        uploadForm.attr('action', uploadUrl);
-        uploadForm.attr('method', 'post');
-        uploadForm.attr('target', iframe.get(0).name);
-        uploadForm.attr('enctype', 'multipart/form-data');
-        uploadForm.attr('encoding', 'multipart/form-data');
-        return uploadForm.submit();
-      }
-    });
-  })(jQuery);
-
   (function(jQuery) {
     return jQuery.widget('IKS.halloimagesearch', {
       options: {
@@ -1139,7 +1135,7 @@ http://hallojs.org
       _create: function() {
         return this.element.html('<div>\
         <form method="get">\
-          <input type="text" class="searchInput" />\
+          <input type="text" class="searchInput" placeholder="Search" />\
           <input type="submit" class="btn searchButton" value="OK" />\
         </form>\
         <div class="searchResults imageThumbnailContainer">\
@@ -1353,251 +1349,137 @@ http://hallojs.org
   })(jQuery);
 
   (function(jQuery) {
-    return jQuery.widget("Liip.hallotoolbarlinebreak", {
+    return jQuery.widget('IKS.halloimageupload', {
       options: {
-        editable: null,
-        uuid: "",
-        breakAfter: []
+        uploadCallback: null,
+        uploadUrl: null,
+        imageWidget: null,
+        entity: null
       },
-      populateToolbar: function(toolbar) {
-        var buttonRow, buttonset, buttonsets, queuedButtonsets, row, rowcounter, _i, _j, _len, _len1, _ref;
-        buttonsets = jQuery('.ui-buttonset', toolbar);
-        queuedButtonsets = jQuery();
-        rowcounter = 0;
-        _ref = this.options.breakAfter;
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          row = _ref[_i];
-          rowcounter++;
-          buttonRow = "<div          class=\"halloButtonrow halloButtonrow-" + rowcounter + "\" />";
-          for (_j = 0, _len1 = buttonsets.length; _j < _len1; _j++) {
-            buttonset = buttonsets[_j];
-            queuedButtonsets = jQuery(queuedButtonsets).add(jQuery(buttonset));
-            if (jQuery(buttonset).hasClass(row)) {
-              queuedButtonsets.wrapAll(buttonRow);
-              buttonsets = buttonsets.not(queuedButtonsets);
-              queuedButtonsets = jQuery();
-              break;
+      _create: function() {
+        return this.element.html('\
+        <form class="upload">\
+        <input type="file" class="file" name="userfile" accept="image/*" />\
+        <input type="hidden" name="tags" value="" />\
+        <input type="text" class="caption" name="caption" placeholder="Title" />\
+        <button class="uploadSubmit">Upload</button>\
+        </form>\
+      ');
+      },
+      _init: function() {
+        var widget;
+        widget = this;
+        if (widget.options.uploadUrl && !widget.options.uploadCallback) {
+          widget.options.uploadCallback = widget._iframeUpload;
+        }
+        return jQuery('.uploadSubmit', this.element).bind('click', function(event) {
+          event.preventDefault();
+          event.stopPropagation();
+          return widget.options.uploadCallback({
+            widget: widget,
+            success: function(url) {
+              return widget.options.imageWidget.setCurrent({
+                url: url,
+                label: ''
+              });
             }
-          }
+          });
+        });
+      },
+      _prepareIframe: function(widget) {
+        var iframe, iframeName;
+        iframeName = "" + widget.widgetName + "_postframe_" + widget.options.uuid;
+        iframeName = iframeName.replace(/-/g, '_');
+        iframe = jQuery("#" + iframeName);
+        if (iframe.length) {
+          return iframe;
         }
-        if (buttonsets.length > 0) {
-          rowcounter++;
-          buttonRow = "<div          class=\"halloButtonrow halloButtonrow-" + rowcounter + "\" />";
-          return buttonsets.wrapAll(buttonRow);
+        iframe = jQuery("<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\"        class=\"hidden\" style=\"display:none\" />");
+        this.element.append(iframe);
+        iframe.get(0).name = iframeName;
+        return iframe;
+      },
+      _iframeUpload: function(data) {
+        var iframe, uploadForm, uploadUrl, widget;
+        widget = data.widget;
+        iframe = widget._prepareIframe(widget);
+        uploadForm = jQuery('form.upload', widget.element);
+        if (typeof widget.options.uploadUrl === 'function') {
+          uploadUrl = widget.options.uploadUrl(widget.options.entity);
+        } else {
+          uploadUrl = widget.options.uploadUrl;
         }
+        iframe.bind('load', function() {
+          var imageUrl;
+          imageUrl = iframe.get(0).contentWindow.location.href;
+          widget.element.hide();
+          return data.success(imageUrl);
+        });
+        uploadForm.attr('action', uploadUrl);
+        uploadForm.attr('method', 'post');
+        uploadForm.attr('target', iframe.get(0).name);
+        uploadForm.attr('enctype', 'multipart/form-data');
+        uploadForm.attr('encoding', 'multipart/form-data');
+        return uploadForm.submit();
       }
     });
   })(jQuery);
 
   (function(jQuery) {
-    var z;
-    z = null;
-    if (this.VIE !== void 0) {
-      z = new VIE;
-      z.use(new z.StanbolService({
-        proxyDisabled: true,
-        url: 'http://dev.iks-project.eu:8081'
-      }));
-    }
-    return jQuery.widget('IKS.halloannotate', {
+    return jQuery.widget("Liip.halloimage", {
       options: {
-        vie: z,
         editable: null,
         toolbar: null,
-        uuid: '',
-        select: function() {},
-        decline: function() {},
-        remove: function() {},
-        buttonCssClass: null
+        uuid: "",
+        limit: 8,
+        search: null,
+        searchUrl: null,
+        suggestions: null,
+        loaded: null,
+        upload: null,
+        uploadUrl: null,
+        dialogOpts: {
+          autoOpen: false,
+          width: 270,
+          height: "auto",
+          title: "Insert Images",
+          modal: false,
+          resizable: false,
+          draggable: true,
+          dialogClass: 'halloimage-dialog'
+        },
+        dialog: null,
+        buttonCssClass: null,
+        entity: null,
+        vie: null,
+        dbPediaUrl: "http://dev.iks-project.eu/stanbolfull",
+        maxWidth: 250,
+        maxHeight: 250
       },
-      _create: function() {
-        var editableElement, turnOffAnnotate, widget;
+      populateToolbar: function(toolbar) {
+        var buttonHolder, buttonset, dialogId, id, tabContent, tabs, widget;
+        this.options.toolbar = toolbar;
         widget = this;
-        if (this.options.vie === void 0) {
-          throw new Error('The halloannotate plugin requires VIE');
-          return;
+        dialogId = "" + this.options.uuid + "-image-dialog";
+        this.options.dialog = jQuery("<div id=\"" + dialogId + "\">        <div class=\"nav\">          <ul class=\"tabs\">          </ul>          <div id=\"" + this.options.uuid + "-tab-activeIndicator\"            class=\"tab-activeIndicator\" />        </div>        <div class=\"dialogcontent\">        </div>");
+        tabs = jQuery('.tabs', this.options.dialog);
+        tabContent = jQuery('.dialogcontent', this.options.dialog);
+        if (widget.options.suggestions) {
+          this._addGuiTabSuggestions(tabs, tabContent);
         }
-        if (typeof this.element.annotate !== 'function') {
-          throw new Error('The halloannotate plugin requires annotate.js');
-          return;
+        if (widget.options.search || widget.options.searchUrl) {
+          this._addGuiTabSearch(tabs, tabContent);
         }
-        this.state = 'off';
-        this.instantiate();
-        turnOffAnnotate = function() {
-          var editable;
-          editable = this;
-          return jQuery(editable).halloannotate('turnOff');
-        };
-        editableElement = this.options.editable.element;
-        return editableElement.bind('hallodisabled', turnOffAnnotate);
-      },
-      populateToolbar: function(toolbar) {
-        var buttonHolder,
-          _this = this;
-        buttonHolder = jQuery("<span class=\"" + this.widgetName + "\"></span>");
-        this.button = buttonHolder.hallobutton({
-          label: 'Annotate',
-          icon: 'icon-tags',
-          editable: this.options.editable,
-          command: null,
+        if (widget.options.upload || widget.options.uploadUrl) {
+          this._addGuiTabUpload(tabs, tabContent);
+        }
+        this.current = jQuery('<div class="currentImage"></div>').halloimagecurrent({
           uuid: this.options.uuid,
-          cssClass: this.options.buttonCssClass,
-          queryState: false
-        });
-        buttonHolder.bind('change', function(event) {
-          if (_this.state === "pending") {
-            return;
-          }
-          if (_this.state === "off") {
-            return _this.turnOn();
-          }
-          return _this.turnOff();
-        });
-        buttonHolder.buttonset();
-        return toolbar.append(this.button);
-      },
-      cleanupContentClone: function(el) {
-        if (this.state === 'on') {
-          return el.find(".entity:not([about])").each(function() {
-            return jQuery(this).replaceWith(jQuery(this).html());
-          });
-        }
-      },
-      instantiate: function() {
-        var widget;
-        widget = this;
-        return this.options.editable.element.annotate({
-          vie: this.options.vie,
-          debug: false,
-          showTooltip: true,
-          select: this.options.select,
-          remove: this.options.remove,
-          success: this.options.success,
-          error: this.options.error
-        }).bind('annotateselect', function(event, data) {
-          return widget.options.editable.setModified();
-        }).bind('annotateremove', function() {
-          return jQuery.noop();
-        });
-      },
-      turnPending: function() {
-        this.state = 'pending';
-        this.button.hallobutton('checked', false);
-        return this.button.hallobutton('disable');
-      },
-      turnOn: function() {
-        var widget,
-          _this = this;
-        this.turnPending();
-        widget = this;
-        try {
-          return this.options.editable.element.annotate('enable', function(success) {
-            if (!success) {
-              return;
-            }
-            _this.state = 'on';
-            _this.button.hallobutton('checked', true);
-            return _this.button.hallobutton('enable');
-          });
-        } catch (e) {
-          return alert(e);
-        }
-      },
-      turnOff: function() {
-        this.options.editable.element.annotate('disable');
-        this.state = 'off';
-        if (!this.button) {
-          return;
-        }
-        this.button.attr('checked', false);
-        this.button.find("label").removeClass("ui-state-clicked");
-        return this.button.button('refresh');
-      }
-    });
-  })(jQuery);
-
-  (function(jQuery) {
-    return jQuery.widget('IKS.halloblacklist', {
-      options: {
-        tags: []
-      },
-      _init: function() {
-        if (this.options.tags.indexOf('br') !== -1) {
-          return this.element.bind('keydown', function(event) {
-            if (event.originalEvent.keyCode === 13) {
-              return event.preventDefault();
-            }
-          });
-        }
-      },
-      cleanupContentClone: function(el) {
-        var tag, _i, _len, _ref, _results;
-        _ref = this.options.tags;
-        _results = [];
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          tag = _ref[_i];
-          _results.push(jQuery(tag, el).remove());
-        }
-        return _results;
-      }
-    });
-  })(jQuery);
-
-  (function(jQuery) {
-    return jQuery.widget("Liip.halloimage", {
-      options: {
-        editable: null,
-        toolbar: null,
-        uuid: "",
-        limit: 8,
-        search: null,
-        searchUrl: null,
-        suggestions: null,
-        loaded: null,
-        upload: null,
-        uploadUrl: null,
-        dialogOpts: {
-          autoOpen: false,
-          width: 270,
-          height: "auto",
-          title: "Insert Images",
-          modal: false,
-          resizable: false,
-          draggable: true,
-          dialogClass: 'halloimage-dialog'
-        },
-        dialog: null,
-        buttonCssClass: null,
-        entity: null,
-        vie: null,
-        dbPediaUrl: "http://dev.iks-project.eu/stanbolfull",
-        maxWidth: 250,
-        maxHeight: 250
-      },
-      populateToolbar: function(toolbar) {
-        var buttonHolder, buttonset, dialogId, id, tabContent, tabs, widget;
-        this.options.toolbar = toolbar;
-        widget = this;
-        dialogId = "" + this.options.uuid + "-image-dialog";
-        this.options.dialog = jQuery("<div id=\"" + dialogId + "\">        <div class=\"nav\">          <ul class=\"tabs\">          </ul>          <div id=\"" + this.options.uuid + "-tab-activeIndicator\"            class=\"tab-activeIndicator\" />        </div>        <div class=\"dialogcontent\">        </div>");
-        tabs = jQuery('.tabs', this.options.dialog);
-        tabContent = jQuery('.dialogcontent', this.options.dialog);
-        if (widget.options.suggestions) {
-          this._addGuiTabSuggestions(tabs, tabContent);
-        }
-        if (widget.options.search || widget.options.searchUrl) {
-          this._addGuiTabSearch(tabs, tabContent);
-        }
-        if (widget.options.upload || widget.options.uploadUrl) {
-          this._addGuiTabUpload(tabs, tabContent);
-        }
-        this.current = jQuery('<div class="currentImage"></div>').halloimagecurrent({
-          uuid: this.options.uuid,
-          imageWidget: this,
-          editable: this.options.editable,
-          dialog: this.options.dialog,
-          maxWidth: this.options.maxWidth,
-          maxHeight: this.options.maxHeight
+          imageWidget: this,
+          editable: this.options.editable,
+          dialog: this.options.dialog,
+          maxWidth: this.options.maxWidth,
+          maxHeight: this.options.maxHeight
         });
         jQuery('.dialogcontent', this.options.dialog).append(this.current);
         buttonset = jQuery("<span class=\"" + widget.widgetName + "\"></span>");
@@ -1760,51 +1642,65 @@ http://hallojs.org
   })(jQuery);
 
   (function(jQuery) {
-    return jQuery.widget("IKS.halloformat", {
+    return jQuery.widget('IKS.halloindicator', {
       options: {
         editable: null,
-        uuid: '',
-        formattings: {
-          bold: true,
-          italic: true,
-          strikeThrough: false,
-          underline: false
-        },
-        buttonCssClass: null
+        className: 'halloEditIndicator'
       },
-      populateToolbar: function(toolbar) {
-        var buttonize, buttonset, enabled, format, widget, _ref,
-          _this = this;
-        widget = this;
-        buttonset = jQuery("<span class=\"" + widget.widgetName + "\"></span>");
-        buttonize = function(format) {
-          var buttonHolder;
-          buttonHolder = jQuery('<span></span>');
-          buttonHolder.hallobutton({
-            label: format,
-            editable: _this.options.editable,
-            command: format,
-            uuid: _this.options.uuid,
-            cssClass: _this.options.buttonCssClass
-          });
-          return buttonset.append(buttonHolder);
-        };
-        _ref = this.options.formattings;
-        for (format in _ref) {
-          enabled = _ref[format];
-          if (!enabled) {
-            continue;
+      _create: function() {
+        var _this = this;
+        return this.element.bind('halloenabled', function() {
+          return _this.buildIndicator();
+        });
+      },
+      populateToolbar: function() {},
+      buildIndicator: function() {
+        var editButton;
+        editButton = jQuery('<div><i class="icon-edit"></i> Edit</div>');
+        editButton.addClass(this.options.className);
+        editButton.hide();
+        this.element.before(editButton);
+        this.bindIndicator(editButton);
+        return this.setIndicatorPosition(editButton);
+      },
+      bindIndicator: function(indicator) {
+        var _this = this;
+        indicator.bind('click', function() {
+          return _this.options.editable.element.focus();
+        });
+        this.element.bind('halloactivated', function() {
+          return indicator.hide();
+        });
+        this.element.bind('hallodisabled', function() {
+          return indicator.remove();
+        });
+        return this.options.editable.element.hover(function() {
+          if (jQuery(this).hasClass('inEditMode')) {
+            return;
           }
-          buttonize(format);
-        }
-        buttonset.hallobuttonset();
-        return toolbar.append(buttonset);
+          return indicator.show();
+        }, function(data) {
+          if (jQuery(this).hasClass('inEditMode')) {
+            return;
+          }
+          if (data.relatedTarget === indicator.get(0)) {
+            return;
+          }
+          return indicator.hide();
+        });
+      },
+      setIndicatorPosition: function(indicator) {
+        var offset;
+        indicator.css('position', 'absolute');
+        offset = this.element.position();
+        indicator.css('top', offset.top + 2);
+        return indicator.css('left', offset.left + 2);
       }
     });
   })(jQuery);
 
   (function(jQuery) {
-    return jQuery.widget("IKS.halloreundo", {
+    return jQuery.widget("IKS.hallojustify", {
       options: {
         editable: null,
         toolbar: null,
@@ -1815,22 +1711,22 @@ http://hallojs.org
         var buttonize, buttonset,
           _this = this;
         buttonset = jQuery("<span class=\"" + this.widgetName + "\"></span>");
-        buttonize = function(cmd, label) {
+        buttonize = function(alignment) {
           var buttonElement;
           buttonElement = jQuery('<span></span>');
           buttonElement.hallobutton({
             uuid: _this.options.uuid,
             editable: _this.options.editable,
-            label: label,
-            icon: cmd === 'undo' ? 'icon-undo' : 'icon-repeat',
-            command: cmd,
-            queryState: false,
+            label: alignment,
+            command: "justify" + alignment,
+            icon: "icon-align-" + (alignment.toLowerCase()),
             cssClass: _this.options.buttonCssClass
           });
           return buttonset.append(buttonElement);
         };
-        buttonize("undo", "Undo");
-        buttonize("redo", "Redo");
+        buttonize("Left");
+        buttonize("Center");
+        buttonize("Right");
         buttonset.hallobuttonset();
         return toolbar.append(buttonset);
       }
@@ -1838,94 +1734,7 @@ http://hallojs.org
   })(jQuery);
 
   (function(jQuery) {
-    return jQuery.widget('IKS.halloblock', {
-      options: {
-        editable: null,
-        toolbar: null,
-        uuid: '',
-        elements: ['h1', 'h2', 'h3', 'p', 'pre', 'blockquote'],
-        buttonCssClass: null
-      },
-      populateToolbar: function(toolbar) {
-        var buttonset, contentId, target;
-        buttonset = jQuery("<span class=\"" + this.widgetName + "\"></span>");
-        contentId = "" + this.options.uuid + "-" + this.widgetName + "-data";
-        target = this._prepareDropdown(contentId);
-        toolbar.append(buttonset);
-        buttonset.hallobuttonset();
-        buttonset.append(target);
-        return buttonset.append(this._prepareButton(target));
-      },
-      _prepareDropdown: function(contentId) {
-        var addElement, containingElement, contentArea, element, _i, _len, _ref,
-          _this = this;
-        contentArea = jQuery("<div id=\"" + contentId + "\"></div>");
-        containingElement = this.options.editable.element.get(0).tagName.toLowerCase();
-        addElement = function(element) {
-          var el, events, queryState;
-          el = jQuery("<button class='blockselector'>          <" + element + " class=\"menu-item\">" + element + "</" + element + ">        </button>");
-          if (containingElement === element) {
-            el.addClass('selected');
-          }
-          if (containingElement !== 'div') {
-            el.addClass('disabled');
-          }
-          el.bind('click', function() {
-            var tagName;
-            tagName = element.toUpperCase();
-            if (el.hasClass('disabled')) {
-              return;
-            }
-            if (jQuery.browser.msie) {
-              _this.options.editable.execute('FormatBlock', "<" + tagName + ">");
-              return;
-            }
-            return _this.options.editable.execute('formatBlock', tagName);
-          });
-          queryState = function(event) {
-            var block;
-            block = document.queryCommandValue('formatBlock');
-            if (block.toLowerCase() === element) {
-              el.addClass('selected');
-              return;
-            }
-            return el.removeClass('selected');
-          };
-          events = 'keyup paste change mouseup';
-          _this.options.editable.element.bind(events, queryState);
-          _this.options.editable.element.bind('halloenabled', function() {
-            return _this.options.editable.element.bind(events, queryState);
-          });
-          _this.options.editable.element.bind('hallodisabled', function() {
-            return _this.options.editable.element.unbind(events, queryState);
-          });
-          return el;
-        };
-        _ref = this.options.elements;
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          element = _ref[_i];
-          contentArea.append(addElement(element));
-        }
-        return contentArea;
-      },
-      _prepareButton: function(target) {
-        var buttonElement;
-        buttonElement = jQuery('<span></span>');
-        buttonElement.hallodropdownbutton({
-          uuid: this.options.uuid,
-          editable: this.options.editable,
-          label: 'block',
-          icon: 'icon-text-height',
-          target: target,
-          cssClass: this.options.buttonCssClass
-        });
-        return buttonElement;
-      }
-    });
-  })(jQuery);
-
-  (function(jQuery) {
-    return jQuery.widget("IKS.hallolink", {
+    return jQuery.widget("IKS.hallolink", {
       options: {
         editable: null,
         uuid: "",
@@ -2055,35 +1864,384 @@ http://hallojs.org
   })(jQuery);
 
   (function(jQuery) {
-    return jQuery.widget("IKS.hallojustify", {
+    return jQuery.widget("IKS.hallolists", {
+      options: {
+        editable: null,
+        toolbar: null,
+        uuid: '',
+        lists: {
+          ordered: true,
+          unordered: true
+        },
+        buttonCssClass: null
+      },
+      populateToolbar: function(toolbar) {
+        var buttonize, buttonset,
+          _this = this;
+        buttonset = jQuery("<span class=\"" + this.widgetName + "\"></span>");
+        buttonize = function(type, label) {
+          var buttonElement;
+          buttonElement = jQuery('<span></span>');
+          buttonElement.hallobutton({
+            uuid: _this.options.uuid,
+            editable: _this.options.editable,
+            label: label,
+            command: "insert" + type + "List",
+            icon: "icon-list-" + (label.toLowerCase()),
+            cssClass: _this.options.buttonCssClass
+          });
+          return buttonset.append(buttonElement);
+        };
+        if (this.options.lists.ordered) {
+          buttonize("Ordered", "OL");
+        }
+        if (this.options.lists.unordered) {
+          buttonize("Unordered", "UL");
+        }
+        buttonset.hallobuttonset();
+        return toolbar.append(buttonset);
+      }
+    });
+  })(jQuery);
+
+  (function(jQuery) {
+    return jQuery.widget("Liip.hallooverlay", {
+      options: {
+        editable: null,
+        toolbar: null,
+        uuid: "",
+        overlay: null,
+        padding: 10,
+        background: null
+      },
+      _create: function() {
+        var widget;
+        widget = this;
+        if (!this.options.bound) {
+          this.options.bound = true;
+          this.options.editable.element.bind("halloactivated", function(event, data) {
+            widget.options.currentEditable = jQuery(event.target);
+            if (!widget.options.visible) {
+              return widget.showOverlay();
+            }
+          });
+          this.options.editable.element.bind("hallomodified", function(event, data) {
+            widget.options.currentEditable = jQuery(event.target);
+            if (widget.options.visible) {
+              return widget.resizeOverlay();
+            }
+          });
+          return this.options.editable.element.bind("hallodeactivated", function(event, data) {
+            widget.options.currentEditable = jQuery(event.target);
+            if (widget.options.visible) {
+              return widget.hideOverlay();
+            }
+          });
+        }
+      },
+      showOverlay: function() {
+        this.options.visible = true;
+        if (this.options.overlay === null) {
+          if (jQuery("#halloOverlay").length > 0) {
+            this.options.overlay = jQuery("#halloOverlay");
+          } else {
+            this.options.overlay = jQuery("<div id=\"halloOverlay\"            class=\"halloOverlay\">");
+            jQuery(document.body).append(this.options.overlay);
+          }
+          this.options.overlay.bind('click', jQuery.proxy(this.options.editable.turnOff, this.options.editable));
+        }
+        this.options.overlay.show();
+        if (this.options.background === null) {
+          if (jQuery("#halloBackground").length > 0) {
+            this.options.background = jQuery("#halloBackground");
+          } else {
+            this.options.background = jQuery("<div id=\"halloBackground\"            class=\"halloBackground\">");
+            jQuery(document.body).append(this.options.background);
+          }
+        }
+        this.resizeOverlay();
+        this.options.background.show();
+        if (!this.options.originalZIndex) {
+          this.options.originalZIndex = this.options.currentEditable.css("z-index");
+        }
+        return this.options.currentEditable.css('z-index', '350');
+      },
+      resizeOverlay: function() {
+        var offset;
+        offset = this.options.currentEditable.offset();
+        return this.options.background.css({
+          top: offset.top - this.options.padding,
+          left: offset.left - this.options.padding,
+          width: this.options.currentEditable.width() + 2 * this.options.padding,
+          height: this.options.currentEditable.height() + 2 * this.options.padding
+        });
+      },
+      hideOverlay: function() {
+        this.options.visible = false;
+        this.options.overlay.hide();
+        this.options.background.hide();
+        return this.options.currentEditable.css('z-index', this.options.originalZIndex);
+      },
+      _findBackgroundColor: function(jQueryfield) {
+        var color;
+        color = jQueryfield.css("background-color");
+        if (color !== 'rgba(0, 0, 0, 0)' && color !== 'transparent') {
+          return color;
+        }
+        if (jQueryfield.is("body")) {
+          return "white";
+        } else {
+          return this._findBackgroundColor(jQueryfield.parent());
+        }
+      }
+    });
+  })(jQuery);
+
+  (function(jQuery) {
+    return jQuery.widget("IKS.halloreundo", {
+      options: {
+        editable: null,
+        toolbar: null,
+        uuid: '',
+        buttonCssClass: null
+      },
+      populateToolbar: function(toolbar) {
+        var buttonize, buttonset,
+          _this = this;
+        buttonset = jQuery("<span class=\"" + this.widgetName + "\"></span>");
+        buttonize = function(cmd, label) {
+          var buttonElement;
+          buttonElement = jQuery('<span></span>');
+          buttonElement.hallobutton({
+            uuid: _this.options.uuid,
+            editable: _this.options.editable,
+            label: label,
+            icon: cmd === 'undo' ? 'icon-undo' : 'icon-repeat',
+            command: cmd,
+            queryState: false,
+            cssClass: _this.options.buttonCssClass
+          });
+          return buttonset.append(buttonElement);
+        };
+        buttonize("undo", "Undo");
+        buttonize("redo", "Redo");
+        buttonset.hallobuttonset();
+        return toolbar.append(buttonset);
+      }
+    });
+  })(jQuery);
+
+  (function(jQuery) {
+    return jQuery.widget("Liip.hallotoolbarlinebreak", {
+      options: {
+        editable: null,
+        uuid: "",
+        breakAfter: []
+      },
+      populateToolbar: function(toolbar) {
+        var buttonRow, buttonset, buttonsets, queuedButtonsets, row, rowcounter, _i, _j, _len, _len1, _ref;
+        buttonsets = jQuery('.ui-buttonset', toolbar);
+        queuedButtonsets = jQuery();
+        rowcounter = 0;
+        _ref = this.options.breakAfter;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          row = _ref[_i];
+          rowcounter++;
+          buttonRow = "<div          class=\"halloButtonrow halloButtonrow-" + rowcounter + "\" />";
+          for (_j = 0, _len1 = buttonsets.length; _j < _len1; _j++) {
+            buttonset = buttonsets[_j];
+            queuedButtonsets = jQuery(queuedButtonsets).add(jQuery(buttonset));
+            if (jQuery(buttonset).hasClass(row)) {
+              queuedButtonsets.wrapAll(buttonRow);
+              buttonsets = buttonsets.not(queuedButtonsets);
+              queuedButtonsets = jQuery();
+              break;
+            }
+          }
+        }
+        if (buttonsets.length > 0) {
+          rowcounter++;
+          buttonRow = "<div          class=\"halloButtonrow halloButtonrow-" + rowcounter + "\" />";
+          return buttonsets.wrapAll(buttonRow);
+        }
+      }
+    });
+  })(jQuery);
+
+  (function(jQuery) {
+    return jQuery.widget('Hallo.halloToolbarContextual', {
+      toolbar: null,
+      options: {
+        parentElement: 'body',
+        editable: null,
+        toolbar: null
+      },
+      _create: function() {
+        var _this = this;
+        this.toolbar = this.options.toolbar;
+        jQuery(this.options.parentElement).append(this.toolbar);
+        this._bindEvents();
+        return jQuery(window).resize(function(event) {
+          return _this._updatePosition(_this._getPosition(event));
+        });
+      },
+      _getPosition: function(event, selection) {
+        var eventType, position;
+        if (!event) {
+          return;
+        }
+        eventType = event.type;
+        switch (eventType) {
+          case 'keydown':
+          case 'keyup':
+          case 'keypress':
+            return this._getCaretPosition(selection);
+          case 'click':
+          case 'mousedown':
+          case 'mouseup':
+            return position = {
+              top: event.pageY,
+              left: event.pageX
+            };
+        }
+      },
+      _getCaretPosition: function(range) {
+        var newRange, position, tmpSpan;
+        tmpSpan = jQuery("<span/>");
+        newRange = rangy.createRange();
+        newRange.setStart(range.endContainer, range.endOffset);
+        newRange.insertNode(tmpSpan.get(0));
+        position = {
+          top: tmpSpan.offset().top,
+          left: tmpSpan.offset().left
+        };
+        tmpSpan.remove();
+        return position;
+      },
+      setPosition: function() {
+        if (this.options.parentElement !== 'body') {
+          this.options.parentElement = 'body';
+          jQuery(this.options.parentElement).append(this.toolbar);
+        }
+        this.toolbar.css('position', 'absolute');
+        this.toolbar.css('top', this.element.offset().top - 20);
+        return this.toolbar.css('left', this.element.offset().left);
+      },
+      _updatePosition: function(position, selection) {
+        var left, selectionRect, top;
+        if (selection == null) {
+          selection = null;
+        }
+        if (!position) {
+          return;
+        }
+        if (!(position.top && position.left)) {
+          return;
+        }
+        if (selection && !selection.collapsed && selection.nativeRange) {
+          selectionRect = selection.nativeRange.getBoundingClientRect();
+          top = $(window).scrollTop() + selectionRect.top;
+          left = $(window).scrollLeft() + selectionRect.left;
+        } else {
+          top = position.top - 10;
+          left = position.left - this.toolbar.outerWidth() / 2 + 30;
+        }
+        this.toolbar.css('top', top - (this.toolbar.outerHeight() + 10));
+        return this.toolbar.css('left', left);
+      },
+      _bindEvents: function() {
+        var _this = this;
+        this.element.bind('halloselected', function(event, data) {
+          var position;
+          position = _this._getPosition(data.originalEvent, data.selection);
+          if (!position) {
+            return;
+          }
+          _this._updatePosition(position, data.selection);
+          return _this.toolbar.show();
+        });
+        this.element.bind('hallounselected', function(event, data) {
+          return _this.toolbar.hide();
+        });
+        return this.element.bind('hallodeactivated', function(event, data) {
+          return _this.toolbar.hide();
+        });
+      }
+    });
+  })(jQuery);
+
+  (function(jQuery) {
+    return jQuery.widget('Hallo.halloToolbarFixed', {
+      toolbar: null,
       options: {
+        parentElement: 'body',
         editable: null,
-        toolbar: null,
-        uuid: '',
-        buttonCssClass: null
+        toolbar: null
       },
-      populateToolbar: function(toolbar) {
-        var buttonize, buttonset,
+      _create: function() {
+        var el, widthToAdd,
           _this = this;
-        buttonset = jQuery("<span class=\"" + this.widgetName + "\"></span>");
-        buttonize = function(alignment) {
-          var buttonElement;
-          buttonElement = jQuery('<span></span>');
-          buttonElement.hallobutton({
-            uuid: _this.options.uuid,
-            editable: _this.options.editable,
-            label: alignment,
-            command: "justify" + alignment,
-            icon: "icon-align-" + (alignment.toLowerCase()),
-            cssClass: _this.options.buttonCssClass
-          });
-          return buttonset.append(buttonElement);
+        this.toolbar = this.options.toolbar;
+        this.toolbar.show();
+        jQuery(this.options.parentElement).append(this.toolbar);
+        this._bindEvents();
+        jQuery(window).resize(function(event) {
+          return _this.setPosition();
+        });
+        if (this.options.parentElement === 'body') {
+          el = jQuery(this.element);
+          widthToAdd = parseFloat(el.css('padding-left'));
+          widthToAdd += parseFloat(el.css('padding-right'));
+          widthToAdd += parseFloat(el.css('border-left-width'));
+          widthToAdd += parseFloat(el.css('border-right-width'));
+          widthToAdd += (parseFloat(el.css('outline-width'))) * 2;
+          widthToAdd += (parseFloat(el.css('outline-offset'))) * 2;
+          return jQuery(this.toolbar).css("width", el.width() + widthToAdd);
+        }
+      },
+      _getPosition: function(event, selection) {
+        var offset, position, width;
+        if (!event) {
+          return;
+        }
+        width = parseFloat(this.element.css('outline-width'));
+        offset = width + parseFloat(this.element.css('outline-offset'));
+        return position = {
+          top: this.element.offset().top - this.toolbar.outerHeight() - offset,
+          left: this.element.offset().left - offset
         };
-        buttonize("Left");
-        buttonize("Center");
-        buttonize("Right");
-        buttonset.hallobuttonset();
-        return toolbar.append(buttonset);
+      },
+      _getCaretPosition: function(range) {
+        var newRange, position, tmpSpan;
+        tmpSpan = jQuery("<span/>");
+        newRange = rangy.createRange();
+        newRange.setStart(range.endContainer, range.endOffset);
+        newRange.insertNode(tmpSpan.get(0));
+        position = {
+          top: tmpSpan.offset().top,
+          left: tmpSpan.offset().left
+        };
+        tmpSpan.remove();
+        return position;
+      },
+      setPosition: function() {
+        if (this.options.parentElement !== 'body') {
+          return;
+        }
+        this.toolbar.css('position', 'absolute');
+        this.toolbar.css('top', this.element.offset().top - this.toolbar.outerHeight());
+        return this.toolbar.css('left', this.element.offset().left + 10);
+      },
+      _updatePosition: function(position) {},
+      _bindEvents: function() {
+        var _this = this;
+        this.element.bind('halloactivated', function(event, data) {
+          _this.setPosition();
+          return _this.toolbar.show();
+        });
+        return this.element.bind('hallodeactivated', function(event, data) {
+          return _this.toolbar.hide();
+        });
       }
     });
   })(jQuery);
@@ -2290,170 +2448,4 @@ http://hallojs.org
     });
   })(jQuery);
 
-  (function(jQuery) {
-    return jQuery.widget('Hallo.halloToolbarContextual', {
-      toolbar: null,
-      options: {
-        parentElement: 'body',
-        editable: null,
-        toolbar: null
-      },
-      _create: function() {
-        var _this = this;
-        this.toolbar = this.options.toolbar;
-        jQuery(this.options.parentElement).append(this.toolbar);
-        this._bindEvents();
-        return jQuery(window).resize(function(event) {
-          return _this._updatePosition(_this._getPosition(event));
-        });
-      },
-      _getPosition: function(event, selection) {
-        var eventType, position;
-        if (!event) {
-          return;
-        }
-        eventType = event.type;
-        switch (eventType) {
-          case 'keydown':
-          case 'keyup':
-          case 'keypress':
-            return this._getCaretPosition(selection);
-          case 'click':
-          case 'mousedown':
-          case 'mouseup':
-            return position = {
-              top: event.pageY,
-              left: event.pageX
-            };
-        }
-      },
-      _getCaretPosition: function(range) {
-        var newRange, position, tmpSpan;
-        tmpSpan = jQuery("<span/>");
-        newRange = rangy.createRange();
-        newRange.setStart(range.endContainer, range.endOffset);
-        newRange.insertNode(tmpSpan.get(0));
-        position = {
-          top: tmpSpan.offset().top,
-          left: tmpSpan.offset().left
-        };
-        tmpSpan.remove();
-        return position;
-      },
-      setPosition: function() {
-        if (this.options.parentElement !== 'body') {
-          this.options.parentElement = 'body';
-          jQuery(this.options.parentElement).append(this.toolbar);
-        }
-        this.toolbar.css('position', 'absolute');
-        this.toolbar.css('top', this.element.offset().top - 20);
-        return this.toolbar.css('left', this.element.offset().left);
-      },
-      _updatePosition: function(position) {
-        if (!position) {
-          return;
-        }
-        if (!(position.top && position.left)) {
-          return;
-        }
-        this.toolbar.css('top', position.top);
-        return this.toolbar.css('left', position.left);
-      },
-      _bindEvents: function() {
-        var _this = this;
-        this.element.bind('halloselected', function(event, data) {
-          var position;
-          position = _this._getPosition(data.originalEvent, data.selection);
-          if (!position) {
-            return;
-          }
-          _this._updatePosition(position);
-          return _this.toolbar.show();
-        });
-        this.element.bind('hallounselected', function(event, data) {
-          return _this.toolbar.hide();
-        });
-        return this.element.bind('hallodeactivated', function(event, data) {
-          return _this.toolbar.hide();
-        });
-      }
-    });
-  })(jQuery);
-
-  (function(jQuery) {
-    return jQuery.widget('Hallo.halloToolbarFixed', {
-      toolbar: null,
-      options: {
-        parentElement: 'body',
-        editable: null,
-        toolbar: null
-      },
-      _create: function() {
-        var el, widthToAdd,
-          _this = this;
-        this.toolbar = this.options.toolbar;
-        this.toolbar.show();
-        jQuery(this.options.parentElement).append(this.toolbar);
-        this._bindEvents();
-        jQuery(window).resize(function(event) {
-          return _this._updatePosition(_this._getPosition(event));
-        });
-        if (this.options.parentElement === 'body' && !this.options.floating) {
-          el = jQuery(this.element);
-          widthToAdd = parseFloat(el.css('padding-left'));
-          widthToAdd += parseFloat(el.css('padding-right'));
-          widthToAdd += parseFloat(el.css('border-left-width'));
-          widthToAdd += parseFloat(el.css('border-right-width'));
-          widthToAdd += (parseFloat(el.css('outline-width'))) * 2;
-          widthToAdd += (parseFloat(el.css('outline-offset'))) * 2;
-          return jQuery(this.toolbar).css("width", el.width() + widthToAdd);
-        }
-      },
-      _getPosition: function(event, selection) {
-        var offset, position, width;
-        if (!event) {
-          return;
-        }
-        width = parseFloat(this.element.css('outline-width'));
-        offset = width + parseFloat(this.element.css('outline-offset'));
-        return position = {
-          top: this.element.offset().top - this.toolbar.outerHeight() - offset,
-          left: this.element.offset().left - offset
-        };
-      },
-      _getCaretPosition: function(range) {
-        var newRange, position, tmpSpan;
-        tmpSpan = jQuery("<span/>");
-        newRange = rangy.createRange();
-        newRange.setStart(range.endContainer, range.endOffset);
-        newRange.insertNode(tmpSpan.get(0));
-        position = {
-          top: tmpSpan.offset().top,
-          left: tmpSpan.offset().left
-        };
-        tmpSpan.remove();
-        return position;
-      },
-      setPosition: function() {
-        if (this.options.parentElement !== 'body') {
-          return;
-        }
-        this.toolbar.css('position', 'absolute');
-        this.toolbar.css('top', this.element.offset().top - this.toolbar.outerHeight());
-        return this.toolbar.css('left', this.element.offset().left);
-      },
-      _updatePosition: function(position) {},
-      _bindEvents: function() {
-        var _this = this;
-        this.element.bind('halloactivated', function(event, data) {
-          _this._updatePosition(_this._getPosition(event));
-          return _this.toolbar.show();
-        });
-        return this.element.bind('hallodeactivated', function(event, data) {
-          return _this.toolbar.hide();
-        });
-      }
-    });
-  })(jQuery);
-
 }).call(this);
diff --git a/src/toolbar/contextual.coffee b/src/toolbar/contextual.coffee
index a53c71b..770a051 100644
--- a/src/toolbar/contextual.coffee
+++ b/src/toolbar/contextual.coffee
@@ -55,18 +55,30 @@
       @toolbar.css 'top', @element.offset().top - 20
       @toolbar.css 'left', @element.offset().left
 
-    _updatePosition: (position) ->
+    _updatePosition: (position, selection=null) ->
       return unless position
       return unless position.top and position.left
-      @toolbar.css 'top', position.top
-      @toolbar.css 'left', position.left
+
+      # In case there is a selection, move toolbar on top of it and align with
+      # start of selection.
+      # Else move it on top of current position, center it and move
+      # it slightly to the right.
+      if selection and !selection.collapsed and selection.nativeRange
+        selectionRect = selection.nativeRange.getBoundingClientRect()
+        top = $(window).scrollTop() + selectionRect.top
+        left = $(window).scrollLeft() + selectionRect.left
+      else
+        top = position.top - 10
+        left = position.left - @toolbar.outerWidth() / 2 + 30
+      @toolbar.css 'top', top - (@toolbar.outerHeight() + 10)
+      @toolbar.css 'left', left
 
     _bindEvents: ->
       # catch select -> show (and reposition?)
       @element.bind 'halloselected', (event, data) =>
         position = @_getPosition data.originalEvent, data.selection
         return unless position
-        @_updatePosition position
+        @_updatePosition position, data.selection
         @toolbar.show()
 
       # catch deselect -> hide