new.js

/* Dynamic images, change class */

// MooTools

window

    .addEvent('domready', function()

    {



        $$('*.dynamic_img').addEvents(

        {

            'mouseenter': function()

            {

                this.addClass('over');

            },

            'mouseleave': function()

            {

                this.removeClass('over');

                this.removeClass('clicked');

            },

            'mousedown': function()

            {

                this.removeClass('over');

                this.addClass('clicked');

            }

        });



        $$('img.tSwitch')

            .addEvents(

            {

                'mousedown': function()

                {

                    var tbody = this.getParent('thead').getNext('tbody');

                    tbody.toggleClass('hide');

                    if (tbody.hasClass('hide'))

                    {

                        document.cookie = 't3' + this.getParent('table')

                            .getProperty('id') + '=1; expires=Wed, 1 Jan 2020 00:00:00 GMT';

                        this.removeClass('opened');

                        this.addClass('closed');

                    }

                    else

                    {

                        document.cookie = 't3' + this.getParent('table')

                            .getProperty('id') + '=1; expires=Thu, 01-Jan-1970 00:00:01 GMT';

                        this.removeClass('closed');

                        this.addClass('opened');

                    }

                }

            });



        $$('table.row_table_data tbody tr').addEvents(

        {

            'mouseenter': function()

            {

                this.addClass('hlight');

            },

            'mouseleave': function()

            {

                this.removeClass('hlight');

            },

            'mousedown': function()

            {

                this.toggleClass('marked');

            }

        });



    });

    

// IE MooTools Fix

if (Browser.Engine.trident) // für IE

{

    /**

     * Element Erweiterungen

     *

     */

    Element.implement(

    {

        insertAtCursor: function(value, select)

        {

            var pos = this.getSelectedRange();



            // IE fix BEGIN

            if (pos.start == 0 && pos.end == 0)

            {

                this.focus();

                sel = document.selection.createRange();

                sel.text = value;

                this.focus();

                return this;

            }

            // IE fix END



            var text = this.get('value');

            this.set('value', text.substring(0, pos.start) + value + text.substring(pos.end, text.length));

            if ($pick(select, true))

            {

                this.selectRange(pos.start, pos.start + value.length);

            }

            else

            {

                this.setCaretPosition(pos.start + value.length);

            }



            return this;

        },



        insertAroundCursor: function(options, select)

        {

            options = $extend(

            {

                before: '',

                defaultMiddle: '',

                after: ''

            }, options);



            var value = this.getSelectedText() || options.defaultMiddle;

            var pos = this.getSelectedRange();



            // IE fix BEGIN

            if (pos.start == 0 && pos.end == 0)

            {

                this.focus();

                sel = document.selection.createRange();

                sel.text = options.before + options.after;

                this.focus();

                return this;

            }

            // IE fix END



            var text = this.get('value');

            if (pos.start == pos.end)

            {

                this.set('value', text.substring(0, pos.start) + options.before + value + options.after + text.substring(pos.end, text.length));

                this.selectRange(pos.start + options.before.length, pos.end + options.before.length + value.length);

            }

            else

            {

                var current = text.substring(pos.start, pos.end);

                this.set('value', text.substring(0, pos.start) + options.before + current + options.after + text.substring(pos.end, text.length));

                var selStart = pos.start + options.before.length;



                if ($pick(select, true))

                {

                    this.selectRange(selStart, selStart + current.length);

                }

                else

                {

                    this.setCaretPosition(selStart + text.length);

                }

            }

            return this;

        }

    });

}

    

