new Vue({
    el: '#app',

    data: {
        ws: null, // Websocket
        newMsg: '',
        chatContent: '',
        email: null,
        username: null,
        password: null,
        joined: false
    },

    created: function() {
        var self = this;
        this.ws = new WebSocket('ws://' + window.location.host + '/ws');
        this.ws.addEventListener('message', function(e) {
            var msg = JSON.parse(e.data);
            self.chatContent += '<div class="chip">'
                + '<img src="' + self.gravatarURL(msg.email) + '">'
                + msg.username
                + '</div>'
                + emojione.toImage(msg.message) + '<br/>';
            var element = document.getElementById('chat-messages');
            element.scrollTop = element.scrollHeight;
        });
    },

    methods: {
        send: function () {
            if (this.newMsg != '') {
                this.ws.send(
                    JSON.stringify({
                            email: this.email,
                            username: this.username,
                            message: $('<p>').html(this.newMsg).text()
                        }
                    ));
                this.newMsg = '';
            }
        },

        join: function () {
            if (!this.email) {
                Materialize.toast('You must enter an adress', 2000);
                return
            }
            if (!this.username) {
                Materialize.toast('You must enter a username', 2000);
                return
            }
            if (!this.password) {
                Materialize.toast('You must enter a password', 2000);
                return
            }
            this.email = $('<p>').html(this.email).text();
            this.username = $('<p>').html(this.username).text();
            this.password = $('<p>').html(this.password).text();
            this.ws.send(
                JSON.stringify({
                        email: this.email,
                        username: this.username,
                        password: this.password,
                        message: "login"
                    }
                ));
            this.newMsg = '';
            this.joined = true;
        },

        gravatarURL: function(email) {
            return 'http://www.gravatar.com/avatar/' + CryptoJS.MD5(email);
        }
    }
});