How to ensure my callback function is called with a specific argument?

Question

There is the part of my code which works perfectly

var image_mini = $('#map_mini');
var image_full = $('#map_full');

function state_change(data) { 
   // This is just part of code which show idea
   image_mini.mapster(data.state);
}

// This is full block of code, works correct
$("#map_full").mapster(
     $.extend({}, options, {
         onStateChange: state_change
     })
);

Now I need to enhance function state_change so, that it fill receive second argument with image variable, which will be use instead of the directly written image_mini.

Something like this (the code below is WRONG), but with CORRECT syntax code:

function state_change(data, working_image) {  
  working_image.mapster(...);
}

$("#map_full").mapster(
     $.extend({}, options, {
         onStateChange: state_change, image_mini
     })
);

I feel me lamer, but I haven't found example of correct sintax for passing two variables in such onStateChange... I tried some ideas, but it didn't work correctly. Please help!

============================== Added later:

Looks like my idea wasn't understood correctly, so I write more of code:

var image_mini = $('#map_mini');
var image_full = $('#map_full');

function state_change(data, working_image) {  
  working_image.mapster(data.state);
}

$("#map_full").mapster(
     $.extend({}, options, {
         onStateChange: state_change, image_mini
     })
);
$("#map_mini").mapster(
     $.extend({}, options, {
         onStateChange: state_change, image_full
     })
);

This is idea of what I want: both images must be crosslinked, so changes on one will be showed on both of them.

onStateChange: state_change, image_full

This is WRONG, I ask about correct syntax for the task.

Answer 1

It might not be as pretty, but you can do this using:

$.extend({}, options, {
    onStateChange : function (e) {
        state_change(e, image_mini);
    }
})

EDIT

To explain, your first version of code reads like this:

function state_change(data) {
    // ...
}
// ...
$.extend({}, options, {
    onStateChange : state_change
})

What happens here is that whenever onStateChange fires, it calls the state_change function. If this follows general jQuery parlance, then that function gets passed the jQuery event object as the function's first parameter. In this case, that event object would resolve as the data argument in your state_change function declaration.

My code above, follows the same logic:

onStateChange : function (e) {
}

So when onStateChange fires, it'll call that anonymous function, and pass in the event object as the first argument. This will resolve as e inside the handler function. Therefore:

onStateChange : function (e) {
    state_change(e, image_mini);
}

... performs mostly the same thing with respect to the event object. When the onStateChange event fires, the handler gets the event object as e, which it will then pass to the call to state_change. That'll resolve to data inside state_change as a result, and will not change how you use the original function much.

This way, however, we're free to pass in additional arguments into the call to state_change, like throwing in image_mini or whatever.