var fancy_editor = new YAHOO.widget.Editor(el.id, {
    animate: true,
    toolbar: {
     buttons: [
{group: 'stuff2', label: 'TEXT', buttons: [ ]},
{ type: 'separator' },
{group: 'stuff', label: 'Simple HTML Menu:', buttons: [
{ type: 'push', label: 'Bold CTRL + SHIFT + B', value: 'bold' },
{ type: 'push', label: 'Italic CTRL + SHIFT + I', value: 'italic' },
{ type: 'push', label: 'Underline CTRL + SHIFT + U', value: 'underline' },
{ type: 'separator' },
{ type: 'push', label: 'Subscript', value: 'subscript', disabled: true },
{ type: 'push', label: 'Superscript', value: 'superscript', disabled: true },
{ type: 'separator' },
{ type: 'push', label: 'Create an Unordered List', value: 'insertunorderedlist' },
{ type: 'push', label: 'Create an Ordered List', value: 'insertorderedlist' },
{ type: 'separator' },
{ type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true },
{ type: 'push', label: 'Remove Formatting', value: 'removeformat', disabled: true },
]},

]
    }
});

//Use the toolbarLoaded Custom Event; when that event fires,
//we will execute a function that adds or custom button:
fancy_editor.on('toolbarLoaded', function() {
    //Simple button config
    var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;
    var button = {
        type: 'push',
        label: 'HTML',
        value: 'togglehtml',
        disabled: false
    };

    var state='on';
    var htmlgroup = Dom.getElementsByClassName("yui-toolbar-group-stuff","div",this.toolbar);
    var htmllabel = Dom.getElementsByClassName("yui-toolbar-group-stuff2","div",this.toolbar)[0];
    htmllabel = Dom.getFirstChild(htmllabel);

    //Add the button to the toolbar; "this"
    //refers to fancy_editor, our RTE instance:
    this.toolbar.addButtonToGroup(button,"stuff2");

        //Now listen for the new buttons click and do something with it.
    //Note that "togglehtml" is an event synthesized for us
    //automatically because that's the value we gave our button
    //above:
    var toggleFunction = function(o) {
        if (state == 'on') {
            state = 'off';
            Dom.setStyle(htmlgroup,'display','none');
            htmllabel.innerHTML='HTML';
            this.saveHTML();
            this.setEditorHTML(this.get('textarea').value.replace(/<br>/gi, '\n').replace(/\&/gi,"&amp;").replace(/</gi,"&lt;").replace(/>/gi,"&gt;").replace(/\n/gi,"<br>"));
        } else {
            state = 'on';
            Dom.setStyle(htmlgroup,'display','block');
            htmllabel.innerHTML='TEXT';
            this.saveHTML();
            var stripHTML = /<\S[^><]*>/g;
            this.setEditorHTML(this.get('textarea').value.replace(/<br>/gi, '\n').replace(stripHTML,'').replace(/&lt;/gi,"<").replace(/&gt;/gi,">").replace(/\&amp;/gi,"&").replace(/\n/gi,"<br>"));
        }
    };

    this.toolbar.on('togglehtmlClick', toggleFunction, this, true);

    var form = document.getElementById(el.id).form;

    YAHOO.util.Event.on(form,'submit',function(ev) {
      if (state == 'on') {
        //all happy
      } else if (state == 'off') {
        //need to fire a togglehtmlClick event to the toolbar
        toggleFunction("HAPPY");
      } else {
        alert("ERROR: UNKNOWN STATE for editor '"+el.id+"': '"+state+"'");
      }
      fancy_editor.saveHTML(); // Save the HTML -- BAD if state is on! EEP!
      Dom.get('message').submit();
    });

}, fancy_editor, true);

fancy_editor.render();