JP Directive

jp.js

'use strict';

angular.module('judasPriest.directives')
    .directive('judasPriest', ['$window',
        function ($window) {
            return {
                restrict: 'C',
                link: function (scope, el, attrs) {

                    // canvas els
                    var $canvas, $canvas2, $canvas3;
                    angular.forEach(el.find('canvas'), function (c) {
                        switch(c.id) {
                            case 'canvas':
                                $canvas = c;
                                break;
                            case 'canvas2':
                                $canvas2 = c;
                                break;
                            case 'canvas3':
                                $canvas3 = c;
                                break;
                        }
                    });
                    
                    var ctx2 = $canvas2.getContext('2d');
                    var ctx = $canvas.getContext('2d');
                    var ctx3 = $canvas3.getContext('2d');
                    var w = $canvas.width, h = $canvas.height;
                    
                    // bg clouds
                    var img = new Image();
                    img.src = 'http://cs-current-assets.s3.amazonaws.com/datacapture/judas_priest/bannerlayer_flames.png';

                    // A puff.
                    var Puff = function(p) {
                        var opacity,
                            sy = (Math.random()*285)>>0,
                            sx = (Math.random()*285)>>0;

                        this.p = p;

                        this.move = function(timeFac) {
                            p = this.p + 0.3 * timeFac;
                            opacity = (Math.sin(p*0.05)*0.5);
                            if(opacity <0) {
                                p = opacity = 0;
                                sy = (Math.random()*285)>>0;
                                sx = (Math.random()*285)>>0;
                            }
                            this.p = p;
                            ctx.globalAlpha = opacity;
                            ctx.drawImage($canvas3, sy+p, sy+p, 285-(p*2),285-(p*2), 0,0, w, h);
                        };
                    };

                    var puffs = [];
                    var sortPuff = function(p1,p2) { return p1.p-p2.p; };
                    puffs.push( new Puff(0) );
                    puffs.push( new Puff(40) );

                    var newTime, oldTime = 0, timeFac;

                    function loop(w, h)
                    {
                        newTime = new Date().getTime();
                        if(oldTime === 0 ) {
                            oldTime=newTime;
                        }
                        timeFac = (newTime-oldTime) * 0.15;
                        if(timeFac>3) {timeFac=3;}
                        oldTime = newTime;
                        puffs.sort(sortPuff);

                        for(var i=0;i<puffs.length;i++)
                        {
                            puffs[i].move(timeFac);
                        }
                        ctx2.drawImage( $canvas ,0,0,$canvas2.width,$canvas2.height * 2);
                        setTimeout(loop, 10);
                    }

                    /**
                     * Resize canvas to full screen background
                     */
                    function fullScreenCanvas() {
                        var w = $window.outerWidth,
                            h = $window.outerHeight;

                        el.attr('width', w);
                        el.attr('height', h /2);
                        el.css({
                            position: 'absolute',
                            top: 0
                        });
                        angular.element($canvas2).attr({
                            width: w,
                            height: h
                        });
                        ctx3.drawImage(img, 0,0, w, h * 2);
                        loop();
                    }

                    angular.element($window).bind('resize', fullScreenCanvas);
                    fullScreenCanvas();

                }
            };
        }
    ]);