<?php 

var messageEditor = Class.create();



messageEditor.prototype = {

    openTags: new Array(),

    toolbarHeight: 0,

    currentTheme: '',

    themePath: '',

    openDropDownMenu: null,



    setTheme: function(theme)

    {

        if(this.currentTheme != '' || $('editorTheme')) {

            $('editorTheme').remove();

        }



        var stylesheet = document.createElement('link');

        stylesheet.setAttribute('rel', 'stylesheet');

        stylesheet.setAttribute('type', 'text/css');

        stylesheet.setAttribute('href', this.baseURL + 'editor_themes/'+theme+'/stylesheet.css');

        document.getElementsByTagName('head')[0].appendChild(stylesheet);

        this.currentTheme = theme;

        this.themePath = this.baseURL + 'editor_themes/'+theme;

    },



    initialize: function(textarea, options)

    {

        // Sorry Konqueror, but due to a browser bug out of control with textarea values

        // you do not get to use the fancy editor.



        if(MyBB.browser == "konqueror" || (typeof(mybb_editor_disabled) != "undefined" && mybb_editor_disabled == true))

        {

            return false;

        }



        // Establish the base path to this javascript file

        $$('script').each(function(script) {

            if(script.src && script.src.indexOf('editor.js') != -1) {

                this.baseURL = script.src.replace(/editor\.js(.*?)$/, '');

            }

        }, this);



        this.options = options;



        if(this.options)

        {

            if(!this.options.lang)

            {

                return false;

            }



            if(!this.options.rtl)

            {

                this.options.rtl = 0;

            }

        }



        if(this.options && this.options.theme)

        {

            this.setTheme(this.options.theme);

        }

        else

        {

            this.setTheme('default');

        }



        // Defines an array of fonts to be shown in the font drop down.

        this.fonts = new Object();

        this.fonts["Arial"] = "Arial";

        this.fonts["Courier"] = "Courier";

        this.fonts["Impact"] = "Impact";

        this.fonts["Tahoma"] = "Tahoma";

        this.fonts["Times New Roman"] = "Times New Roman";

        this.fonts["Trebuchet MS"] = "Trebuchet MS";

        this.fonts["Verdana"] = "Verdana";



        // An array of font sizes to be shown.

        this.sizes = new Object();

        this.sizes["xx-small"] = this.options.lang.size_xx_small;

        this.sizes["x-small"] = this.options.lang.size_x_small;

        this.sizes["small"] = this.options.lang.size_small;

        this.sizes["medium"] = this.options.lang.size_medium;

        this.sizes["large"] = this.options.lang.size_large;

        this.sizes["x-large"] = this.options.lang.size_x_large;

        this.sizes["xx-large"] = this.options.lang.size_xx_large;



        // An array of colours to be shown.

        this.colors = new Object();

        this.colors[1] = "#800000";

        this.colors[2] = "#8B4513";

        this.colors[3] = "#006400";

        this.colors[4] = "#2F4F4F";

        this.colors[5] = "#000080";

        this.colors[6] = "#4B0082";

        this.colors[7] = "#800080";

        this.colors[8] = "#000000";

        this.colors[9] = "#FF0000";

        this.colors[10] = "#DAA520";

        this.colors[11] = "#6B8E23";

        this.colors[12] = "#708090";

        this.colors[13] = "#0000CD";

        this.colors[14] = "#483D8B";

        this.colors[15] = "#C71585";

        this.colors[16] = "#696969";

        this.colors[17] = "#FF4500";

        this.colors[18] = "#FFA500";

        this.colors[19] = "#808000";

        this.colors[20] = "#4682B4";

        this.colors[21] = "#1E90FF";

        this.colors[22] = "#9400D3";

        this.colors[23] = "#FF1493";

        this.colors[24] = "#A9A9A9";

        this.colors[25] = "#FF6347";

        this.colors[26] = "#FFD700";

        this.colors[27] = "#32CD32";

        this.colors[28] = "#87CEEB";

        this.colors[29] = "#00BFFF";

        this.colors[30] = "#9370DB";

        this.colors[31] = "#FF69B4";

        this.colors[32] = "#DCDCDC";

        this.colors[33] = "#FFDAB9";

        this.colors[34] = "#FFFFE0";

        this.colors[35] = "#98FB98";

        this.colors[36] = "#E0FFFF";

        this.colors[37] = "#87CEFA";

        this.colors[38] = "#E6E6FA";

        this.colors[39] = "#DDA0DD";

        this.colors[40] = "#FFFFFF";

        

        // An array of video services to be shown (youtube, vimeo, etc) 

        this.videos = new Object();

        this.videos["dailymotion"] = this.options.lang.video_dailymotion;

        this.videos["metacafe"] = this.options.lang.video_metacafe;

        this.videos["myspacetv"] = this.options.lang.video_myspacetv;

        this.videos["vimeo"] = this.options.lang.video_vimeo;

        this.videos["yahoo"] = this.options.lang.video_yahoo;

        this.videos["youtube"] = this.options.lang.video_youtube;



        // Here we get the ID of the textarea we're replacing and store it.

        this.textarea = textarea;



        // Only swap it over once the page has loaded (add event)

        if(MyBB.page_loaded == 1)

        {

            this.showEditor();

        }

        else

        {

            Event.observe(document, "dom:loaded", this.showEditor.bindAsEventListener(this));

        }

    },



    showEditor: function()

    {

        // Assign the old textarea to a variable for later use.

        oldTextarea = $(this.textarea);



        // Now this.textarea becomes the new textarea ID

        this.textarea += "_new";



        // Begin the creation of our new editor.



        this.editor = document.createElement("div");

        this.editor.style.position = "relative";

        this.editor.style.display = "none";

        this.editor.className = "messageEditor";



        // Append the new editor

        oldTextarea.parentNode.insertBefore(this.editor, oldTextarea);



        // Determine the overall height and width - messy, but works

        w = oldTextarea.getDimensions().width+"px";

        if(!w || parseInt(w) < 400)

        {

            w = "400px";

        }

        if(this.options && this.options.height)

        {

            h = this.options.height;

        }

        else if(oldTextarea.offsetHeight)

        {

            h = oldTextarea.offsetHeight+"px";

        }

        else if(oldTextarea.clientHeight)

        {

            h = oldTextarea.clientHeight+"px";

        }

        else if(oldTextarea.style.height)

        {

            h = oldTextarea.style.height;

        }

        else

        {

            h = "400px";

        }

        this.editor.style.width = w;

        this.editor.style.height = h;



        this.createToolbarContainer('top');



        this.createToolbar('closetags', {

            container: 'top',

            alignment: 'right',

            items: [

                {type: 'button', name: 'close_tags', insert: 'zzzz', sprite: 'close_tags', width: 80, style: {visibility: 'hidden'}}

            ]

        });

        this.createToolbar('topformatting', {

            container: 'top',

            items: [

                {type: 'dropdown', name: 'font', insert: 'font', title: this.options.lang.font, options: this.fonts},

                {type: 'dropdown', name: 'size', insert: 'size', title: this.options.lang.size, options: this.sizes},

                {type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors}

            ]

        });



        this.createToolbarContainer('bottom');



        this.createToolbar('insertables', {

            container: 'bottom',

            alignment: 'right',

            items: [

                {type: 'button', name: 'list_num', sprite: 'list_num', insert: 'list', extra: 1, title: this.options.lang.title_numlist},

                {type: 'button', name: 'list_bullet', sprite: 'list_bullet', insert: 'list', title: this.options.lang.title_bulletlist},

                {type: 'separator'},

                {type: 'button', name: 'img', sprite: 'image', insert: 'image', extra: 1, title: this.options.lang.title_image},

                {type: 'button', name: 'url', sprite: 'link', insert: 'url', title: this.options.lang.title_hyperlink},

                {type: 'button', name: 'email', sprite: 'email', insert: 'email', extra: 1, title: this.options.lang.title_email},

                {type: 'separator'},

                {type: 'button', name: 'quote', sprite: 'quote', insert: 'quote', title: this.options.lang.title_quote},

                {type: 'button', name: 'code', sprite: 'code', insert: 'code', title: this.options.lang.title_code},

                {type: 'button', name: 'php', sprite: 'php', insert: 'php', title: this.options.lang.title_php},

                {type: 'button', name: 'video', insert: 'video', image: 'television.gif', dropdown: true, title: this.options.lang.title_video, options: this.videos}

            ]

        });

        this.createToolbar('formatting', {

            container: 'bottom',

            items: [

                {type: 'button', name: 'b', sprite: 'bold', insert: 'b', title: this.options.lang.title_bold},

                {type: 'button', name: 'i', sprite: 'italic', insert: 'i', title: this.options.lang.title_italic},

                {type: 'button', name: 'u', sprite: 'underline', insert: 'u', title: this.options.lang.title_underline},

                {type: 'separator'},

                {type: 'button', name: 'align_left', sprite: 'align_left', insert: 'left', title: title: this.options.lang.title_left},

                {type: 'button', name: 'align_center', sprite: 'align_center', insert: 'center', title: this.options.lang.title_center},

                {type: 'button', name: 'align_right', sprite: 'align_right', insert: 'right', title: this.options.lang.title_right},

                {type: 'button', name: 'align_justify', sprite: 'align_justify', insert: 'align', extra: 'justify', title: this.options.lang.title_justify}

            ]

        });



        // Create our new text area

        areaContainer = document.createElement("div");

        areaContainer.style.clear = "both";



        // Set the width/height of the area

        subtract = 20;

        subtract2 = 12;

        areaContainer.style.height = parseInt(Element.getDimensions(this.editor).height)-this.toolbarHeight-subtract+"px";

        areaContainer.style.width = parseInt(Element.getDimensions(this.editor).width)-subtract2+"px";



        // Create text area

        textInput = document.createElement("textarea");

        textInput.setAttribute("cols", oldTextarea.getAttribute("cols"));

        textInput.setAttribute("rows", oldTextarea.getAttribute("rows"));

        textInput.id = this.textarea;

        textInput.name = oldTextarea.name+"_new";

        textInput.style.height = parseInt(areaContainer.style.height)+"px";

        textInput.style.width = parseInt(areaContainer.style.width)+"px";



        if(oldTextarea.value != '')

        {

            textInput.value = oldTextarea.value;

        }



        if(oldTextarea.tabIndex)

        {

            textInput.tabIndex = oldTextarea.tabIndex;

        }



        areaContainer.appendChild(textInput);

        this.editor.appendChild(areaContainer);



        if(oldTextarea.form)

        {

            Event.observe(oldTextarea.form, "submit", this.closeTags.bindAsEventListener(this));

            Event.observe(oldTextarea.form, "submit", this.updateOldArea.bindAsEventListener(this));

        }



        // Hide the old editor

        oldTextarea.style.visibility = "hidden";

        oldTextarea.style.position = "absolute";

        oldTextarea.style.top = "-1000px";

        oldTextarea.id += "_old";

        this.oldTextarea = oldTextarea;



        this.editor.style.display = "";

        Event.observe(textInput, "keyup", this.updateOldArea.bindAsEventListener(this));



        if(MyBB.browser == 'ie') {

            Event.observe($(this.textarea), 'focus', function() {

                this.trackingCaret = true;

            }.bindAsEventListener(this));

            Event.observe($(this.textarea), 'blur', function() {

                this.trackingCaret = false;

            }.bindAsEventListener(this));

            Event.observe($(this.textarea), 'mousedown', function() {

                this.trackingCaret = true;

                this.storeCaret();

            }.bindAsEventListener(this));

        }



        Event.observe(textInput, "blur", this.updateOldArea.bindAsEventListener(this));

    },



    drawColorOption: function(option)

    {

        var item = document.createElement('li');

        item.extra = option.value;

        item.className = 'editor_dropdown_color_item';

        item.innerHTML = '<a style="background-color: '+option.value+'"></a>';

        return item;

    },



    createToolbarContainer: function(name)

    {

        if($('editor_toolbar_container_'+name)) return;



        var container = document.createElement("div");

        container.id = 'editor_toolbar_container_'+name;

        container.className = 'toolbar_container';



        this.editor.appendChild(container);



        this.toolbarHeight += 28;



        return container;

    },



    createToolbar: function(name, options)

    {

        if(typeof(options.container) == 'undefined')

        {

            options.container = this.createToolbarContainer('auto_'+name);

        }

        else {

            options.container = $('editor_toolbar_container_'+options.container);

            if(!options.container) return;

        }



        if($('editor_toolbar_'+name)) return;



        var toolbar = document.createElement('div');

        toolbar.id = 'editor_toolbar_'+name;

        toolbar.className = 'toolbar';



        var clear = document.createElement('br');

        clear.style.clear = 'both';

        toolbar.appendChild(clear);



        if(options.alignment && options.alignment == 'right') {

            toolbar.className += ' float_right';

        }

        options.container.appendChild(toolbar);

        if(typeof(options.items) == 'object') {

            for(var i = 0; i < options.items.length; ++i) {

                this.addToolbarItem(toolbar, options.items[i]);

            }

        }

        // add closing item

        if(toolbar.lastChild.previousSibling)

            toolbar.lastChild.previousSibling.className += ' toolbar_button_group_last';

    },

    

    setElementState: function(element, state) {

        element.addClassName('toolbar_'+state);

        

        if(element.hasClassName('toolbar_button_group_first')) {

            if(state == 'clicked') {

                append = 'toolbar_clicked';

            }

            else if(state == 'hover') {

                append = 'toolbar_hover';

            }

            append += '_button_group_first';

            element.addClassName(append);

        }

        

        if(element.hasClassName('toolbar_button_group_last')) {

            if(state == 'clicked') {

                append = 'toolbar_clicked';

            }

            else if(state == 'hover') {

                append = 'toolbar_hover';

            }

            append += '_button_group_last';

            element.addClassName(append);

        }

    },

    

    removeElementState: function(element, state)

    {

        element.removeClassName('toolbar_'+state);

        

        if(element.hasClassName('toolbar_button_group_first')) {

            if(state == 'clicked') {

                append = 'toolbar_clicked';

            }

            else if(state == 'hover') {

                append = 'toolbar_hover';

            }

            append += '_button_group_first';

            element.removeClassName(append);

        }

        

        if(element.hasClassName('toolbar_button_group_last')) {

            if(state == 'clicked') {

                append = 'toolbar_clicked';

            }

            else if(state == 'hover') {

                append = 'toolbar_hover';

            }

            append += '_button_group_last';

            element.removeClassName(append);

        }    

    },



    dropDownMenuItemClick: function(e)

    {

        this.restartEditorSelection();

        element = Event.element(e);



        if(!element)

            return;

        

        if(!element.extra)

            element = element.up('li');

        

        var mnu = element.up('ul');

        var dropdown = this.getElementToolbarItem(mnu);

        var label = dropdown.down('.editor_dropdown_label');



        if(!dropdown.insertText || (dropdown.insertText != "video" && mnu.activeItem && mnu.activeItem == element))

            return;

        

        mnu.lastItemValue = element.extra;



        if(this.getSelectedText($(this.textarea)))

        {

            this.setDropDownMenuActiveItem(dropdown, 0);

        }

        else

        {

            if(label)

            {

                label.innerHTML = element.innerHTML;

                label.style.overflow = 'hidden';

            }

            var sel_color = dropdown.down('.editor_button_color_selected')

            if(sel_color)

            {

                sel_color.style.backgroundColor = element.extra;

                var use_default = dropdown.down('.editor_dropdown_color_item_default');

                if(use_default) use_default.style.display = '';

            }

            mnu.activeItem = element;

            element.addClassName('editor_dropdown_menu_item_active');

        }



        this.insertMyCode(dropdown.insertText, element.extra);

        this.hideOpenDropDownMenu();

        Event.stop(e);

    },



    setDropDownMenuActiveItem: function(element, index)

    {

        if(element == null)

        {

            return;

        }

        var mnu = element.down('ul');

        var label = element.down('.editor_dropdown_label');



        if(mnu.activeItem)

        {

            mnu.activeItem.removeClassName('editor_dropdown_menu_item_active');

            mnu.activeItem = null;

        }



        if(index > 0)

        {

            var item = mnu.childNodes[index];

            if(!item) return;

            mnu.activeItem = item;

            if(label)

            {

                label.innerHTML = item.innerHTML;

            }



            var sel_color = element.down('.editor_dropdown_color_selected')

            if(sel_color)

            {

                sel_color.style.backgroundColor = item.style.backgroundColor;

                mnu.lastItemValue = item.insertExtra;

                var use_default = element.down('.editor_dropdown_color_item_default');

                if(use_default) use_default.style.display = '';

            }

            item.addClassName('editor_dropdown_menu_item_active');

        }

        else

        {

            if(label)

            {

                label.innerHTML = mnu.childNodes[0].innerHTML;

            }



            var sel_color = element.down('.editor_button_color_selected')

            if(sel_color)

            {

                //sel_color.style.backgroundColor = '';

                var use_default = element.down('.editor_dropdown_color_item_default');

                if(use_default) use_default.style.display = 'none';

            }

            this.removeElementState(element, 'clicked');

        }

    },



    createDropDownMenu: function(options)

    {

        var dropdown = document.createElement('div');

        dropdown.itemType = options.type;

        if(options.image || options.sprite)

            dropdown.className = 'toolbar_dropdown_image';

        else

            dropdown.className = 'toolbar_dropdown';



        dropdown.className += ' editor_dropdown toolbar_dropdown_'+options.name;

        dropdown.id = 'editor_item_'+options.name;



        Event.observe(dropdown, 'mouseover', function()

        {

            this.storeCaret();

            dropdown.addClassName('toolbar_dropdown_over');

        }.bindAsEventListener(this));

        Event.observe(dropdown, 'mouseout', function()

        {

            this.storeCaret();

            dropdown.removeClassName('toolbar_dropdown_over');

        }.bindAsEventListener(this));

        dropdown.insertText = options.insert;



        // create the dropdown label container

        var label = document.createElement('div');

        label.className = 'editor_dropdown_label';

        if(options.title)

        {

            label.innerHTML = options.title;

        }

        else

        {

            label.innerHTML = '&nbsp;';

        }

        dropdown.appendChild(label)



        // create the arrow

        var arrow = document.createElement('div');

        arrow.className = 'editor_dropdown_arrow';

        dropdown.appendChild(arrow);



        // create the menu item container

        var mnu = this.buildDropDownMenu(options);



        Event.observe(dropdown, 'click', this.toggleDropDownMenu.bindAsEventListener(this));

        dropdown.appendChild(mnu);

        return dropdown;

    },



    buildDropDownMenu: function(options)

    {

        var mnu = document.createElement('ul');

        mnu.className = 'editor_dropdown_menu';

        mnu.style.display = 'none';



        // create the first item

        if(options.title)

        {

            var item = document.createElement('li');

            item.className = 'editor_dropdown_menu_title';

            item.innerHTML = options.title;

            mnu.appendChild(item);

            Event.observe(item, 'click', function()

            {

                if(mnu.activeItem)

                {

                    this.restartEditorSelection();

                    this.insertMyCode(dropdown.insertText, '-');

                }

                this.setDropDownMenuActiveItem(dropdown, 0);

            }.bindAsEventListener(this));

        }

        

        $H(options.options).each(function(option)

        {

            if(options.draw_option)

            {

                item = options.draw_option(option)

            }

            else

            {

                var item = document.createElement('li');

                item.innerHTML = option.value;



                var content = document.createElement('span');

                item.appendChild(content);

                item.extra = option.key;

            }

            Event.observe(item, 'click', this.dropDownMenuItemClick.bindAsEventListener(this));

            Event.observe(item, 'mouseover', function()

            {

                item.addClassName('editor_dropdown_menu_item_over');

            });

            Event.observe(item, 'mouseout', function()

            {

                item.removeClassName('editor_dropdown_menu_item_over');

            });

            mnu.appendChild(item);

        }, this);

        return mnu;

    },



    toggleDropDownMenu: function(e)

    {

        element = Event.element(e);

        if(!element)

            return;

        if(!element.itemType)

            element = this.getElementToolbarItem(element);

        

        var mnu = $(element).down('ul');

        

        // This menu is already open, close it

        if(mnu.style.display != 'none')

        {

            mnu.style.display = 'none';

            element.removeClassName('editor_dropdown_menu_open');

            this.removeElementState(element, 'clicked');

            this.openDropDownMenu = null;

            Event.stopObserving(document, 'click', this.hideOpenDropDownMenu.bindAsEventListener(this));

        }

        // Opening this menu

        else

        {

            // If a menu is already open, close it first

            this.showDropDownMenu(mnu);

        }

        this.removeElementState(element, 'clicked');

        Event.stop(e);

    },



    showDropDownMenu: function(mnu)

    {

        this.hideOpenDropDownMenu();

        mnu.style.display = '';

        element = this.getElementToolbarItem(mnu);

        element.addClassName('editor_dropdown_menu_open');

        this.setElementState(element, 'clicked');

        this.openDropDownMenu = mnu;

        Event.observe(document, 'click', this.hideOpenDropDownMenu.bindAsEventListener(this));

    },



    hideOpenDropDownMenu: function()

    {

        if(!this.openDropDownMenu) return;

        this.openDropDownMenu.style.display = 'none';

        this.getElementToolbarItem(this.openDropDownMenu).removeClassName('editor_dropdown_menu_open');

        var dropDown = this.getElementToolbarItem(this.openDropDownMenu);

        this.removeElementState(this.openDropDownMenu.parentNode, 'clicked');

        this.removeElementState(element, 'clicked');

        this.openDropDownMenu = null;

        Event.stopObserving(document, 'click', this.hideOpenDropDownMenu.bindAsEventListener(this));

    },



    getElementToolbarItem: function(elem)

    {

        var parent = elem;

        do {

            if(parent.insertText) return parent;

            parent = parent.parentNode;

        } while($(parent));



        return false;

    },



    storeCaret: function()

    {

        if(MyBB.browser != 'ie' || !this.trackingCaret)

        {

            return;

        }

        

        // Internet explorer errors if you try and select an element... so just handle that by try catch

        try {

            var range = document.selection.createRange();

            var range_all = document.body.createTextRange();

            range_all.moveToElementText($(this.textarea));

            for(var sel_start = 0; range_all.compareEndPoints('StartToStart', range) < 0; sel_start++)

                range_all.moveStart('character', 1);



            var range_all = document.body.createTextRange();

            range_all.moveToElementText($(this.textarea));

            for(var sel_end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; sel_end++)

                range_all.moveStart('character', 1);



            this.lastCaretS = sel_start;

            this.lastCaretE = sel_end;

        } catch(e) { }

    },



    restartEditorSelection: function()

    {

        if(MyBB.browser != 'ie')

        {

            return;

        }



        var range = $(this.textarea).createTextRange();

        range.collapse(true);

        range.moveStart('character', this.lastCaretS);

        range.moveEnd('character', this.lastCaretE - this.lastCaretS);

        range.select();

    },



    addToolbarItem: function(toolbar, options)

    {

        if(typeof(toolbar) == 'string')

        {

            toolbar = $('editor_toolbar_'+toolbar);

        }



        if(!$(toolbar)) return;



        // Does this item already exist?

        if($('editor_item_'+options.name)) return;



        insert_first_class = false;



        // Is this the first item? childnodes = 1 (closing br) or lastchild.previousSibling = sep

        if(toolbar.childNodes.length == 1 || (toolbar.lastChild.previousSibling && toolbar.lastChild.previousSibling.className.indexOf('toolbar_sep') > -1 || (toolbar.lastChild.previousSibling.className.indexOf('editor_dropdown') > -1 && options.type != 'dropdown')))

        {

            insert_first_class = true;

        }



        if(options.type == "dropdown")

        {

            var dropdown = this.createDropDownMenu(options);

            if(dropdown)

                toolbar.insertBefore(dropdown, toolbar.lastChild);



            if(insert_first_class == true)

                dropdown.className += ' toolbar_dropdown_group_first';

        }

        else if(options.type == 'button')

        {

            var button = this.createToolbarButton(options)

            toolbar.insertBefore(button, toolbar.lastChild);



            if(insert_first_class == true)

                button.className += ' toolbar_button_group_first';

        }

        else if(options.type == 'separator')

        {

            if(toolbar.lastChild.previousSibling && !$(toolbar.lastChild.previousSibling).hasClassName('toolbar_dropdown'))

            {

                toolbar.lastChild.previousSibling.className += ' toolbar_button_group_last';

            }

            var separator = document.createElement("span");

            separator.itemType = options.type;

            separator.className = "toolbar_sep";

            toolbar.insertBefore(separator, toolbar.lastChild);

        }

    },



    createToolbarButton: function(options)

    {

        var button = document.createElement('span');

        button.itemType = options.type;

        button.id = 'editor_item_'+options.name;

        if(typeof(options.title) != 'undefined')

        {

            button.title = options.title;

        }

        button.className = 'toolbar_button toolbar_normal toolbar_button_'+options.name;



        if(typeof(options.style) == 'object')

        {

            $H(options.style).each(function(item) {

                eval('button.style.'+item.key+' = "'+item.value+'";');

            });

        }

        button.insertText = options.insert;

        button.insertExtra = '';

        if(typeof(options.extra) != 'undefined')

            button.insertExtra = options.extra;

        

        if(typeof(options.sprite) != 'undefined')

        {

            var img = document.createElement('span');

            img.className = 'toolbar_sprite toolbar_sprite_'+options.sprite;

        }

        else

        {

            var img = document.createElement('img');

            img.src = this.themePath + "/images/" + options.image;

        }

        button.appendChild(img);



        if(options.dropdown)

        {

            if(options.color_select == true)

            {

                var sel = document.createElement('em');

                sel.className = 'editor_button_color_selected';

                button.appendChild(sel);

            }

            // create the arrow

            var arrow = document.createElement('u');

            arrow.className = 'toolbar_button_arrow';

            button.appendChild(arrow);

            button.className += ' toolbar_button_with_arrow';

        }



        var end = document.createElement('strong');

        button.appendChild(end);



        // Create the actual drop down menu

        if(options.dropdown)

        {

            // create the menu item container

            var mnu = this.buildDropDownMenu(options);



            Event.observe(arrow, 'click', this.toggleDropDownMenu.bindAsEventListener(this));

            Event.observe(button, 'click', this.toggleDropDownMenu.bindAsEventListener(this));

            Event.observe(arrow, 'mouseover', function(e)

            {

                elem = Event.element(e);

                if(!elem) return;

                elem.parentNode.addClassName('toolbar_button_over_arrow');

            });

            Event.observe(arrow, 'mouseout', function(e)

            {

                elem = Event.element(e);

                if(!elem) return;

                elem.parentNode.removeClassName('toolbar_button_over_arrow');

            });

            button.appendChild(mnu);

            button.dropdown = true;

            button.menu = mnu;

        }



        // Does this button have enabled/disabled states?

        if(options.disabled_img || options.disabled_sprite)

        {

            button.disable = function()

            {

                if(button.disabled == true) return;



                if(options.disabled_sprite)

                {

                    img.removeClassName('toolbar_sprite_'+options.sprite);

                    img.addClassName('toolbar_sprite_disabled_'+options.disabled_sprite);

                }

                else

                    img.src = this.themePath + '/images/' + options.disabled_img;



                button.disabled = true;

            };



            button.enable = function()

            {

                if(!button.disabled) return;



                if(options.disabled_sprite)

                {

                    img.removeClassName('toolbar_sprite_disabled_'+options.disabled_sprite);

                    img.addClassName('toolbar_sprite_'+options.sprite);

                }

                else

                    img.src = this.themePath + '/images/' + options.image;



                button.enabled = true;

            };



            if(options.disabled && options.disabled == true)

            {

                button.disable();

                button.disabled = true;

            }

            else

                button.disabled = false;

        }



        Event.observe(button, "mouseover", this.toolbarItemHover.bindAsEventListener(this));

        Event.observe(button, "mouseout", this.toolbarItemOut.bindAsEventListener(this));



        if(!options.dropdown)

        {

            // Dropdown event listener is above...

            Event.observe(button, "click", this.toolbarItemClick.bindAsEventListener(this));

        }

        return button;

    },



    updateOldArea: function(e)

    {

        this.oldTextarea.value = $(this.textarea).value;

    },



    toolbarItemOut: function(e)

    {

        this.storeCaret();

        element = Event.element(e);



        if(!element)

            return false;



        if(!element.itemType)

            element =     this.getElementToolbarItem(element);



        if(element.disabled)

            return;



        if(typeof(element.insertText) != 'undefined')

        {

            if(element.insertExtra)

            {

                insertCode = element.insertText+"_"+element.insertExtra;

            }

            else

            {

                insertCode = element.insertText;

            }



            if(this.openTags.indexOf(insertCode) != -1 || element.className.indexOf('editor_dropdown_menu_open') > -1)

            {

                this.setElementState(element, 'clicked');

            }

        }

        this.removeElementState(element, 'hover');

    },



    toolbarItemHover: function(e)

    {

        this.storeCaret();

        element = Event.element(e);

        if(!element)

            return false;



        if(!element.itemType)

            element = this.getElementToolbarItem(element);



        if(element.disabled)

            return;



        if(!element.className || element.className.indexOf('toolbar_clicked') == -1)

            this.setElementState(element, 'hover');

    },



    toolbarItemClick: function(e)

    {

        element = Event.element(e);



        if(!element)

            return false;



        if(!element.itemType)

            element = this.getElementToolbarItem(element);



        if(element.disabled)

            return;



        if(element.dropdown && element.menu)

        {

            if(typeof(element.menu.activeItem) != "undefined")

            {

                Event.stop(e);

                if(!element.menu.lastItemValue)

                {

                    this.showDropDownMenu(element.menu);

                }

                else

                {

                    this.insertMyCode(element.insertText, element.menu.lastItemValue);

                }



                return;

            }

        }



        if(element.id == "editor_item_close_tags")

        {

            this.closeTags();

        }

        else

        {

            if(typeof(element.insertExtra) != 'undefined')

                this.insertMyCode(element.insertText, element.insertExtra);

            else

                this.insertMyCode(element.insertText);

        }

    },



    insertList: function(type)

    {

        list = "";



        do

        {

            listItem = prompt(this.options.lang.enter_list_item, "");



            if(listItem != "" && listItem != null)

            {

                list = list+"[*]"+listItem+"\n";

            }

        }

        while(listItem != "" && listItem != null);



        if(list == "")

        {

            return false;

        }



        if(type)

        {

            list = "[list="+type+"]\n"+list;

        }

        else

        {

            list = "[list]\n"+list;

        }



        list = list+"[/list]\n";

        this.performInsert(list, "", true, false);

    },



    insertURL: function()

    {

        selectedText = this.getSelectedText($(this.textarea));

        url = prompt(this.options.lang.enter_url, "http://");



        if(url)

        {

            if(!selectedText)

            {

                title = prompt(this.options.lang.enter_url_title, "");

            }

            else

            {

                title = selectedText;

            }



            if(title)

            {

                this.performInsert("[url="+url+"]"+title+"[/url]", "", true, false);

            }

            else

            {

                this.performInsert("[url]"+url+"[/url]", "", true, false);

            }

        }

    },



    insertEmail: function()

    {

        selectedText = this.getSelectedText($(this.textarea));

        email = prompt(this.options.lang.enter_email, "");



        if(email)

        {

            if(!selectedText)

            {

                title = prompt(this.options.lang.enter_email_title, "");

            }

            else

            {

                title = selectedText;

            }



            if(title)

            {

                this.performInsert("[email="+email+"]"+title+"[/email]", "", true, false);

            }

            else

            {

                this.performInsert("[email]"+email+"[/email]", "", true, false);

            }

        }

    },



    insertIMG: function()

    {

        image = prompt(this.options.lang.enter_image, "http://");



        if(image)

        {

            this.performInsert("[img]"+image+"[/img]", "", true);

        }

    },

    

    insertVideo: function(type)

    {

        selectedText = this.getSelectedText($(this.textarea));



        if(!selectedText)

        {

            url = prompt(this.options.lang.enter_video_url, "http://");

        }

        else

        {

            url = selectedText;

        }



        if(url)

        {

            this.performInsert("[video="+type+"]"+url+"[/video]", "", true, false);

        }

        this.setDropDownMenuActiveItem($('editor_item_video'), 0);

    },



    insertMyCode: function(code, extra)

    {

        this.restartEditorSelection();



        switch(code)

        {

            case "list":

                this.insertList(extra);

                break;

            case "url":

                this.insertURL();

                break;

            case "image":

                this.insertIMG();

                break;

            case "email":

                this.insertEmail();

                break;

            case "video":

                this.insertVideo(extra);

                break;

            default:

                var already_open = false;

                var no_insert = false;

                if(extra)

                {

                    var full_tag = code+"_"+extra;

                }

                else

                {

                    var full_tag = code;

                }



                var newTags = new Array();

                this.openTags.each(function(tag)

                {

                    exploded_tag = tag.split("_");

                    if(exploded_tag[0] == code)

                    {

                        already_open = true;

                        this.performInsert("[/"+exploded_tag[0]+"]", "", false);

                        var elem = $('editor_item_'+exploded_tag[0]);



                        if(elem)

                        {

                            this.removeElementState(elem, 'clicked');

                        }



                        if(elem && (elem.itemType == "dropdown" || elem.dropdown || elem.menu))

                        {

                            this.setDropDownMenuActiveItem(elem, 0);

                        }



                        if(tag == full_tag)

                        {

                            no_insert = true;

                        }

                    }

                    else

                    {

                        newTags[newTags.length] = tag;

                    }

                }.bind(this));



                this.openTags = newTags;

                var do_insert = false;



                if(extra != "" && extra != "-" && no_insert == false)

                {

                    start_tag = "["+code+"="+extra+"]";

                    end_tag = "[/"+code+"]";

                    do_insert = true;

                }

                else if(!extra && already_open == false)

                {

                    start_tag = "["+code+"]";

                    end_tag = "[/"+code+"]";

                    do_insert = true;

                }



                if(do_insert == true)

                {

                    if(!this.performInsert(start_tag, end_tag, true))

                    {

                        this.openTags.push(full_tag);

                        $('editor_item_close_tags').style.visibility = '';

                    }

                    else if($('editor_item_'+full_tag))

                    {

                        this.removeElementState($('editor_item_'+full_tag), 'clicked');

                    }

                    else if($('editor_item_'+code))

                    {

                        elem = $('editor_item_'+code);

                        if(elem.type == "dropdown" || elem.dropdown || elem.menu)

                            this.setDropDownMenuActiveItem($('editor_item_'+start_tag), 0);

                    }

                }

        }



        if(this.openTags.length == 0)

        {

            $('editor_item_close_tags').style.visibility = 'hidden';

        }

    },



    getSelectedText: function(element)

    {

        element.focus();

        if(document.selection)

        {

            var selection = document.selection;

            var range = selection.createRange();



            if((selection.type == "Text" || selection.type == "None") && range != null)

            {

                return range.text;

            }

        }

        else if(element.selectionEnd)

        {

            var select_start = element.selectionStart;

            var select_end = element.selectionEnd;

            if(select_end <= 0)

            {

                select_end = element.textLength;

            }

            var start = element.value.substring(0, select_start);

            var middle = element.value.substring(select_start, select_end);

            return middle;

        }

    },



    performInsert: function(open_tag, close_tag, is_single, ignore_selection)

    {

        var is_closed = true;



        if(!ignore_selection)

        {

            var ignore_selection = false;

        }



        if(!close_tag)

        {

            var close_tag = "";

        }

        var textarea = $(this.textarea);

        textarea.focus();



        if(document.selection)

        {

            var selection = document.selection;

            var range = selection.createRange();



            if(ignore_selection != false)

            {

                selection.collapse;

            }



            if((selection.type == "Text" || selection.type == "None") && range != null && ignore_selection != true)

            {

                if(close_tag != "" && range.text.length > 0)

                {

                    var keep_selected = true;

                    range.text = open_tag+range.text+close_tag;

                }

                else

                {

                    var keep_selected = false;



                    if(is_single)

                    {

                        is_closed = false;

                    }

                    range.text = open_tag;

                }

                range.select();

            }

            else

            {

                textarea.value += open_tag;

            }

        }

        else if(typeof(textarea.selectionEnd) != 'undefined')

        {

            var select_start = textarea.selectionStart;

            var select_end = textarea.selectionEnd;

            var scroll_top = textarea.scrollTop;



            var start = textarea.value.substring(0, select_start);

            var middle = textarea.value.substring(select_start, select_end);

            var end = textarea.value.substring(select_end, textarea.textLength);



            if(select_end - select_start > 0 && ignore_selection != true && close_tag != "")

            {

                var keep_selected = true;

                middle = open_tag+middle+close_tag;

            }

            else

            {

                var keep_selected = false;

                if(is_single)

                {

                    is_closed = false;

                }

                middle = open_tag;

            }



            textarea.value = start+middle+end;



            if(keep_selected == true && ignore_selection != true)

            {

                textarea.selectionStart = select_start;

                textarea.selectionEnd = select_start + middle.length;

            }

            else if(ignore_selection != true)

            {

                textarea.selectionStart = select_start + middle.length;

                textarea.selectionEnd = textarea.selectionStart;

            }

            textarea.scrollTop = scroll_top;

        }

        else

        {

            textarea.value += open_tag;



            if(is_single)

            {

                is_closed = false;

            }

        }

        this.updateOldArea();

        textarea.focus();

        this.trackingCaret = true;

        this.storeCaret();

        this.trackingCaret = false;        

        return is_closed;

    },



    closeTags: function()

    {

        if(this.openTags[0])

        {

            while(this.openTags[0])

            {

                tag = this.openTags.pop();

                exploded_tag = tag.split("_");

                this.performInsert("[/"+exploded_tag[0]+"]", "", false);



                if($('editor_item_'+exploded_tag[0]))

                {

                    tag = $('editor_item_'+exploded_tag[0]);

                }

                else

                {

                    tag = $('editor_item_'+tag);

                }

                if(tag)

                {

                    if(tag.itemType == "dropdown" || tag.dropdown || tag.menu)

                    {

                        this.setDropDownMenuActiveItem(tag, 0);

                    }

                    else

                    {

                        this.removeElementState(tag, 'clicked');

                    }

                }

            }

        }

        $(this.textarea).focus();

        $('editor_item_close_tags').style.visibility = 'hidden';

        this.openTags = new Array();

    },



    bindSmilieInserter: function(id)

    {

        if(!$(id))

        {

            return false;

        }



        var smilies = $(id).select('.smilie');



        if(smilies.length > 0)

        {

            smilies.each(function(smilie)

            {

                smilie.onclick = this.insertSmilie.bindAsEventListener(this);

                smilie.style.cursor = "pointer";

            }.bind(this));

        }

    },



    openGetMoreSmilies: function(editor)

    {

        MyBB.popupWindow('misc.php?action=smilies&popup=true&editor='+editor, 'sminsert', 240, 280);

    },



    insertSmilie: function(e)

    {

        element = Event.element(e);



        if(!element || !element.alt)

        {

            return false;

        }

        this.performInsert(element.alt, "", true, false);

    },



    insertAttachment: function(aid)

    {

        this.performInsert("[attachment="+aid+"]", "", true, false);

    }

};