[code]  //---------------------------
  public function loadCargoDialogFbjsAction() {
    $config = Zend_Registry::get('config');
    $userNamespace = new Zend_Session_Namespace('User');
    $dlgPrefixValue = $userNamespace->dialogPrefixValue++;
    $dlgPrefixString = sprintf('DIALOG%010d', $dlgPrefixValue);

    $this->_helper->layout()->disableLayout();
    $this->_helper->viewRenderer->setNoRender();

    $loadableCargo = $this->getRequest()->getPost('loadableCargo');

    require_once 'City.php';
    $cityModel = new City();

    $cityRow = $cityModel->getCityByName($loadableCargo['city']);

    $cityImage = $cityRow['image'];
    $cityImageCaption = $cityRow['caption'];
    $cityAnthem = $cityRow['audio_clip'];
    $cityAbstract = htmlspecialchars($cityRow['abstract']); //"Cardiff (Welsh, Caerdydd) is the capital of Wales in the United Kingdom and is in the south of the country. Though it had a reputation of being a rough, industrial city, Cardiff has changed dramatically in recent years. It is now a lively and modern capital city, gaining popularity with tourists interested in its history and culture. Once overlooked, it is now one of the United Kingdom's tourism hot spots. Summer is by far the best time to visit, as many of the attractions are outdoors. Its population is roughly 350,000, with 1.5 million living within 20 miles of the city.";

    /*
      <!--
        <div id="city_image" style="float: right">
          <img src="'. $config->url->absolute->public .'/images/' . $cityImage . '" title="'. $cityAbstract .'" /><br />
          <span style="margin-bottom: 6px;">' . wordwrap($cityImageCaption, 38, '<br />') . '</span>
        </div>
      -->
    */
    /*
        <br style="clear: both" /><br />
        Listen to a sample of '. $nation . ''s national anthem:<br />
        <fb:mp3 src="' . $config->url->absolute->public . '/audio/'. $cityAnthem .'" title="'. $anthemTitle .'" />
    */
    $anthemPiece = explode('_', str_replace('.mp3', '', $cityAnthem));
    $nextTitle = '';
    if(count($anthemPiece) > 2) { $nextTitle = ucfirst($anthemPiece[3]); }
    $nation = ucfirst($anthemPiece[2]). ' ' .$nextTitle;
    if($nation[strlen($nation) - 1] == 's') { trim($nation, 's'); }
    $anthemTitle = ucwords(implode(' ', $anthemPiece));

    $width = (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) ? 'style="height: 183px" ' : '';
    $fbjs =
      '<div id="load_cargo_select">
        <div id="city_image" style="float: right">
          <img '. $width .'src="'. $config->url->absolute->public .'/images/' . $cityImage . '" title="'. $cityAbstract .'" /><br />
          <span style="margin-bottom: 6px;">' . wordwrap($cityImageCaption, 38, '<br />') . '</span><br /><br />
          Listen to a sample of '. $nation . ''s<br />national anthem:<br />
          <fb:mp3 width="200" src="' . $config->url->absolute->public . '/audio/'. $cityAnthem .'" title="'. $anthemTitle .'" />
        </div>
        <form id="load_cargo_select_form" action="" method="POST">
          <p>Your train has stopped in the city of ' . $loadableCargo['city'] . '</p>
          <p>' . $loadableCargo['city'] . ' produces the following goods:</p>
          <ul>';
    if(count($loadableCargo['city_goods']) <= 0) {
      $fbjs .= '<li>None</li>';
    } else {
      foreach($loadableCargo['city_goods'] as $goods) {
        $fbjs .= '<li>' . $goods['name'] . '</li>';
      }
    }
    $fbjs .=
          '</ul>
          <p>Your train is hauling the following goods:</p>
          <ul>';
          if(count($loadableCargo['train_goods']) <= 0) {
            $fbjs .= '<li>None</li>';
          } else {
            foreach($loadableCargo['train_goods'] as $goods) {
              $fbjs .= '<li>' . $goods['name'] . '</li>';
            }
          }
    $fbjs .=
          '</ul>
          <p>What would you like to do?</p>
          <br />
          <input style="width: 200px" type="button" id="'.$dlgPrefixString.'-load-new-submit" name="load-cargo-new" value="Load new goods" onclick="return false;" />
          <br /><br />
          <input style="width: 200px" type="button" id="'.$dlgPrefixString.'-discard-existing-submit" name="load-cargo-discard" value="Discard existing goods" onclick="return false;" />
          <input type="hidden" id="dlg-prefix-string" value="'.$dlgPrefixString.'" />
        </form>
        <br style="clear: both; height: 0px;" />
      </div>';

    echo $fbjs;
  }[/code]

