function RedcoreLogo() {
    var element = {

        config: {
            width: 80,
            height: 80,

            primaryColor: '#a90000',
            secondaryColor: '#4d4d4d',
            backgroundColor: '#ffffff',

            outerCircleRadius: 30,
            outerCircleDistance: 3,

            mediumCircleRadius: 24,
            mediumCircleDistance: 3,

            innerCircleRadius: 18,
            innerCircleDistance: 3,

            mediumDistance: 4,
            coreCircleRadius: 6,
            lineWidth: 3,

            speed: 0.02,
        },

        round1deg: 0,
        round2deg: 0,
        round3deg: 0,

        init: function (id, data) {
            var self = this;

            for (i in data)
            {
                this.config[i] = data[i];
            }

            this.ctx = document.getElementById(id).getContext('2d');
            this.tick = setInterval(function() { self.redraw(); }, 1000 / 24);
            this.redraw();
        },

        redraw: function() {

            this.ctx.clearRect(0, 0, this.config.height, this.config.width);

            // config
            this.ctx.lineWidth = this.config.lineWidth;

            // outer circle
            this.ctx.beginPath();  
            this.ctx.fillStyle = this.config.secondaryColor;
            this.ctx.strokeStyle = this.config.secondaryColor;
            this.ctx.arc(
                    this.config.width  / 2 + this.config.outerCircleDistance * Math.sin(this.round1deg),
                    this.config.height / 2 + this.config.outerCircleDistance * Math.cos(this.round1deg),
                    this.config.outerCircleRadius,
                    0,
                    Math.PI * 2,
                    true
                );  
            this.ctx.fill();  
            this.ctx.stroke();

            this.ctx.beginPath();  
            this.ctx.fillStyle = this.config.backgroundColor;
            this.ctx.arc(this.config.width / 2, this.config.height / 2, this.config.outerCircleRadius, 0, Math.PI * 2, true);  
            this.ctx.fill();  

            // medium circle
            this.ctx.beginPath();  
            this.ctx.fillStyle = this.config.secondaryColor;
            this.ctx.strokeStyle = this.config.secondaryColor;
            this.ctx.arc(
                    this.config.width  / 2 + this.config.mediumCircleDistance * Math.sin(this.round2deg),
                    this.config.height / 2 + this.config.mediumDistance * Math.cos(this.round2deg) - this.config.mediumCircleDistance * Math.cos(this.round2deg),
                    this.config.mediumCircleRadius,
                    0,
                    Math.PI * 2,
                    true
                );  
            this.ctx.fill();  
            this.ctx.stroke();

            this.ctx.beginPath();  
            this.ctx.fillStyle = this.config.backgroundColor;
            this.ctx.arc(this.config.width / 2, this.config.height / 2 + this.config.mediumDistance * Math.cos(this.round2deg), this.config.mediumCircleRadius, 0, Math.PI * 2, true);  
            this.ctx.fill();

            // inner circle
            this.ctx.beginPath();  
            this.ctx.fillStyle = this.config.secondaryColor;
            this.ctx.strokeStyle = this.config.secondaryColor;
            this.ctx.arc(
                    this.config.width  / 2 + this.config.innerCircleDistance * Math.sin(this.round3deg),
                    this.config.height / 2 + this.config.innerCircleDistance * Math.cos(this.round3deg),
                    this.config.innerCircleRadius,
                    0,
                    Math.PI * 2,
                    true
                );  
            this.ctx.fill();  
            this.ctx.stroke();

            this.ctx.beginPath();  
            this.ctx.fillStyle = this.config.backgroundColor;
            this.ctx.arc(this.config.width / 2, this.config.height / 2, this.config.innerCircleRadius, 0, Math.PI * 2, true);  
            this.ctx.fill();  

            // red core
            this.ctx.beginPath();  
            this.ctx.fillStyle = this.config.primaryColor;
            this.ctx.arc(this.config.width / 2, this.config.height / 2, this.config.coreCircleRadius, 0, Math.PI * 2, true);  
            this.ctx.fill();  

            // update degrees
            this.round1deg = (this.round1deg + this.config.speed) % 360;
            this.round2deg = (this.round2deg + this.config.speed) % 360;
            this.round3deg = (this.round3deg + this.config.speed) % 360;
        },

        dispose: function() {
            clearTimeout(this.tick);
        }
    };
    return element;
};


function init() {
	var redcore = new RedcoreLogo();
	redcore.init('redcore-logo-loading', {
			
        width: 320,
        height: 320,

        outerCircleRadius: 140,
        outerCircleDistance: 10,

        mediumCircleRadius: 100,
        mediumCircleDistance: 10,

        innerCircleRadius: 60,
        innerCircleDistance: 10,

        mediumDistance: 40,
        coreCircleRadius: 16,
        lineWidth: 11,
			
	});
}