text: /**
   * Intro.js v2.9.3
   * https://github.com/usablica/intro.js
   *
   * Copyright (C) 2017 Afshin Mehrabani (@afshinmeh)
   */
  
  (function(f) {
      if (typeof exports === "object" && typeof module !== "undefined") {
          module.exports = f();
          // deprecated function
          // @since 2.8.0
          module.exports.introJs = function () {
            console.warn('Deprecated: please use require("intro.js") directly, instead of the introJs method of the function');
            // introJs()
            return f().apply(this, arguments);
          };
      } else if (typeof define === "function" && define.amd) {
          define([], f);
      } else {
          var g;
          if (typeof window !== "undefined") {
              g = window;
          } else if (typeof global !== "undefined") {
              g = global;
          } else if (typeof self !== "undefined") {
              g = self;
          } else {
              g = this;
          }
          g.introJs = f();
      }
  })(function () {
    //Default config/variables
    var VERSION = '2.9.3';
  
    /**
     * IntroJs main class
     *
     * @class IntroJs
     */
    function IntroJs(obj) {
      this._targetElement = obj;
      this._introItems = [];
  
      this._options = {
        /* Next button label in tooltip box */
        nextLabel: 'Siguiente &rarr;',
        /* Previous button label in tooltip box */
        prevLabel: '&larr; Anterior',
        /* Skip button label in tooltip box */
        skipLabel: 'Salir',
        /* Done button label in tooltip box */
        doneLabel: 'Salir',
        /* Hide previous button in the first step? Otherwise, it will be disabled button. */
        hidePrev: false,
        /* Hide next button in the last step? Otherwise, it will be disabled button. */
        hideNext: false,
        /* Default tooltip box position */
        tooltipPosition: 'bottom',
        /* Next CSS class for tooltip boxes */
        tooltipClass: '',
        /* CSS class that is added to the helperLayer */
        highlightClass: '',
        /* Close introduction when pressing Escape button? */
        exitOnEsc: true,
        /* Close introduction when clicking on overlay layer? */
        exitOnOverlayClick: true,
        /* Show step numbers in introduction? */
        showStepNumbers: true,
        /* Let user use keyboard to navigate the tour? */
        keyboardNavigation: true,
        /* Show tour control buttons? */
        showButtons: true,
        /* Show tour bullets? */
        showBullets: true,
        /* Show tour progress? */
        showProgress: false,
        /* Scroll to highlighted element? */
        scrollToElement: true,
        /*
         * Should we scroll the tooltip or target element?
         *
         * Options are: 'element' or 'tooltip'
         */
        scrollTo: 'element',
        /* Padding to add after scrolling when element is not in the viewport (in pixels) */
        scrollPadding: 30,
        /* Set the overlay opacity */
        overlayOpacity: 0.8,
        /* Precedence of positions, when auto is enabled */
        positionPrecedence: ["bottom", "top", "right", "left"],
        /* Disable an interaction with element? */
        disableInteraction: false,
        /* Set how much padding to be used around helper element */
        helperElementPadding: 10,
        /* Default hint position */
        hintPosition: 'top-middle',
        /* Hint button label */
        hintButtonLabel: 'Got it',
        /* Adding animation to hints? */
        hintAnimation: true,
        /* additional classes to put on the buttons */
        buttonClass: "introjs-button"
      };
    }
  
    /**
     * Initiate a new introduction/guide from an element in the page
     *
     * @api private
     * @method _introForElement
     * @param {Object} targetElm
     * @param {String} group
     * @returns {Boolean} Success or not?
     */
    function _introForElement(targetElm, group) {
      var allIntroSteps = targetElm.querySelectorAll("*[data-intro]"),
          introItems = [];
  
      if (this._options.steps) {
        //use steps passed programmatically
        _forEach(this._options.steps, function (step) {
          var currentItem = _cloneObject(step);
  
          //set the step
          currentItem.step = introItems.length + 1;
  
          //use querySelector function only when developer used CSS selector
          if (typeof (currentItem.element) === 'string') {
            //grab the element with given selector from the page
            currentItem.element = document.querySelector(currentItem.element);
          }
  
          //intro without element
          if (typeof (currentItem.element) === 'undefined' || currentItem.element === null) {
            var floatingElementQuery = document.querySelector(".introjsFloatingElement");
  
            if (floatingElementQuery === null) {
              floatingElementQuery = document.createElement('div');
              floatingElementQuery.className = 'introjsFloatingElement';
  
              document.body.appendChild(floatingElementQuery);
            }
  
            currentItem.element  = floatingElementQuery;
            currentItem.position = 'floating';
          }
  
          currentItem.scrollTo = currentItem.scrollTo || this._options.scrollTo;
  
          if (typeof (currentItem.disableInteraction) === 'undefined') {
            currentItem.disableInteraction = this._options.disableInteraction;
          }
  
          if (currentItem.element !== null) {
            introItems.push(currentItem);
          }        
        }.bind(this));
  
      } else {
        //use steps from data-* annotations
        var elmsLength = allIntroSteps.length;
        var disableInteraction;
        
        //if there's no element to intro
        if (elmsLength < 1) {
          return false;
        }
  
        _forEach(allIntroSteps, function (currentElement) {
          
          // PR #80
          // start intro for groups of elements
          if (group && (currentElement.getAttribute("data-intro-group") !== group)) {
            return;
          }
  
          // skip hidden elements
          if (currentElement.style.display === 'none') {
            return;
          }
  
          var step = parseInt(currentElement.getAttribute('data-step'), 10);
  
          if (typeof (currentElement.getAttribute('data-disable-interaction')) !== 'undefined') {
            disableInteraction = !!currentElement.getAttribute('data-disable-interaction');
          } else {
            disableInteraction = this._options.disableInteraction;
          }
  
          if (step > 0) {
            introItems[step - 1] = {
              element: currentElement,
              intro: currentElement.getAttribute('data-intro'),
              step: parseInt(currentElement.getAttribute('data-step'), 10),
              tooltipClass: currentElement.getAttribute('data-tooltipclass'),
              highlightClass: currentElement.getAttribute('data-highlightclass'),
              position: currentElement.getAttribute('data-position') || this._options.tooltipPosition,
              scrollTo: currentElement.getAttribute('data-scrollto') || this._options.scrollTo,
              disableInteraction: disableInteraction
            };
          }
        }.bind(this));
  
        //next add intro items without data-step
        //todo: we need a cleanup here, two loops are redundant
        var nextStep = 0;
  
        _forEach(allIntroSteps, function (currentElement) {
          
          // PR #80
          // start intro for groups of elements
          if (group && (currentElement.getAttribute("data-intro-group") !== group)) {
            return;
          }
          
          if (currentElement.getAttribute('data-step') === null) {
  
            while (true) {
              if (typeof introItems[nextStep] === 'undefined') {
                break;
              } else {
                nextStep++;
              }
            } 
  
            if (typeof (currentElement.getAttribute('data-disable-interaction')) !== 'undefined') {
              disableInteraction = !!currentElement.getAttribute('data-disable-interaction');
            } else {
              disableInteraction = this._options.disableInteraction;
            }
  
            introItems[nextStep] = {
              element: currentElement,
              intro: currentElement.getAttribute('data-intro'),
              step: nextStep + 1,
              tooltipClass: currentElement.getAttribute('data-tooltipclass'),
              highlightClass: currentElement.getAttribute('data-highlightclass'),
              position: currentElement.getAttribute('data-position') || this._options.tooltipPosition,
              scrollTo: currentElement.getAttribute('data-scrollto') || this._options.scrollTo,
              disableInteraction: disableInteraction
            };
          }
        }.bind(this));
      }
  
      //removing undefined/null elements
      var tempIntroItems = [];
      for (var z = 0; z < introItems.length; z++) {
        if (introItems[z]) {
          // copy non-falsy values to the end of the array
          tempIntroItems.push(introItems[z]);  
        } 
      }
  
      introItems = tempIntroItems;
  
      //Ok, sort all items with given steps
      introItems.sort(function (a, b) {
        return a.step - b.step;
      });
  
      //set it to the introJs object
      this._introItems = introItems;
  
      //add overlay layer to the page
      if(_addOverlayLayer.call(this, targetElm)) {
        //then, start the show
        _nextStep.call(this);
  
        if (this._options.keyboardNavigation) {
          DOMEvent.on(window, 'keydown', _onKeyDown, this, true);
        }
        //for window resize
        DOMEvent.on(window, 'resize', _onResize, this, true);
      }
      return false;
    }
  
    function _onResize () {
      this.refresh.call(this);
    }
  
    /**
    * on keyCode:
    * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
    * This feature has been removed from the Web standards.
    * Though some browsers may still support it, it is in
    * the process of being dropped.
    * Instead, you should use KeyboardEvent.code,
    * if it's implemented.
    *
    * jQuery's approach is to test for
    *   (1) e.which, then
    *   (2) e.charCode, then
    *   (3) e.keyCode
    * https://github.com/jquery/jquery/blob/a6b0705294d336ae2f63f7276de0da1195495363/src/event.js#L638
    *
    * @param type var
    * @return type
    */
    function _onKeyDown (e) {
      var code = (e.code === null) ? e.which : e.code;
  
      // if code/e.which is null
      if (code === null) {
        code = (e.charCode === null) ? e.keyCode : e.charCode;
      }
      
      if ((code === 'Escape' || code === 27) && this._options.exitOnEsc === true) {
        //escape key pressed, exit the intro
        //check if exit callback is defined
        _exitIntro.call(this, this._targetElement);
      } else if (code === 'ArrowLeft' || code === 37) {
        //left arrow
        _previousStep.call(this);
      } else if (code === 'ArrowRight' || code === 39) {
        //right arrow
        _nextStep.call(this);
      } else if (code === 'Enter' || code === 13) {
        //srcElement === ie
        var target = e.target || e.srcElement;
        if (target && target.className.match('introjs-prevbutton')) {
          //user hit enter while focusing on previous button
          _previousStep.call(this);
        } else if (target && target.className.match('introjs-skipbutton')) {
          //user hit enter while focusing on skip button
          if (this._introItems.length - 1 === this._currentStep && typeof (this._introCompleteCallback) === 'function') {
              this._introCompleteCallback.call(this);
          }
  
          _exitIntro.call(this, this._targetElement);
        } else if (target && target.getAttribute('data-stepnumber')) {
          // user hit enter while focusing on step bullet
          target.click();
        } else {
          //default behavior for responding to enter
          _nextStep.call(this);
        }
  
        //prevent default behaviour on hitting Enter, to prevent steps being skipped in some browsers
        if(e.preventDefault) {
          e.preventDefault();
        } else {
          e.returnValue = false;
        }
      }
    }
  
   /*
     * makes a copy of the object
     * @api private
     * @method _cloneObject
    */
    function _cloneObject(object) {
        if (object === null || typeof (object) !== 'object' || typeof (object.nodeType) !== 'undefined') {
          return object;
        }
        var temp = {};
        for (var key in object) {
          if (typeof(window.jQuery) !== 'undefined' && object[key] instanceof window.jQuery) {
            temp[key] = object[key];
          } else {
            temp[key] = _cloneObject(object[key]);
          }
        }
        return temp;
    }
    /**
     * Go to specific step of introduction
     *
     * @api private
     * @method _goToStep
     */
    function _goToStep(step) {
      //because steps starts with zero
      this._currentStep = step - 2;
      if (typeof (this._introItems) !== 'undefined') {
        _nextStep.call(this);
      }
    }
  
    /**
     * Go to the specific step of introduction with the explicit [data-step] number
     *
     * @api private
     * @method _goToStepNumber
     */
    function _goToStepNumber(step) {
      this._currentStepNumber = step;
      if (typeof (this._introItems) !== 'undefined') {
        _nextStep.call(this);
      }
    }
  
    /**
     * Go to next step on intro
     *
     * @api private
     * @method _nextStep
     */
    function _nextStep() {
      this._direction = 'forward';
  
      if (typeof (this._currentStepNumber) !== 'undefined') {
        _forEach(this._introItems, function (item, i) {
          if( item.step === this._currentStepNumber ) {
            this._currentStep = i - 1;
            this._currentStepNumber = undefined;
          }
        }.bind(this));
      }
  
      if (typeof (this._currentStep) === 'undefined') {
        this._currentStep = 0;
      } else {
        ++this._currentStep;
      }
  
      var nextStep = this._introItems[this._currentStep];
      var continueStep = true;
  
      if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
        continueStep = this._introBeforeChangeCallback.call(this, nextStep.element);
      }
  
      // if `onbeforechange` returned `false`, stop displaying the element
      if (continueStep === false) {
        --this._currentStep;
        return false;
      }
  
      if ((this._introItems.length) <= this._currentStep) {
        //end of the intro
        //check if any callback is defined
        if (typeof (this._introCompleteCallback) === 'function') {
          this._introCompleteCallback.call(this);
        }
        _exitIntro.call(this, this._targetElement);
        return;
      }
  
      _showElement.call(this, nextStep);
    }
  
    /**
     * Go to previous step on intro
     *
     * @api private
     * @method _previousStep
     */
    function _previousStep() {
      this._direction = 'backward';
  
      if (this._currentStep === 0) {
        return false;
      }
  
      --this._currentStep;
  
      var nextStep = this._introItems[this._currentStep];
      var continueStep = true;
  
      if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
        continueStep = this._introBeforeChangeCallback.call(this, nextStep.element);
      }
  
      // if `onbeforechange` returned `false`, stop displaying the element
      if (continueStep === false) {
        ++this._currentStep;
        return false;
      }
  
      _showElement.call(this, nextStep);
    }
  
    /**
     * Update placement of the intro objects on the screen
     * @api private
     */
    function _refresh() {
      // re-align intros
      _setHelperLayerPosition.call(this, document.querySelector('.introjs-helperLayer'));
      _setHelperLayerPosition.call(this, document.querySelector('.introjs-tooltipReferenceLayer'));
      _setHelperLayerPosition.call(this, document.querySelector('.introjs-disableInteraction'));
  
      // re-align tooltip
      if(this._currentStep !== undefined && this._currentStep !== null) {
        var oldHelperNumberLayer = document.querySelector('.introjs-helperNumberLayer'),
          oldArrowLayer        = document.querySelector('.introjs-arrow'),
          oldtooltipContainer  = document.querySelector('.introjs-tooltip');
        _placeTooltip.call(this, this._introItems[this._currentStep].element, oldtooltipContainer, oldArrowLayer, oldHelperNumberLayer);
      }
  
      //re-align hints
      _reAlignHints.call(this);
      return this;
    }
  
    /**
     * Exit from intro
     *
     * @api private
     * @method _exitIntro
     * @param {Object} targetElement
     * @param {Boolean} force - Setting to `true` will skip the result of beforeExit callback
     */
    function _exitIntro(targetElement, force) {
      var continueExit = true;
  
      // calling onbeforeexit callback
      //
      // If this callback return `false`, it would halt the process
      if (this._introBeforeExitCallback !== undefined) {
        continueExit = this._introBeforeExitCallback.call(this);
      }
  
      // skip this check if `force` parameter is `true`
      // otherwise, if `onbeforeexit` returned `false`, don't exit the intro
      if (!force && continueExit === false) return;
  
      //remove overlay layers from the page
      var overlayLayers = targetElement.querySelectorAll('.introjs-overlay');
  
      if (overlayLayers && overlayLayers.length) {
        _forEach(overlayLayers, function (overlayLayer) {
          overlayLayer.style.opacity = 0;
          window.setTimeout(function () {
            if (this.parentNode) {
              this.parentNode.removeChild(this);
            }
          }.bind(overlayLayer), 500);
        }.bind(this));
      }
  
      //remove all helper layers
      var helperLayer = targetElement.querySelector('.introjs-helperLayer');
      if (helperLayer) {
        helperLayer.parentNode.removeChild(helperLayer);
      }
  
      var referenceLayer = targetElement.querySelector('.introjs-tooltipReferenceLayer');
      if (referenceLayer) {
        referenceLayer.parentNode.removeChild(referenceLayer);
      }
  
      //remove disableInteractionLayer
      var disableInteractionLayer = targetElement.querySelector('.introjs-disableInteraction');
      if (disableInteractionLayer) {
        disableInteractionLayer.parentNode.removeChild(disableInteractionLayer);
      }
  
      //remove intro floating element
      var floatingElement = document.querySelector('.introjsFloatingElement');
      if (floatingElement) {
        floatingElement.parentNode.removeChild(floatingElement);
      }
  
      _removeShowElement();
  
      //remove `introjs-fixParent` class from the elements
      var fixParents = document.querySelectorAll('.introjs-fixParent');
      _forEach(fixParents, function (parent) {
        _removeClass(parent, /introjs-fixParent/g);
      });
  
      //clean listeners
      DOMEvent.off(window, 'keydown', _onKeyDown, this, true);
      DOMEvent.off(window, 'resize', _onResize, this, true);
  
      //check if any callback is defined
      if (this._introExitCallback !== undefined) {
        this._introExitCallback.call(this);
      }
  
      //set the step to zero
      this._currentStep = undefined;
    }
  
    /**
     * Render tooltip box in the page
     *
     * @api private
     * @method _placeTooltip
     * @param {HTMLElement} targetElement
     * @param {HTMLElement} tooltipLayer
     * @param {HTMLElement} arrowLayer
     * @param {HTMLElement} helperNumberLayer
     * @param {Boolean} hintMode
     */
    function _placeTooltip(targetElement, tooltipLayer, arrowLayer, helperNumberLayer, hintMode) {
      var tooltipCssClass = '',
          currentStepObj,
          tooltipOffset,
          targetOffset,
          windowSize,
          currentTooltipPosition;
  
      hintMode = hintMode || false;
  
      //reset the old style
      tooltipLayer.style.top        = null;
      tooltipLayer.style.right      = null;
      tooltipLayer.style.bottom     = null;
      tooltipLayer.style.left       = null;
      tooltipLayer.style.marginLeft = null;
      tooltipLayer.style.marginTop  = null;
  
      arrowLayer.style.display = 'inherit';
  
      if (typeof(helperNumberLayer) !== 'undefined' && helperNumberLayer !== null) {
        helperNumberLayer.style.top  = null;
        helperNumberLayer.style.left = null;
      }
  
      //prevent error when `this._currentStep` is undefined
      if (!this._introItems[this._currentStep]) return;
  
      //if we have a custom css class for each step
      currentStepObj = this._introItems[this._currentStep];
      if (typeof (currentStepObj.tooltipClass) === 'string') {
        tooltipCssClass = currentStepObj.tooltipClass;
      } else {
        tooltipCssClass = this._options.tooltipClass;
      }
  
      tooltipLayer.className = ('introjs-tooltip ' + tooltipCssClass).replace(/^\s+|\s+$/g, '');
      tooltipLayer.setAttribute('role', 'dialog');
  
      currentTooltipPosition = this._introItems[this._currentStep].position;
  
      // Floating is always valid, no point in calculating
      if (currentTooltipPosition !== "floating") { 
        currentTooltipPosition = _determineAutoPosition.call(this, targetElement, tooltipLayer, currentTooltipPosition);
      }
  
      var tooltipLayerStyleLeft;
      targetOffset  = _getOffset(targetElement);
      tooltipOffset = _getOffset(tooltipLayer);
      windowSize    = _getWinSize();
  
      _addClass(tooltipLayer, 'introjs-' + currentTooltipPosition);
  
      switch (currentTooltipPosition) {
        case 'top-right-aligned':
          arrowLayer.className      = 'introjs-arrow bottom-right';
  
          var tooltipLayerStyleRight = 0;
          _checkLeft(targetOffset, tooltipLayerStyleRight, tooltipOffset, tooltipLayer);
          tooltipLayer.style.bottom    = (targetOffset.height +  20) + 'px';
          break;
  
        case 'top-middle-aligned':
          arrowLayer.className      = 'introjs-arrow bottom-middle';
  
          var tooltipLayerStyleLeftRight = targetOffset.width / 2 - tooltipOffset.width / 2;
  
          // a fix for middle aligned hints
          if (hintMode) {
            tooltipLayerStyleLeftRight += 5;
          }
  
          if (_checkLeft(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, tooltipLayer)) {
            tooltipLayer.style.right = null;
            _checkRight(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, windowSize, tooltipLayer);
          }
          tooltipLayer.style.bottom = (targetOffset.height + 20) + 'px';
          break;
  
        case 'top-left-aligned':
        // top-left-aligned is the same as the default top
        case 'top':
          arrowLayer.className = 'introjs-arrow bottom';
  
          tooltipLayerStyleLeft = (hintMode) ? 0 : 15;
  
          _checkRight(targetOffset, tooltipLayerStyleLeft, tooltipOffset, windowSize, tooltipLayer);
          tooltipLayer.style.bottom = (targetOffset.height +  20) + 'px';
          break;
        case 'right':
          tooltipLayer.style.left = (targetOffset.width + 20) + 'px';
          if (targetOffset.top + tooltipOffset.height > windowSize.height) {
            // In this case, right would have fallen below the bottom of the screen.
            // Modify so that the bottom of the tooltip connects with the target
            arrowLayer.className = "introjs-arrow left-bottom";
            tooltipLayer.style.top = "-" + (tooltipOffset.height - targetOffset.height - 20) + "px";
          } else {
            arrowLayer.className = 'introjs-arrow left';
          }
          break;
        case 'left':
          if (!hintMode && this._options.showStepNumbers === true) {
            tooltipLayer.style.top = '15px';
          }
  
          if (targetOffset.top + tooltipOffset.height > windowSize.height) {
            // In this case, left would have fallen below the bottom of the screen.
            // Modify so that the bottom of the tooltip connects with the target
            tooltipLayer.style.top = "-" + (tooltipOffset.height - targetOffset.height - 20) + "px";
            arrowLayer.className = 'introjs-arrow right-bottom';
          } else {
            arrowLayer.className = 'introjs-arrow right';
          }
          tooltipLayer.style.right = (targetOffset.width + 20) + 'px';
  
          break;
        case 'floating':
          arrowLayer.style.display = 'none';
  
          //we have to adjust the top and left of layer manually for intro items without element
          tooltipLayer.style.left   = '50%';
          tooltipLayer.style.top    = '50%';
          tooltipLayer.style.marginLeft = '-' + (tooltipOffset.width / 2)  + 'px';
          tooltipLayer.style.marginTop  = '-' + (tooltipOffset.height / 2) + 'px';
  
          if (typeof(helperNumberLayer) !== 'undefined' && helperNumberLayer !== null) {
            helperNumberLayer.style.left = '-' + ((tooltipOffset.width / 2) + 18) + 'px';
            helperNumberLayer.style.top  = '-' + ((tooltipOffset.height / 2) + 18) + 'px';
          }
  
          break;
        case 'bottom-right-aligned':
          arrowLayer.className      = 'introjs-arrow top-right';
  
          tooltipLayerStyleRight = 0;
          _checkLeft(targetOffset, tooltipLayerStyleRight, tooltipOffset, tooltipLayer);
          tooltipLayer.style.top    = (targetOffset.height +  20) + 'px';
          break;
  
        case 'bottom-middle-aligned':
          arrowLayer.className      = 'introjs-arrow top-middle';
  
          tooltipLayerStyleLeftRight = targetOffset.width / 2 - tooltipOffset.width / 2;
  
          // a fix for middle aligned hints
          if (hintMode) {
            tooltipLayerStyleLeftRight += 5;
          }
  
          if (_checkLeft(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, tooltipLayer)) {
            tooltipLayer.style.right = null;
            _checkRight(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, windowSize, tooltipLayer);
          }
          tooltipLayer.style.top = (targetOffset.height + 20) + 'px';
          break;
  
        // case 'bottom-left-aligned':
        // Bottom-left-aligned is the same as the default bottom
        // case 'bottom':
        // Bottom going to follow the default behavior
        default:
          arrowLayer.className = 'introjs-arrow top';
  
          tooltipLayerStyleLeft = 0;
          _checkRight(targetOffset, tooltipLayerStyleLeft, tooltipOffset, windowSize, tooltipLayer);
          tooltipLayer.style.top    = (targetOffset.height +  20) + 'px';
      }
    }
  
    /**
     * Set tooltip left so it doesn't go off the right side of the window
     *
     * @return boolean true, if tooltipLayerStyleLeft is ok.  false, otherwise.
     */
    function _checkRight(targetOffset, tooltipLayerStyleLeft, tooltipOffset, windowSize, tooltipLayer) {
      if (targetOffset.left + tooltipLayerStyleLeft + tooltipOffset.width > windowSize.width) {
        // off the right side of the window
        tooltipLayer.style.left = (windowSize.width - tooltipOffset.width - targetOffset.left) + 'px';
        return false;
      }
      tooltipLayer.style.left = tooltipLayerStyleLeft + 'px';
      return true;
    }
  
    /**
     * Set tooltip right so it doesn't go off the left side of the window
     *
     * @return boolean true, if tooltipLayerStyleRight is ok.  false, otherwise.
     */
    function _checkLeft(targetOffset, tooltipLayerStyleRight, tooltipOffset, tooltipLayer) {
      if (targetOffset.left + targetOffset.width - tooltipLayerStyleRight - tooltipOffset.width < 0) {
        // off the left side of the window
        tooltipLayer.style.left = (-targetOffset.left) + 'px';
        return false;
      }
      tooltipLayer.style.right = tooltipLayerStyleRight + 'px';
      return true;
    }
  
    /**
     * Determines the position of the tooltip based on the position precedence and availability
     * of screen space.
     *
     * @param {Object}    targetElement
     * @param {Object}    tooltipLayer
     * @param {String}    desiredTooltipPosition
     * @return {String}   calculatedPosition
     */
    function _determineAutoPosition(targetElement, tooltipLayer, desiredTooltipPosition) {
  
      // Take a clone of position precedence. These will be the available
      var possiblePositions = this._options.positionPrecedence.slice();
  
      var windowSize = _getWinSize();
      var tooltipHeight = _getOffset(tooltipLayer).height + 10;
      var tooltipWidth = _getOffset(tooltipLayer).width + 20;
      var targetElementRect = targetElement.getBoundingClientRect();
  
      // If we check all the possible areas, and there are no valid places for the tooltip, the element
      // must take up most of the screen real estate. Show the tooltip floating in the middle of the screen.
      var calculatedPosition = "floating";
  
      /*
      * auto determine position 
      */
  
      // Check for space below
      if (targetElementRect.bottom + tooltipHeight + tooltipHeight > windowSize.height) {
        _removeEntry(possiblePositions, "bottom");
      }
  
      // Check for space above
      if (targetElementRect.top - tooltipHeight < 0) {
        _removeEntry(possiblePositions, "top");
      }
  
      // Check for space to the right
      if (targetElementRect.right + tooltipWidth > windowSize.width) {
        _removeEntry(possiblePositions, "right");
      }
  
      // Check for space to the left
      if (targetElementRect.left - tooltipWidth < 0) {
        _removeEntry(possiblePositions, "left");
      }
  
      // @var {String}  ex: 'right-aligned'
      var desiredAlignment = (function (pos) {
        var hyphenIndex = pos.indexOf('-');
        if (hyphenIndex !== -1) {
          // has alignment
          return pos.substr(hyphenIndex);
        }
        return '';
      })(desiredTooltipPosition || '');
  
      // strip alignment from position
      if (desiredTooltipPosition) {
        // ex: "bottom-right-aligned"
        // should return 'bottom'
        desiredTooltipPosition = desiredTooltipPosition.split('-')[0];
      }
  
      if (possiblePositions.length) {
        if (desiredTooltipPosition !== "auto" &&
            possiblePositions.indexOf(desiredTooltipPosition) > -1) {
          // If the requested position is in the list, choose that
          calculatedPosition = desiredTooltipPosition;
        } else {
          // Pick the first valid position, in order
          calculatedPosition = possiblePositions[0];
        }
      }
  
      // only top and bottom positions have optional alignments
      if (['top', 'bottom'].indexOf(calculatedPosition) !== -1) {
        calculatedPosition += _determineAutoAlignment(targetElementRect.left, tooltipWidth, windowSize, desiredAlignment);
      }
  
      return calculatedPosition;
    }
  
    /**
    * auto-determine alignment
    * @param {Integer}  offsetLeft
    * @param {Integer}  tooltipWidth
    * @param {Object}   windowSize
    * @param {String}   desiredAlignment
    * @return {String}  calculatedAlignment
    */
    function _determineAutoAlignment (offsetLeft, tooltipWidth, windowSize, desiredAlignment) {
      var halfTooltipWidth = tooltipWidth / 2,
        winWidth = Math.min(windowSize.width, window.screen.width),
        possibleAlignments = ['-left-aligned', '-middle-aligned', '-right-aligned'],
        calculatedAlignment = '';
      
      // valid left must be at least a tooltipWidth
      // away from right side
      if (winWidth - offsetLeft < tooltipWidth) {
        _removeEntry(possibleAlignments, '-left-aligned');
      }
  
      // valid middle must be at least half 
      // width away from both sides
      if (offsetLeft < halfTooltipWidth || 
        winWidth - offsetLeft < halfTooltipWidth) {
        _removeEntry(possibleAlignments, '-middle-aligned');
      }
  
      // valid right must be at least a tooltipWidth
      // width away from left side
      if (offsetLeft < tooltipWidth) {
        _removeEntry(possibleAlignments, '-right-aligned');
      }
  
      if (possibleAlignments.length) {
        if (possibleAlignments.indexOf(desiredAlignment) !== -1) {
          // the desired alignment is valid
          calculatedAlignment = desiredAlignment;
        } else {
          // pick the first valid position, in order
          calculatedAlignment = possibleAlignments[0];
        }
      } else {
        // if screen width is too small 
        // for ANY alignment, middle is 
        // probably the best for visibility
        calculatedAlignment = '-middle-aligned';
      }
  
      return calculatedAlignment;
    }
  
    /**
     * Remove an entry from a string array if it's there, does nothing if it isn't there.
     *
     * @param {Array} stringArray
     * @param {String} stringToRemove
     */
    function _removeEntry(stringArray, stringToRemove) {
      if (stringArray.indexOf(stringToRemove) > -1) {
        stringArray.splice(stringArray.indexOf(stringToRemove), 1);
      }
    }
  
    /**
     * Update the position of the helper layer on the screen
     *
     * @api private
     * @method _setHelperLayerPosition
     * @param {Object} helperLayer
     */
    function _setHelperLayerPosition(helperLayer) {
      if (helperLayer) {
        //prevent error when `this._currentStep` in undefined
        if (!this._introItems[this._currentStep]) return;
  
        var currentElement  = this._introItems[this._currentStep],
            elementPosition = _getOffset(currentElement.element),
            widthHeightPadding = this._options.helperElementPadding;
  
        // If the target element is fixed, the tooltip should be fixed as well.
        // Otherwise, remove a fixed class that may be left over from the previous
        // step.
        if (_isFixed(currentElement.element)) {
          _addClass(helperLayer, 'introjs-fixedTooltip');
        } else {
          _removeClass(helperLayer, 'introjs-fixedTooltip');
        }
  
        if (currentElement.position === 'floating') {
          widthHeightPadding = 0;
        }
  
        //set new position to helper layer
        helperLayer.style.cssText = 'width: ' + (elementPosition.width  + widthHeightPadding)  + 'px; ' +
                                          'height:' + (elementPosition.height + widthHeightPadding)  + 'px; ' +
                                          'top:'    + (elementPosition.top    - widthHeightPadding / 2)   + 'px;' +
                                          'left: '  + (elementPosition.left   - widthHeightPadding / 2)   + 'px;';
  
      }
    }
  
    /**
     * Add disableinteraction layer and adjust the size and position of the layer
     *
     * @api private
     * @method _disableInteraction
     */
    function _disableInteraction() {
      var disableInteractionLayer = document.querySelector('.introjs-disableInteraction');
  
      if (disableInteractionLayer === null) {
        disableInteractionLayer = document.createElement('div');
        disableInteractionLayer.className = 'introjs-disableInteraction';
        this._targetElement.appendChild(disableInteractionLayer);
      }
  
      _setHelperLayerPosition.call(this, disableInteractionLayer);
    }
  
    /**
     * Setting anchors to behave like buttons
     *
     * @api private
     * @method _setAnchorAsButton
     */
    function _setAnchorAsButton(anchor){
      anchor.setAttribute('role', 'button');
      anchor.tabIndex = 0;
    }
  
    /**
     * Show an element on the page
     *
     * @api private
     * @method _showElement
     * @param {Object} targetElement
     */
    function _showElement(targetElement) {
      if (typeof (this._introChangeCallback) !== 'undefined') {
        this._introChangeCallback.call(this, targetElement.element);
      }
  
      var self = this,
          oldHelperLayer = document.querySelector('.introjs-helperLayer'),
          oldReferenceLayer = document.querySelector('.introjs-tooltipReferenceLayer'),
          highlightClass = 'introjs-helperLayer',
          nextTooltipButton,
          prevTooltipButton,
          skipTooltipButton,
          scrollParent;
  
      //check for a current step highlight class
      if (typeof (targetElement.highlightClass) === 'string') {
        highlightClass += (' ' + targetElement.highlightClass);
      }
      //check for options highlight class
      if (typeof (this._options.highlightClass) === 'string') {
        highlightClass += (' ' + this._options.highlightClass);
      }
  
      if (oldHelperLayer !== null) {
        var oldHelperNumberLayer = oldReferenceLayer.querySelector('.introjs-helperNumberLayer'),
            oldtooltipLayer      = oldReferenceLayer.querySelector('.introjs-tooltiptext'),
            oldArrowLayer        = oldReferenceLayer.querySelector('.introjs-arrow'),
            oldtooltipContainer  = oldReferenceLayer.querySelector('.introjs-tooltip');
            
        skipTooltipButton    = oldReferenceLayer.querySelector('.introjs-skipbutton');
        prevTooltipButton    = oldReferenceLayer.querySelector('.introjs-prevbutton');
        nextTooltipButton    = oldReferenceLayer.querySelector('.introjs-nextbutton');
  
        //update or reset the helper highlight class
        oldHelperLayer.className = highlightClass;
        //hide the tooltip
        oldtooltipContainer.style.opacity = 0;
        oldtooltipContainer.style.display = "none";
  
        if (oldHelperNumberLayer !== null) {
          var lastIntroItem = this._introItems[(targetElement.step - 2 >= 0 ? targetElement.step - 2 : 0)];
  
          if (lastIntroItem !== null && (this._direction === 'forward' && lastIntroItem.position === 'floating') || (this._direction === 'backward' && targetElement.position === 'floating')) {
            oldHelperNumberLayer.style.opacity = 0;
          }
        }
  
        // scroll to element
        scrollParent = _getScrollParent( targetElement.element );
  
        if (scrollParent !== document.body) {
          // target is within a scrollable element
          _scrollParentToElement(scrollParent, targetElement.element);
        }
  
        // set new position to helper layer
        _setHelperLayerPosition.call(self, oldHelperLayer);
        _setHelperLayerPosition.call(self, oldReferenceLayer);
  
        //remove `introjs-fixParent` class from the elements
        var fixParents = document.querySelectorAll('.introjs-fixParent');
        _forEach(fixParents, function (parent) {
          _removeClass(parent, /introjs-fixParent/g);
        });
        
        //remove old classes if the element still exist
        _removeShowElement();
  
        //we should wait until the CSS3 transition is competed (it's 0.3 sec) to prevent incorrect `height` and `width` calculation
        if (self._lastShowElementTimer) {
          window.clearTimeout(self._lastShowElementTimer);
        }
  
        self._lastShowElementTimer = window.setTimeout(function() {
          //set current step to the label
          if (oldHelperNumberLayer !== null) {
            oldHelperNumberLayer.innerHTML = targetElement.step;
          }
          //set current tooltip text
          oldtooltipLayer.innerHTML = targetElement.intro;
          //set the tooltip position
          oldtooltipContainer.style.display = "block";
          _placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer, oldHelperNumberLayer);
  
          //change active bullet
          if (self._options.showBullets) {
              oldReferenceLayer.querySelector('.introjs-bullets li > a.active').className = '';
              oldReferenceLayer.querySelector('.introjs-bullets li > a[data-stepnumber="' + targetElement.step + '"]').className = 'active';
          }
          oldReferenceLayer.querySelector('.introjs-progress .introjs-progressbar').style.cssText = 'width:' + _getProgress.call(self) + '%;';
          oldReferenceLayer.querySelector('.introjs-progress .introjs-progressbar').setAttribute('aria-valuenow', _getProgress.call(self));
  
          //show the tooltip
          oldtooltipContainer.style.opacity = 1;
          if (oldHelperNumberLayer) oldHelperNumberLayer.style.opacity = 1;
  
          //reset button focus
          if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null && /introjs-donebutton/gi.test(skipTooltipButton.className)) {
            // skip button is now "done" button
            skipTooltipButton.focus();
          } else if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
            //still in the tour, focus on next
            nextTooltipButton.focus();
          }
  
          // change the scroll of the window, if needed
          _scrollTo.call(self, targetElement.scrollTo, targetElement, oldtooltipLayer);
        }, 350);
  
        // end of old element if-else condition
      } else {
        var helperLayer       = document.createElement('div'),
            referenceLayer    = document.createElement('div'),
            arrowLayer        = document.createElement('div'),
            tooltipLayer      = document.createElement('div'),
            tooltipTextLayer  = document.createElement('div'),
            bulletsLayer      = document.createElement('div'),
            progressLayer     = document.createElement('div'),
            buttonsLayer      = document.createElement('div');
  
        helperLayer.className = highlightClass;
        referenceLayer.className = 'introjs-tooltipReferenceLayer';
  
        // scroll to element
        scrollParent = _getScrollParent( targetElement.element );
  
        if (scrollParent !== document.body) {
          // target is within a scrollable element
          _scrollParentToElement(scrollParent, targetElement.element);
        }
  
        //set new position to helper layer
        _setHelperLayerPosition.call(self, helperLayer);
        _setHelperLayerPosition.call(self, referenceLayer);
  
        //add helper layer to target element
        this._targetElement.appendChild(helperLayer);
        this._targetElement.appendChild(referenceLayer);
  
        arrowLayer.className = 'introjs-arrow';
  
        tooltipTextLayer.className = 'introjs-tooltiptext';
        tooltipTextLayer.innerHTML = targetElement.intro;
  
        bulletsLayer.className = 'introjs-bullets';
  
        if (this._options.showBullets === false) {
          bulletsLayer.style.display = 'none';
        }
  
        var ulContainer = document.createElement('ul');
        ulContainer.setAttribute('role', 'tablist');
  
        var anchorClick = function () {
            self.goToStep(this.getAttribute('data-stepnumber'));
        };
  
        _forEach(this._introItems, function (item, i) {
          var innerLi    = document.createElement('li');
          var anchorLink = document.createElement('a');
          
          innerLi.setAttribute('role', 'presentation');
          anchorLink.setAttribute('role', 'tab');
  
          anchorLink.onclick = anchorClick;
  
          if (i === (targetElement.step-1)) {
            anchorLink.className = 'active';
          } 
  
          _setAnchorAsButton(anchorLink);
          anchorLink.innerHTML = "&nbsp;";
          anchorLink.setAttribute('data-stepnumber', item.step);
  
          innerLi.appendChild(anchorLink);
          ulContainer.appendChild(innerLi);
        });
  
        bulletsLayer.appendChild(ulContainer);
  
        progressLayer.className = 'introjs-progress';
  
        if (this._options.showProgress === false) {
          progressLayer.style.display = 'none';
        }
        var progressBar = document.createElement('div');
        progressBar.className = 'introjs-progressbar';
        progressBar.setAttribute('role', 'progress');
        progressBar.setAttribute('aria-valuemin', 0);
        progressBar.setAttribute('aria-valuemax', 100);
        progressBar.setAttribute('aria-valuenow', _getProgress.call(this));
        progressBar.style.cssText = 'width:' + _getProgress.call(this) + '%;';
  
        progressLayer.appendChild(progressBar);
  
        buttonsLayer.className = 'introjs-tooltipbuttons';
        if (this._options.showButtons === false) {
          buttonsLayer.style.display = 'none';
        }
  
        tooltipLayer.className = 'introjs-tooltip';
        tooltipLayer.appendChild(tooltipTextLayer);
        tooltipLayer.appendChild(bulletsLayer);
        tooltipLayer.appendChild(progressLayer);
  
        //add helper layer number
        var helperNumberLayer = document.createElement('span');
        if (this._options.showStepNumbers === true) {
          helperNumberLayer.className = 'introjs-helperNumberLayer';
          helperNumberLayer.innerHTML = targetElement.step;
          referenceLayer.appendChild(helperNumberLayer);
        }
  
        tooltipLayer.appendChild(arrowLayer);
        referenceLayer.appendChild(tooltipLayer);
  
        //next button
        nextTooltipButton = document.createElement('a');
  
        nextTooltipButton.onclick = function() {
          if (self._introItems.length - 1 !== self._currentStep) {
            _nextStep.call(self);
          }
        };
  
        _setAnchorAsButton(nextTooltipButton);
        nextTooltipButton.innerHTML = this._options.nextLabel;
  
        //previous button
        prevTooltipButton = document.createElement('a');
  
        prevTooltipButton.onclick = function() {
          if (self._currentStep !== 0) {
            _previousStep.call(self);
          }
        };
  
        _setAnchorAsButton(prevTooltipButton);
        prevTooltipButton.innerHTML = this._options.prevLabel;
  
        //skip button
        skipTooltipButton = document.createElement('a');
        skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton ';
        _setAnchorAsButton(skipTooltipButton);
        skipTooltipButton.innerHTML = this._options.skipLabel;
  
        skipTooltipButton.onclick = function() {
          if (self._introItems.length - 1 === self._currentStep && typeof (self._introCompleteCallback) === 'function') {
            self._introCompleteCallback.call(self);
          }
  
          if (self._introItems.length - 1 !== self._currentStep && typeof (self._introExitCallback) === 'function') {
            self._introExitCallback.call(self);
          }
  
          if (typeof(self._introSkipCallback) === 'function') {
            self._introSkipCallback.call(self);
          }
  
          _exitIntro.call(self, self._targetElement);
        };
  
        buttonsLayer.appendChild(skipTooltipButton);
  
        //in order to prevent displaying next/previous button always
        if (this._introItems.length > 1) {
          buttonsLayer.appendChild(prevTooltipButton);
          buttonsLayer.appendChild(nextTooltipButton);
        }
  
        tooltipLayer.appendChild(buttonsLayer);
  
        //set proper position
        _placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer, helperNumberLayer);
  
        // change the scroll of the window, if needed
        _scrollTo.call(this, targetElement.scrollTo, targetElement, tooltipLayer);
  
        //end of new element if-else condition
      }
  
      // removing previous disable interaction layer
      var disableInteractionLayer = self._targetElement.querySelector('.introjs-disableInteraction');
      if (disableInteractionLayer) {
        disableInteractionLayer.parentNode.removeChild(disableInteractionLayer);
      }
  
      //disable interaction
      if (targetElement.disableInteraction) {
        _disableInteraction.call(self);
      }
  
      // when it's the first step of tour
      if (this._currentStep === 0 && this._introItems.length > 1) {
        if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) {
          skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton';
        }
        if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
          nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton';
        }
  
        if (this._options.hidePrev === true) {
          if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) {
            prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton introjs-hidden';
          }
          if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
            _addClass(nextTooltipButton, 'introjs-fullbutton');
          }
        } else {
          if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) {
            prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton introjs-disabled';
          }
        }
  
        if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) {
          skipTooltipButton.innerHTML = this._options.skipLabel;
        }
      } else if (this._introItems.length - 1 === this._currentStep || this._introItems.length === 1) {
        // last step of tour
        if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) {
          skipTooltipButton.innerHTML = this._options.doneLabel;
          // adding donebutton class in addition to skipbutton
          _addClass(skipTooltipButton, 'introjs-donebutton');
        }
        if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) {
          prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton';
        }
  
        if (this._options.hideNext === true) {
          if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
            nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton introjs-hidden';
          }
          if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) {
            _addClass(prevTooltipButton, 'introjs-fullbutton');
          }
        } else {
          if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
            nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton introjs-disabled';
          }
        }
      } else {
        // steps between start and end
        if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) {
          skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton';
        }
        if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) {
          prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton';
        }
        if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
          nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton';
        }
        if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) {
          skipTooltipButton.innerHTML = this._options.skipLabel;
        }
      }
  
      prevTooltipButton.setAttribute('role', 'button');
      nextTooltipButton.setAttribute('role', 'button');
      skipTooltipButton.setAttribute('role', 'button');
  
      //Set focus on "next" button, so that hitting Enter always moves you onto the next step
      if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
        nextTooltipButton.focus();
      }
  
      _setShowElement(targetElement);
  
      if (typeof (this._introAfterChangeCallback) !== 'undefined') {
        this._introAfterChangeCallback.call(this, targetElement.element);
      }
    }
  
    /**
     * To change the scroll of `window` after highlighting an element
     *
     * @api private
     * @method _scrollTo
     * @param {String} scrollTo
     * @param {Object} targetElement
     * @param {Object} tooltipLayer
     */
    function _scrollTo(scrollTo, targetElement, tooltipLayer) {
      if (scrollTo === 'off') return;  
      var rect;
  
      if (!this._options.scrollToElement) return;
  
      if (scrollTo === 'tooltip') {
        rect = tooltipLayer.getBoundingClientRect();
      } else {
        rect = targetElement.element.getBoundingClientRect();
      }
  
      if (!_elementInViewport(targetElement.element)) {
        var winHeight = _getWinSize().height;
        var top = rect.bottom - (rect.bottom - rect.top);
  
        // TODO (afshinm): do we need scroll padding now?
        // I have changed the scroll option and now it scrolls the window to
        // the center of the target element or tooltip.
  
        if (top < 0 || targetElement.element.clientHeight > winHeight) {
          window.scrollBy(0, rect.top - ((winHeight / 2) -  (rect.height / 2)) - this._options.scrollPadding); // 30px padding from edge to look nice
  
        //Scroll down
        } else {
          window.scrollBy(0, rect.top - ((winHeight / 2) -  (rect.height / 2)) + this._options.scrollPadding); // 30px padding from edge to look nice
        }
      }
    }
  
    /**
     * To remove all show element(s)
     *
     * @api private
     * @method _removeShowElement
     */
    function _removeShowElement() {
      var elms = document.querySelectorAll('.introjs-showElement');
  
      _forEach(elms, function (elm) {
        _removeClass(elm, /introjs-[a-zA-Z]+/g);
      });
    }
  
    /**
     * To set the show element
     * This function set a relative (in most cases) position and changes the z-index
     *
     * @api private
     * @method _setShowElement
     * @param {Object} targetElement
     */
    function _setShowElement(targetElement) {
      var parentElm;
      // we need to add this show element class to the parent of SVG elements
      // because the SVG elements can't have independent z-index
      if (targetElement.element instanceof SVGElement) {
        parentElm = targetElement.element.parentNode;
  
        while (targetElement.element.parentNode !== null) {
          if (!parentElm.tagName || parentElm.tagName.toLowerCase() === 'body') break;
  
          if (parentElm.tagName.toLowerCase() === 'svg') {
            _addClass(parentElm, 'introjs-showElement introjs-relativePosition');
          }
  
          parentElm = parentElm.parentNode;
        }
      }
  
      _addClass(targetElement.element, 'introjs-showElement');
  
      var currentElementPosition = _getPropValue(targetElement.element, 'position');
      if (currentElementPosition !== 'absolute' &&
          currentElementPosition !== 'relative' &&
          currentElementPosition !== 'fixed') {
        //change to new intro item
        _addClass(targetElement.element, 'introjs-relativePosition');
      }
  
      parentElm = targetElement.element.parentNode;
      while (parentElm !== null) {
        if (!parentElm.tagName || parentElm.tagName.toLowerCase() === 'body') break;
  
        //fix The Stacking Context problem.
        //More detail: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
        var zIndex = _getPropValue(parentElm, 'z-index');
        var opacity = parseFloat(_getPropValue(parentElm, 'opacity'));
        var transform = _getPropValue(parentElm, 'transform') || _getPropValue(parentElm, '-webkit-transform') || _getPropValue(parentElm, '-moz-transform') || _getPropValue(parentElm, '-ms-transform') || _getPropValue(parentElm, '-o-transform');
        if (/[0-9]+/.test(zIndex) || opacity < 1 || (transform !== 'none' && transform !== undefined)) {
          _addClass(parentElm, 'introjs-fixParent');
        }
  
        parentElm = parentElm.parentNode;
      }
    }
  
    /**
    * Iterates arrays
    *
    * @param {Array} arr
    * @param {Function} forEachFnc
    * @param {Function} completeFnc
    * @return {Null}
    */
    function _forEach(arr, forEachFnc, completeFnc) {
      // in case arr is an empty query selector node list
      if (arr) {
        for (var i = 0, len = arr.length; i < len; i++) {
          forEachFnc(arr[i], i);
        }
      }
  
      if (typeof(completeFnc) === 'function') {
        completeFnc();
      }
    }
  
    /**
    * Mark any object with an incrementing number
    * used for keeping track of objects
    *
    * @param Object obj   Any object or DOM Element
    * @param String key
    * @return Object
    */
    var _stamp = (function () {
      var keys = {};
      return function stamp (obj, key) {
        
        // get group key
        key = key || 'introjs-stamp';
  
        // each group increments from 0
        keys[key] = keys[key] || 0;
  
        // stamp only once per object
        if (obj[key] === undefined) {
          // increment key for each new object
          obj[key] = keys[key]++;
        }
  
        return obj[key];
      };
    })();
  
    /**
    * DOMEvent Handles all DOM events
    *
    * methods:
    *
    * on - add event handler
    * off - remove event
    */
    var DOMEvent = (function () {
      function DOMEvent () {
        var events_key = 'introjs_event';
        
        /**
        * Gets a unique ID for an event listener
        *
        * @param Object obj
        * @param String type        event type
        * @param Function listener
        * @param Object context
        * @return String
        */
        this._id = function (obj, type, listener, context) {
          return type + _stamp(listener) + (context ? '_' + _stamp(context) : '');
        };
  
        /**
        * Adds event listener
        *
        * @param Object obj
        * @param String type        event type
        * @param Function listener
        * @param Object context
        * @param Boolean useCapture
        * @return null
        */
        this.on = function (obj, type, listener, context, useCapture) {
          var id = this._id.apply(this, arguments),
              handler = function (e) {
                return listener.call(context || obj, e || window.event);
              };
  
          if ('addEventListener' in obj) {
            obj.addEventListener(type, handler, useCapture);
          } else if ('attachEvent' in obj) {
            obj.attachEvent('on' + type, handler);
          }
  
          obj[events_key] = obj[events_key] || {};
          obj[events_key][id] = handler;
        };
  
        /**
        * Removes event listener
        *
        * @param Object obj
        * @param String type        event type
        * @param Function listener
        * @param Object context
        * @param Boolean useCapture
        * @return null
        */
        this.off = function (obj, type, listener, context, useCapture) {
          var id = this._id.apply(this, arguments),
              handler = obj[events_key] && obj[events_key][id];
  
          if (!handler) {
            return;
          }
  
          if ('removeEventListener' in obj) {
            obj.removeEventListener(type, handler, useCapture);
          } else if ('detachEvent' in obj) {
            obj.detachEvent('on' + type, handler);
          }
  
          obj[events_key][id] = null;
        };
      }
  
      return new DOMEvent();
    })();
  
    /**
     * Append a class to an element
     *
     * @api private
     * @method _addClass
     * @param {Object} element
     * @param {String} className
     * @returns null
     */
    function _addClass(element, className) {
      if (element instanceof SVGElement) {
        // svg
        var pre = element.getAttribute('class') || '';
  
        element.setAttribute('class', pre + ' ' + className);
      } else {
        if (element.classList !== undefined) {
          // check for modern classList property
          var classes = className.split(' ');
          _forEach(classes, function (cls) {
            element.classList.add( cls );
          });
        } else if (!element.className.match( className )) {
          // check if element doesn't already have className
          element.className += ' ' + className;
        }
      }
    }
  
    /**
     * Remove a class from an element
     *
     * @api private
     * @method _removeClass
     * @param {Object} element
     * @param {RegExp|String} classNameRegex can be regex or string
     * @returns null
     */
    function _removeClass(element, classNameRegex) {
      if (element instanceof SVGElement) {
        var pre = element.getAttribute('class') || '';
  
        element.setAttribute('class', pre.replace(classNameRegex, '').replace(/^\s+|\s+$/g, ''));
      } else {
        element.className = element.className.replace(classNameRegex, '').replace(/^\s+|\s+$/g, '');
      }
    }
  
    /**
     * Get an element CSS property on the page
     * Thanks to JavaScript Kit: http://www.javascriptkit.com/dhtmltutors/dhtmlcascade4.shtml
     *
     * @api private
     * @method _getPropValue
     * @param {Object} element
     * @param {String} propName
     * @returns Element's property value
     */
    function _getPropValue (element, propName) {
      var propValue = '';
      if (element.currentStyle) { //IE
        propValue = element.currentStyle[propName];
      } else if (document.defaultView && document.defaultView.getComputedStyle) { //Others
        propValue = document.defaultView.getComputedStyle(element, null).getPropertyValue(propName);
      }
  
      //Prevent exception in IE
      if (propValue && propValue.toLowerCase) {
        return propValue.toLowerCase();
      } else {
        return propValue;
      }
    }
  
    /**
     * Checks to see if target element (or parents) position is fixed or not
     *
     * @api private
     * @method _isFixed
     * @param {Object} element
     * @returns Boolean
     */
    function _isFixed (element) {
      var p = element.parentNode;
  
      if (!p || p.nodeName === 'HTML') {
        return false;
      }
  
      if (_getPropValue(element, 'position') === 'fixed') {
        return true;
      }
  
      return _isFixed(p);
    }
  
    /**
     * Provides a cross-browser way to get the screen dimensions
     * via: http://stackoverflow.com/questions/5864467/internet-explorer-innerheight
     *
     * @api private
     * @method _getWinSize
     * @returns {Object} width and height attributes
     */
    function _getWinSize() {
      if (window.innerWidth !== undefined) {
        return { width: window.innerWidth, height: window.innerHeight };
      } else {
        var D = document.documentElement;
        return { width: D.clientWidth, height: D.clientHeight };
      }
    }
  
    /**
     * Check to see if the element is in the viewport or not
     * http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
     *
     * @api private
     * @method _elementInViewport
     * @param {Object} el
     */
    function _elementInViewport(el) {
      var rect = el.getBoundingClientRect();
  
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        (rect.bottom+80) <= window.innerHeight && // add 80 to get the text right
        rect.right <= window.innerWidth
      );
    }
  
    /**
     * Add overlay layer to the page
     *
     * @api private
     * @method _addOverlayLayer
     * @param {Object} targetElm
     */
    function _addOverlayLayer(targetElm) {
      var overlayLayer = document.createElement('div'),
          styleText = '',
          self = this;
  
      //set css class name
      overlayLayer.className = 'introjs-overlay';
  
      //check if the target element is body, we should calculate the size of overlay layer in a better way
      if (!targetElm.tagName || targetElm.tagName.toLowerCase() === 'body') {
        styleText += 'top: 0;bottom: 0; left: 0;right: 0;position: fixed;';
        overlayLayer.style.cssText = styleText;
      } else {
        //set overlay layer position
        var elementPosition = _getOffset(targetElm);
        if (elementPosition) {
          styleText += 'width: ' + elementPosition.width + 'px; height:' + elementPosition.height + 'px; top:' + elementPosition.top + 'px;left: ' + elementPosition.left + 'px;';
          overlayLayer.style.cssText = styleText;
        }
      }
  
      targetElm.appendChild(overlayLayer);
  
      overlayLayer.onclick = function() {
        if (self._options.exitOnOverlayClick === true) {
          _exitIntro.call(self, targetElm);
        }
      };
  
      window.setTimeout(function() {
        styleText += 'opacity: ' + self._options.overlayOpacity.toString() + ';';
        overlayLayer.style.cssText = styleText;
      }, 10);
  
      return true;
    }
  
    /**
     * Removes open hint (tooltip hint)
     *
     * @api private
     * @method _removeHintTooltip
     */
    function _removeHintTooltip() {
      var tooltip = document.querySelector('.introjs-hintReference');
  
      if (tooltip) {
        var step = tooltip.getAttribute('data-step');
        tooltip.parentNode.removeChild(tooltip);
        return step;
      }
    }
  
    /**
     * Start parsing hint items
     *
     * @api private
     * @param {Object} targetElm
     * @method _startHint
     */
    function _populateHints(targetElm) {
  
      this._introItems = [];
  
      if (this._options.hints) {
        _forEach(this._options.hints, function (hint) {
          var currentItem = _cloneObject(hint);
  
          if (typeof(currentItem.element) === 'string') {
            //grab the element with given selector from the page
            currentItem.element = document.querySelector(currentItem.element);
          }
  
          currentItem.hintPosition = currentItem.hintPosition || this._options.hintPosition;
          currentItem.hintAnimation = currentItem.hintAnimation || this._options.hintAnimation;
  
          if (currentItem.element !== null) {
            this._introItems.push(currentItem);
          }
        }.bind(this));
      } else {
        var hints = targetElm.querySelectorAll('*[data-hint]');
  
        if (!hints || !hints.length) {
          return false;
        }
  
        //first add intro items with data-step
        _forEach(hints, function (currentElement) {
          // hint animation
          var hintAnimation = currentElement.getAttribute('data-hintanimation');
  
          if (hintAnimation) {
            hintAnimation = (hintAnimation === 'true');
          } else {
            hintAnimation = this._options.hintAnimation;
          }
  
          this._introItems.push({
            element: currentElement,
            hint: currentElement.getAttribute('data-hint'),
            hintPosition: currentElement.getAttribute('data-hintposition') || this._options.hintPosition,
            hintAnimation: hintAnimation,
            tooltipClass: currentElement.getAttribute('data-tooltipclass'),
            position: currentElement.getAttribute('data-position') || this._options.tooltipPosition
          });
        }.bind(this));
      }
  
      _addHints.call(this);
  
      /* 
      todo:
      these events should be removed at some point 
      */
      DOMEvent.on(document, 'click', _removeHintTooltip, this, false);
      DOMEvent.on(window, 'resize', _reAlignHints, this, true);
    }
  
    /**
     * Re-aligns all hint elements
     *
     * @api private
     * @method _reAlignHints
     */
    function _reAlignHints() {
      _forEach(this._introItems, function (item) {
        if (typeof(item.targetElement) === 'undefined') {
          return;
        }
  
        _alignHintPosition.call(this, item.hintPosition, item.element, item.targetElement);
      }.bind(this));
    }
  
    /**
    * Get a queryselector within the hint wrapper
    *
    * @param {String} selector
    * @return {NodeList|Array}
    */
    function _hintQuerySelectorAll(selector) {
      var hintsWrapper = document.querySelector('.introjs-hints');
      return (hintsWrapper) ? hintsWrapper.querySelectorAll(selector) : [];
    }
  
    /**
     * Hide a hint
     *
     * @api private
     * @method _hideHint
     */
    function _hideHint(stepId) {
      var hint = _hintQuerySelectorAll('.introjs-hint[data-step="' + stepId + '"]')[0];
      
      _removeHintTooltip.call(this);
  
      if (hint) {
        _addClass(hint, 'introjs-hidehint');
      }
  
      // call the callback function (if any)
      if (typeof (this._hintCloseCallback) !== 'undefined') {
        this._hintCloseCallback.call(this, stepId);
      }
    }
  
    /**
     * Hide all hints
     *
     * @api private
     * @method _hideHints
     */
    function _hideHints() {
      var hints = _hintQuerySelectorAll('.introjs-hint');
  
      _forEach(hints, function (hint) {
        _hideHint.call(this, hint.getAttribute('data-step'));
      }.bind(this));
    }
  
    /**
     * Show all hints
     *
     * @api private
     * @method _showHints
     */
    function _showHints() {
      var hints = _hintQuerySelectorAll('.introjs-hint');
  
      if (hints && hints.length) {
        _forEach(hints, function (hint) {
          _showHint.call(this, hint.getAttribute('data-step'));
        }.bind(this));
      } else {
        _populateHints.call(this, this._targetElement);
      }
    }
  
    /**
     * Show a hint
     *
     * @api private
     * @method _showHint
     */
    function _showHint(stepId) {
      var hint = _hintQuerySelectorAll('.introjs-hint[data-step="' + stepId + '"]')[0];
  
      if (hint) {
        _removeClass(hint, /introjs-hidehint/g);
      }
    }
  
    /**
     * Removes all hint elements on the page
     * Useful when you want to destroy the elements and add them again (e.g. a modal or popup)
     *
     * @api private
     * @method _removeHints
     */
    function _removeHints() {
      var hints = _hintQuerySelectorAll('.introjs-hint');
  
      _forEach(hints, function (hint) {
        _removeHint.call(this, hint.getAttribute('data-step'));
      }.bind(this));
    }
  
    /**
     * Remove one single hint element from the page
     * Useful when you want to destroy the element and add them again (e.g. a modal or popup)
     * Use removeHints if you want to remove all elements.
     *
     * @api private
     * @method _removeHint
     */
    function _removeHint(stepId) {
      var hint = _hintQuerySelectorAll('.introjs-hint[data-step="' + stepId + '"]')[0];
  
      if (hint) {
        hint.parentNode.removeChild(hint);
      }
    }
  
    /**
     * Add all available hints to the page
     *
     * @api private
     * @method _addHints
     */
    function _addHints() {
      var self = this;
  
      var hintsWrapper = document.querySelector('.introjs-hints');
  
      if (hintsWrapper === null) {
        hintsWrapper = document.createElement('div');
        hintsWrapper.className = 'introjs-hints';
      }
  
      /**
      * Returns an event handler unique to the hint iteration
      * 
      * @param {Integer} i
      * @return {Function}
      */
      var getHintClick = function (i) {
        return function(e) {
          var evt = e ? e : window.event;
          
          if (evt.stopPropagation) {
            evt.stopPropagation();
          }
  
          if (evt.cancelBubble !== null) {
            evt.cancelBubble = true;
          }
  
          _showHintDialog.call(self, i);
        };
      };
  
      _forEach(this._introItems, function(item, i) {
        // avoid append a hint twice
        if (document.querySelector('.introjs-hint[data-step="' + i + '"]')) {
          return;
        }
  
        var hint = document.createElement('a');
        _setAnchorAsButton(hint);
  
        hint.onclick = getHintClick(i);
  
        hint.className = 'introjs-hint';
  
        if (!item.hintAnimation) {
          _addClass(hint, 'introjs-hint-no-anim');
        }
  
        // hint's position should be fixed if the target element's position is fixed
        if (_isFixed(item.element)) {
          _addClass(hint, 'introjs-fixedhint');
        }
  
        var hintDot = document.createElement('div');
        hintDot.className = 'introjs-hint-dot';
        var hintPulse = document.createElement('div');
        hintPulse.className = 'introjs-hint-pulse';
  
        hint.appendChild(hintDot);
        hint.appendChild(hintPulse);
        hint.setAttribute('data-step', i);
  
        // we swap the hint element with target element
        // because _setHelperLayerPosition uses `element` property
        item.targetElement = item.element;
        item.element = hint;
  
        // align the hint position
        _alignHintPosition.call(this, item.hintPosition, hint, item.targetElement);
  
        hintsWrapper.appendChild(hint);
      }.bind(this));
  
      // adding the hints wrapper
      document.body.appendChild(hintsWrapper);
  
      // call the callback function (if any)
      if (typeof (this._hintsAddedCallback) !== 'undefined') {
        this._hintsAddedCallback.call(this);
      }
    }
  
    /**
     * Aligns hint position
     *
     * @api private
     * @method _alignHintPosition
     * @param {String} position
     * @param {Object} hint
     * @param {Object} element
     */
    function _alignHintPosition(position, hint, element) {
      // get/calculate offset of target element
      var offset = _getOffset.call(this, element);
      var iconWidth = 20;
      var iconHeight = 20;
  
      // align the hint element
      switch (position) {
        default:
        case 'top-left':
          hint.style.left = offset.left + 'px';
          hint.style.top = offset.top + 'px';
          break;
        case 'top-right':
          hint.style.left = (offset.left + offset.width - iconWidth) + 'px';
          hint.style.top = offset.top + 'px';
          break;
        case 'bottom-left':
          hint.style.left = offset.left + 'px';
          hint.style.top = (offset.top + offset.height - iconHeight) + 'px';
          break;
        case 'bottom-right':
          hint.style.left = (offset.left + offset.width - iconWidth) + 'px';
          hint.style.top = (offset.top + offset.height - iconHeight) + 'px';
          break;
        case 'middle-left':
          hint.style.left = offset.left + 'px';
          hint.style.top = (offset.top + (offset.height - iconHeight) / 2) + 'px';
          break;
        case 'middle-right':
          hint.style.left = (offset.left + offset.width - iconWidth) + 'px';
          hint.style.top = (offset.top + (offset.height - iconHeight) / 2) + 'px';
          break;
        case 'middle-middle':
          hint.style.left = (offset.left + (offset.width - iconWidth) / 2) + 'px';
          hint.style.top = (offset.top + (offset.height - iconHeight) / 2) + 'px';
          break;
        case 'bottom-middle':
          hint.style.left = (offset.left + (offset.width - iconWidth) / 2) + 'px';
          hint.style.top = (offset.top + offset.height - iconHeight) + 'px';
          break;
        case 'top-middle':
          hint.style.left = (offset.left + (offset.width - iconWidth) / 2) + 'px';
          hint.style.top = offset.top + 'px';
          break;
      }
    }
  
    /**
     * Triggers when user clicks on the hint element
     *
     * @api private
     * @method _showHintDialog
     * @param {Number} stepId
     */
    function _showHintDialog(stepId) {
      var hintElement = document.querySelector('.introjs-hint[data-step="' + stepId + '"]');
      var item = this._introItems[stepId];
  
      // call the callback function (if any)
      if (typeof (this._hintClickCallback) !== 'undefined') {
        this._hintClickCallback.call(this, hintElement, item, stepId);
      }
  
      // remove all open tooltips
      var removedStep = _removeHintTooltip.call(this);
  
      // to toggle the tooltip
      if (parseInt(removedStep, 10) === stepId) {
        return;
      }
  
      var tooltipLayer = document.createElement('div');
      var tooltipTextLayer = document.createElement('div');
      var arrowLayer = document.createElement('div');
      var referenceLayer = document.createElement('div');
  
      tooltipLayer.className = 'introjs-tooltip';
  
      tooltipLayer.onclick = function (e) {
        //IE9 & Other Browsers
        if (e.stopPropagation) {
          e.stopPropagation();
        }
        //IE8 and Lower
        else {
          e.cancelBubble = true;
        }
      };
  
      tooltipTextLayer.className = 'introjs-tooltiptext';
  
      var tooltipWrapper = document.createElement('p');
      tooltipWrapper.innerHTML = item.hint;
  
      var closeButton = document.createElement('a');
      closeButton.className = this._options.buttonClass;
      closeButton.setAttribute('role', 'button');
      closeButton.innerHTML = this._options.hintButtonLabel;
      closeButton.onclick = _hideHint.bind(this, stepId);
  
      tooltipTextLayer.appendChild(tooltipWrapper);
      tooltipTextLayer.appendChild(closeButton);
  
      arrowLayer.className = 'introjs-arrow';
      tooltipLayer.appendChild(arrowLayer);
  
      tooltipLayer.appendChild(tooltipTextLayer);
  
      // set current step for _placeTooltip function
      this._currentStep = hintElement.getAttribute('data-step');
  
      // align reference layer position
      referenceLayer.className = 'introjs-tooltipReferenceLayer introjs-hintReference';
      referenceLayer.setAttribute('data-step', hintElement.getAttribute('data-step'));
      _setHelperLayerPosition.call(this, referenceLayer);
  
      referenceLayer.appendChild(tooltipLayer);
      document.body.appendChild(referenceLayer);
  
      //set proper position
      _placeTooltip.call(this, hintElement, tooltipLayer, arrowLayer, null, true);
    }
  
    /**
     * Get an element position on the page
     * Thanks to `meouw`: http://stackoverflow.com/a/442474/375966
     *
     * @api private
     * @method _getOffset
     * @param {Object} element
     * @returns Element's position info
     */
    function _getOffset(element) {
      var body = document.body;
      var docEl = document.documentElement;
      var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
      var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
      var x = element.getBoundingClientRect();
      return {
        top: x.top + scrollTop,
        width: x.width,
        height: x.height,
        left: x.left + scrollLeft
      };
    }
  
    /**
    * Find the nearest scrollable parent
    * copied from https://stackoverflow.com/questions/35939886/find-first-scrollable-parent
    *
    * @param Element element
    * @return Element
    */
    function _getScrollParent(element) {
      var style = window.getComputedStyle(element);
      var excludeStaticParent = (style.position === "absolute");
      var overflowRegex = /(auto|scroll)/;
  
      if (style.position === "fixed") return document.body;
      
      for (var parent = element; (parent = parent.parentElement);) {
        style = window.getComputedStyle(parent);
        if (excludeStaticParent && style.position === "static") {
          continue;
        }
        if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
      }
  
      return document.body;
    }
  
    /**
    * scroll a scrollable element to a child element
    *
    * @param Element parent
    * @param Element element
    * @return Null
    */
    function _scrollParentToElement (parent, element) {
      parent.scrollTop = element.offsetTop - parent.offsetTop;
    }
  
    /**
     * Gets the current progress percentage
     *
     * @api private
     * @method _getProgress
     * @returns current progress percentage
     */
    function _getProgress() {
      // Steps are 0 indexed
      var currentStep = parseInt((this._currentStep + 1), 10);
      return ((currentStep / this._introItems.length) * 100);
    }
  
    /**
     * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
     * via: http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically
     *
     * @param obj1
     * @param obj2
     * @returns obj3 a new object based on obj1 and obj2
     */
    function _mergeOptions(obj1,obj2) {
      var obj3 = {},
        attrname;
      for (attrname in obj1) { obj3[attrname] = obj1[attrname]; }
      for (attrname in obj2) { obj3[attrname] = obj2[attrname]; }
      return obj3;
    }
  
    var introJs = function (targetElm) {
      var instance;
  
      if (typeof (targetElm) === 'object') {
        //Ok, create a new instance
        instance = new IntroJs(targetElm);
  
      } else if (typeof (targetElm) === 'string') {
        //select the target element with query selector
        var targetElement = document.querySelector(targetElm);
  
        if (targetElement) {
          instance = new IntroJs(targetElement);
        } else {
          throw new Error('There is no element with given selector.');
        }
      } else {
        instance = new IntroJs(document.body);
      }
      // add instance to list of _instances
      // passing group to _stamp to increment
      // from 0 onward somewhat reliably
      introJs.instances[ _stamp(instance, 'introjs-instance') ] = instance;
  
      return instance;
    };
  
    /**
     * Current IntroJs version
     *
     * @property version
     * @type String
     */
    introJs.version = VERSION;
  
    /**
    * key-val object helper for introJs instances
    *
    * @property instances
    * @type Object
    */
    introJs.instances = {};
  
    //Prototype
    introJs.fn = IntroJs.prototype = {
      clone: function () {
        return new IntroJs(this);
      },
      setOption: function(option, value) {
        this._options[option] = value;
        return this;
      },
      setOptions: function(options) {
        this._options = _mergeOptions(this._options, options);
        return this;
      },
      start: function (group) {
        _introForElement.call(this, this._targetElement, group);
        return this;
      },
      goToStep: function(step) {
        _goToStep.call(this, step);
        return this;
      },
      addStep: function(options) {
        if (!this._options.steps) {
          this._options.steps = [];
        }
  
        this._options.steps.push(options);
  
        return this;
      },
      addSteps: function(steps) {
        if (!steps.length) return;
  
        for(var index = 0; index < steps.length; index++) {
          this.addStep(steps[index]);
        }
  
        return this;
      },
      goToStepNumber: function(step) {
        _goToStepNumber.call(this, step);
  
        return this;
      },
      nextStep: function() {
        _nextStep.call(this);
        return this;
      },
      previousStep: function() {
        _previousStep.call(this);
        return this;
      },
      exit: function(force) {
        _exitIntro.call(this, this._targetElement, force);
        return this;
      },
      refresh: function() {
        _refresh.call(this);
        return this;
      },
      onbeforechange: function(providedCallback) {
        if (typeof (providedCallback) === 'function') {
          this._introBeforeChangeCallback = providedCallback;
        } else {
          throw new Error('Provided callback for onbeforechange was not a function');
        }
        return this;
      },
      onchange: function(providedCallback) {
        if (typeof (providedCallback) === 'function') {
          this._introChangeCallback = providedCallback;
        } else {
          throw new Error('Provided callback for onchange was not a function.');
        }
        return this;
      },
      onafterchange: function(providedCallback) {
        if (typeof (providedCallback) === 'function') {
          this._introAfterChangeCallback = providedCallback;
        } else {
          throw new Error('Provided callback for onafterchange was not a function');
        }
        return this;
      },
      oncomplete: function(providedCallback) {
        if (typeof (providedCallback) === 'function') {
          this._introCompleteCallback = providedCallback;
        } else {
          throw new Error('Provided callback for oncomplete was not a function.');
        }
        return this;
      },
      onhintsadded: function(providedCallback) {
        if (typeof (providedCallback) === 'function') {
          this._hintsAddedCallback = providedCallback;
        } else {
          throw new Error('Provided callback for onhintsadded was not a function.');
        }
        return this;
      },
      onhintclick: function(providedCallback) {
        if (typeof (providedCallback) === 'function') {
          this._hintClickCallback = providedCallback;
        } else {
          throw new Error('Provided callback for onhintclick was not a function.');
        }
        return this;
      },
      onhintclose: function(providedCallback) {
        if (typeof (providedCallback) === 'function') {
          this._hintCloseCallback = providedCallback;
        } else {
          throw new Error('Provided callback for onhintclose was not a function.');
        }
        return this;
      },
      onexit: function(providedCallback) {
        if (typeof (providedCallback) === 'function') {
          this._introExitCallback = providedCallback;
        } else {
          throw new Error('Provided callback for onexit was not a function.');
        }
        return this;
      },
      onskip: function(providedCallback) {
        if (typeof (providedCallback) === 'function') {
          this._introSkipCallback = providedCallback;
        } else {
          throw new Error('Provided callback for onskip was not a function.');
        }
        return this;
      },
      onbeforeexit: function(providedCallback) {
        if (typeof (providedCallback) === 'function') {
          this._introBeforeExitCallback = providedCallback;
        } else {
          throw new Error('Provided callback for onbeforeexit was not a function.');
        }
        return this;
      },
      addHints: function() {
        _populateHints.call(this, this._targetElement);
        return this;
      },
      hideHint: function (stepId) {
        _hideHint.call(this, stepId);
        return this;
      },
      hideHints: function () {
        _hideHints.call(this);
        return this;
      },
      showHint: function (stepId) {
        _showHint.call(this, stepId);
        return this;
      },
      showHints: function () {
        _showHints.call(this);
        return this;
      },
      removeHints: function () {
        _removeHints.call(this);
        return this;
      },
      removeHint: function (stepId) {
        _removeHint.call(this, stepId);
        return this;
      },
      showHintDialog: function (stepId) {
        _showHintDialog.call(this, stepId);
        return this;
      }
    };
  
    return introJs;
  });
  