text: /* Licensed under the Apache License, Version 2.0 (the "License");
   * you may not use this file except in compliance with the License.
   * You may obtain a copy of the License at
   * 
   *      http://www.apache.org/licenses/LICENSE-2.0
   * 
   * Unless required by applicable law or agreed to in writing, software
   * distributed under the License is distributed on an "AS IS" BASIS,
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   * See the License for the specific language governing permissions and
   * limitations under the License.
   */
  
  var FLOWABLE_EDITOR_TOUR = {
  
      /*
       * General 'getting started' tutorial for the Editor.
       */
      gettingStarted: function($scope, $translate, $q, useLocalStorage) {
          var userName;
          if ($scope.account.firstName) {
              userName = $scope.account.firstName;
          } else {
              userName = $scope.account.fullname;
          }
  
          $q.all([
              $translate('TOUR.WELCOME-TITLE', {userName: userName}), $translate('TOUR.WELCOME-CONTENT'),
              $translate('TOUR.PALETTE-TITLE'), $translate('TOUR.PALETTE-CONTENT'),
              $translate('TOUR.CANVAS-TITLE'), $translate('TOUR.CANVAS-CONTENT'),
              $translate('TOUR.DRAGDROP-TITLE'), $translate('TOUR.DRAGDROP-CONTENT'),
              $translate('TOUR.PROPERTIES-TITLE'), $translate('TOUR.PROPERTIES-CONTENT'),
              $translate('TOUR.TOOLBAR-TITLE'), $translate('TOUR.TOOLBAR-CONTENT'),
              $translate('TOUR.END-TITLE'), $translate('TOUR.END-CONTENT')
          ]).then(function(translations) {
  
              // We're using a hack here due to https://github.com/sorich87/bootstrap-tour/issues/85:
              // when clicking next in the tour, it always sets the 'display' css property to 'none'
              // The hack is simple: before the next step is shown, we reset the 'display' property to 'block'
  
              var tourStepDomElements = ['body', '#paletteHelpWrapper', '#canvasHelpWrapper', '#propertiesHelpWrapper', '#editor-header'];
  
              var tour = new Tour({
                  name: 'activitiEditorTour',
                  storage: (useLocalStorage ? window.localStorage : false),
                  container: 'body',
                  backdrop: true,
                  keyboard: true,
                  steps: [
                      {
                          orphan: true,
                          title: translations[0],
                          content: translations[1],
                          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 300),
                          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[0])
                      },
                      {
                          element: tourStepDomElements[1],
                          title: translations[2],
                          content: translations[3],
                          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 400, 'images/tour/open-group.gif'),
                          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[1])
                      },
                      {
                          element: tourStepDomElements[2],
                          title: translations[4],
                          content: translations[5],
                          placement: 'left',
                          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false),
                          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[2])
                      },
                      {
                          orphan: true,
                          title: translations[6],
                          content: translations[7],
                          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 720, 'images/tour/tour-dnd.gif'),
                          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[0])
                      },
                      {
                          element: tourStepDomElements[3],
                          title: translations[8],
                          content: translations[9],
                          placement: 'top',
                          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 400),
                          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[3])
                      },
                      {
                          element: tourStepDomElements[4],
                          title: translations[10],
                          content: translations[11],
                          placement: 'bottom',
                          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 400),
                          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[4])
                      },
                      {
                          orphan: true,
                          title: translations[12],
                          content: translations[13],
                          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, false, true, 400),
                          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[0])
                      }
                  ],
  
                  onEnd: FLOWABLE_EDITOR_TOUR._buildOnEndFunction(tourStepDomElements)
              });
  
              tour.init();
              tour.start();
          })
      },
  
      /*
       * Tutorial showing how to use the bendpoint functionality for sequenceflow
       */
      sequenceFlowBendpoint: function($scope, $translate, $q, useLocalStorage) {
  
          $q.all([
              $translate('FEATURE-TOUR.BENDPOINT.TITLE'), $translate('FEATURE-TOUR.BENDPOINT.DESCRIPTION')
          ]).then(function(translations) {
  
              // We're using a hack here due to https://github.com/sorich87/bootstrap-tour/issues/85:
              // when clicking next in the tour, it always sets the 'display' css property to 'none'
              // The hack is simple: before the next step is shown, we reset the 'display' property to 'block'
  
              var tourStepDomElements = ['body'];
  
              var tour = new Tour({
                  name: 'bendpointTour',
                  storage: (useLocalStorage ? window.localStorage : false),
                  container: 'body',
                  backdrop: true,
                  keyboard: true,
                  steps: [
                      {
                          orphan: true,
                          title: translations[0],
                          content: translations[1],
                          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, false, true, 500, 'images/tour/sequenceflow-bendpoint.gif'),
                          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[0])
                      }
                  ],
  
                  onEnd: FLOWABLE_EDITOR_TOUR._buildOnEndFunction(tourStepDomElements)
              });
  
              tour.init();
              tour.start();
          })
      },
  
  
  
      _buildStepTemplate : function (addPrevButton, addNextButton, addEndTourButton, optionalForcedWidth, image) {
  
          var width = 200;
          if (optionalForcedWidth) {
              width = optionalForcedWidth;
          }
  
          var template =
              '<div class=\'popover tour\' style=\'max-width:' + width + 'px\'>' +
              '<div class=\'arrow\'></div>' +
              '<h3 class=\'popover-title\'></h3>' +
              '<div class=\'popover-content\'></div>' +
              '<div class=\'popover-navigation\'>';
          if (image) {
              template = template + '<div><img src=\'' + image + '\' style=\'border 1px solid black;margin:5px 0 5px 0;\'></img></div>';
          }
          if (addPrevButton) {
              template = template + '<button class=\'btn btn-sm btn-default \' data-role=\'prev\'>« Prev</button>';
          }
          if (addNextButton) {
              template = template + '<button class=\'btn btn-sm btn-default\' data-role=\'next\' style=\'float:right\'">Next »</button>';
          }
          if (addEndTourButton) {
              template = template + '<button class=\'btn btn-warning btn-sm\' data-role=\'end\' style=\'float:right\'">Got it!</button>';
          }
  
          template = template + '</div>' + '</nav>' + '</div>';
          return template;
      },
  
      _buildOnNextFunction: function(selector) {
          return function () {
              jQuery(selector).each(function (i, obj) {
                  obj.style.display = 'block';
              })
          };
      },
  
      _buildOnEndFunction: function(selectors) {
          return function () {
              for (var elementsToResetIndex = 0; elementsToResetIndex < selectors.length; elementsToResetIndex++) {
                  jQuery(selectors[elementsToResetIndex]).each(function (i, obj) {
                      obj.style.display = 'block';
                  });
              }
          }
      }
  
  };
  