I have a D7 site that's using the Annotator/Annotation modules to show some data about a custom "annotation" entity in a jQuery UI dialog when you hover over highlighted text. The jQuery dialog is currently just displaying some selected field data from the annotation (tags, highlighted text, your annotation on that highlight), but I'd like to add the rate module's interactive widget/current score display to the dialog. I have the thumbs up/down widget already working on the page for an annotation entity, but I'd like to show it in the dialog as well.

How might I go about getting Rate to look and behave the same, but be available in a dialog displaying info about an entity? Not certain how to pass all that info into/out of the dialog (i.e. from PHP to jQuery).

1. I know that in PHP (e.g. on a template page), I can do something like

<?php print rate_embed($node, 'agree_disagree_vote', RATE_FULL); ?>

to add the Rate widget, but I'm not certain how to similarly display the interactive widget in a jQuery UI dialog for the same node—I know I'd need to have it getting data (e.g. current votes on a node to display) and sending data on event (e.g. updating current vote when you choose thumbs up) from the server, since PHP is acting on the server side and jQuery on the client side.

2. Looking at the rate widget on an entity view page in Firebug, it looks like the HTML needs three different unique IDs added per rate widget instance (long strings of numbers, replaced below with "REPLACE"):

<label>Thumbs Up/Down</label><div id="rate-node-2-1-1" class="rate-widget-1 rate-widget clear-block rate-user 
rate-REPLACE rate-widget-thumbs_up_down rate-node-2-1-1 rate-processed"><ul><li class="thumb-up"><a id="rate-button-1" class="rate-button rate-thumbs-up-down-btn-up rate-voted" title="up"
href="REPLACE" rel="nofollow">up</a><div class="percent"></div></li><li class="thumb-down"><a id="rate-button-2" class="rate-button rate-thumbs-up-down-btn-down" title="down" 
href="REPLACE" rel="nofollow">down</a><div class="percent"></div></li></ul><div class="rate-info"></div><div class="rate-description"></div></div>

That's an ID for the "vote up" href, an ID for the "vote down" href, and a third ID for the div class. If I could figure out how these IDs are generated, I bet I could just include this HTML in the dialog and insert the appropriate IDs as variables?

Thank you for any suggestions!