[code]tutStep = [
. .  .
  // 41
  { event: 'CLICK_LOAD_NEW_GOODS',
    cont:  false,
    text:  'Our train is currently stopped in Bremen which produces autos (among other goods). Dublin has a demand for autos, so we want to load some autos onboard our train. The "Load new goods" button does this. Click this button now.',
    arrow: { parent: 'load_cargo_select', dir: 'left', x: 50, y: 30 }
  },
. . .
];

function loadCargo() {
//consoleLog('Entering loadCargo()');
  var actionPrompt = document.getElementById('action-prompt');
  actionPrompt.setTextValue('Loading cargo...');
  var ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
  ajax.ondone = function(data) {
//consoleLog('Entering ondone for load-cargo');
//debugger;
    ajax.responseType = Ajax.FBML;
    ajax.ondone = function(fbjsData) {
//consoleLog('Entering ondone for load-cargo-dialog-fbjs');
//debugger;
      if(data.loadableCargo.length == 0) {
//consoleLog('Calling moveTrainManual()');
        moveTrainManual();
      } else {
//consoleLog('Instantiating loadCargoDialog');
        if(loadCargoDialog == null) {
          loadCargoDialog = new Dialog();
          //if browser is IE, move dialog up 50px to compensate for bug that causes it to shift down the screen
          if(isIE) {
            //loadCargoDialog.setStyle('position', 'relative');
            //loadCargoDialog.setStyle('top', '-50px');
          }
          loadCargoDialog.showChoice('Load Cargo', '<div id="load-cargo-main">'+fbjsData+'</div>', 'Minimize', 'Pass');
        } else {
          if(isIE) {
            //loadCargoDialog.setStyle('position', 'relative');
            //loadCargoDialog.setStyle('top', '-50px');
          }
          loadCargoDialog.showChoice('Load Cargo', fbjsData, 'Minimize', 'Pass');
        }
        var dlgPrefixString = document.getElementById('dlg-prefix-string').getValue();
        //var dlgPrefixString = dlgPrefixElem.getValue();
//consoleLog('Setting dlgBtnNew');
        var dlgBtnNew = document.getElementById(dlgPrefixString+'-load-new-submit');
        dlgBtnNew.cityId = data.loadableCargo.city_id;
        dlgBtnNew.trainId = data.loadableCargo.train_id;
        dlgBtnNew.prefixString = dlgPrefixString;
        dlgBtnNew.loadCargoDialog = loadCargoDialog;
        dlgBtnNew.addEventListener('click', cargoEventHandler); //loadNewCargo);
//consoleLog('Setting dlgBtnDiscard');
        var dlgBtnDiscard = document.getElementById(dlgPrefixString+'-discard-existing-submit');
        dlgBtnDiscard.cityId = data.loadableCargo.city_id;
        dlgBtnDiscard.trainId = data.loadableCargo.train_id;
        dlgBtnDiscard.prefixString = dlgPrefixString;
        dlgBtnDiscard.loadCargoDialog = loadCargoDialog;
        dlgBtnDiscard.addEventListener('click', discardExistingCargo);
        loadCargoDialog.onconfirm = function() {
//consoleLog('Entering loadCargoDialog.onconfirm');
          // Submit the form if it exists, then hide the dialog.
          loadCargoDialog.hide();
          actionPrompt = document.getElementById('action-prompt');
          actionPrompt.setInnerXHTML('<span><div id="action-text">'+
            'The "Load cargo" dialog has been minimized'+
            '</div>'+
            '<div id="action-end">'+
            '<form action="" method="POST">'+
            '<input type="button" value="Maximize" id="next-phase" onclick="loadCargo();" />'+
            '</form>'+
            '</div></span>');
          actionButton = document.getElementById('next-phase');
          actionButton.setValue('Maximize');
          actionButton.addEventListener('click', loadCargoEventHandler);
//consoleLog('Exiting loadCargoDialog.onconfirm');
        };
        loadCargoDialog.oncancel = function() {
          if(tutStep[tutIndex]['event'] == 'CLICK_CITY_DUBLIN_MOVE_TRAIN') {
            showTutorial();
          }
//consoleLog('Entering loadCargoDialog.oncancel');
          moveTrainManual();
//consoleLog('Exiting loadCargoDialog.oncancel');
        }
      }
//consoleLog('Exiting ondone for load-cargo-dialog-fbjs');
    }
    ajax.onerror = function() {
      var dialog = new Dialog().showMessage('Request taking too long', 'The system is taking too long to process this request. Please try refreshing the page. If this does not work, please Contact Us with a description of your problem. We are sorry for the inconvenience.');
    }
    ajax.post(baseURL + '/turn/load-cargo-dialog-fbjs', data);
//consoleLog('Exiting ondone for load-cargo');
  }
  ajax.onerror = function() {
    var dialog = new Dialog().showMessage('Request taking too long', 'The system is taking too long to process this request. Please try refreshing the page. If this does not work, please Contact Us with a description of your problem. We are sorry for the inconvenience.');
  }
  ajax.post(baseURL + '/turn/load-cargo');
//consoleLog('Exiting loadCargo');
}

