/**
 * @author tiny-studio
 */
            var viewer = null;
            var timer	= null;
            window.onload = function(){
                viewer = new Viewer(document.getElementById("canvas"));
                
                var circleDrawer= new CircleDrawer(viewer.canvas);
                circleDrawer.cache = true;
                viewer.layers.push(circleDrawer);
                
               var logoDrawer = new LogoDrawer(viewer.canvas);
                viewer.layers.push(logoDrawer);
               
                timer = setInterval("viewer.draw()", 1);
            }
            
            /**
             *
             * @param {Object} canvas
             */
            function Viewer(canvas){
                this.canvas = canvas;
                this.context = canvas.getContext("2d");
                this.layers = [];
                this.clear = function(){
                    this.context.save();
                    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
                    this.context.restore();
                }
                this.draw = function(){
                    this.clear();
                    for (var i = 0; i < this.layers.length; i++) {
                        this.layers[i].draw();
                    }
                }
            }
            
            /**
             *
             * @param {Object} canvas
             */
            function Layer(canvas){
                this.canvas = document.createElement("canvas");
                this.image = document.createElement("canvas");
                this.context = this.image.getContext("2d");
                this.currentFrame = 0;
                this.cache = false;
                
                this.setCanvas = function(canvas){
                    this.canvas = canvas;
                    this.image.width = this.canvas.width;
                    this.image.height = this.canvas.height;
                    this.context = this.image.getContext("2d");
                }
                
                this.draw = function(){
                    this.context.save();
                    if (this.cache) {
                        this.canvas.getContext("2d").drawImage(this.image, 0, 0);
                    }else{
                        this.context.clearRect(0, 0, this.image.width, this.image.height);
                    }
                    this.render();
                    this.canvas.getContext("2d").drawImage(this.image, 0, 0);
                    this.currentFrame++;
                    this.context.restore();
                }
                this.render = function(){
                }
                
                if (typeof(canvas) !== 'undefined') {
                    this.setCanvas(canvas);
                }
            }
            
            /**
             * 
             * @param {Object} canvas
             */
            function CircleDrawer(canvas){
                Layer.call(this, canvas);
                this.rectangles = [];
                this.x = 735;
                this.y = 250;
                
                this.render = function(){
                    if (this.currentFrame >= this.rectangles.length) {
                    	clearInterval( timer );
                        return;
                    }
                    this.context.translate(this.x, this.y);
                    this.rectangles[this.currentFrame].draw();
                }
                
                this.createRectangles = function(number){
                    for (var i = 0; i < number; i++) {
                        var rect = new Rectangle(this.image);
                        rect.rotate = 0.5;
                        rect.x = 150 + 1.1 * i;
                        rect.rotate = i * -0.1;
                        rect.setColor(random(64, 255), random(64, 255), random(64, 255))
                        this.rectangles.push(rect);
                    }
                }

                this.createRectangles(300);
            }
            CircleDrawer.prototype = new Layer();
            
            function LogoDrawer(canvas){
                Layer.call(this,canvas);
                this.logo = new Image();
                this.logo.src = "common/images/logotitle.png";
                this.render = function(){
                    if (this.currentFrame <= 10) {
                        this.context.globalAlpha=this.currentFrame * 0.1;
                        this.context.translate(585 + this.logo.width / 2, 127 + this.logo.height / 2);
                        this.context.scale(0.01 + this.currentFrame * 0.1, 0.01 + this.currentFrame * 0.1);

                       this.context.rotate(this.currentFrame);
                        this.context.drawImage(this.logo,-this.logo.width/2,-this.logo.height/2);
                    }else{
                        this.context.drawImage(this.logo,585,127);
                    }

                }
            }
            LogoDrawer.prototype = new Layer();
            
            
            /**
             *
             * @param {Object} canvas
             */
            function Rectangle(canvas){
                this.context = canvas.getContext("2d");
                this.width = 90;
                this.height = 55;
                this.color = "#aaa";
                this.x = 0;
                this.y = 0
                this.rotate = 0;
                
                this.setColor = function(r, g, b){
                    this.color = "rgb(" + r + "," + g + ", " + b + ")";
                }
                
                this.draw = function(){
                    this.context.save();
                    this.context.fillStyle = this.color;
                    this.context.shadowBlur = 10;
                    this.context.shadowColor = "#000";
                    this.context.rotate(this.rotate);
                    this.context.fillRect(this.x, this.y, this.width, this.height);
                    this.context.restore();
                }
            }
            
            this.random = function(offset, max){
                return Math.floor(Math.random() * (max - offset)) + offset;
            }