function show_dialog_login() {
    var content = new Element('div');
    var dialog = new Dialog("Login…", content);
    
    var social = new Element('div', {
        'class': 'social-login'
    });
    
    var or_label_container = new Element('div', {
        'class': 'login-or_label-container'
    });
    social.grab(or_label_container);
    
    var or_label = new Element('div', {
        'class': 'login-or_label',
        'text': "oder"
    });
    or_label_container.grab(or_label);
    
    var legacy = new Element('div');
    
    content.grab(social);
    content.grab(legacy);
    
    // <fb:login-button onlogin="fb_login();" perms="email">Login with Facebook</fb:login-button>

    window.fb_login = function() {
        var session = FB.getSession();
        if(session) {
            call_ajax('fb_login', {
                'access_token': session.access_token
            }, function(response) {
                if(response.state == 0) {
                    display_error_message(response);
                } else {
                    if(window.location.href.match('usability-manager.org/(#|$)')) {
                        window.location = '/dashboard';
                    } else {
                        window.location.reload();
                    }
                }
            });
        }
    }
    
    var fb_stuff = new Element('div', {
        'html': '<div id="fb-root"></div><fb:login-button onlogin="fb_login();" style="font-size: 12px;" perms="email">Login with Facebook</fb:login-button>'
    });
    social.grab(fb_stuff);
    
    FB.init({ 
        appId:'142625715831163', cookie:true,
        status:true, xfbml:true
    });

    // Clear floats of injected inputs
    var clearfix = new Element('div');
    clearfix.set('class', 'clearfix');
    clearfix.inject(legacy);
    
    // Name
    var input_name_label = new Element('label', {
        'html': 'Name:',
        'for': 'login_username_input'
    });
    input_name_label.inject(clearfix);
    
    var input_name = new Element('input', {
        'type': 'text',
        'id': 'login_username_input'
    });
    input_name.inject(clearfix);


    // Password
    var input_password_label = new Element('label', {
        'html': 'Passwort:',
        'for': 'login_password_input'
    });
    input_password_label.inject(clearfix);
    
    var input_password = new Element('input', {
        'type': 'password',
        'id': 'login_password_input'
    });
    input_password.inject(clearfix);


    // Buttons
    var button_box = new Element('div', {'class': 'button-container-box clearfix'});
    button_box.inject(legacy);

    var button_cancel = new Element('a', {
        'html': 'Abbrechen',
        'href': '#',
        'class': 'button float_right red'
    });
    button_cancel.inject(button_box);

    var button_login = new Element('a', {
        'html': 'Login',
        'href': '#',
        'class': 'button float_right'
    });
    button_login.inject(button_box);
    
    var spinner = new SpinnerOverlay(content);
    
    button_cancel.addEvent('click', function() {
        dialog.hide();
    });
    
    // TODO: Use a form to enable the browser's password storing mechanisms.
    // TODO: Submit form by hitting "Return"
    button_login.addEvent('click', function() {
        spinner.show();
        call_ajax('login', {
            'username': input_name.value,
            'password': input_password.value
        }, function(response) {
            input_name.set('value', '');
            input_password.set('value', '');
            if(response.state == 0) {
                spinner.hide();
                if(response.error.code == 'AuthenticationError') {
                    var message = new Element('p', {
                        'class': 'authentication-error',
                        'text': "Die Kombination von Nutzername und Passwort ist nicht korrekt."
                    });
                    button_box.grab(message, 'before');
                } else {
                    display_error_message(response);
                }
            } else {
                if(window.location.href.match('usability-manager.org/(#|$)')) {
                    window.location = '/dashboard';
                } else {
                    window.location.reload();
                }
            }
        });
    });
}

