variable scope and closure inside a module pattern javascript instance

Question

I'm writing a jQuery plugin, and I'm writing it in a non-jquery-community-standard way, mainly to maintain portability and extendability.

I'm having some trouble accessing variables that were declared in the function when accessing from the prototype.

Perhaps I have this model very wrong but I hope someone can point out the correct way to achieve my goal, and that is to create Multiple instances of the same class.

My problem occurs when I try to close the window, I get a "this.auga is undefined" error. When I create the close button (inside the build window method) I attached a click event .click(this.hide) - which is another method within the functions prototype. Also my .resize event isn't working because the method .centerAuga utilizes my this.win property. Getting a this.win is undefined error.

Why would the .show method have a defined this.auga, yet the the .hide method remains undefined? I understand I'm accessing the .show method off the instance itself - but why dont the other methods also have access to the instance?

This is not a "Make this work please". I'm writing this plugin to become more familiar with JavaScript. So if anyone has any insight please - I'm all ears.

Here's a link to the example:
http://jsfiddle.net/G26aM/16/

Answer 1

In a jQuery call back the "this" variable will point to the element that created the event even if the callback function is in your object.

To get around this at the begining of your object do:

var self = this;

And then whenever you want to refer to your object use "self" instead of "this".