function PatternCanvas(inElement)
{
    this.element = inElement;
    this.bandSeed = 4;
    this.bandHeight = 20;
}

PatternCanvas.prototype = {
    drawDots : function(ctx, width, height, solid)
    {
        var variance = 0.0;
        if (Math.random() > 0.5)
            variance = -Math.random();
            
        var diameter = height * 2 / 3;
        
        var offset = (height - diameter) / 2;
        
        ctx.save();
        ctx.translate(offset + variance * diameter, diameter / 2);
        
        var x = 0;
        do {
            ctx.beginPath();
            ctx.arc(0, offset, diameter / 2, 0, Math.PI * 2, true);
            
            if (solid)
                ctx.fill();
            else
                ctx.stroke();
                
            x += (diameter + offset);
            ctx.translate(diameter + offset, 0);
        } while (x < (width + diameter));
        
        ctx.restore();
    },
    
    drawLine : function(ctx, width, height)
    {
        var y = height / 2;
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(width, y);
        ctx.stroke();
        ctx.restore();
    },
    
    chooseAndDrawPattern : function(ctx, width, height)
    {
        var which = Math.floor(Math.random() * 4);
        switch (which) {
            case 0:
                this.drawDots(ctx, width, height, true);
                break;
            case 1:
                this.drawDots(ctx, width, height, false);
                break;
            case 2:
                this.drawLine(ctx, width, height);
                break;
            default:
                // draw nothing
                break;
        }
    },
    
    drawRandomPattern : function(ctx, x, y, width, height)
    {        
        // This is so that full boxes are drawn
        var trX = (x != 0) ? x - 1 : x;
        var trY = (y != 0) ? y - 1 : y;
        var strW = (x != 0) ? width : width - 1;
        var strH = (y != 0) ? height : height - 1;

        ctx.save();
        
        // This is so that the lines draw on pixels
        ctx.translate(trX + 0.5, trY + 0.5);

        ctx.beginPath();
        ctx.rect(0, 0, strW, strH);
        ctx.closePath();
        ctx.clip();
        
        if (Math.random() > 0.5) {
            ctx.save();
            ctx.globalAlpha = 0.25;
            ctx.fillRect(0, 0, strW, strH);
            ctx.restore();
        }
        
        ctx.strokeRect(0, 0, strW, strH);

        this.chooseAndDrawPattern(ctx, width, height);
        
        ctx.restore();
    },
    
    draw : function()
    {        
        var ctx = this.element.getContext('2d');
        
        var fullWidth = this.element.offsetWidth;
        var fullHeight = this.element.offsetHeight;
        
        var x = 0;
        var y = 0;
        
        ctx.clearRect(x, y, fullWidth, fullHeight);
        
        do {
            do {
            
                var width = Math.floor(Math.random() * fullWidth / this.bandSeed + this.bandHeight / 2);
                if (x + width >= fullWidth)
                    width = fullWidth - x;

                this.drawRandomPattern(ctx, x, y, width, this.bandHeight);
                
                x += width;
            } while (x < fullWidth);
            
            x = 0;
            y += this.bandHeight;
        } while (y < fullHeight);
    }
}