GEL bookmarklet

gistfile1.js

javascript:if(document.createElement && document.childNodes){var bm = document.createElement('script');var head = document.getElementsByTagName('head')[0];head.appendChild(bm);bm.setAttribute('src', 'https://raw.github.com/gist/1217428/grid.js');}else{alert('Sorry, your browser cannot do this')}

grid.js

/** Setup function */
var blqGrid = new function() {

    this.init = function() {
		if(document.getElementById('blqControlContainer')) { return; }
        /** Add Grid CSS file */
        var blqGridHead = document.getElementsByTagName('head')[0];
        var blqGridStyle = document.createElement('link');
        var currentServer = location.host;
        if (!/bbc.co.uk/.test(currentServer)) { currentServer = "static.bbc.co.uk"; }
        blqGridStyle.setAttribute('rel', 'stylesheet');
        blqGridStyle.setAttribute('href', location.protocol+ '//'+ currentServer.replace(/pal|www/,'static') +'/frameworks/barlesque/utilities/gvl3/style/grid.css');
        blqGridHead.appendChild(blqGridStyle);

        /** Setup Grid in body */
        var blqGridBody = document.getElementsByTagName('body')[0];
        var blqGridContainer = document.createElement('div');
        blqGridContainer.setAttribute('id', 'blqGridContainer');
        blqGridContainer.setAttribute('style', 'height:' + getDocHeight() + 'px; display: none;');
        blqGridBody.appendChild(blqGridContainer);
        centreContainer();
        
        /* Add Controls for toggling grid */
        var blqControlContainer = document.createElement('div');
        blqControlContainer.setAttribute('id', 'blqControlContainer');
        blqControlContainer.setAttribute('style', 'position:fixed;');
        blqControlContainer.innerHTML = '<p>GVL3 Grid</p><ul><li id="blqGridShowVertical">Vertical Grid</li><li id="blqGridShowHorizontal">Horizontal Grid</li><li id="blqGridHideGrid">Hide Grid</li><li id="blqGridCloseWidget">Close</li></ul>';
        blqGridBody.appendChild(blqControlContainer);
        
        document.getElementById("blqGridShowVertical").onclick = function() {
            this.setAttribute('class', 'active');
            document.getElementById("blqGridShowHorizontal").setAttribute('class','');
	        document.getElementById('blqGridContainer').style.display = 'block';      
            clearGrid();
            verticalGrid();
        }
        document.getElementById("blqGridShowHorizontal").onclick = function(){
            this.setAttribute('class', 'active');
            document.getElementById("blqGridShowVertical").setAttribute('class','');
	        document.getElementById('blqGridContainer').style.display = 'block';
            clearGrid();
            horizontalGrid();
        }
        document.getElementById("blqGridHideGrid").onclick = function() {
            document.getElementById("blqGridShowHorizontal").setAttribute('class','');
            document.getElementById("blqGridShowVertical").setAttribute('class','');
	        document.getElementById('blqGridContainer').style.display = 'none';
            clearGrid();
        }
        document.getElementById("blqGridCloseWidget").onclick = function() {
			var controls = document.getElementById('blqControlContainer'),
				grid     = document.getElementById('blqGridContainer'),
				body     = document.getElementsByTagName('body')[0];
			body.removeChild(controls);	
			body.removeChild(grid);
        }
    }
    
    function clearGrid(){
        document.getElementById('blqGridCentreContainer').innerHTML = '';
        document.getElementById('blqGridCentreContainer').className = '';
    }
    
    function centreContainer(){
        var blqGridStr = document.createElement('div');
        blqGridStr.setAttribute('id','blqGridCentreContainer');
        document.getElementById('blqGridContainer').appendChild(blqGridStr);
    }

    function verticalGrid() {
        var blqGridStr = '';
        for (var i = 0; i < 31; i++) {
            var blqGridcolumnDistFromLeft = 10 + i * 14;
            var blqGridLast = '';
            if (i == 30) {
                var blqGridLast = " blqGridLast";
            }
            blqGridStr += '<div class="blqGridColumn' + blqGridLast + '" title="Column: ' + blqGridcolumnDistFromLeft + 'px from LHS"></div>';
        }
        document.getElementById('blqGridCentreContainer').innerHTML = blqGridStr;
    }

    function horizontalGrid() {
        var blqGridStr = '',
			documentHeight = getDocHeight();
        for (var i = 0, rows = Math.floor(documentHeight / 16); i < rows; i++) {
            blqGridStr += '<div class="blqGridRow">&nbsp;</div>';
        }
        document.getElementById('blqGridCentreContainer').innerHTML = blqGridStr;
        document.getElementById('blqGridCentreContainer').className = 'horizontal';
    }

	function getDocHeight() {
	    return Math.max(
	        Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
	        Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
	        Math.max(document.body.clientHeight, document.documentElement.clientHeight)
	    );
	}
}

blqGrid.init();