Document Preview Issue

We have a custom mapping solution inside Community that allows geo-tagged posts from blogs, wikis, forums and media galleries to be displayed as map markers on the world map.

With media gallery posts in particular, when you click the marker you're presented with the post title, trimmed body text and a thumbnail representing the media that was uploaded.

A media gallery post on the map

A media gallery post represented on the map

The intent here is that when the thumbnail is clicked, a document previewer opens up and shows the contents of that file, exactly like what happens when doing the same action in the activity feed.  For instance, if I clicked that text file thumbnail I should get this:

A clipped top section of the document previewer that shows the contents of the text file

Half of the time, this works.  The rest of the time, and to our best efforts we cannot figure out a repeatable pattern, it does not open the previewer but instead changes the page to the post in question.  

From what I understand of the theater url code we're using, changing the page to post itself is a fallback option if the document previewer does not fire for some reason.

Here's a sample of the code that's generated for the above thumbnail:

<a class="ui-theater" id="theaterLink" href="https://community.apan.org/dans-sandbox/m/documents/57" data-theaterurl="/callback.ashx?__type=Telligent.Evolution.Api.Plugins.ActivityStories.MediaStoryType%2C%20Telligent.Evolution.Api&mediaId=f303f7c5-3afa-4604-bbf4-a32c7997687f&mediaGalleryId=2256">
    <img src="/cfs-filesystemfile/__key/communityserver-components-imagefileviewer/filetypeimages_2E00_/txt.png_2D00_50x50.png" border="0" alt="">
</a> 

When creating this code (over a year ago) I understood that creating a previewable file was 2 steps - 1) Include all the appropriate attributes in the anchor tag (seen above) and 2) call the javascript after page load that looks for the data-theaterurl enabled anchor tags and turns them into previewable files.

Here's the javascript code for #2, which I fire 1/2 a second after page load to ensure all the available items are loaded:

window.setTimeout(function () {
  $.telligent.evolution.ui.components.theater.add(document.getElementById('theaterLink'),
    {
      "theaterurl": "/callback.ashx?__type=Telligent.Evolution.Api.Plugins.ActivityStories.MediaStoryType%2C%20Telligent.Evolution.Api&mediaId=" + mediaId() +
      "&mediaGalleryId=" + galleryId()
    });
  $('.ui-theater').click(function (e) {
    window.setTimeout(function () {
      //due to having to hack Telligent's previewing system, additional previewers may come up per click. Remove all but the correct (first) one
      $('.theater-mask').not(':first').remove();
      $('.theater-container').not(':first').remove();
    }, 150);
  });
}, 500);

Any help as to why this *sometimes* fails to preview the document and instead changes the page to the post in question would be wonderful.

Thanks!