var browser = new detectBrowser();

function detectBrowser() {
    var appver = navigator.appVersion.toLowerCase();
    this.isIE = appver.indexOf('msie') != -1;
}

function start() {
    draw();
}

/*
var numx = 5;
var numy = 5;
var borderstyle = 'dashed';
*/

var numx = 5;
var numy = 5;
var borderstyle = 'dotted';

var width = 400;
var height = 400;

var dx = width / numx;
var dy = height / numy;

function noise() {
    if(browser.isIE)
        borderstyle = 'solid';

    document.write('<style type="text/css">');
    for(var y = 0; y < numy; y++) {
        for(var x = 0; x < numx; x++) {
            document.write('#n' + x + '_' + y + ' {');
            document.write('position: absolute;');
            document.write('left: ' + (x * dx) + 'px;');
            document.write('top: ' + (y * dy) + 'px;');
            document.write('width: ' + dx + 'px;');
            document.write('height: ' + dy + 'px;');
            document.write('padding: 0px;');
            document.write('background-color: #000000;');
            document.write('border-style: ' + borderstyle + ';');
            document.write('border-left-width: 0px;');
            document.write('border-top-width: 0px;');
            document.write('border-right-width: 0px;');
            document.write('border-bottom-width: 0px;');            
            document.write('border-color: #000000;');
            document.write('}');
        }
    }
    document.write('</style>');

    for(var y = 0; y < numy; y++) {
        for(var x = 0; x < numx; x++) {
            document.write('<div id="n' + x + '_' + y + '">`</div>');
        }
    }
   
}

var magic1 = 0;
var magic2 = 0.2;
var magic3 = 0.5;

var dm1 = 0.1;
var dm2 = 0.2;
var dm3 = 0.15;

function draw() {
    var n;
    var c1, c2, lb, tb, s;
    for(var y = 0; y < numy; y++) {
        for(var x = 0; x < numx; x++) {
            n = document.getElementById("n" + x + "_" + y);
            s = n.style;
            
            c1 = Math.round((((Math.sin(magic1 + x/2) + 1) / 2.0) * 383) +
                 (((Math.cos(magic2 + y/2) + 1) / 2.0) * 383));
            if(c1 < 256) {
                c1 = c1.toString(16);                   // r
                if(c1.length == 1)
                    c1 = '0' + c1;
                c1 = '#' + c1 + '0000';
            } else if(c1 < 512) {
                c1 = (c1 - 256).toString(16);           // g
                if(c1.length == 1)
                    c1 = '0' + c1;
                c1 = '#ff' + c1 + '00';
            } else {
                c1 = (c1 - 512).toString(16);           // b
                if(c1.length == 1)
                    c1 = '0' + c1;
                c1 = '#ffff' + c1;
            }
            s.backgroundColor = c1;

            c1 = Math.round((((Math.sin(magic3 + x/2) + 1) / 2.0) * 383) +
                 (((Math.cos(magic3 + y/2) + 1) / 2.0) * 383));
            if(c1 < 256) {
                c1 = c1.toString(16);                   // r
                if(c1.length == 1)
                    c1 = '0' + c1;
                c1 = '#' + c1 + '0000';
            } else if(c1 < 512) {
                c1 = (c1 - 256).toString(16);           // g
                if(c1.length == 1)
                    c1 = '0' + c1;
                c1 = '#ff' + c1 + '00';
            } else {
                c1 = (c1 - 512).toString(16);           // b
                if(c1.length == 1)
                    c1 = '0' + c1;
                c1 = '#ffff' + c1;
            }
            s.borderColor = c1;

            lb = Math.round( 
                  ((Math.cos((magic1 + x - 2)) + 1) / 2.0 * dx / 2) +
                  ((Math.sin((magic3 * y + 9)) + 1) / 2.0 * dx / 2) 
                 );

            tb = Math.round( 
                  ((Math.cos((magic2 + x - 2)) + 1) / 2.0 * dx / 2) +
                  ((Math.sin((magic3 * y + 9)) + 1) / 2.0 * dx / 2) 
                 );
              
            s.borderLeftWidth = lb + 'px';              
            s.borderTopWidth = tb + 'px'; 
            if(browser.isIE) {
                // ie box model rules
                s.width = (dx - lb) + 'px';
                s.height = (dy - tb) + 'px';                
            }
        }
    }
    
    magic1 += dm1;
    magic2 += dm2;
    magic3 += dm3;
        
    window.setTimeout("draw()", 50);
}