head.prepend('<canvas id="bubble-canvas" style="position: absolute; left: 0px; top: 0px;"></canvas>');
var _width, _height, largeHeader, _canvas, _ctx, _circles, _target, animateHeader = true;
function initHeader() {
    largeHeader = document.getElementById('header');
    _width = largeHeader.offsetWidth;
    // log(largeHeader.offsetWidth);
    _height = largeHeader.offsetHeight;
    // log(largeHeader.offsetHeight);
    _target = {x: 0, y: _height};
    _canvas = document.getElementById('bubble-canvas');
    _canvas.width = _width;
    _canvas.height = _height;
    _ctx = _canvas.getContext('2d');
    _circles = [];
    for(var x = 0; x < _width*0.5; x++) {
        var c = new Circle();
        _circles.push(c);
    }
    animate();
};
function addListeners() {
    window.addEventListener('scroll', scrollCheck);
    window.addEventListener('resize', resize);
};
function scrollCheck() {
    if(document.body.scrollTop > _height) animateHeader = false;
    else animateHeader = true;
};
function resize() {
    _width = largeHeader.offsetWidth;
    _height = largeHeader.offsetHeight;
    _canvas.width = _width;
    _canvas.height = _height;
};
function animate() {
    if(animateHeader) {
        _ctx.clearRect(0,0,_width,_height);
        for(var i in _circles) {
            _circles[i].draw();
        }
    };
    requestAnimationFrame(animate);
};
function Circle() {
    var _this = this;
    (function() {
        _this.pos = {};
        init();
    })();
    function init() {
        _this.pos.x = Math.random()*_width;
        _this.pos.y = _height+Math.random()*100;
        _this.alpha = 0.1+Math.random()*0.3;
        _this.scale = 0.1+Math.random()*0.3;
        _this.velocity = Math.random();
    };
    this.draw = function() {
        if(_this.alpha <= 0) {
            init();
        };
        _this.pos.y -= _this.velocity;
        _this.alpha -= 0.0005;
        _ctx.beginPath();
        _ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
        _ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
        _ctx.fill();
    };
};
addListeners();
initHeader();