jquery(function ($) {
    let iframe = document.getelementbyid("jw-pagefactory-view");
    let canvasarea = $('.canvas-area'),
        canvasareaid = canvasarea.attr('data-id'),
        bubblecolor = canvasarea.attr('data-bubble-color');
    let options = {
        radius: 45,
        densety: 0.1,
        color: bubblecolor,
        // color: 'random',
        clearoffset: .3
    }
    if(iframe) {
        if (iframe.attachevent) {
            iframe.attachevent("onload", function() {
                //iframe加载完成后你需要进行的操作
                initcanvas();
            });
        } else {
            iframe.onload = function(n) {
                //iframe加载完成后你需要进行的操作
                initcanvas();
            };
        }
    }else {
        initcanvas();
    }

    function initcanvas() {
        if(iframe) {
            canvasarea = $(window.frames["jw-pagefactory-view"].document).find('.canvas-area')
            canvasareaid = canvasarea.attr('data-id')
            bubblecolor = canvasarea.attr('data-bubble-color')
            options.color = bubblecolor
        }
        if(canvasareaid) {
            canvasairbubble(canvasareaid, options);
            $(window).resize(function() {
                canvasairbubble(canvasareaid, options);
            });
        }
    }

    function canvasairbubble(domid, options) {
        var curdom = $('#' + domid),
            width = curdom.width(),
            height = curdom.height(),
            canvas, ctx, target,
            animateheader = true,
            circles = [],
            settings = $.extend({
                color: 'rgba(255,255,255,.4)',
                radius: 20,
                densety: 0.3,
                clearoffset: 0.2
            }, options);
        if(iframe) {
            curdom = $(window.frames["jw-pagefactory-view"].document).find('#' + domid)
            width = curdom.width()
            height = curdom.height()
        }
        initcontainer();
        function initcontainer() {
            target = {
                x: 0,
                y: height
            };
            initcanvas();
            canvas = document.getelementbyid('canvas-' + domid);
            if(iframe) {
                canvas = window.frames["jw-pagefactory-view"].document.getelementbyid('canvas-' + domid)
                // console.log('canvas', canvas)
            }
            if(canvas) {
                canvas.width = width;
                canvas.height = height;
                ctx = canvas.getcontext('2d');
                for (var x = 0; x < width * settings.densety; x++) {
                    var c = new circle();
                    circles.push(c)
                }
                animate()
            }
        }

        function initcanvas() {
            var canvaselement = document.createelement('canvas');
            canvaselement.id = 'canvas-' + domid;
            curdom.html(canvaselement);
            // curdom.append(canvaselement)
        }

        function animate() {
            if (animateheader) {
                ctx.clearrect(0, 0, width, height);
                for (var i in circles) {
                    circles[i].draw()
                }
            }
            requestanimationframe(animate)
        }

        function randomcolor() {
            return "rgba(" + math.floor(math.random() * 255) + "," + math.floor(math.random() * 255) + "," +
                math.floor(math.random() * 255) + "," + math.random().toprecision(2) + ")"
            // return "rgba(255, 255, 255, " + math.random().toprecision(2) + ")"
        }

        function circle() {
            var self = this;
            (function() {
                self.pos = {};
                init()
            })();

            function init() {
                self.pos.x = math.random() * width;
                self.pos.y = height + math.random() * 100;
                self.alpha = 0.1 + math.random() * settings.clearoffset;
                self.scale = 0.1 + math.random() * 0.3;
                self.speed = math.random();
                if (settings.color == 'random') {
                    self.color = randomcolor()
                } else {
                    self.color = settings.color
                }
            }

            this.draw = function() {
                if (self.alpha <= 0) {
                    init()
                }
                self.pos.y -= self.speed;
                self.alpha -= 0.0005;
                ctx.beginpath();
                ctx.arc(self.pos.x, self.pos.y, self.scale * settings.radius, 0, 2 * math.pi, false);
                ctx.fillstyle = self.color;
                ctx.fill();
                ctx.closepath()
            }
        }
    }
})