Simple swipe/fade menus

function E(id) {return document.getElementById(id)}

function Menu(name, swipe) {
    // --- Class to make a swipy menu. The menu elements must be in the following format:
    // <div class="wrap" id="wrap_M"><div class="menu" id="menu_M">[content]</div></div>
    // where M is the menu name
    // swipe should be either "left" to swipe to the left or "down" to swipe downwards
    // CSS needed:
    // div.wrap {position: absolute; overflow: hidden;  visibility: hidden;}
    // div.wrap div.menu {position: relative; visibility: visible }

    this.name = name;
    this.el = E('menu_' + name);
    this.wrap = E('wrap_' + name);
    this.closeButton = this.el.getElementsByClassName('close')[0];
    this.init = function() {
        var t = this;
        this.closeButton.onclick = function() {t.close()}
        this.getSize();
    }
    this.opened = false;
    this.stage = 0;
    this.maxOp = .9;                // opacity of menu when it is fully revealed
    this.swipe = swipe
    this.getSize = function() {
        // --- Briefly display the menu in order to measure its dimensions
        // (this needs to be rerun at the start and whenever the user resizes)
        var disp = this.el.style.display;
        if (disp != 'block') this.el.style.display = 'block';
        this.width = this.el.offsetWidth;
        this.height = this.el.offsetHeight;
        if (disp != 'block') this.el.style.display = disp;
    }
    this.init();
    this.animate = function(action) {
        var t = this, opening = action == 'open', closing = action == 'close';
        if (this.ti != undefined) {
            clearInterval(this.ti);
        }
        this.ti = setInterval(function() {
            if (opening) t.stage += swStep;
            if (closing) t.stage -= swStep;
            if ((opening && t.stage >= 100) || (closing && t.stage <= 0)) {
                clearInterval(t.ti);
                t.ti = undefined;
                t.stage = opening ? 100 : 0;
            }
            t.draw();
        }, swInt);
    }
    this.draw = function() {
        if (this.swipe == 'left') {
            this.el.style.left = 100 - this.stage + '%';
        }
        else if (this.swipe == 'down') {
            this.el.style.bottom = (100 - this.stage) * this.el.offsetHeight / 100 + 'px';
                // (because % positioning doesn't work vertically)
        }
        setOpacity(this.el, this.maxOp * this.stage / 100);
    }
    this.el.style.display = 'block';
    this.draw();
    this.close = function () {
        console.log('menu close', this);
        removeClass('pushed', E('command_' + this.name));
        this.opened = false;
        this.animate('close');
        document.body.onclick = null;
        this.el.onclick = null;
    }
    this.open = function() {
        var t = this;
        addClass('pushed', E('command_' + this.name));
        this.opened = true;
        this.animate('open');
        document.body.onclick = function() {t.close()}
        this.el.onclick = function(ev) {stopProp(ev)}
    }
}