Implementation of http://javascriptgrid.org/ toggling with keystroke `g` by default

javascriptgrid.js

function grid() {
    var k, d, e, g, j, a, m, h, l, c, o, n, b, f;
        
    c = {
        columns: {
            "default": {
                columns: 12
            }
        },
        gapWidth: 20,
        columnWidth: 60,
        opacity: 0.1,
        color: "#ff2a84"
    };
    
    l = window.javascriptgrid || {};
    for (o in c) {
        if (c.hasOwnProperty(o)) {
            if (!l[o]) {
                l[o] = c[o];
            }
        }
    }
    e = l.columns["default"].columns;
    m = (l.columnWidth + l.gapWidth) * e;
    k = document.getElementsByTagName("BODY")[0];
    a = document.getElementById("jsg-grid");
    if (a) {
        k.removeChild(a);
    }
    a = document.createElement("div");
    a.id = "jsg-grid";
    b = document.getElementById("jsg-style");
    if (b) {
        k.removeChild(b);
    }
    b = document.createElement("style");
    b.id = "jsg-style";
    for (h = 1; 1 <= e ? h <= e : h >= e; 1 <= e ? h += 1 : h -= 1) {
        a.appendChild(document.createElement("div"));
    }
    b.type = "text/css";
    j = "#jsg-grid {\n  bottom: 0;\n  _bottom: auto;\n  left: 50%;\n  height: 0;\n  margin-left: -" + ((m - l.gapWidth) / 2) + "px;\n  overflow: hidden;\n  position: fixed;\n  _position: absolute;\n  z-index: 99998;\n  width: " + m + "px;\n  -moz-transition-property: height;\n  -webkit-transition-property: height;\n  -o-transition-property: height;\n  _top: 0;\n  transition-property: height;\n  -moz-transition-duration: 0.5s;\n  -webkit-transition-duration: 0.5s;\n  -o-transition-duration: 0.5s;\n  transition-duration: 0.5s;\n}\n#jsg-grid.jsg-visible {\n  height: 100%;\n  _height: expression(document.documentElement.scrollHeight + 'px');\n}\n#jsg-grid div {\n  background: " + l.color + ";\n  filter: alpha(opacity=" + (l.opacity * 100) + ");\n  float: left;\n  height: 100%;\n  _height: expression(document.documentElement.scrollHeight + 'px');\n  margin-right: " + l.gapWidth + "px;\n  opacity: " + l.opacity + ";\n  width: " + l.columnWidth + 'px;\n}\n#jsg-control {\n  background: #244a73;\n  bottom: -22px;\n  display: block;\n  font: bold 11px/14px helvetica, verdana, arial, sans-serif;\n  height: 14px;\n  left: 50%;\n  margin-left: -135px;\n  padding: 4px 25px;\n  position: fixed;\n  _position: absolute;\n  text-align: center;\n  _top: expression(document.documentElement.scrollTop + document.documentElement.clientHeight + \'px\');\n  -moz-transition-property: bottom;\n  -webkit-transition-property: bottom;\n  -o-transition-property: bottom;\n  transition-property: bottom;\n  -moz-transition-duration: 0.5s;\n  -webkit-transition-duration: 0.5s;\n  -o-transition-duration: 0.5s;\n  transition-duration: 0.5s;\n  width: 220px;\n  z-index: 99999;\n}\n#jsg-control:before,\n#jsg-control:after {\n  background: transparent;\n  border: 22px solid;\n  border-color: transparent #244a73 #244a73 transparent;\n  content: " ";\n  height: 0;\n  left: -44px;\n  margin-left: 0;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 0;\n}\n#jsg-control:after {\n  border-color: transparent transparent #244a73 #244a73;\n  left: 270px;\n}\n#jsg-control.jsg-visible {\n  bottom: 0;\n}\n#jsg-control a {\n  color: #fff;\n  float: right;\n  text-decoration: none !important;\n}\n#jsg-control a:hover {\n  color: #ddd;\n  text-decoration: none !important;\n}\n#jsg-control a:first-child {\n  float: left;\n}\n#jsg-control a:first-child:before {\n  content: "' + e + ' columns with";\n  margin-right: 0.3em;\n}';
    f = l.columns;
    for (o in f) {
        if (f.hasOwnProperty(o)) {
            d = f[o];
            if (o !== "default") {
                m = (l.columnWidth + l.gapWidth) * d.columns;
                j += "\n\n@media screen and (min-width: " + d.minWidth + "px) and (max-width: " + d.maxWidth + "px) {\n  #jsg-grid {\n    margin-left: -" + ((m - l.gapWidth) / 2) + "px;\n    width: " + m + 'px;\n  }\n  #jsg-control a:first-child:before {\n    content: "' + d.columns + ' columns with";\n  }\n}';
            }
        }
    }
    if (b.styleSheet) {
        b.styleSheet.cssText = j;
    } else {
        b.innerHTML = j;
    }
    
    k.appendChild(b);
    k.appendChild(a);
    
    return a;
}


window.addEventListener('keydown', function (event) {
    if (event.keyCode === 71) {
        var dgrid = document.getElementById('jsg-grid');
        if (dgrid) {
            if (dgrid.className.match('jsg-visible')) {
               dgrid.className = '';
            } else {
               dgrid.className = 'jsg-visible';
            }
            //dgrid.classList.toggle('jsg-visible');
        } else {
            dgrid = grid();
            setTimeout(function () {
                //dgrid.classList.add('jsg-visible');
                dgrid.className += ' jsg-visible';
            }, 500);
            
        }
        
    }
}, false);