<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <script type="text/javascript" src="authoring/js/libs/jquery-1.6.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {  
      
      var initialData = {modules:[],energy_types:[],diagram_rules:[]};
      
      function createIframe(url, id, $elem, callback) {
        $iframe = $('<iframe id='+id+'>').attr('src', url).attr('width', '100%').attr('height', 600);
        $elem.append($iframe);
        $('iframe#'+id).load(function() 
        {
          callback(this);
        });
      }
      
      function updateRuntime(data) {
        if (!data.modules){
          authoring_iframe = document.getElementById('mysystem2-authoring-iframe').contentWindow;
          var data = authoring_iframe.MSA.data;
        }
        var runtime_iframe = document.getElementById('runtime-iframe').contentWindow;
        var activity = runtime_iframe.MySystem.Activity.fromWiseStepDef(data);
        runtime_iframe.SC.RunLoop.begin();
          runtime_iframe.MySystem.activityController.set('content',activity);
        runtime_iframe.SC.RunLoop.end();
      }
      
      createIframe('authoring/index.html', 'mysystem2-authoring-iframe', $('#authoring_td'), function(iframe){
        iframe.contentWindow.MSA.setupParentIFrame(initialData, this, updateRuntime);
      });
      
      createIframe('my_system', 'runtime-iframe', $('#runtime_td'), function(iframe){
        updateRuntime(initialData);
      });
    });
   

   
  </script>
</head>
<body>
  <h1>MySystem Authoring Preview</h1>
  <table width="100%">
    <tr>
      <td id="authoring_td">
      </td>
      <td id="runtime_td">
      </td>
    </tr>
  </table>
</body>
</html>

Create a simple author preview page that links authoring system and runtime
Create a simple author preview page that links authoring system and runtime