var loginDialog = {
    elementId: 'login_overlay_cloudsprout',
    usernameElementId: 'username_cloudsprout',
    passwordElementId: 'password_cloudsprout',
    messageElementId: 'message_cloudsprout',
    visible: false,
    hasBuild: function () {
        return ($(this.elementId) != null);
    },
    build: function () {
        var element = document.createElement("div");
        element.id = this.elementId;
        element.style.height = this.getDocumentHeight() + 'px';

        var template = new Template('<div><div class="close"><a href="javascript:loginDialog.hide();">&nbsp;</a></div><br><br><span class="caption">Log ind med e-mail og adgangskode</span><div class="login"><div class="textbox"><input id="#{usernameElementId}" type="text" /></div> <div class="textbox"><input id="#{passwordElementId}" type="password" /></div> <a href="javascript:loginDialog.login();">Log ind</a></div><div class="message" id="#{messageElementId}"></div></div>');

        element.innerHTML = template.evaluate({ usernameElementId: this.usernameElementId, passwordElementId: this.passwordElementId, messageElementId: this.messageElementId });
        element.hide();

        document.body.insert({ top: element });
    },
    ensure: function () {
        if (!this.hasBuild()) {
            this.build();
        }
    },
    show: function () {
        this.ensure();

        $(this.elementId).show();
        $(this.elementId).scrollIntoView(true);

        $(this.usernameElementId).focus();

        this.visible = true;
    },
    hide: function () {
        if (this.hasBuild()) {
            $(this.elementId).hide();
        }

        this.visible = false;
    },
    toogle: function () {
        if (!this.visible) {
            this.show();
        }
        else {
            this.hide();
        }
    },
    login: function () {
        $(this.messageElementId).innerHTML = '';
        EasyFlow.WebApplications.Frontend.RenderMarkup.Login($(this.usernameElementId).value, $(this.passwordElementId).value, current_content_path_cloudsprout, current_root_content_node_cloudsprout, current_language_cloudsprout, this.loginCallback.bind(this));
    },
    loginCallback: function (result) {
        if (result.value != 'false') {
            $(this.messageElementId).innerHTML = '<span class="correct">Logger ind...</span>';

            window.location = result.value;
        }
        else {
            $(this.messageElementId).innerHTML = '<span class="error">Forkert email/adgangskode</span>';
        }
    },
    getDocumentHeight: function () {
        var db = document.body;
        var dde = document.documentElement;

        return Math.max(db.scrollHeight, dde.scrollHeight, db.offsetHeight, dde.offsetHeight, db.clientHeight, dde.clientHeight);
    }
}

document.observe('keydown', function (event) {
    // Detect alt + shift + l
    if (event.keyCode == 76 && event.altKey && event.shiftKey) {
        loginDialog.toogle();
    }
});