pre {
  background-color: #f9f9f9 !important;
  border: 1px solid #aaa !important;
}

function VB_CSmallEditorExtension()
{
    this.editorElement = null;
    
    this.__init = function(buttons)
    {
        if (document.getElementById('vB_Editor_QR')) {
            this.editorElement = document.getElementById('vB_Editor_QR');
        }
        
        var newRow = this.addNewRow();
        this.processButtons(newRow, buttons);
    }
    
    this.addNewRow = function()
    {
        if (!this.editorElement) {
            return;
        }
        
        var table = this.editorElement.getElementsByTagName('tbody')[0];
        var tr    = document.createElement('tr');
        return table.appendChild(tr);
    }
    
    this.processButtons = function(row, buttons)
    {
        if (!this.editorElement) {
            return;
        }
        
        var td  = document.createElement('td');
        for (var b in buttons) {
            // if separator
            if (!buttons[b]) {
                var sep = document.createElement('img');
                sep.setAttribute('src', 'http://www.php.de/images/editor/separator.gif');
                sep.setAttribute('alt', 'Separator');
                td.appendChild(sep);
                
                continue;
            }
            
            var span = document.createElement('span');
            
            // icon
            if (buttons[b].icon && buttons[b].icon.src) {
                var img = document.createElement('img');
                img.setAttribute('src', buttons[b].icon.src);
                
                if (buttons[b].icon.alt) {
                    img.setAttribute('alt', buttons[b].icon.alt);
                } else {
                    img.setAttribute('alt', '');
                }
                
                span.appendChild(img);
            } else if (buttons[b].text) {
                // no icon? then use text
                span.appendChild(document.createTextNode(buttons[b].text));
            } else {
                // no text? nothing to do!
                continue;
            }
            
            // title tooltip
            if (buttons[b].title) {
                span.setAttribute('title', buttons[b].title);
            }
            
            // action
            if (buttons[b].action) {
                span.addEventListener('click', buttons[b].action, false);
            }
            
            span.setAttribute('class', 'imagebutton');
            span.setAttribute('style', 'cursor: default; border: medium none; padding: 1px; background: rgb(225, 225, 226) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(0, 0, 0);');
            
            // generate vBulletin hover style
            span.addEventListener('mouseover', function(ev)
            {
                ev.target.setAttribute('style', 'cursor: default; border: 1px solid rgb(49, 106, 197); padding: 0px; background: rgb(193, 210, 238) none repeat scroll 0% 0%;  -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(0, 0, 0);');
                ev.stopPropagation();
            }, false);
            span.addEventListener('mouseout', function(ev)
            {
                ev.target.setAttribute('style', 'cursor: default; border: medium none; padding: 1px; background: rgb(225, 225, 226) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(0, 0, 0);');
                ev.stopPropagation();
            }, false);
            
            td.appendChild(span);
        }
        
        row.appendChild(td);
        td.setAttribute('colspan', '15');
    }
    
    this.insertText = function(startTag, endTag)
    {
        if (!this.editorElement) {
            return;
        }
        
        var textarea = this.editorElement.getElementsByTagName('textarea')[0];
        textarea.focus();
        
        var start      = textarea.selectionStart;
        var end        = textarea.selectionEnd;
        var insText    = textarea.value.substring(start, end);
        textarea.value = textarea.value.substr(0, start) + startTag + insText + endTag + textarea.value.substr(end);
        
        var pos;
        if (insText.length == 0) {
            pos = start + startTag.length;
        } else {
            pos = start + startTag.length + insText.length + endTag.length;
        }
        textarea.selectionStart = pos;
        textarea.selectionEnd   = pos;
    }
}

var VB_obj = new VB_CSmallEditorExtension();
VB_obj.__init({
    0: {
        title : 'Test',
        action : function()
        {
            VB_obj.insertText('[TEST]', '[/TEST]');
        },
        icon : {
            src: 'http://www.php.de/images/editor/insertimage.gif',
            alt: 'Test'
        }
    }
});