var BBEditor = new Class ({

    preview: null,

    textArea: null,

    id: null,



    Binds: ['fetchPreview', 'showToolbarWindow', 'insertTag', 'insertSingleTag', 'insertSmilieTag', 'hideToolbarWindow', 'showPreview', 'hidePreview'],



    /**

     * Initialisiert den Editor

     */

    initialize: function(textAreaId) {



        //connect elements

        this.id = textAreaId;

        this.textArea = $(textAreaId);

        this.toolbar = $(textAreaId + '_toolbar');

        this.preview = $(textAreaId + '_preview');



        //init elements

        this.preview.setStyle('display', 'none');



        //add Events

        $(textAreaId + '_previewButton').addEvent('click', this.fetchPreview);

        $(textAreaId + '_resourceButton').addEvent('click', this.showToolbarWindow);

        $(textAreaId + '_smilieButton').addEvent('click', this.showToolbarWindow);

        $(textAreaId + '_troopButton').addEvent('click', this.showToolbarWindow);

        $(textAreaId).addEvent('click', this.hideToolbarWindow);

        this.addEvent($(textAreaId + '_toolbar'), this.insertTag);

        this.addEvent($(textAreaId + '_resources'), this.insertTag);

        this.addEvent($(textAreaId + '_smilies'), this.insertTag);

        this.addEvent($(textAreaId + '_troops'), this.insertTag);

    },



    /**

     * Fügt den klickbaren Objekten die Events hinzu

     *

     * @param object containerObjekt

     * @param string callback

     */

    addEvent: function(div, call) {

        var childen =  div.getChildren();

        for (i = 0; i < childen.length; i++) {

            if ($(childen[i]).get('bbTag')) {

                $(childen[i]).addEvent('click', call);

            }

        }

    },



    /**

     * Fügt einen ausgewählten Tag in die

     * Textarea ein

     *

     * @param Object

     */

    insertTag: function(Event) {

        this.hidePreview();

        var link = $(Event.target.parentNode);

        var tag = link.get('bbTag');



        switch (link.get('bbType')) {

            //double tag

            case 'd':

                this.textArea.insertAroundCursor({before: '[' + tag + ']', after: '[/' + tag + ']'});

                break;

            //smilie

            case 's':

                this.textArea.insertAtCursor(tag, false);

                break;

            //once

            case 'o':

                this.textArea.insertAtCursor('[' + link.get('bbTag') + ']', false);

                break;

        }

    },



    /**

     * Zeigt ein Unterfenster der Toolbar

     * an

     *

     * @param Object

     */

    showToolbarWindow: function(Event) {

        var targetDiv = Event.target.parentNode;

        var window = $(this.id + '_' +  targetDiv.get('bbWin'));



        var show = true;

        if (window.getStyle('display') == 'block') {

            show = false;

        }



        this.hideToolbarWindow();



        if (show) {

            window.fade('hide').fade('in');

            window.setStyle('display', 'block');

        }

    },



    /**

     * Versteckt die Fenster der Toolbar

     *

     * @param Object

     */

    hideToolbarWindow: function() {

        var childen =  $(this.id + '_toolbarWindows').getChildren();

        for (i = 0; i < childen.length; i++) {

            $(childen[i]).setStyle('display', 'none');

        }

    },



    /**

     * Holt die Vorschau vom Server

     *

     * @param Object

     */

    fetchPreview: function(Event) {

        if (this.textArea.getStyle('display') == 'none' || this.textArea.value.length < 1) {

            this.hidePreview();

            return;

        }



        var jsonRequest = new Request.JSON({

            method: 'post',

            url: 'ajax.php?f=bb',

            data:

            {

                nl2br:  1,

                target: this.id,

                text:   this.textArea.value

            },

            onSuccess: this.showPreview

        });

        jsonRequest.post();

    },



    /**

     * Zeigt die Vorschau

     *

     * @param string textAreaId

     */

    showPreview: function(data) {

        if (data.error == true) {

            alert(data.errorMsg);

            return;

        } else {

            this.preview.innerHTML = data.text;

            this.preview.setStyle('display','block');

            this.textArea.setStyle('display','none');

        }

    },



    /**

     * Versteckt die Vorschau

     *

     * @param string textAreaId

     */

    hidePreview: function() {

        this.preview.setStyle('display','none');

        this.textArea.setStyle('display','inline');

    }

});







var attackSysbolState = new Array();



function getAttackSymbolState(id)

{

    var state = attackSysbolState[id];



    if (!state)

    {

        state = new Object();



        var type = 0;



        var imgClass = $('markSybol_'+id).get('class');



        var color = imgClass.substr(imgClass.lastIndexOf('_')+1, 11);



        switch (color)

        {

            case 'green':

                type = 1;

                break;

            case 'yellow':

                type = 2;

                break;

            case 'red':

                type = 3;

                break;

            default:

                type = 0;

                break;

        }

        state.type = type;

        state.oldType = type;





        attackSysbolState[id] = state;

    }



    return state;

}



function drawAttackSymbol(id)

{

    var state = getAttackSymbolState(id);



    if (state.type == 4)

    {

        state.type = 0;

    }



    switch (state.type)

    {

        case 1:

            img = 'img/green.gif';

            color = 'green';

            break;

        case 2:

            img = 'img/yellow.gif';

            color = 'yellow';

            break;

        case 3:

            img = 'img/red.gif';

            color = 'red';

            break;

        default:

            img = 'img/grey.gif';

            color = 'grey';

            break;

    }

    $('markSybol_'+id).set('class', 'attack_symbol_'+color);

}



function markAttackSymbol(id)

{



    var state = getAttackSymbolState(id);

    state.type ++ ;



    drawAttackSymbol(id);



    if (state.isSaving != true)

    {

        state.isSaving = true;



        (function()

        {

            if (state.type != state.oldType)

            {

                var jsonRequest = new Request.JSON(

                {

                   method: 'post',

                   url: 'ajax.php?f=vp&id='+id+'&state='+state.type,

                   onSuccess: function(data)

                   {

                        var state = getAttackSymbolState(data.id);



                        state.isSaving = false;



                        state.type = data.type;

                        state.oldType = data.type;



                        drawAttackSymbol(data.id);

                   }

                });

                jsonRequest.post();

            }

            else

            {

                state.isSaving = false;



            }



         }).delay(1000);

    }



}