JS Function to Insert Values Across Child Frames - Need Help

I'd like the bar.html file to take the values contained in hidden
fields and stuff them into the form fields found on mymessagebox.html.
I can get it working no problem if it is all on the same page, but I'm
having trouble getting it to work across pages via the index.html
frames. Any help is appreciated.

code:

----- application.js -----

function inject_message() {
    $('messagesubject').value = $F('hidden_subject');
    $('messagebody').value = $F('hidden_body');
}

function clear_message() {
    $('messagesubject').value = "";
    $('messagebody').value = "";
}

----- index.html -----

<frameset rows="5%, 95%">
<frame src="bar/bar" name="bar">
<frame src="bar/mymessagebox" name="mymessagebox">
</frameset>

----- bar.html -----

<%= javascript_include_tag :defaults %> <!-- this loads application.js
-->

<a href='javascript:inject_message()'>inject me</a> | <a
href='javascript:clear_message()'>clear me</a>

<input type="hidden" id="hidden_subject" name="hidden_subject"
value="Hi there"/>
<input type="hidden" id="hidden_body" name="hidden_body" value="My
cool message"/>

----- mymessagebox.html -----

<div>

	<div>
		<p>Subject:</p>
		<div>
			<div>
				<input type="text" style="width: 450px;" tabindex="1"
id="messagesubject" name="messagesubject"/>
			</div>
		</div>
	</div>

	<div>
		<p>Body:</p>
		<div>
			<textarea style="width: 450px;" tabindex="2" id="messagebody"
cols="20" rows="20" name="messagebody"/>
			</textarea>
		</div>
	</div>

</div>