/*

Diese Klasse öffnet ein Popup bzw. eine Art Sprechblase.

*/

var g_openpopup = null;

var mooPopup = new Class({
    Implements: [Options, Events],
    options: {
        dockelem: null,         // an diesem element wird das popup ausgerichtet, wenn gesetzt
        dockelempos: "center",  // die genaue position der spitze am element. Standard ist Links Oben. (lo,ro,ru,lu,center)
        mouseevent: null,       // an den klickkoordianten des events wird das popup ausgerichtet, wenn gesetzt
        xpos: 0,                // die x-position des popups
        ypos: 0,                // die y-position des popups
        xdelta: 0,              // verschiebung in der x-achse (zu dockelem oder mouseevent)
        ydelta: 0,              // verschiebung in der y-achse (zu dockelem oder mouseevent)
        popupcss: 'popupcon',   // das css des übergreifenden popup-containers für dieses popup (customizing)
        peakmode: 'auto',       // gibt an welche spitze angezeigt werden soll (auto,lo,ro,lu,ru,hide)
        width: 0,               // breite des inhaltsbereiches
        height: 0,              // höhe des inhaltsbereiches
        content: ' ',      // htmlcode der im inhaltsbereich angezeigt werden soll
        headline: ' ',     // htmlcode der im headerbereicht angezeigt werden soll
        closeexisting: true,
        popupid: 'popupcon'
    },

    initialize: function(options) {

        this.setOptions(options);

        if (this.options.closeexisting == true) {

            if (g_openpopup != null)
                g_openpopup.clear();

            g_openpopup = this;
        }


        // spitze soll standarmäßig automatisch geladen werden
        if (this.options.peakmode == null || this.options.peakmode == "")
            this.options.peakmode = "auto";

        // speichere objekt im dockelement
        if (this.options.dockelem != null) {
            this.options.dockelem = $(this.options.dockelem);

            if (this.options.closeexisting == true && this.options.dockelem.retrieve('mooPopup') != null) {
                this.options.dockelem.retrieve('mooPopup').clear();
            }
            this.options.dockelem.store('mooPopup', this);
        }

        // erzeuge html des popups
        this.popupcon = this.createHtml();

        // füge popup in dombaum ein
        $(document.body).adopt(this.popupcon);

        // setze event für schliessen-button
        this.getCloseElem().addEvent("click", this.clear.bind(this));

        // ermittle die zielposition des popups
        this.setTargetPosition();

        // setze den spitz anhand den einstellungen oder der zielposition
        this.setPeakMode();

        // setze die position des popups gemäß zielposition und vorhandener spitze
        this.setPosition();

        this.checkPosition();

    },

    /* setzt die position des popups anhand des zielobjektes oder des mouseevents. wo soll die spitze hinzeigen? */
    setTargetPosition: function() {

        if (this.options.mouseevent != null) {
            this.options.xpos = this.options.mouseevent.page.x;
            this.options.ypos = this.options.mouseevent.page.y;
        }
        else if (this.options.dockelem != null) {
            this.options.dockelem = $(this.options.dockelem);

            this.options.xpos = this.options.dockelem.getPosition().x;
            this.options.ypos = this.options.dockelem.getPosition().y;

            if (this.options.dockelempos == "ro") {
                this.options.xpos += this.options.dockelem.getSize().x;
            } else if (this.options.dockelempos == "lu") {
                this.options.ypos += this.options.dockelem.getSize().y;
            } else if (this.options.dockelempos == "ru") {
                this.options.xpos += this.options.dockelem.getSize().x;
                this.options.ypos += this.options.dockelem.getSize().y;
            } else if (this.options.dockelempos == "center") {
                this.options.xpos += this.options.dockelem.getSize().x / 2;
                this.options.ypos += this.options.dockelem.getSize().y / 2;
            }
        }

        this.options.xpos += this.options.xdelta;
        this.options.ypos += this.options.ydelta;

    },


    /* setzt die position des popups relativ zur sichtbaren spitze */
    setPosition: function() {

        var peak = this.getPeak();

        if (this.options.peakmode == "lo") {

        }
        else if (this.options.peakmode == "ro") {
            this.options.xpos = this.options.xpos - this.popupcon.getSize().x;
        }
        else if (this.options.peakmode == "lu") {

            this.options.ypos = this.options.ypos - this.popupcon.getSize().y;
        }
        else if (this.options.peakmode == "ru") {
            this.options.xpos = this.options.xpos - this.popupcon.getSize().x - (this.getPeak("ru").getSize().x - this.getPeak("ru").getStyle("left").toInt());
            this.options.ypos = this.options.ypos - this.popupcon.getSize().y;
        } else if (this.options.peakmode == "hide") {
            this.options.ypos + "px";
        }

        // setze position endgültig
        this.popupcon.style.top = this.options.ypos + "px";
        this.popupcon.style.left = this.options.xpos + "px";

    },

    /* stellt die gewünschte Spitze an einer der vier Ecken dar, anhand der Option "peakmode". */
    setPeakMode: function() {

        if (this.options.peakmode == "auto") {
            var fullx = $(document.body).getSize().x;
            var fully = $(document.body).getSize().y;

            var letter1 = "r";
            var letter2 = "u";

            if (this.options.xpos < (fullx / 2))
                letter1 = "l";

            if (this.options.ypos < (fully / 2))
                letter2 = "o";

            this.options.peakmode = letter1 + letter2;

        }

        if (this.options.peakmode == "lo") {
            var peak = this.popupcon.getFirst().getFirst().getFirst().getFirst().getFirst(); // table,tr,td,div //('p_spitze_lo');
            peak.style.display = 'block';
        }
        else if (this.options.peakmode == "ro") {

            var peak = this.popupcon.getFirst().getFirst().getFirst().getLast().getFirst(); // table,tr,td,div //('p_spitze_lo');
            peak.style.display = 'block';

            // setze rechter schatten nach unten
            var psro = this.popupcon.getFirst().getFirst().getChildren()[1].getLast();
            psro.style.backgroundPosition = "0px 11px";

        } else if (this.options.peakmode == "lu") {

            var peak = this.popupcon.getFirst().getFirst().getLast().getFirst().getFirst(); // table,tr,td,div //('p_spitze_lo');
            peak.style.display = 'block';

            // setze schatten unten nach links damit er nicht überlappt
            var psu = this.popupcon.getFirst().getFirst().getLast().getFirst();
            psu.style.backgroundPosition = "36px 0px";

        } else if (this.options.peakmode == "ru") {

            var peak = this.popupcon.getFirst().getFirst().getLast().getFirst().getLast(); // table,tr,td,div //('p_spitze_lo');
            peak.style.display = 'block';

            // setze schatten unten nach links damit er nicht überlappt
            var psu = this.popupcon.getFirst().getFirst().getLast().getFirst();
            var x = this.getContentElem().getSize().x - 1;
            psu.style.backgroundPosition = "-" + x + "px 0px";
        }
    },

    /* überprüft ob das popup nicht unten oder rechts hinausragt aus dem fenster */
    checkPosition: function() {

        if (this.popupcon.getTop() + this.popupcon.getSize().y > $(document.body).getSize().y) {
            this.popupcon.style.top = ($(document.body).getSize().y - this.popupcon.getSize().y - 10) + "px";
        }

        if (this.popupcon.getLeft() + this.popupcon.getSize().x > $(document.body).getSize().x) {
            this.popupcon.style.left = ($(document.body).getSize().x - this.popupcon.getSize().x - 10) + "px";
        }
    },

    /* erzeugt den HTML-Code für das Popup */
    createHtml: function() {

        var popupcon = new Element("div", { id: this.options.popupid, 'class': this.options.popupcss });

        var htmlwidth = "";

        if (this.options.width > 0) {
            htmlwidth = " style=\"width:" + this.options.width + "px\" ";
        }

        var html = "";

        html += "<table cellpadding=\"0px\" cellspacing=\"0px\">";
        html += "<tr>";
        html += "    <td><div id=\"p_spitze_lo\" class=\"p_spitze_lo\"></div></td>";
        html += "    <td><div id=\"p_spitze_ro\" class=\"p_spitze_ro\"></div></td>";
        html += " </tr>";
        html += " <tr>";
        html += "    <td valign=\"top\" class=\"p_balken\" id=\"p_balken\"><div id=\"p_close\" class=\"p_close\"></div>" + this.options.headline + "</td>";
        html += "    <td valign=\"top\" class=\"p_s_r_o\" id=\"p_s_r_o\">&nbsp;</td>";
        html += "</tr>";
        html += "<tr>";
        html += "    <td class=\"p_inhalt\" valign=\"top\" id=\"p_inhalt\"" + htmlwidth + ">" + this.options.content + "</td>";
        html += "    <td class=\"p_s_r\" valign=\"top\">&nbsp;</td>";
        html += "</tr>";
        html += "<tr>";
        html += "   <td id=\"p_s_u\" class=\"p_s_u\">";
        html += "         <div id=\"p_spitze_lu\" class=\"p_spitze_lu\"></div>";
        html += "        <div id=\"p_spitze_ru\" class=\"p_spitze_ru\"></div>";
        html += "   </td>";
        html += "   <td class=\"p_s_ru\">&nbsp;</td>";
        html += "</tr>";
        html += "</table>";

        popupcon.set('html', html);

        return popupcon;
    },

    /* gibt das element im popup zurück, das den Inhalt enthält */
    getContentElem: function() {

        var td = this.popupcon.getFirst().getFirst().getChildren()[2].getFirst();

        return td;
    },

    /* gibt das Element im Popup zurück, das die Headline enthält */
    getHeadlineElem: function() {

        var td = this.popupcon.getFirst().getFirst().getChildren()[1].getFirst();

        return td;
    },

    /* gibt das Element im Popup zurück, mit das Popup geschlossen wird */
    getCloseElem: function() {

        var td = this.popupcon.getFirst().getFirst().getChildren()[1].getFirst().getLast();

        return td;
    },

    /* gibt die Spitze zurück anhand es übergebenen modus ('lo','ro','lu','ru'). wird nichts übergeben,
    dann wird der modus von den eingestellten optionen genommen */
    getPeak: function(peakid) {

        var peak = null;

        if (peakid == null || peakid == "")
            peakid = this.options.peakmode;

        if (peakid == "lo") {
            peak = this.popupcon.getFirst().getFirst().getFirst().getFirst().getFirst();
        }
        else if (peakid == "ro") {
            peak = this.popupcon.getFirst().getFirst().getFirst().getLast().getFirst();
        }
        else if (peakid == "lu") {
            peak = this.popupcon.getFirst().getFirst().getLast().getFirst().getFirst();
        }
        else if (peakid == "ru") {
            peak = this.popupcon.getFirst().getFirst().getLast().getFirst().getLast();
        }

        return peak;
    },

    clear: function() {
        this.fireEvent("OnPopupCleared");
        this.popupcon.destroy();

    }
});



/*
var mooPopupManager = new Class({
    Implements: Options,
    options: {
        onlyallowone: false
    },

    initialize: function(options) {

        this.setOptions(options);

        this.popuparr = new Array();
    },

    add: function(popup) {
        this.popuparr.push(popup);
    },

    remove: function(popup) {
        for (var i = 0; i < this.popuparr.length; i++)
            if (this.popuparr[i] == popup)
            this.popuparr.erase(popup);
    },

    clear: function() {
        this.popuparr.empty();
    }

});
*/