(function($) {
    var bubbles = [];
    var blocks = [];
    var canvasWidth, canvasHeight;
    var headerOffset = 72;
    var bubblePerClick = 5;
    var bubbleSize = 20;
    var bubbleCount = 0;
    var gravity = 0.3;
    
    $(function() {
        var canvasWrapper = $('<div>',{id:'canvasWrapper'});
        var canvas = $('<canvas>',{'id':'bubbleCanvas'});
        var bubbleCounter = $('<div>',{'id':'bubbleCounter'});
        
        canvasWrapper.height($(window).height());
        canvasWrapper.append(canvas);
        
        
        $('body').prepend(canvasWrapper).prepend(bubbleCounter);
        
        var c = document.getElementById("bubbleCanvas");  
        var proc = new Processing(c, drawBubble);  
        
        //listen for clicks on container only
        $(this).click(function(e){
            if(e.target.id == 'container'){
                bubblePerClick = Math.floor(Math.random()*5) + 2;
                bubbleCount += bubblePerClick;
                for(i=0;i<bubblePerClick;i++)
                    bubbles.push(new bubble(e.clientX, e.clientY));
                
                bubbleCounter.text('Ball Count: ' + bubbleCount);
            }
        });
        
        //collection of objects that affect bubble movement
//        $('.entry-meta, .entry-content, .comments').each(function(){
//            blocks.push(new block($(this), $(this).offset().left, $(this).offset().top, $(this).width(), $(this).height()));
//        });
        
        function bubble(_x, _y){
            this.x = _x;
            this.y = _y;
            this.speedX = Math.floor(Math.random()*11)+1;
            this.speedY = Math.floor(Math.random()*11)+1;
            this.directionX = Math.random()<.5?-1:1;
            this.directionY = Math.random()<.5?-1:1;
            this.size = Math.floor(Math.random()*bubbleSize) + 10;
            this.move = function(p,topLimit){
                //detect left and right walls
                if(canvasWidth < (this.x + this.size/2) || (this.x - this.size/2) < 0)
                {
                    this.directionX = -this.directionX;
                }
                //detect top and bottom walls
                else if(canvasHeight < (this.y + this.size/2) || (this.y - this.size/2) < topLimit){
                    this.directionY = -this.directionY;
                }
                
                b=0;
                for(j=0;j<blocks.length;j++)
                {
                    //detect block left and right walls
                    if(this.y > blocks[j].y && this.y < (blocks[j].y+blocks[j].height)){
                        if((this.x + this.size/2) > blocks[j].x && (this.x-this.size/2) < (blocks[j].x+blocks[j].width)){
                            this.directionX = -this.directionX;
                        }
                        
                    //detect block top and right walls
                    }else if((this.x + this.size/2) > blocks[j].x && (this.x - (this.size/2) < blocks[j].x + blocks[j].width)){
                        if((this.y + this.size/2) > blocks[j].y - topOffset && (this.y - this.size/2) < (blocks[j].y + blocks[j].height - topOffset)){
                            this.directionY = -this.directionY;
                        }
                    }
                }

                this.x = this.x + (this.directionX * this.speedX);
                this.y = this.y + (this.directionY * this.speedY);
                
                p.fill(255, 204);
                p.ellipse(this.x, this.y, this.size, this.size);
            }
        }
        
        function block(_e, _x, _y, _w, _h){
            this.e = _e;
            this.x = _x;
            this.y = _y;
            this.width = _w;
            this.height = _h;
        }
    });
    
    function drawBubble(p)
    {
        var canvasWrapper = $('#canvasWrapper');
        
        p.setup = function(){
            canvasWidth = canvasWrapper.width();
            canvasHeight = $(window).height();
            
            p.size(canvasWidth,canvasHeight);
            p.background(0x1B1B1B);  
            p.frameRate(24);  
        };
        
        p.draw = function() {  
            var topOffset = $(document).scrollTop();
            var topLimit = headerOffset - topOffset > 0?headerOffset-topOffset:0;
            
            p.background(0x1B1B1B);
            
            for(i=0;i<bubbles.length;i++)
            {
                bubbles[i].move(p, topLimit);
//                //detect left and right walls
//                if(canvasWidth < (bubbles[i].x + bubbles[i].size/2) || (bubbles[i].x - bubbles[i].size/2) < 0)
//                {
//                    bubbles[i].directionX = -bubbles[i].directionX;
//                }
//                //detect top and bottom walls
//                else if(canvasHeight < (bubbles[i].y + bubbles[i].size/2) || (bubbles[i].y - bubbles[i].size/2) < topLimit){
//                    bubbles[i].directionY = -bubbles[i].directionY;
//                }
//                
//                b=0;
//                for(j=0;j<blocks.length;j++)
//                {
//                    //detect block left and right walls
//                    if(bubbles[i].y > blocks[j].y && bubbles[i].y < (blocks[j].y+blocks[j].height)){
//                        if((bubbles[i].x + bubbles[i].size/2) > blocks[j].x && (bubbles[i].x-bubbles[i].size/2) < (blocks[j].x+blocks[j].width)){
//                            bubbles[i].directionX = -bubbles[i].directionX;
//                        }
//                        
//                    //detect block top and right walls
//                    }else if((bubbles[i].x + bubbles[i].size/2) > blocks[j].x && (bubbles[i].x - (bubbles[i].size/2) < blocks[j].x + blocks[j].width)){
//                        if((bubbles[i].y + bubbles[i].size/2) > blocks[j].y - topOffset && (bubbles[i].y - bubbles[i].size/2) < (blocks[j].y + blocks[j].height - topOffset)){
//                            bubbles[i].directionY = -bubbles[i].directionY;
//                        }
//                    }
//                }
//                bubbles[i].x = bubbles[i].x + (bubbles[i].directionX * bubbles[i].speedX);
//                bubbles[i].y = bubbles[i].y + (bubbles[i].directionY * bubbles[i].speedY);
//                
//                p.fill(255, 204);
//                p.ellipse(bubbles[i].x, bubbles[i].y, bubbles[i].size, bubbles[i].size);
            }
            
            //drawBlocks();
        };
        
        function drawBlocks(){
            var topOffset = $(document).scrollTop();
            for(j=0;j<blocks.length;j++)
            {
                p.rect(blocks[j].x ,blocks[j].y-topOffset ,blocks[j].width ,blocks[j].height);
            }
        }
    }
})(jQuery);