               @$delete_button.hide()
 
       if @put_url
-        #Save interactive every 5 seconds just to be safe:
-        window.setInterval (()=> @save()), 5 * 1000
+        #Save interactive every 5 seconds, on window focus and iframe mouseout just to be safe.
+        window.setInterval (=> @save()), 5 * 1000
+        $(window).on 'focus', => @save()
+        $iframe.on 'mouseout', => @save()
+
       @iframePhone.post('getExtendedSupport')
       @iframePhone.post('getLearnerUrl')
       # TODO: There used to be a callback for model_did_load
       # hopefully this will work
       model_did_load()
 
-    @iframePhone = new iframePhone.ParentEndpoint(iframe, phone_answered)
+    @iframePhone = new iframePhone.ParentEndpoint($iframe[0], phone_answered)
 
 
   @default_success: ->

class IFrameSaver
  @instances: []  # save-on-change.coffee looks these up.

  # @param iframe         : an iframe to save data from
  # @param $data_div      : a qjuery element that includes data-* attributes which describe where we post back to
  # @param $delete_button : a qjuery element that is used to trigger data deletion on click
  constructor: (iframe, $data_div, $delete_button) ->
    @put_url = $data_div.data('puturl') # put our data here.
    @get_url = $data_div.data('geturl') # read our data from here.
    @auth_provider = $data_div.data('authprovider') # through which provider did the current user log in
    @user_email = $data_div.data('user-email')
    @logged_in = $data_div.data('loggedin') # true/false - is the current session associated with a user
    @learner_url = null
    @$delete_button = $delete_button
    @$delete_button.click () =>
      @delete_data()
    @$delete_button.hide()

$(document).ready ->
  $('.interactive-container.savable').each ->
    $this = $(this)
    $iframe = $this.find('iframe')
    $data = $this.find('.interactive_data_div')
    $delete_button = $this.find('.delete_interactive_data')
    new IFrameSaver($iframe, $data, $delete_button)
