Binding to events on parent page from iframe

Question

Possible Duplicate:
How to write this in jQuery “window.parent.document.getElementById('parentPrice').innerHTML”?

I have an app that I'm porting to the browser for demonstration purposes.

Basically I have a parent page with an iframe that houses the actual app. On the parent page I have some buttons to simulate device controls.

Basically I need some way for these parent page button clicks to be captured by the app running in the iframe.

I have tried creating global functions on the parent page to setup bindings, for example:

// parent document
var bindLeftArrow = function (callback) {
    $("div#controls button#left-arrow").on("click", function () {
        callback();
    });
};

// app initialization within iframe
parent.bindLeftArrow(function () {
    console.log("Left arrow pressed!");
    // do stuff
});

This didn't work, as "Left arrow pressed" never dumps out into my console. The other thing I was thinking I could do is something like:

// parent document
$("div#controls button#left-arrow").on("click", function () {
    $(document).trigger("LEFT_ARROW_PRESSED");
});

// app in iframe
$(<parent document selector>).bind("LEFT_ARROW_PRESSED", function () {
    console.log("Left arrow pressed!");
    // do stuff
});

Only I have no idea what I would put as the selector instead of "parent document selector".

Could anyone tell me how I would accomplish this?