// @name           vBulletin-Editor-Hack
// @namespace      vbulletin
// @description    Erweitert den vBulletin-Standardeditor um einige nützliche Funktionen
// @include        http://www.php.de/
// ==/UserScript==

// This Script is not crossbrowser compatible, only
// designed for Firefox with Greasemonkey!


// first: change small bottom editor
if (document.getElementById('vB_Editor_QR')) {
    VB_changeEditor(
        document.getElementById('vB_Editor_QR'),
        document.getElementById('vB_Editor_QR').getElementsByTagName('textarea')[0]
    );
}

// dynamic displayed post edit editor
// each edit editor has another ID so VB_editCount will count the edits
var VB_editCount = 0;

// attach event listeners to edit buttons
var VB_editButtons = document.getElementsByTagName('a');
for (var VB_e in VB_editButtons) {
    if (VB_editButtons[VB_e].getAttribute('name') &&
        VB_editButtons[VB_e].getAttribute('name').indexOf('vB::QuickEdit::') == 0) {
        VB_editButtons[VB_e].addEventListener('mouseup', function()
        {
            // set a timeout because the editor is loaded by AJAX
            setTimeout(function()
            {
                VB_editCount++;
                var eEl = document.getElementById('vB_Editor_QE_' + VB_editCount + '_controls');
                var tEl = eEl.parentNode.getElementsByTagName('textarea')[0];
                VB_changeEditor(eEl, tEl);
            }, 1000);
        }, false);
    }
}


// set buttons to display in the editor
// to do this pass an array to the __init() method. Each array element contains
// a literal object:
// 0 : {
//     title  : text for title attribute (optional),
//     action : callback or anonymous function for action performed on click,
//     icon   : {
//         src : path to the icon file,
//         alt : alternate text for the icon (optional)
//     },
//     text : instead of specifying an icon you can also pass a text
// }
function VB_changeEditor(editorElement, textareaElement)
{
    var VB_obj = new VB_CEditorExtension(editorElement, textareaElement);
    VB_obj.__init({
        0 : {
            title : 'Code einfügen [code]',
            action : function()
            {
                VB_obj.insertText('[code]', '[/code]');
            },
            icon : {
                src : 'http://www.php.de/images/editor/code.gif',
                alt : '[code]'
            }
        },
        1 : {
            title : 'PHP-Code einfügen [php]',
            action : function()
            {
                VB_obj.insertText('[php]', '[/php]');
            },
            icon : {
                src : 'http://www.php.de/images/editor/php.gif',
                alt : '[php]'
            }
        },
        2 : {
            title : '[wiki]-Code einfügen',
            action : function()
            {
                VB_obj.insertText('[wiki]', '[/wiki]');
            },
            icon : {
                src : 'http://www.php.de/images/buttons/wiki.gif',
                alt : '[wiki]'
            }
        },
        3 : {
            title : '[man]-Code einfügen',
            action : function()
            {
                VB_obj.insertText('[man]', '[/man]');
            },
            icon : {
                src : 'http://www.php.de/images/buttons/man.gif',
                alt : '[man]'
            }
        },
        4 : null,
        5 : {
            title : 'Beitrag editiert',
            action : function()
            {
                VB_obj.insertText('[b][color="DarkRed"]Beitrag editiert:[/color][/b]\n[i][…] ', '[/i]');
            },
            icon : {
                src : 'http://www.php.de/members/manko10-albums-editor-icons-picture15-post-edited.png',
                alt : 'Beitrag editiert'
            }
        },
        6 : {
            title : 'Thread bitte als [Erledigt] markieren',
            action : function()
            {
                VB_obj.insertText('Dann den Thread bitte noch als [Erledigt] markieren. Danke!', '');
            },
            icon : {
                src : 'http://www.php.de/members/manko10-albums-editor-icons-picture16-done.png',
                alt : 'Thread bitte als [Erledigt] markieren'
            }
        },
        7 : {
            title : 'Bitte [php]-Tags statt [man]-Tags verwenden',
            action : function()
            {
                VB_obj.insertText('Für das Highlighting von PHP-Code sind die [php]-Tags und nicht die [man]-Tags zuständig. Bitte ändere das noch.', '');
            },
            icon : {
                src : 'http://www.php.de/members/manko10-albums-editor-icons-picture17-no-man-use-php.png',
                alt : 'Bitte [php]-Tags statt [man]-Tags verwenden'
            }
        },
        8 : null,
        9 : {
            title : 'Mod: Thema verschoben',
            action : function()
            {
                VB_obj.insertText('[b][color="DarkRed"]Themenmoderation:[/color][/b]\n[i][→] Verschoben von ', '[/i]');
            },
            icon : {
                src : 'http://www.php.de/members/manko10-albums-editor-icons-picture23-mod-thread-moved.png',
                alt : 'Mod: Thema verschoben'
            }
        },
        10 : {
            title : 'Mod: Thema geschlossen',
            action : function()
            {
                VB_obj.insertText('[b][color="DarkRed"]Themenmoderation:[/color][/b]\n[i][Ω] Thema geschlossen[/i]', '');
            },
            icon : {
                src : 'http://www.php.de/members/manko10-albums-editor-icons-picture22-mod-thread-closed.png',
                alt : 'Mod: Thema geschlossen'
            }
        },
        11 : {
            title : 'Mod: Beitrag editiert',
            action : function()
            {
                VB_obj.insertText('[b][color="DarkRed"]Beitragsmoderation (Manko10):[/color][/b]\n[i][‼] ', '[/i]');
            },
            icon : {
                src : 'http://www.php.de/members/manko10-albums-editor-icons-picture21-mod-post-edited.png',
                alt : 'Mod: Beitrag editiert'
            }
        }
    });
}


// pseudo class for changing the editor
function VB_CEditorExtension(editorElement, textareaElement)
{
    this.editorElement   = editorElement;
    this.textareaElement = textareaElement;
    
    // initialize editor change
    this.__init = function(buttons)
    {        
        var newRow = this.addNewRow();
        this.processButtons(newRow, buttons);
    }
    
    // adds a new row to the editor buttons table
    this.addNewRow = function()
    {
        if (!this.editorElement) {
            return;
        }
        
        var table = this.editorElement.getElementsByTagName('tbody')[0];
        var tr    = document.createElement('tr');
        return table.appendChild(tr);
    }
    
    // inserts the buttons
    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 method is not used by the class itself but you can use this on click
    // events to insert some text into the editor
    this.insertText = function(startTag, endTag)
    {
        if (!this.editorElement || !this.textareaElement) {
            return;
        }
        this.textareaElement.focus();
        
        // save current scrolling position
        var scrollTop  = this.textareaElement.scrollTop;
        var scrollLeft = this.textareaElement.scrollLeft;
        
        var start      = this.textareaElement.selectionStart;
        var end        = this.textareaElement.selectionEnd;
        var insText    = this.textareaElement.value.substring(start, end);
        this.textareaElement.value = this.textareaElement.value.substr(0, start) + startTag + insText + endTag + this.textareaElement.value.substr(end);
        
        var pos;
        if (insText.length == 0) {
            pos = start + startTag.length;
        } else {
            pos = start + startTag.length + insText.length + endTag.length;
        }
        this.textareaElement.selectionStart = pos;
        this.textareaElement.selectionEnd   = pos;
        
        // reset scrolling
        this.textareaElement.scrollTop  = scrollTop;
        this.textareaElement.scrollLeft = scrollLeft;
    }
}