var pangrammer = {};

pangrammer.byId = function (id) {
    return document.getElementById(id);
};

pangrammer.init = function () {
    var pg = this.byId('pangram');
    var ln = this.byId('length');
    var missing = this.byId('missing');
    var duplicates = this.byId('duplicates');
    var saver = this.byId('saver');
    var language = this.byId('language');

    var handle = function () {
        var val = pg.value.toLowerCase();
        var available = language.value.split('-')[1];
        var extra = val;

        // strip whitespace
        val = val.replace(/[^\w]/g,'');

        // strip anything except letters
        extra = extra.replace(new RegExp('[^' + available + ']', 'g'), '');

        // remove a complete alphabet to find duplicates
        for (var i=0; i<available.length; i++) {
            extra = extra.replace(available[i], '');
        }
        // sort
        duplicates.innerHTML = extra.split('').sort().join('');

        // remove already typed-in letters
        available = available.replace(new RegExp('[' + val + ']', 'g'), '');

        if (available.length > 0) {
            missing.innerHTML = available;
            saver.style.display = 'none';
        } else {
            missing.innerHTML = '<span class="complete">complete</span>';
            saver.style.display = 'block';
        }
        ln.innerHTML = val.length + " letters";
    };

    pg.onkeyup = handle;
    pg.onkeydown = handle;
    language.onchange = handle;
};

window.onload = function () {
    pangrammer.init();
};