AJAX :: Update Panel Args.get_postBackElement Always Undefined

I am trying to run some animation when an update panel is being updated. I have three update panels on my page and only want this to run for one of the updatepanels.

I use the follwing code which works once the page has loaded,on a button click, however I need the animation to run on the initial page load as well. I have tried adding the animation for page load in a Sys.Application.add_init(MyInit); but it doesn't work.

<script type="text/javascript">
var panelsUpdated;
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded);
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(prm_beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(prm_EndRequest);
function PageLoaded(sender, args)
{
panelsUpdated = args.get_panelsUpdated();
}
// Called when async postback begins
function prm_beginRequest(sender, args) {
for (var i = 0; i < panelsUpdated.length; i++) {
if (panelsUpdated[i].id == "pnlAccordion") {
var panelAccord = $get('viewResults');
panelAccord.style.display = 'none';
currentPostBackElement = "pnlAccordion";
var panelProg = $get('divImage');
panelProg.style.display = '';
}
}
}
// Called when async postback ends
function prm_EndRequest(sender, args) {
for (var i = 0; i < panelsUpdated.length; i++) {
if (panelsUpdated[i].id == "pnlAccordion")
{
// get the divImage and hide it again
var panelProg = $get('divImage');
panelProg.style.display = 'none';
var panelAccord = $get('viewResults');
panelAccord.style.display = 'block';
}
}
}
</script>