var Canvas = function(el) {
    this.jq = el;
    this.el = el[0]; // report the actual element, not jquery
    this.ctx = this.el.getContext('2d');
    this.setSize();
    
    this.logo = new Logo(this.width-(Logo.width/2)+60, this.height/6, this.ctx, this.boundaries);

    this.start();
    
    $(window).bind('resize', this.setSize.use(this));
};
$.extend(Canvas.prototype, {
    setSize: function() {
        this.width = (!window.innerWidth) ? document.documentElement.offsetWidth : window.innerWidth;
        this.height = (!window.innerHeight) ? document.documentElement.offsetHeight : window.innerHeight;
        this.jq.attr('width', this.width);
        this.jq.attr('height', this.height);
        this.boundaries = { left: 0, top: 0, right: this.width, bottom: this.height };
        if(this.logo) {
            this.logo.setBoundaries(this.boundaries);
        }
    },
    start: function() {
        this.timer = setInterval(function() {
            this.logo.overMask(Canvas.background);
            this.logo.setPosition();
            this.logo.setRotation();
            this.logo.draw();
        }.use(this), (1000/Canvas.fps));
    },
    stop: function() {
        clearInterval(this.timer);
    }
});
$.extend(Canvas, {
    init: function() {
        if($('#background canvas').length && typeof $('canvas')[0].getContext === 'function') {
            $('#background').addClass('animate');
            Canvas.instance = new Canvas($('#background canvas'));
        }
    },
    background: 'rgba(255, 255, 255, 1)',
    fps: 30,
    padding: {
        top: 150,
        right: 150,
        bottom: 150,
        left: 150
    }
});


