const Join = function() {
    document.addEventListener('L-conn-error', this.onConnectionError.bind(this));
    document.addEventListener('L-conn-open', this.onConnectionOpen.bind(this));

    document.getElementById('join-setup-start').addEventListener('click', this.onClickStart.bind(this));
    document.getElementById('join-setup-go').addEventListener('click', this.onClickStart.bind(this));
    document.getElementById('join-setup-back').addEventListener('click', this.onClickBack.bind(this));

    this.showSetup();
};

Join.prototype.showSetup = function() {
    document.getElementById('join-setup').style.display = 'block';
    document.getElementById('join-connect').style.display = 'none';
    document.getElementById('join-error').style.display = 'none';
};

Join.prototype.showLoad = function() {
    document.getElementById('join-setup').style.display = 'none';
    document.getElementById('join-connect').style.display = 'block';
    document.getElementById('join-error').style.display = 'none';
};

Join.prototype.showError = function() {
    document.getElementById('join-setup').style.display = 'none';
    document.getElementById('join-connect').style.display = 'none';
    document.getElementById('join-error').style.display = 'block';
};

Join.prototype.onClickBack = function() {
    this.showSetup();
};

Join.prototype.onClickGo = function() {
    this.showLoad();
};

Join.prototype.onClickStart = function() {
    this.showLoad();

    const evt = new Event('L-join');
    document.dispatchEvent(evt);
};

Join.prototype.onConnectionError = function() {
    this.showError();
};

Join.prototype.onConnectionOpen = function() {
    document.getElementById('join').style.display = 'none';
    this.showSetup();
};