Tweens inside of classes

[Yora]

I'm starting to try utilizing classes, with my initial goal to have a type of sprite that will be looping a tween.  The problem I'm having is after the first tween completes, the next one triggered by .onComplete ends up throwing me this error: Cannot call method 'tween' of undefined If the function is instead in the main game file, it works fine. I also may not be using tweens correctly, this is just what I came up with that gave me the desired effect.  

Bee = function (game, x, y) {    Phaser.Sprite.call(this, game, x, y, 'bee');};Bee.prototype = Phaser.Utils.extend(true, Phaser.Sprite.prototype, PIXI.Sprite.prototype);Bee.prototype.constructor = Bee;Bee.prototype.beeAnim1 = function (bee, pos, delay) {    this.game.add.tween(bee).to({        y: pos + 50    }, delay, Phaser.Easing.Sinusoidal.Out, true, 0, false).onComplete.add(function () {        this.game.add.tween(bee).to({            y: pos        }, delay, Phaser.Easing.Quadratic.In, true, 0, false).onComplete.add(function () {            this.game.add.tween(bee).to({                y: pos - 50            }, delay, Phaser.Easing.Sinusoidal.Out, true, 0, false).onComplete.add(function () {                this.game.add.tween(bee).to({                    y: pos                }, delay, Phaser.Easing.Quadratic.In, true, 0, false).onComplete.add(function () {                    beeAnim1(bee, pos, delay);                });            });        });    });}

Additionally I've been having a problem with any tween I'm using behaving strangely when I switch tabs in my browser then switch back.  They'll kinda jump around, stop where they are, or continue to animate while the rest of the game is paused.  When pausing normally (like clicking outside the browser) they pause and resume fine.

[mwatt]

I don't know enough yet about Phaser yet to be sure, but I'll offer something up that might give a nudge in the right direction.  Your description of the first problem smells like a "this" problem.

[Yora]

I don't know enough yet about Phaser yet to be sure, but I'll offer something up that might give a nudge in the right direction.  Your description of the first problem smells like a "this" problem.

Yeah, that's the feeling I was getting.  The first tween's this.game will work as intended, but upon the onComplete call the next this.game is apparently undefined and I'm not sure why.  Though I hardly know my way around javascript.  

[rich]

You should chain the tweens together rather than nest your functions so deeply like that, as you're losing scope beyond the first one. It will also make your code a lot cleaner. Basically you can create a whole bunch of tweens and use tween.chain() to link them together. Something like:

var tween1 = game.add.tween(blah);var tween2 = game.add.tween(part2 of the effect);var tween3 = game.add.tween(part3 of the effect);tween1.chain(tween2);tween2.chain(tween3);tween1.start();

[Yora]

Aah thankyou thankyou, I had been trying to get chaining to work a while back but couldn't quite figure out how to set it up so I made due with my ugly onComplete nesting.  Glad to have chaining now, and it also fixed the scope problem.