var Logo = function(x, y, ctx, boundaries) {
    this.ctx = ctx;

    this.x = x;
    this.y = y;
    this.velocity = { vx: Logo.velocity.vx, vy: Logo.velocity.vy };
    this.direction = { x: -1, y: 1 };
    this.gravity = Logo.gravity;
    this.damping = Logo.damping;
    this.rotationVelocity = Logo.rotationVelocity;
    this.setBoundaries(boundaries);
    this.updateRotation(Logo.degreeStart);
    
    this.width = Logo.width;
    this.height = Logo.height;
};
$.extend(Logo.prototype, {
    draw: function() {
        var w = this.width;
        var w2 = w/2;
        var h = this.height;
        var h2 = h/2;
        var x = this.x;
        var y = this.y;
        var r = Logo.radius;
        var A = [
            { x: 80-w2, y: 320-h2 },
            { x: 190-w2, y: 65-h2 },
            { x: 300-w2, y: 320-h2 },
            { x: 270-w2, y: 320-h2 },
            { x: 190-w2, y: 130-h2 },
            { x: 110-w2, y: 320-h2 }
        ];
        
        var v = [
            { x: 0-w2, y: r-h2 },
            { x: 0-w2, y: h-r-h2 },
            { x: 0-w2, y: h-h2 },
            { x: w-r-w2, y: h-h2 },
            { x: w-w2, y: h-h2 },
            { x: w-w2, y: r-h2 },
            { x: w-w2, y: 0-h2 },
            { x: r-w2, y: 0-h2 },
            { x: 0-w2, y: 0-h2 }
        ];
        var c = [
            { x: r-w2, y: h-h2 },
            { x: w-w2, y: h-r-h2 },
            { x: w-r-w2, y: 0-h2 },
            { x: 0-w2, y: r-h2 }
        ];
        
        var i = v.length;
        while(i--) {
            this.calcRotation(v[i]);
        }
        var i = c.length;
        while(i--) {
            this.calcRotation(c[i]);
        }
        var i = A.length;
        while(i--) {
             this.calcRotation(A[i]);
        }
        
        // create the rounded rectangle
        this.ctx.fillStyle = Logo.color;
        this.ctx.strokeStyle = Logo.color;
        this.ctx.lineWidth = 4;
        this.ctx.beginPath();
        this.ctx.moveTo(v[0].x, v[0].y);
        this.ctx.lineTo(v[1].x, v[1].y);
        this.ctx.quadraticCurveTo(v[2].x, v[2].y, c[0].x, c[0].y);
        this.ctx.lineTo(v[3].x, v[3].y);
        this.ctx.quadraticCurveTo(v[4].x, v[4].y, c[1].x, c[1].y);
        this.ctx.lineTo(v[5].x, v[5].y);
        this.ctx.quadraticCurveTo(v[6].x, v[6].y, c[2].x, c[2].y);
        this.ctx.lineTo(v[7].x, v[7].y);
        this.ctx.quadraticCurveTo(v[8].x, v[8].y, c[3].x, c[3].y);
        this.ctx.fill();
        this.ctx.stroke();
        
        // create the A
        this.ctx.fillStyle = Logo.letterColor;
        this.ctx.beginPath();
        this.ctx.moveTo(A[0].x, A[0].y);
        var i = A.length;
        while(i--) {
            this.ctx.lineTo(A[i].x, A[i].y);
        }
        this.ctx.fill();
        this.bounds = c;
 
        // midpoint of the logo
        /*
        this.ctx.fillStyle = '#000'
        this.ctx.fillRect(this.x-2, this.y-2, 4, 4);
        */
    },
    setRotation: function() {
        // reverse the rotation at a degree limit
        /*
        if(this.degrees > Logo.degreeLimit || this.degrees < -Logo.degreeLimit) {
            this.rotationVelocity *= -1;
        }
        */
        this.degrees = this.degrees+this.rotationVelocity;
        this.updateRotation();
    },
    updateRotation: function(degrees) {
        degrees = (degrees) ? degrees : this.degrees;
        this.degrees = degrees;
        this.radians = degrees*(Math.PI/180);
    },
    calcRotation: function(point) {
        point.x = point.x*Math.cos(this.radians)-point.y*Math.sin(this.radians);
        point.y = point.x*Math.sin(this.radians)+point.y*Math.cos(this.radians);
        point.x += this.x;
        point.y += this.y;
        return point;
    },
    setBoundaries: function(boundaries) {
        this.boundaries = boundaries;
    },
    overMask: function(color) {
        this.ctx.fillStyle = color;
        this.ctx.fillRect(0, 0, this.boundaries.right, this.boundaries.bottom);
        //this.ctx.fillRect(-this.boundaries.right, -this.boundaries.bottom, this.boundaries.right*2, this.boundaries.bottom*2);
    },
    setPosition: function() {
        this.checkBoundaryCollision();
        this.x += this.velocity.vx;
        //this.velocity.vy += this.gravity;
        this.y += this.velocity.vy;
    },
    checkBoundaryCollision: function() {
        if(!this.bounds) { return; }
        if(
            (this.x < this.boundaries.left+Canvas.padding.left && this.x > this.x+this.velocity.vx) ||
            (this.x > this.boundaries.right-Canvas.padding.right && this.x < this.x+this.velocity.vx)
        ) {
            //this.velocity.vx *= -1;
            this.direction.x *= -1;
            //this.velocity.vx *= this.damping;
        }
        if(
            (this.y < this.boundaries.top+Canvas.padding.top && this.y > this.y+this.velocity.vy) || 
            (this.y > this.boundaries.bottom-Canvas.padding.bottom && this.y < this.y+this.velocity.vy)
        ) {
            //this.velocity.vy *= -1;
            this.direction.y *= -1;
            //this.velocity.vy *= this.damping;
        }
        
        // always use the same velocity, no matter the location
        /*
        this.velocity.vx = this.direction.x*Logo.velocity.vx;
        this.velocity.vy = this.direction.y*Logo.velocity.vy;
        */
        
        // slow the velocity when it's further from the center point of the window
        if(this.x > this.boundaries.right/2) {
            this.velocity.vx = (Math.abs((1-((this.x-Canvas.padding.right)/this.boundaries.right)/2)+(Logo.velocity.vx/10))*this.direction.x)*Logo.velocity.vx;
        } else {
            this.velocity.vx = ((this.x/(this.boundaries.right-Canvas.padding.left/2))+(Logo.velocity.vx/10))*this.direction.x*Logo.velocity.vx;
        }
        if(this.y > this.boundaries.bottom/2) {
            this.velocity.vy = (Math.abs((1-((this.y-Canvas.padding.bottom)/this.boundaries.bottom)/2)+(Logo.velocity.vy/10))*this.direction.y)*Logo.velocity.vy;
        } else {
            this.velocity.vy = ((this.y/(this.boundaries.bottom-Canvas.padding.top/2))+(Logo.velocity.vy/10))*this.direction.y*Logo.velocity.vy;
        }
    }
});
$.extend(Logo, {
    width: 376,
    height: 376,
    radius: 40,
    degreeStart: 10,
    degreeLimit: 120,
    //color: 'rgba(58, 87, 171, 0.08)',
    color: '#EBEEF6',
    letter: [
        { x: 80, y: 320},
        { x: 190, y: 65},
        { x: 300, y: 320},
        { x: 270, y: 320},
        { x: 190, y: 130},
        { x: 110, y: 320}
    ],
    letterColor: 'rgba(255,255,255,1)',
    velocity: { vx: 1.0, vy: 0.6 },
    gravity: -0.0005,
    damping: 0.95,
    rotationVelocity: 0.2
});

$(document).ready(function() {
    if($('body.home').length) { 
        Canvas.init();
    }
});