function showTutorial() {
//debugger;
  var ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
  var param = { 'tutorial-index': tutIndex };
  ajax.ondone = function() {};
  ajax.post(baseURL + '/turn/update-tutorial-index', param);
  var tutorialContent = document.getElementById('tutorial-content');
  tutorialContent.setInnerXHTML('<span>'+tutStep[tutIndex]['text']+'</span>');
  if(tutStep[tutIndex]['height'] > 0) {
    var tutorialDlg = document.getElementById('tutorial-dlg');
    tutorialDlg.setStyle('height', tutStep[tutIndex]['height'] + 'px');
  }
  if(tutStep[tutIndex]['position'] && tutStep[tutIndex]['position']['x'] > 0) {
    var tutorialDlg = document.getElementById('tutorial-dlg');
    tutorialDlg.setStyle('left', tutStep[tutIndex]['position']['x'] + 'px');
    tutorialDlg.setStyle('top', tutStep[tutIndex]['position']['y'] + 'px');
  }
  var dlgButton = document.getElementById('btn-tut-continue');
  if(tutStep[tutIndex]['cont'] == false) {
    dlgButton.setStyle('display', 'none');
  } else {
    dlgButton.setStyle('display', 'inline');
  }
  if(tutIndex > 0) {
    removeArrow(tutStep[tutIndex - 1]['arrow']['parent']);
  }
  tutorialArrow(tutStep[tutIndex]['arrow']['x'], tutStep[tutIndex]['arrow']['y'], tutStep[tutIndex]['arrow']['parent'], tutStep[tutIndex]['arrow']['dir']);
  tutIndex++;
}

function tutorialArrow(x, y, parent, dir) {
  if(parent == null) { return; }
//new Dialog().showMessage('test', 'x='+x+', y='+y+', trainData='+dump(trainData, 3));
  var arrow = document.createElement('div');
  arrow.setClassName('arrow');
  //y -= trainMarkerHeight;
  //x -= parseInt(trainMarkerWidth/2);
  var arrowId = 'tutorial-arrow';
  arrow.setId(arrowId);
  arrow.setStyle('position', 'absolute');
  arrow.setStyle('left', x + 'px');
  arrow.setStyle('top', y + 'px');
  arrow.setStyle('zIndex', 9999);

  var arrowImg = document.createElement('img');
  switch(dir) {
    case 'up':
      arrowImg.setSrc(publicURL + '/images/arrow-up.png');
      break;
    case 'down':
      arrowImg.setSrc(publicURL + '/images/arrow-down.png');
      break;
    case 'left':
      arrowImg.setSrc(publicURL + '/images/arrow-left.png');
      break;
    case 'right':
      arrowImg.setSrc(publicURL + '/images/arrow-right.png');
      break;
  }
  arrow.appendChild(arrowImg);

  if(tutStep[tutIndex]['arrow']['prepend_appid'] == true) {
    parent = 'app'+appId+'_'+parent;
//debugger;
  }
//new Dialog().showMessage('', 'parent='+parent);
  var parentObj = document.getElementById(parent);

  //NOTE: THIS IS THE LINE THAT GENERATES THE FIREBUG ERROR (parentObj is null)
  parentObj.appendChild(arrow);
  flashArrow();
}

function removeArrow(parent) {
  var map = document.getElementById(parent);
  var arrow = document.getElementById("tutorial-arrow");
  if(arrow) {
    map.removeChild(arrow);
  }
}[/code]