var MainLogin = new Class({
    Implements: [Options, Events],
    options: {
        headline: " ",
        question: " ",
        questionstyle: "text-align:center",
        onLoggedIn: null
    },
    initialize: function(dockelem, options) {

        this.setOptions(options);

        this.loadOverlay();

    },

    /* lade die html-elemente des logins und positioniert sie in der mitte */
    loadElements: function() {

        var html = "";  //"<div class=\"question\" style=\"" + this.options.questionstyle + "\">" + this.options.question + "</div>";

        html += "<table style=\"margin:5px 0px 0px 20px;\">";
        html += "<colgroup>";
        html += "    <col width=\"90px\" />";
        html += "    <col width=\"*\" />";
        html += "</colgroup>";
        html += "<tr>";
        html += "    <td align=\"left\">Benutzername</td>";
        html += "    <td><input type=\"text\" id=\"txtUser\"  class=\"textbox\" style=\"width:180px\"></input></td>";
        html += "</tr>";
        html += "<tr>";
        html += "    <td align=\"left\">Passwort</td>";
        html += "    <td><input ID=\"txtPass\" class=\"textbox\" style=\"width:180px\" type=\"password\"></input></td>";
        html += "</tr>";
        html += "<tr>";
        html += "    <td>&nbsp;</td>";
        html += "    <td style=\"text-align:right\"><div class=\"link\" id=\"divSend\">Anmelden</a></td>";
        html += "</tr>";
        html += "<tr>";
        html += "    <td colspan=\"2\" style=\"text-align:right;padding:25px 0px 0px 0px\"><a href=\"../pluginProfile/registration.aspx\">Ich bin noch nicht registriert</a><br /><a href=\"passlost.aspx\">Ich habe mein Passwort vergessen</a></td>";
        html += "</tr>";
        html += "</table>";

        html += "<div class=\"redbar\">Jetzt Registrieren</div>"
        html += "<div class=\"redbarsub\">Sie müssen eingeloggt sein um Räume reservieren zu können. <a href=\"../pluginProfile/registration.aspx\">Hier registrieren</a></div>";

        var x = ($(document.body).getSize().x / 2).toInt() - 200;
        var y = ($(document.body).getSize().y / 5).toInt();

        this.popup = new mooPopup({ xpos: x, ypos: y, dockelem: null, dockelempos: 'center', popupcss: 'mainlogin', headline: "Einloggen", content: html, closeexisting: false });

        this.popup.popupcon.getElement(' #txtPass').addEvent("keydown", this.onTextBoxKeyDown.bind(this));

        var divSend = this.popup.popupcon.getElement(' #divSend');
        // var divCancel = this.popup.popupcon.getElement('#p_inhalt #divCancel');

        divSend.addEvent("click", this.onLoginClick.bind(this));
        // divCancel.addEvent("click", this.onCancelClick.bind(this));

        this.popup.addEvent("OnPopupCleared", this.hideOverlay.bind(this));
    },

    /* wenn benutzer auf login-button klickt */
    onLoginClick: function(e) {
        var ev = new Event(e);

        var txtuser = $('txtUser');
        var txtpass = $('txtPass');

        if (txtuser == null || txtpass == null)
            return;

        var jsonRequest = new Request.JSON({ url: "../ajax/ajaxservice.aspx?action=doLogin&username=" + txtuser.value + "&passwort=" + txtpass.value + "&y=" + new Date().getMilliseconds(), onComplete: this.onLoginResponse.bind(this) }).send();

    },

    /* behandelt ajax-antwort vom server */
    onLoginResponse: function(res) {

        if (res.login == true) {

            alert("Sie haben sich erfolgreich eingeloggt.");

            this.popup.clear();
            this.hideOverlay();

            setUserLoggedIn(res.userid);

            this.fireEvent("OnLoginPassed");

            //window.reload();
        } else {

            if (res.active == false) {
                alert("Ihr Benutzerzugang wurde noch von keinem Sachbearbeiter freigegeben.  \r\n \r\n Benutzerzugänge sind frühestens 24 Stunden nach der Registrierung aktiv.");
            } else {
                alert("Falscher Benutzername oder Passwort.");
            }
        }
    },

    /* setze alles auf schwarzen hintergrund */
    loadOverlay: function() {

        // dunkler overlay-effekt
        var el2 = document.createElement("div");
        el2.id = "fade";
        el2.className = "black_overlay";

        // mootools
        el2 = $(el2);

        // füge beide elemente am beginn des DOM ein
        document.body.insertBefore(el2, document.body.firstChild);

        // setze beides sichtbar (todo: mit effekt)
        document.getElementById('fade').style.display = 'block';

        // berücksichtige aktuelle scrollposition des fensters  
        el2.style.top = window.getScroll().y + "px";

        // wird auf dunkle Fläche geklickt, dann schliesse imagebox
        el2.addEvent("click", this.onBlackClick.bind(this));

        // unterbinde scrolling wenn imagebox geladen wurde
        el2.addEvent('mousewheel', function() { return false; });

        // overlay ist geladen
        this.isOverlayLoaded = true;

        // lade die einzelnen navigations-elemente, etc.
        this.loadElements(this.whitebox);

        // höre auf tastatureingaben
        $(document.body).addEvent("keydown", this.onKeyDown.bind(this));
    },


    /* der Überblendeffekt wird entfernt */
    hideOverlay: function() {
        var el1 = document.getElementById("light");

        if (el1 != null)
            document.body.removeChild(el1);

        var el2 = document.getElementById("fade");

        if (el2 != null)
            document.body.removeChild(el2);

        this.isOverlayLoaded = false;


    },

    /* wenn auf die schwarze fläche geklickt wird */
    onBlackClick: function() {
        this.hideOverlay();
        this.popup.clear();
    },

    /* behandle tastatureingaben */
    onKeyDown: function(event) {

        // prevent navigating with arrows, close when 'esc' is clicked

        switch (event.code) {
            case 27: // Esc
                this.hideOverlay();
                return false;
            case 37: // Left arrow
            case 38: // Left arrow
            case 39: // Right arrow
            case 40: // down arrow
                return false;

        }
        // allow other keys
        return true;
    },

    /* behandle tastatureingaben */
    onTextBoxKeyDown: function(event) {

        // prevent navigating with arrows, close when 'esc' is clicked

        switch (event.code) {
            case 13: // ENTER
                this.onLoginClick(null);
                return false;
        }
        // allow other keys
        return true;
    }


});