var canvasbg={
    defaults : {
        type:-1
    },
    init: function(options) {
        var opts = $.extend(canvasbg.defaults, options);
        if(opts.type==-1){
            //随机
            var num=math.floor(math.random()*3);
            opts.type=num;
        }
        if(opts.type==0){
            canvasbg.canvas0();
        }else if(opts.type==1){
            canvasbg.canvas1();
        }else if(opts.type==2){
            canvasbg.canvas2();
        }else{
            canvasbg.canvas0();
        }
    },
    canvas0: function() {
        var a = document.getelementbyid("bg-canvas"),
            b = document.documentelement.clientwidth,
            c = document.documentelement.clientheight;
        a.width = b,
            a.height = c;
        var d = a.getcontext("2d");
        d.strokestyle = "#f6f6f6",
            d.linewidth = 1,
            d.beginpath(),
            d.translate(.5, .5);
        for (var e = 20; e <= c; e += 20) d.moveto(0, e),
            d.lineto(b, e);
        for (var e = 20; e <= b; e += 20) d.moveto(e, 0),
            d.lineto(e, c);
        d.closepath(),
            d.stroke()
    },
    canvas1: function() {
        var canvas = document.getelementbyid('bg-canvas'),
            ctx = canvas.getcontext('2d'),
            w = canvas.width = window.innerwidth,
            h = canvas.height = window.innerheight,
            hue = 217,
            stars = [],
            count = 0,
            maxstars = 1200;

        var canvas2 = document.createelement('canvas'),
            ctx2 = canvas2.getcontext('2d');
        canvas2.width = 100;
        canvas2.height = 100;
        var half = canvas2.width / 2,
            gradient2 = ctx2.createradialgradient(half, half, 0, half, half, half);
        gradient2.addcolorstop(0.025, '#fff');
        gradient2.addcolorstop(0.1, 'hsl(' + hue + ', 61%, 33%)');
        gradient2.addcolorstop(0.25, 'hsl(' + hue + ', 64%, 6%)');
        gradient2.addcolorstop(1, 'transparent');

        ctx2.fillstyle = gradient2;
        ctx2.beginpath();
        ctx2.arc(half, half, half, 0, math.pi * 2);
        ctx2.fill();

        // end cache

        function random(min, max) {
            if (arguments.length < 2) {
                max = min;
                min = 0;
            }

            if (min > max) {
                var hold = max;
                max = min;
                min = hold;
            }

            return math.floor(math.random() * (max - min + 1)) + min;
        }

        function maxorbit(x, y) {
            var max = math.max(x, y),
                diameter = math.round(math.sqrt(max * max + max * max));
            return diameter / 2;
        }

        var star = function () {

            this.orbitradius = random(maxorbit(w, h));
            this.radius = random(60, this.orbitradius) / 12;
            this.orbitx = w / 2;
            this.orbity = h / 2;
            this.timepassed = random(0, maxstars);
            this.speed = random(this.orbitradius) / 900000;
            this.alpha = random(2, 10) / 10;

            count++;
            stars[count] = this;
        }

        star.prototype.draw = function () {
            var x = math.sin(this.timepassed) * this.orbitradius + this.orbitx,
                y = math.cos(this.timepassed) * this.orbitradius + this.orbity,
                twinkle = random(10);

            if (twinkle === 1 && this.alpha > 0) {
                this.alpha -= 0.05;
            } else if (twinkle === 2 && this.alpha < 1) {
                this.alpha += 0.05;
            }

            ctx.globalalpha = this.alpha;
            ctx.drawimage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
            this.timepassed += this.speed;
        }

        for (var i = 0; i < maxstars; i++) {
            new star();
        }

        function animation() {
            ctx.globalcompositeoperation = 'source-over';
            ctx.globalalpha = 0.8;
            ctx.fillstyle = 'hsla(' + hue + ', 64%, 6%, 1)';
            ctx.fillrect(0, 0, w, h)

            ctx.globalcompositeoperation = 'lighter';
            for (var i = 1, l = stars.length; i < l; i++) {
                stars[i].draw();
            }
            ;

            window.requestanimationframe(animation);
        }

        animation();

    },
    canvas2: function() {
        document.body.style="margin:1px;height: 100%;background-image: -webkit-radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%); background-image: radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);";
        var num = 200;
        var w = window.innerwidth;
        var h = window.innerheight;
        var max = 100;
        var _x = 0;
        var _y = 0;
        var _z = 150;
        var dtr = function (d) {
            return d * math.pi / 180;
        };

        var rnd = function () {
            return math.sin(math.floor(math.random() * 360) * math.pi / 180);
        };
        var dist = function (p1, p2, p3) {
            return math.sqrt(math.pow(p2.x - p1.x, 2) + math.pow(p2.y - p1.y, 2) + math.pow(p2.z - p1.z, 2));
        };

        var cam = {
            obj: {
                x: _x,
                y: _y,
                z: _z
            },
            dest: {
                x: 0,
                y: 0,
                z: 1
            },
            dist: {
                x: 0,
                y: 0,
                z: 200
            },
            ang: {
                cplane: 0,
                splane: 0,
                ctheta: 0,
                stheta: 0
            },
            zoom: 1,
            disp: {
                x: w / 2,
                y: h / 2,
                z: 0
            },
            upd: function () {
                cam.dist.x = cam.dest.x - cam.obj.x;
                cam.dist.y = cam.dest.y - cam.obj.y;
                cam.dist.z = cam.dest.z - cam.obj.z;
                cam.ang.cplane = -cam.dist.z / math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
                cam.ang.splane = cam.dist.x / math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
                cam.ang.ctheta = math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
                cam.ang.stheta = -cam.dist.y / math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
            }
        };

        var trans = {
            parts: {
                sz: function (p, sz) {
                    return {
                        x: p.x * sz.x,
                        y: p.y * sz.y,
                        z: p.z * sz.z
                    };
                },
                rot: {
                    x: function (p, rot) {
                        return {
                            x: p.x,
                            y: p.y * math.cos(dtr(rot.x)) - p.z * math.sin(dtr(rot.x)),
                            z: p.y * math.sin(dtr(rot.x)) + p.z * math.cos(dtr(rot.x))
                        };
                    },
                    y: function (p, rot) {
                        return {
                            x: p.x * math.cos(dtr(rot.y)) + p.z * math.sin(dtr(rot.y)),
                            y: p.y,
                            z: -p.x * math.sin(dtr(rot.y)) + p.z * math.cos(dtr(rot.y))
                        };
                    },
                    z: function (p, rot) {
                        return {
                            x: p.x * math.cos(dtr(rot.z)) - p.y * math.sin(dtr(rot.z)),
                            y: p.x * math.sin(dtr(rot.z)) + p.y * math.cos(dtr(rot.z)),
                            z: p.z
                        };
                    }
                },
                pos: function (p, pos) {
                    return {
                        x: p.x + pos.x,
                        y: p.y + pos.y,
                        z: p.z + pos.z
                    };
                }
            },
            pov: {
                plane: function (p) {
                    return {
                        x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
                        y: p.y,
                        z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
                    };
                },
                theta: function (p) {
                    return {
                        x: p.x,
                        y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
                        z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
                    };
                },
                set: function (p) {
                    return {
                        x: p.x - cam.obj.x,
                        y: p.y - cam.obj.y,
                        z: p.z - cam.obj.z
                    };
                }
            },
            persp: function (p) {
                return {
                    x: p.x * cam.dist.z / p.z * cam.zoom,
                    y: p.y * cam.dist.z / p.z * cam.zoom,
                    z: p.z * cam.zoom,
                    p: cam.dist.z / p.z
                };
            },
            disp: function (p, disp) {
                return {
                    x: p.x + disp.x,
                    y: -p.y + disp.y,
                    z: p.z + disp.z,
                    p: p.p
                };
            },
            steps: function (_obj_, sz, rot, pos, disp) {
                var _args = trans.parts.sz(_obj_, sz);
                _args = trans.parts.rot.x(_args, rot);
                _args = trans.parts.rot.y(_args, rot);
                _args = trans.parts.rot.z(_args, rot);
                _args = trans.parts.pos(_args, pos);
                _args = trans.pov.plane(_args);
                _args = trans.pov.theta(_args);
                _args = trans.pov.set(_args);
                _args = trans.persp(_args);
                _args = trans.disp(_args, disp);
                return _args;
            }
        };

        (function () {

            var threed = function (param) {
                this.transin = {};
                this.transout = {};
                this.transin.vtx = (param.vtx);
                this.transin.sz = (param.sz);
                this.transin.rot = (param.rot);
                this.transin.pos = (param.pos);
            };

            threed.prototype.vupd = function () {
                this.transout = trans.steps(
                    this.transin.vtx,
                    this.transin.sz,
                    this.transin.rot,
                    this.transin.pos,
                    cam.disp
                );
            };

            var build = function () {
                this.vel = 0.04;
                this.lim = 360;
                this.diff = 200;
                this.initpos = 100;
                this.tox = _x;
                this.toy = _y;
                this.go();
            };

            build.prototype.go = function () {
                this.canvas = document.getelementbyid("bg-canvas");
                this.canvas.width = window.innerwidth;
                this.canvas.height = window.innerheight;
                this.$ = this.canvas.getcontext("2d");
                this.$.globalcompositeoperation = 'source-over';
                this.varr = [];
                this.dist = [];
                this.calc = [];

                for (var i = 0, len = num; i < len; i++) {
                    this.add();
                }

                this.rotobj = {
                    x: 0,
                    y: 0,
                    z: 0
                };
                this.objsz = {
                    x: w / 5,
                    y: h / 5,
                    z: w / 5
                };
            };

            build.prototype.add = function () {
                this.varr.push(new threed({
                    vtx: {
                        x: rnd(),
                        y: rnd(),
                        z: rnd()
                    },
                    sz: {
                        x: 0,
                        y: 0,
                        z: 0
                    },
                    rot: {
                        x: 20,
                        y: -20,
                        z: 0
                    },
                    pos: {
                        x: this.diff * math.sin(360 * math.random() * math.pi / 180),
                        y: this.diff * math.sin(360 * math.random() * math.pi / 180),
                        z: this.diff * math.sin(360 * math.random() * math.pi / 180)
                    }
                }));
                this.calc.push({
                    x: 360 * math.random(),
                    y: 360 * math.random(),
                    z: 360 * math.random()
                });
            };

            build.prototype.upd = function () {
                cam.obj.x += (this.tox - cam.obj.x) * 0.05;
                cam.obj.y += (this.toy - cam.obj.y) * 0.05;
            };

            build.prototype.draw = function () {
                this.$.clearrect(0, 0, this.canvas.width, this.canvas.height);
                cam.upd();
                this.rotobj.x += 0.1;
                this.rotobj.y += 0.1;
                this.rotobj.z += 0.1;

                for (var i = 0; i < this.varr.length; i++) {
                    for (var val in this.calc[i]) {
                        if (this.calc[i].hasownproperty(val)) {
                            this.calc[i][val] += this.vel;
                            if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
                        }
                    }

                    this.varr[i].transin.pos = {
                        x: this.diff * math.cos(this.calc[i].x * math.pi / 180),
                        y: this.diff * math.sin(this.calc[i].y * math.pi / 180),
                        z: this.diff * math.sin(this.calc[i].z * math.pi / 180)
                    };
                    this.varr[i].transin.rot = this.rotobj;
                    this.varr[i].transin.sz = this.objsz;
                    this.varr[i].vupd();
                    if (this.varr[i].transout.p < 0) continue;
                    var g = this.$.createradialgradient(this.varr[i].transout.x, this.varr[i].transout.y, this.varr[i].transout.p, this.varr[i].transout.x, this.varr[i].transout.y, this.varr[i].transout.p * 2);
                    this.$.globalcompositeoperation = 'lighter';
                    g.addcolorstop(0, 'hsla(255, 255%, 255%, 1)');
                    g.addcolorstop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
                    g.addcolorstop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
                    this.$.fillstyle = g;
                    this.$.beginpath();
                    this.$.arc(this.varr[i].transout.x, this.varr[i].transout.y, this.varr[i].transout.p * 2, 0, math.pi * 2, false);
                    this.$.fill();
                    this.$.closepath();
                }
            };
            build.prototype.anim = function () {
                window.requestanimationframe = (function () {
                    return window.requestanimationframe ||
                        function (callback, element) {
                            window.settimeout(callback, 1000 / 60);
                        };
                })();
                var anim = function () {
                    this.upd();
                    this.draw();
                    window.requestanimationframe(anim);
                }.bind(this);
                window.requestanimationframe(anim);
            };

            build.prototype.run = function () {
                this.anim();

                window.addeventlistener('mousemove', function (e) {
                    this.tox = (e.clientx - this.canvas.width / 2) * -0.8;
                    this.toy = (e.clienty - this.canvas.height / 2) * 0.8;
                }.bind(this));
                window.addeventlistener('touchmove', function (e) {
                    e.preventdefault();
                    this.tox = (e.touches[0].clientx - this.canvas.width / 2) * -0.8;
                    this.toy = (e.touches[0].clienty - this.canvas.height / 2) * 0.8;
                }.bind(this));
                window.addeventlistener('mousedown', function (e) {
                    for (var i = 0; i < 100; i++) {
                        this.add();
                    }
                }.bind(this));
                window.addeventlistener('touchstart', function (e) {
                    e.preventdefault();
                    for (var i = 0; i < 100; i++) {
                        this.add();
                    }
                }.bind(this));
            };
            var app = new build();
            app.run();
        })();
        window.addeventlistener('resize', function () {
            canvas.width = w = window.innerwidth;
            canvas.height = h = window.innerheight;
        }, false);
    }
}