function show_dialog_register() {
    var content = new Element('div');
    var dialog = new Dialog("Anmelden…", content);
    
    var social = new Element('div', {
        'class': 'social-login'
    });
    
    var or_label_container = new Element('div', {
        'class': 'login-or_label-container'
    });
    social.grab(or_label_container);
    
    var or_label = new Element('div', {
        'class': 'login-or_label',
        'text': "oder"
    });
    or_label_container.grab(or_label);
    
    var legacy = new Element('div');
    
    content.grab(social);
    content.grab(legacy);
    
    // <fb:login-button onlogin="fb_login();" perms="email">Login with Facebook</fb:login-button>

    window.fb_login = function() {
        var session = FB.getSession();
        if(session) {
            call_ajax('fb_login', {
                'access_token': session.access_token
            }, function(response) {
                if(response.state == 0) {
                    display_error_message(response);
                } else {
                    window.location = '/dashboard';
                }
            });
        }
    }
    
    var fb_stuff = new Element('div', {
        'html': '<div id="fb-root"></div><fb:login-button onlogin="fb_login();" style="font-size: 12px;" perms="email">Login with Facebook</fb:login-button>'
    });
    social.grab(fb_stuff);
    
    FB.init({ 
        appId:'142625715831163', cookie:true,
        status:true, xfbml:true
    });

    // Clear floats of injected inputs
    var clearfix = new Element('div');
    clearfix.set('class', 'clearfix');
    clearfix.inject(legacy);
    
    // Name
    var input_name_label = new Element('label', {
        'html': 'Name:',
        'for': 'register_username_input'
    });
    input_name_label.inject(clearfix);
    
    var input_name = new Element('input', {
        'type': 'text',
        'id': 'register_username_input'
    });
    input_name.inject(clearfix);


    // Mail
    var input_mail_label = new Element('label', {
        'html': 'Mail:',
        'for': 'register_mail_input'
    });
    input_mail_label.inject(clearfix);
    
    var input_mail = new Element('input', {
        'type': 'text',
        'id': 'register_mail_input'
    });
    input_mail.inject(clearfix);


    // Buttons
    var button_box = new Element('div', {'class': 'button-container-box clearfix'});
    button_box.inject(legacy);

    var button_cancel = new Element('a', {
        'html': 'Abbrechen',
        'href': '#',
        'class': 'button float_right red'
    });
    button_cancel.inject(button_box);

    var button_register = new Element('a', {
        'html': 'Anmelden',
        'href': '#',
        'class': 'button float_right'
    });
    button_register.inject(button_box);
    
    var spinner = new SpinnerOverlay(content);
    
    button_cancel.addEvent('click', function() {
        dialog.hide();
    });
    
    // TODO: Use a form to enable the browser's password storing mechanisms.
    // TODO: Submit form by hitting "Return"
    button_register.addEvent('click', function() {
        spinner.show();
        clear_validation(input_name);
        clear_validation(input_mail);
        call_ajax('register', {
            'username': input_name.value,
            'mail': input_mail.value
        }, function(response) {
            console.log(response.state)
            if(response.state == 0) {
                spinner.hide();
                if(response.error.code == 'UsernameNotAvailable') {
                    display_message(input_name, "Dieser Name ist bereits vergeben.");
                } else if(response.error.code == 'InvalidMailAddress') {
                    display_message(input_mail, "Ungültige Adresse.");
                } else if(response.error.code == 'MailAddressAlreadyUsed') {
                    display_message(input_mail, "Diese Adresse wird schon von einem anderen Account verwendet.");
                } else {
                    display_error_message(response);
                }
            } else {
                if(window.location.href.match('usability-manager.org/(#|$)')) {
                    window.location = '/dashboard';
                } else {
                    window.location.reload();
                }
            }
        });
    });
}

function show_dialog_logout() {
    var content = new Element('div');
    var dialog = new Dialog("Ausloggen…", content);

    var description = new Element('p', {
        'html': "Bitte warten Sie einen Moment… Sie werden bald weitergeleitet!"
    });
    description.inject(content);
    
    var spinner_container = new Element('div');
    spinner_container.setStyles({
        'text-align': 'center'
    });
    var spinner = new Spinner();
    spinner_container.grab(spinner);
    content.grab(spinner_container);
    spinner.start();
    
    call_ajax('logout', {'sure': true}, function(response) {
            if(response.state == 0) {
                var error_content = new Element('div');
                var error_dialog = new Dialog("Entschuldigung, ein Fehler ist aufgetreten! (" + response.error.code + ")", error_content);
                var error_message = new Element('p');
                error_message.set('html', response.error.message);
                error_message.inject(error_content);
            } else {
                window.location = '/'
            }
        });
}