// closure to keep the global scope clean
var pixeldisplay = function( elementId, xlength, ylength) {

    // helperfunction, randomly return new display value for a pixel
    function displayvalue( cut ) {
        if ( Math.random() < cut ) {
            return 'block';
        } else {
            return 'none';
        }
    };

    // anonymous init function to keep the "pixeldisplay" scope clean
    (function(){

        // symbols you can write onto your pixeldisplay
        var char_E = [ [0,0],[1,0],[2,0],[3,0],[4,0],
                       [0,1],
                       [0,2],[1,2],[2,2],
                       [0,3],
                       [0,4],[1,4],[2,4],[3,4],[4,4]
                     ],
            char_r = [ [0,1],[1,1],[2,1],
                       [0,2],            [3,2],
                       [0,3],[1,3],[2,3],
                       [0,4],            [3,4]

                     ],
            char_o = [       [1,1],[2,1],
                       [0,2],            [3,2],
                       [0,3],            [3,3],
                             [1,4],[2,4]
                     ],
            number_4 = [ [0,0],[0,1],[0,2],[1,2],[2,2],[3,2],[2,1],[2,3],[2,4] ],
            number_0 = [ [1,0],[2,0],[0,1],[0,2],[0,3],[3,1],
                         [3,2],[3,3],[1,4],[2,4]
                       ];

        var pixeldivs = '',
            display = document.getElementById( elementId );

        // fit display size to the number of pixels
        display.style.width  = xlength * 10 + 37 +'px';
        display.style.height = ylength * 10 + 37 +'px';

        function init_blank() {
            return 'none';
        }

        // fill the display-div with pixels, randomly on or off
        for ( var y=0; y<ylength; y++ ) {
            for ( var x=0; x<xlength; x++ ) {
                var leftpos = 10*x+20;
                var toppos = 10*y+20;
                if (x>9 && x<60 ) {
                    // into this space i will write "Error 404"
                    var displaying = init_blank();
                } else { //randomdisplayvalue
                    // randomly pixelated area
                    var displaying = displayvalue( 0.3 );
                }
                pixeldivs +=
                    '<div class="pixel" id="'
                    + x + '-' + y +'" style="top: '
                    + toppos +'px;left: '
                    + leftpos +'px;display: '
                    + displaying +'"></div>';
            }
        }
        display.innerHTML = pixeldivs;

        // place pixelpatterns definded above onto the pixeldisplay
        var write = function( symbol, left, top ) {
            // for each isn't invented until jQuery
            for ( var i=0; i<symbol.length; i++ ) {
                // each pixel has two coordinates [0,0] is topleft corner
                var positionx = left + symbol[i][0];
                var positiony = top + symbol[i][1];
                document.getElementById( positionx + '-' + positiony )
                    .style.display = 'block';
            }
        }

        write( char_E, 14, 0 );
        write( char_r, 20, 0 );
        write( char_r, 25, 0 );
        write( char_o, 30, 0 );
        write( char_r, 35, 0 );

        write( number_4, 42, 0 );
        write( number_0, 47, 0 );
        write( number_4, 52, 0 );

    })(); // anonymous init function

    // and now, 2 overlapping pixelrandomisations
    // looks way more random than one

    // assign new display value to one pixel
    // after a random amount of time
    switchone = function() { // without "var" it's a global variable
        document
            .getElementById(
                Math.floor( Math.random()*xlength )
                + '-'
                + Math.floor( Math.random()*ylength ) )
            .style
            .display = displayvalue( 0.6 );
        setTimeout(
            'switchone()',
            Math.floor( Math.random()*1500 )
        );
    }

    // assign new display value to every 20th pixel
    // after a random amount of time
    switchsome = function() { // without "var" it's a global variable
        for ( var x=0; x<xlength; x++ ) {
            for ( var y=0; y<ylength; y++ ) {
                if ( Math.random()<0.05 ) {
                    document.getElementById( x + '-' + y )
                            .style
                            .display = displayvalue( 0.6 );
                }
            }
        }
        setTimeout(
            'switchsome()',
            Math.floor( Math.random()*Math.random()*5000 )
        );

    }

    // at first only single pixels glitch
    setTimeout( "switchone()", 2000 );
    // but soon it get's worse faster
    setTimeout( "switchsome()", 5000 );

};