                 { label: "H1", val: 'H1' },
                 { label: 'H2', val: 'H2' },
                 { label: 'H3', val: 'H3' }
-                ],
+            ],
             handler: (editor, val) ->
                 editor.formatblockSelection(val)
-            query: (editor) ->
-          }
-          {
-            name: 'classes',
-            label: 'Classes',
+          }
+          {
+            name: 'blocks',
+            label: 'Blocks',
             options: [
-                { label: "Classes", val: '' },
-                { label: "pull-right", val: 'pull-right' }
-                ]
-            handler: (editor, val) =>
-              selection = window.getSelection()
-              @applyClassToSelection(val)
-            query: (editor) ->
+                { label: "Blocks", val: '' },
+                { label: "Block left", val: 0 }
+                { label: "Block center", val: 1 }
+                { label: "Block right", val: 2 }
+            ]
+            handler: (editor, val) ->
+              classes = ['pull-left', 'pull-center', 'pull-right']
+              if val != ''
+                self.toggleClassOnSelection(classes, classes[val])
+              else
+                self.toggleClassOnSelection(classes, '')
+          }
+          {
+            name: 'inlines',
+            label: 'Inlines',
+            options: [
+                { label: "Inlines", val: '' },
+                { label: "Inline left", val: 0 }
+                { label: "Inline right", val: 1 }
+            ]
+            handler: (editor, val) ->
+              classes = ['pull-left', 'pull-right']
+              if val != ''
+                self.toggleClassOnSelection(classes, classes[val])
+              else
+                self.toggleClassOnSelection(classes, '')
           }
         ]
 

      #Place each text node within range inside a <span>
      #element with the desired class
      for node in selectedNodes
        if (node.nodeType == 3)
          span = document.createElement("span")
          span.className = cssClass
          node.parentNode.insertBefore(span, node)
          span.appendChild(node)
        else
          wrapper = node
          while (wrapper.parentNode && wrapper.parentNode != range.commonAncestorContainer)
            wrapper = wrapper.parentNode

          $(wrapper).addClass(cssClass)

    removeClass: (cssClass) ->
      #spans = $(".#{cssClass}")

      ## Convert spans to an array to prevent live updating of
      ## the list as we remove the spans
      #spans = Array.prototype.slice.call(spans, 0);

      #for (var i = 0, len = spans.length; i < len; ++i)
        #span = spans[i];
        #parentNode = span.parentNode;
        #parentNode.insertBefore(span.firstChild, span);
        #parentNode.removeChild(span);

        ## Glue any adjacent text nodes back together
        #parentNode.normalize();

    content: () ->
      return @editor.html()

      @editor = WysiHat.Editor.attach($(editor))

      cfg = 
        buttons: [
          {
            name: 'bold',
            label: 'Bold',
            handler: (editor) ->
              editor.boldSelection()
            query: (editor) ->
              editor.boldSelected()
          }
          {
            name: 'italic',
            label: 'Italic',
            handler: (editor) ->
              editor.italicSelection()
            query: (editor) ->
              editor.italicSelected()
          }
          {
            name: 'underline',
            label: 'Underline',
            handler: (editor) ->
              editor.underlineSelection()
            query: (editor) ->
              editor.underlineSelected()
          }
          {
            name: 'ol',
            label: 'Ordered list',
            handler: (editor) ->
              editor.toggleOrderedList()
            query: (editor) ->
              editor.unorderedListSelected()
          }
          {
            name: 'ul',
            label: 'Unordered list',
            handler: (editor) ->
              editor.toggleUnorderedList()
            query: (editor) ->
              editor.orderedListSelected()
          }
          {
            name: 'image',
            label: 'Insert image',
            handler: (editor) ->
              self.insertImageHandler()
          }
        ]
        dropdowns: [
          {
            name: 'headers',
