/*

Diese Klasse handelt das Menü-Handling.

*/

var mooMegaMenu = new Class({
    Implements: Options,
    options: {
        classname: 'mainpoint',         // alle elemente, die diese css-klasse zugewiesen haben werden berücksichtigt
        subclassname: 'submenu',        // alle elemente, die diese css-klasse zugewiesen haben werden berücksichtigt
        offsetX: -1,
        offsetY: 0,
        useFadeEffect: false,
        closingDelay: 100               // how many ms it takes till the menu closes after the mouse out event fired

    },

    /* constructor */
    initialize: function (options) {

        this.setOptions(options);

        this.menutriggers = $$('.' + this.options.classname);
        this.menumarker = $('menumarker');

        for (var i = 0; i < this.menutriggers.length; i++) {
            var trigger = this.menutriggers[i];

            trigger.addEvent('mouseover', this.onMouseOver.bind(this));
            trigger.addEvent('mouseleave', this.onTriggerLeave.bind(this));
        }

        this.visibleSubmenu = null;

    },

    /* zeigt das untermenü an */
    showSubmenu: function (dockElem, elemId) {

        // eventuell unvollständige id-angabe?
        if (elemId.indexOf('submenu') == -1) {
            elemId = 'submenu' + elemId;
        }

        // entferne eventuell bereits sichtbares menü
        if (this.visibleSubmenu != null) {
            this.visibleSubmenu.setStyle('display', 'none');
        }

        var subelem = $(elemId);

        if (subelem != null) {

            dockElem = $(dockElem);
            subelem.addEvent('mouseleave', this.onSubmenuLeave.bind(this));
            subelem.setStyle('top', dockElem.getTop() + dockElem.getSize().y + this.options.offsetY);

            // wenn element aus fenster ragt
            if (this.isTooBig(subelem, dockElem.getLeft() + this.options.offsetX)) {
                // schiebe soweit nach links dass submenu nicht über Rand geht
                var left = dockElem.getLeft() + subelem.getSize().x;
                var docw = $(document.body).getSize().x;
                var gap = left - (left - docw) - 50; 
                subelem.setStyle('left', gap - subelem.getSize().x);
            } else {
                subelem.setStyle('left', dockElem.getLeft() + this.options.offsetX);
            }

            this.show(subelem);


            // setze kleinen pfeil mittig unter dem topmenpunkt
            this.menumarker.setStyle('top', dockElem.getTop() + dockElem.getSize().y + this.options.offsetY + 1);
            this.menumarker.setStyle('left', dockElem.getLeft() + (dockElem.getSize().x / 2) - this.options.offsetX - 8);
            this.show(this.menumarker);

            this.visibleSubmenu = subelem;
        }
    },

    /* prüft ob das div über das Fenser rechts rausgeht */
    isTooBig: function (div, start) {

        // damit breite bestimmt werden kann
        div.setStyle('display', 'block'); 

        var left = start + div.getSize().x;
        var docw = $(document.body).getSize().x;

        if (left > (docw-30)) {
            return true;
        } else {
            return false;
        }
    },

    /* was machen bei mouse over? */
    onMouseOver: function (e) {

        // zeige entsprechendes menü
        this.showSubmenu(e.target, 'submenu' + e.target.get('rel'));

    },

    /* überprüft ob es erlaubt ist das aktive submenü zu verlassen nach dem mouseover */
    isHidingAllowed: function (e) {

        var ev = new Event(e);

        // wenn in das submenü gefahren wird mit der maus dann nicht löschen
        if (ev.relatedTarget == this.visibleSubmenu || ev.relatedTarget == this.menumarker || ev.relatedTarget.className == 'mainpoint') {
            return false;
        }

        return true;
    },

    /* wird aufgerufen wenn das untermenü mit der maus verlassen wird */
    onSubmenuLeave: function (e) {
        // entferne menü
        if (this.visibleSubmenu != null) {
            if (this.isHidingAllowed(e)) {
                this.hideSubmenu.delay(this.options.closingDelay, this);
            }
        }
    },

    /* wird aufgerufen wenn das element dass die aktion ausgelöst hat, mit der maus verlassen wird */
    onTriggerLeave: function (e) {

        // entferne menü wenn es erlaubt ist 
        if (this.visibleSubmenu != null) {
            if (this.isHidingAllowed(e)) {
                // auskommentiert, da es das Menu zu schnell schloss
                this.hideSubmenu.delay(this.options.closingDelay, this);
            }
        }
    },

    hideSubmenu: function () {

        this.hide(this.visibleSubmenu);
    },

    /* stellt ein element dar. wenn in options angegeben dann mit fade-in. */
    hide: function (elem) {
        if (this.options.useFadeEffect == false) {
            elem.setStyle('display', 'none');
        } else {

            var myFx = new Fx.Tween(elem, { duration: 'normal' });
            myFx.start('opacity', '0.8', '0');
        }

        // menümarker immer unsichtbar machen
        this.menumarker.setStyle('display', 'none');
    },

    /* blendet ein element aus. wenn in options angegeben dann mit fade-out. */
    show: function (elem) {

        if (this.options.useFadeEffect == false) {
            elem.setStyle('display', 'block');
        } else {

            elem.set('opacity', '0');
            elem.setStyle('display', 'block');
            var myFx = new Fx.Tween(elem, { duration: 'normal' });
            myFx.start('opacity', '0', '0.8');
        }
    }
});



// Passe die Menu Boxen an wo noetig
// ===================================================
/*window.addEvent('load', function () {
    try {
        var verwaltung = $('submenu4070');
        verwaltung.setStyle('margin-left', '-108px');

        var freizeit = $('submenu4089');
        freizeit.setStyle('margin-left', '-558px');

        var kirche = $('submenu4091');
        kirche.setStyle('margin-left', '154px');

        var service = $('submenu4071');
        service.setStyle('margin-left', '-80px');
    }
    catch (Exception) { }
}); */