camaleon_cms 1.0.3 → 1.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ac6264aa837e1bf65d11ef13a9ddee7d7d287a7c
-  data.tar.gz: 030b3f0ba1bc3720d79aa2b99923bb812f019f95
+  metadata.gz: dde50d023af5d5b8c20010a1b05d865b2a9102fe
+  data.tar.gz: d17b74a4a5bac6fb7ef869784a778f27dd29a0a8
 SHA512:
-  metadata.gz: 14c3f2a6edc55438f0788693fa764c817a7b26bd899774ace020d402ab7208561380629b17a29720e2483368b7955252d98bd5379b0ce029c5f2a01eb63b39a4
-  data.tar.gz: b1939cf9c2dc983e74ce60eff0580a232aa534da332cca90addba07b9899ffb0db33a4089ff97be49f96915930f356ff21c168518f8c8b747bc39e0a98225d3e
+  metadata.gz: 035738fecbcab32bafe7f3591c6d428e8ea6264152b330c8d56a2e3d5064ba026e65d94b99b6957b7f1394b592f2ee03f35f5b34c22208719e2bafae20bbc1c5
+  data.tar.gz: 4a9126ebdd52874f2fcf3c7486ed9c12473b175ed3e5fd672f179a3489ddb69d4243d8b6d562c9163c8149b6d3d855ac4e85ad9a94c0774f1ce9825ffac170ed

data/README.md

@@ -179,94 +179,4 @@ http://camaleon.tuzitio.com/license.html/
 Visit the web site for more information: http://camaleon.tuzitio.com/
 
 ## Version History
-### 1.0
-* new template for admin panel
-* gem plugin generator
-  console:
-  rails g camaleon_cms:gem_plugin post_reorder
-  bundle install
-  visit frontend: http://localhost:3000/plugins/post_reorder/index
-  visit backend: http://localhost:3000/admin/plugins/post_reorder/index
-  Check here to publish your gem http://guides.rubygems.org/publishing/
-* gem plugin support added
-* changed post structure to improve sql query
-* added custom field orderer
-  sort_by_field(...)
-  sample: Site.first.posts.sort_by_field("untitled-field-attributes", "desc")
-* Added layouts selector like template selector
-* Added support custom fields for menu items
-  Add any custom fields into menus and it will appear for each menu item (ideal to add icons or custom text for each menu)
-* I18n(..) for javascript
-  You don't need to print your translations in html, put your translations in:
-  Sample:
-  ``en:
-    admin:
-      js:
-        button
-          my_text: "asasa"
-
-  I18n("button.my_text")``
-* hooks for email
-* shortcodes support for content editor
-* hook "user_update_more_actions" to add more action in user profile
-* added slug render support for categories, post_types, post_tags. Check doc.
-* fixed the default view "post.html.erb" into "single.html.erb". Check doc.
-* added the_field!(..) and get_field!(..) method in custom fields to manage empty values. Check doc.
-* added a control for logged users the_edit_link
-* added the_author method for posts
-* added the_categories method for sites
-* added cama_edit_link(...) to create common edit links anywhere, this verify if current visitor was logged in
-* added default shortcodes: load_libreries (load custom libraries), asset (render an url or image tag with the url), post_url (render an url for a post by id or slug)
-* fixed shortcode to support shortcodes with almost the same name. sample: [asset] [asset_path]
-* added method cama_strip_shortcodes(..) to strip all shortcodes
-* added get_fields(..) to get multiple values of a custom field
-* added filters for categories (.no_empty, .empty)
-* Added method for post: set_summary(..)
-* Added method for post: set_thumb(..)
-* Added method for post: increment_visits!
-* Added method for post: total_visits
-* Added method for post: total_comments
-* Added extra support values for method add_post(..) in post_type object
-* Added shortcode "post_url"
-  Permit to generate the url of a post (add path='' to generate the path and not the full url,
-    add id='123' to use the POST ID,
-    add key='my_slug' to use the POST SLUG,
-    add link='true' to generate the full link,
-    add title='my title' text of the link (default post title),
-    add target='_blank' to open the link in a new window this is valid only if link is present),
-  sample: [post_url id='122' link=true target='_blank']
-* Added shortcode "asset"
-  Permit to generate an asset url (
-    add file='' asset file path,
-    add as_path='true' to generate only the path and not the full url,
-    add class='my_class' to setup image class,
-    add style='height: 100px; width: 200px;...' to setup image style,
-    add image='true' to generate the image tag with this url),
-  sample: <img src=\"[asset as_path='true' file='themes/my_theme/assets/img/signature.png']\" /> or [asset image='true' file='themes/my_theme/assets/img/signature.png' style='height: 50px;']
-* Added shortcode "custom_field"
-  Permit you to include your custom fields in anywhere.
-  key: slug or key of the custom_field
-  attrs: custom html attributes
-  render: (true) enable to render the custom field as html. (Sample text_field: <span>my_field_value</span>)
-  post_slug: (Optional, default current post) slug or key of a Post.
-  Sample1: [custom_field key='subtitle']
-  Sample2: [custom_field key='subtitle' post_slug='contact' render=true attrs='style=\"width: 50px;\"'] // return the custom field of page with slug = contact
-
-### 0.2.1
-* fixed sprockets problem: https://github.com/owen2345/camaleon-cms/issues/53
-
-### 0.2.0
-* datetimepicker
-* Plugin files separated in two files, please update with: rails g camaleon_cms:install //and replace plugin_routes.rb
-* Added the edit url for post/posttypes/categories
-* Added plugin upgrade support
-* Added confirm for disable/enable a plugin
-
-### 0.1.10
-* Fix rufus initializer
-* Changed plugins documentation link
-* Fixed current locale for editors
-* Rails 4.1 support added
-
-### 0.1.6
-* Added Italian language support
+http://camaleon.tuzitio.com/version-history.html

data/app/apps/plugins/contact_form/contact_form_helper.rb

@@ -74,7 +74,7 @@ module Plugins::ContactForm::ContactFormHelper
   end
 
   def contact_form_admin_before_load
-    admin_menu_append_menu_item("settings", {icon: "envelope-o", title: t('plugin.contact_form.contact_form'), url:  admin_plugins_contact_form_admin_forms_path})
+    admin_menu_append_menu_item("settings", {icon: "envelope-o", title: t('plugin.contact_form.contact_form'), url:  admin_plugins_contact_form_admin_forms_path, datas: "data-intro='This plugin permit you to create you contact forms with desired fields and paste your short_code in any content.' data-position='right'"})
   end
 
   def contact_form_app_before_load

data/app/assets/javascripts/admin/actions.js

@@ -2,8 +2,25 @@ jQuery(function($){
     // initialize all validations for forms
     init_form_validations();
     setTimeout(page_actions, 1000);
+    setTimeout(init_intro, 500);
 });
 
+// show admin intro presentation
+function init_intro(){
+    if($("body").attr("data-intro")) return;
+    var finish = function(){
+        $.get(root_url+"/admin/ajax", {mode: "save_intro"});
+    }
+    introJs().setOptions({exitOnEsc: false,
+        exitOnOverlayClick: false,
+        showStepNumbers: false,
+        showBullets: false,
+        disableInteraction: true
+    }).oncomplete(finish).onexit(finish).onbeforechange(function(ele) {
+        if($(ele).hasClass("treeview") && !$(ele).hasClass("active")) $(ele).children("a").click();
+    }).start();
+}
+
 // basic and common actions
 var page_actions = function(){
     // button actions

data/app/assets/javascripts/admin/admin-manifest.js

@@ -40,3 +40,5 @@
 
 //= require ./lte/app
 
+//= require ./introjs/intro.min
+

data/app/assets/javascripts/admin/introjs/intro.min.js

@@ -0,0 +1,1316 @@
+/**
+ * Intro.js v1.1.1
+ * https://github.com/usablica/intro.js
+ * MIT licensed
+ *
+ * Copyright (C) 2013 usabli.ca - A weekend project by Afshin Mehrabani (@afshinmeh)
+ */
+
+(function (root, factory) {
+    if (typeof exports === 'object') {
+        // CommonJS
+        factory(exports);
+    } else if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports'], factory);
+    } else {
+        // Browser globals
+        factory(root);
+    }
+} (this, function (exports) {
+    //Default config/variables
+    var VERSION = '1.1.1';
+
+    /**
+     * IntroJs main class
+     *
+     * @class IntroJs
+     */
+    function IntroJs(obj) {
+        this._targetElement = obj;
+
+        this._options = {
+            /* Next button label in tooltip box */
+            nextLabel: 'Next →',
+            /* Previous button label in tooltip box */
+            prevLabel: '← Back',
+            /* Skip button label in tooltip box */
+            skipLabel: 'Skip',
+            /* Done button label in tooltip box */
+            doneLabel: 'Done',
+            /* 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,
+            /* 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
+        };
+    }
+
+    /**
+     * Initiate a new introduction/guide from an element in the page
+     *
+     * @api private
+     * @method _introForElement
+     * @param {Object} targetElm
+     * @returns {Boolean} Success or not?
+     */
+    function _introForElement(targetElm) {
+        var introItems = [],
+            self = this;
+
+        if (this._options.steps) {
+            //use steps passed programmatically
+            for (var i = 0, stepsLength = this._options.steps.length; i < stepsLength; i++) {
+                var currentItem = _cloneObject(this._options.steps[i]);
+                //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';
+                }
+
+                if (currentItem.element != null) {
+                    introItems.push(currentItem);
+                }
+            }
+
+        } else {
+            //use steps from data-* annotations
+            var allIntroSteps = targetElm.querySelectorAll('*[data-intro]');
+            //if there's no element to intro
+            if (allIntroSteps.length < 1) {
+                return false;
+            }
+
+            //first add intro items with data-step
+            for (var i = 0, elmsLength = allIntroSteps.length; i < elmsLength; i++) {
+                var currentElement = allIntroSteps[i];
+                var step = parseInt(currentElement.getAttribute('data-step'), 10);
+
+                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
+                    };
+                }
+            }
+
+            //next add intro items without data-step
+            //todo: we need a cleanup here, two loops are redundant
+            var nextStep = 0;
+            for (var i = 0, elmsLength = allIntroSteps.length; i < elmsLength; i++) {
+                var currentElement = allIntroSteps[i];
+
+                if (currentElement.getAttribute('data-step') == null) {
+
+                    while (true) {
+                        if (typeof introItems[nextStep] == 'undefined') {
+                            break;
+                        } else {
+                            nextStep++;
+                        }
+                    }
+
+                    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
+                    };
+                }
+            }
+        }
+
+        //removing undefined/null elements
+        var tempIntroItems = [];
+        for (var z = 0; z < introItems.length; z++) {
+            introItems[z] && tempIntroItems.push(introItems[z]);  // copy non-empty values to the end of the array
+        }
+
+        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
+        self._introItems = introItems;
+
+        //add overlay layer to the page
+        if(_addOverlayLayer.call(self, targetElm)) {
+            //then, start the show
+            _nextStep.call(self);
+
+            var skipButton     = targetElm.querySelector('.introjs-skipbutton'),
+                nextStepButton = targetElm.querySelector('.introjs-nextbutton');
+
+            self._onKeyDown = function(e) {
+                if (e.keyCode === 27 && self._options.exitOnEsc == true) {
+                    //escape key pressed, exit the intro
+                    //check if exit callback is defined
+                    if (self._introExitCallback != undefined) {
+                        self._introExitCallback.call(self);
+                    }
+                    _exitIntro.call(self, targetElm);
+                } else if(e.keyCode === 37) {
+                    //left arrow
+                    _previousStep.call(self);
+                } else if (e.keyCode === 39) {
+                    //right arrow
+                    _nextStep.call(self);
+                } else if (e.keyCode === 13) {
+                    //srcElement === ie
+                    var target = e.target || e.srcElement;
+                    if (target && target.className.indexOf('introjs-prevbutton') > 0) {
+                        //user hit enter while focusing on previous button
+                        _previousStep.call(self);
+                    } else if (target && target.className.indexOf('introjs-skipbutton') > 0) {
+                        //user hit enter while focusing on skip button
+                        if (self._introItems.length - 1 == self._currentStep && typeof (self._introCompleteCallback) === 'function') {
+                            self._introCompleteCallback.call(self);
+                        }
+                        //check if any callback is defined
+                        if (self._introExitCallback != undefined) {
+                            self._introExitCallback.call(self);
+                        }
+                        _exitIntro.call(self, targetElm);
+                    } else {
+                        //default behavior for responding to enter
+                        _nextStep.call(self);
+                    }
+
+                    //prevent default behaviour on hitting Enter, to prevent steps being skipped in some browsers
+                    if(e.preventDefault) {
+                        e.preventDefault();
+                    } else {
+                        e.returnValue = false;
+                    }
+                }
+            };
+
+            self._onResize = function(e) {
+                _setHelperLayerPosition.call(self, document.querySelector('.introjs-helperLayer'));
+                _setHelperLayerPosition.call(self, document.querySelector('.introjs-tooltipReferenceLayer'));
+            };
+
+            if (window.addEventListener) {
+                if (this._options.keyboardNavigation) {
+                    window.addEventListener('keydown', self._onKeyDown, true);
+                }
+                //for window resize
+                window.addEventListener('resize', self._onResize, true);
+            } else if (document.attachEvent) { //IE
+                if (this._options.keyboardNavigation) {
+                    document.attachEvent('onkeydown', self._onKeyDown);
+                }
+                //for window resize
+                document.attachEvent('onresize', self._onResize);
+            }
+        }
+        return 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 (jQuery) != 'undefined' && object[key] instanceof 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 next step on intro
+     *
+     * @api private
+     * @method _nextStep
+     */
+    function _nextStep() {
+        this._direction = 'forward';
+
+        if (typeof (this._currentStep) === 'undefined') {
+            this._currentStep = 0;
+        } else {
+            ++this._currentStep;
+        }
+
+        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;
+        }
+
+        var nextStep = this._introItems[this._currentStep];
+        if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
+            this._introBeforeChangeCallback.call(this, nextStep.element);
+        }
+
+        //_showElement.call(this, nextStep);
+        var w = $(nextStep.element).attr("data-wait");
+        var thiss = this;
+        var _f = function(){ _showElement.call(thiss, nextStep); };
+        if(w) setTimeout(_f, w); else _f();
+    }
+
+    /**
+     * Go to previous step on intro
+     *
+     * @api private
+     * @method _nextStep
+     */
+    function _previousStep() {
+        this._direction = 'backward';
+
+        if (this._currentStep === 0) {
+            return false;
+        }
+
+        var nextStep = this._introItems[--this._currentStep];
+        if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
+            this._introBeforeChangeCallback.call(this, nextStep.element);
+        }
+
+        //_showElement.call(this, nextStep);
+        var w = $(nextStep.element).attr("data-wait");
+        var thiss = this;
+        var _f = function(){ _showElement.call(thiss, nextStep); };
+        if(w) setTimeout(_f, w); else _f();
+    }
+
+    /**
+     * Exit from intro
+     *
+     * @api private
+     * @method _exitIntro
+     * @param {Object} targetElement
+     */
+    function _exitIntro(targetElement) {
+        //remove overlay layer from the page
+        var overlayLayer = targetElement.querySelector('.introjs-overlay');
+
+        //return if intro already completed or skipped
+        if (overlayLayer == null) {
+            return;
+        }
+
+        //for fade-out animation
+        overlayLayer.style.opacity = 0;
+        setTimeout(function () {
+            if (overlayLayer.parentNode) {
+                overlayLayer.parentNode.removeChild(overlayLayer);
+            }
+        }, 500);
+
+        //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);
+        }
+
+        //remove `introjs-showElement` class from the element
+        var showElement = document.querySelector('.introjs-showElement');
+        if (showElement) {
+            showElement.className = showElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, ''); // This is a manual trim.
+        }
+
+        //remove `introjs-fixParent` class from the elements
+        var fixParents = document.querySelectorAll('.introjs-fixParent');
+        if (fixParents && fixParents.length > 0) {
+            for (var i = fixParents.length - 1; i >= 0; i--) {
+                fixParents[i].className = fixParents[i].className.replace(/introjs-fixParent/g, '').replace(/^\s+|\s+$/g, '');
+            }
+        }
+
+        //clean listeners
+        if (window.removeEventListener) {
+            window.removeEventListener('keydown', this._onKeyDown, true);
+        } else if (document.detachEvent) { //IE
+            document.detachEvent('onkeydown', this._onKeyDown);
+        }
+
+        //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
+     */
+    function _placeTooltip(targetElement, tooltipLayer, arrowLayer, helperNumberLayer) {
+        var tooltipCssClass = '',
+            currentStepObj,
+            tooltipOffset,
+            targetOffset,
+            windowSize,
+            currentTooltipPosition;
+
+        //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, '');
+
+        currentTooltipPosition = this._introItems[this._currentStep].position;
+        if ((currentTooltipPosition == "auto" || this._options.tooltipPosition == "auto")) {
+            if (currentTooltipPosition != "floating") { // Floating is always valid, no point in calculating
+                currentTooltipPosition = _determineAutoPosition.call(this, targetElement, tooltipLayer, currentTooltipPosition);
+            }
+        }
+        targetOffset  = _getOffset(targetElement);
+        tooltipOffset = _getOffset(tooltipLayer);
+        windowSize    = _getWinSize();
+        switch (currentTooltipPosition) {
+            case 'top':
+                arrowLayer.className = 'introjs-arrow bottom';
+
+                var tooltipLayerStyleLeft = 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 (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';
+
+                var 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';
+
+                var tooltipLayerStyleLeftRight = targetOffset.width / 2 - tooltipOffset.width / 2;
+                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';
+
+                var tooltipLayerStyleLeft = 0;
+                _checkRight(targetOffset, tooltipLayerStyleLeft, tooltipOffset, windowSize, tooltipLayer);
+                tooltipLayer.style.top    = (targetOffset.height +  20) + 'px';
+                break;
+        }
+    }
+
+    /**
+     * 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 {Object} desiredTooltipPosition
+     *
+     */
+    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 targetOffset = _getOffset(targetElement);
+
+        // 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";
+
+        // Check if the width of the tooltip + the starting point would spill off the right side of the screen
+        // If no, neither bottom or top are valid
+        if (targetOffset.left + tooltipWidth > windowSize.width || ((targetOffset.left + (targetOffset.width / 2)) - tooltipWidth) < 0) {
+            _removeEntry(possiblePositions, "bottom");
+            _removeEntry(possiblePositions, "top");
+        } else {
+            // Check for space below
+            if ((targetOffset.height + targetOffset.top + tooltipHeight) > windowSize.height) {
+                _removeEntry(possiblePositions, "bottom");
+            }
+
+            // Check for space above
+            if (targetOffset.top - tooltipHeight < 0) {
+                _removeEntry(possiblePositions, "top");
+            }
+        }
+
+        // Check for space to the right
+        if (targetOffset.width + targetOffset.left + tooltipWidth > windowSize.width) {
+            _removeEntry(possiblePositions, "right");
+        }
+
+        // Check for space to the left
+        if (targetOffset.left - tooltipWidth < 0) {
+            _removeEntry(possiblePositions, "left");
+        }
+
+        // At this point, our array only has positions that are valid. Pick the first one, as it remains in order
+        if (possiblePositions.length > 0) {
+            calculatedPosition = possiblePositions[0];
+        }
+
+        // If the requested position is in the list, replace our calculated choice with that
+        if (desiredTooltipPosition && desiredTooltipPosition != "auto") {
+            if (possiblePositions.indexOf(desiredTooltipPosition) > -1) {
+                calculatedPosition = desiredTooltipPosition;
+            }
+        }
+
+        return calculatedPosition;
+    }
+
+    /**
+     * 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 = 10;
+
+            if (currentElement.position == 'floating') {
+                widthHeightPadding = 0;
+            }
+
+            //set new position to helper layer
+            helperLayer.setAttribute('style', 'width: ' + (elementPosition.width  + widthHeightPadding)  + 'px; ' +
+                'height:' + (elementPosition.height + widthHeightPadding)  + 'px; ' +
+                'top:'    + (elementPosition.top    - 5)   + 'px;' +
+                'left: '  + (elementPosition.left   - 5)   + '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);
+    }
+
+    /**
+     * 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',
+            elementPosition = _getOffset(targetElement.element);
+
+        //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;
+                }
+            }
+
+            //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');
+            if (fixParents && fixParents.length > 0) {
+                for (var i = fixParents.length - 1; i >= 0; i--) {
+                    fixParents[i].className = fixParents[i].className.replace(/introjs-fixParent/g, '').replace(/^\s+|\s+$/g, '');
+                };
+            }
+
+            //remove old classes
+            var oldShowElement = document.querySelector('.introjs-showElement');
+            oldShowElement.className = oldShowElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, '');
+
+            //we should wait until the CSS3 transition is competed (it's 0.3 sec) to prevent incorrect `height` and `width` calculation
+            if (self._lastShowElementTimer) {
+                clearTimeout(self._lastShowElementTimer);
+            }
+            self._lastShowElementTimer = 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
+                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').setAttribute('style', 'width:' + _getProgress.call(self) + '%;');
+
+                //show the tooltip
+                oldtooltipContainer.style.opacity = 1;
+                if (oldHelperNumberLayer) oldHelperNumberLayer.style.opacity = 1;
+
+                //reset button focus
+                if (nextTooltipButton.tabIndex === -1) {
+                    //tabindex of -1 means we are at the end of the tour - focus on skip / done
+                    skipTooltipButton.focus();
+                } else {
+                    //still in the tour, focus on next
+                    nextTooltipButton.focus();
+                }
+            }, 350);
+
+        } 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';
+
+            //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');
+
+            for (var i = 0, stepsLength = this._introItems.length; i < stepsLength; i++) {
+                var innerLi    = document.createElement('li');
+                var anchorLink = document.createElement('a');
+
+                anchorLink.onclick = function() {
+                    self.goToStep(this.getAttribute('data-stepnumber'));
+                };
+
+                if (i === (targetElement.step-1)) anchorLink.className = 'active';
+
+                anchorLink.href = 'javascript:void(0);';
+                anchorLink.innerHTML = "&nbsp;";
+                anchorLink.setAttribute('data-stepnumber', this._introItems[i].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('style', '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
+            if (this._options.showStepNumbers == true) {
+                var helperNumberLayer = document.createElement('span');
+                helperNumberLayer.className = 'introjs-helperNumberLayer';
+                helperNumberLayer.innerHTML = targetElement.step;
+                referenceLayer.appendChild(helperNumberLayer);
+            }
+
+            tooltipLayer.appendChild(arrowLayer);
+            referenceLayer.appendChild(tooltipLayer);
+
+            //next button
+            var nextTooltipButton = document.createElement('a');
+
+            nextTooltipButton.onclick = function() {
+                if (self._introItems.length - 1 != self._currentStep) {
+                    _nextStep.call(self);
+                }
+            };
+
+            nextTooltipButton.href = 'javascript:void(0);';
+            nextTooltipButton.innerHTML = this._options.nextLabel;
+
+            //previous button
+            var prevTooltipButton = document.createElement('a');
+
+            prevTooltipButton.onclick = function() {
+                if (self._currentStep != 0) {
+                    _previousStep.call(self);
+                }
+            };
+
+            prevTooltipButton.href = 'javascript:void(0);';
+            prevTooltipButton.innerHTML = this._options.prevLabel;
+
+            //skip button
+            var skipTooltipButton = document.createElement('a');
+            skipTooltipButton.className = 'introjs-button introjs-skipbutton btn';
+            skipTooltipButton.href = 'javascript:void(0);';
+            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);
+                }
+
+                _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);
+        }
+
+        //disable interaction
+        if (this._options.disableInteraction === true) {
+            _disableInteraction.call(self);
+        }
+
+        prevTooltipButton.removeAttribute('tabIndex');
+        nextTooltipButton.removeAttribute('tabIndex');
+
+        if (this._currentStep == 0 && this._introItems.length > 1) {
+            prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled disabled btn btn-success';
+            prevTooltipButton.tabIndex = '-1';
+            nextTooltipButton.className = 'introjs-button introjs-nextbutton btn btn-primary';
+            skipTooltipButton.innerHTML = this._options.skipLabel;
+        } else if (this._introItems.length - 1 == this._currentStep || this._introItems.length == 1) {
+            skipTooltipButton.innerHTML = this._options.doneLabel;
+            prevTooltipButton.className = 'introjs-button introjs-prevbutton btn btn-success';
+            nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-disabled disabled btn btn-primary';
+            nextTooltipButton.tabIndex = '-1';
+        } else {
+            prevTooltipButton.className = 'introjs-button introjs-prevbutton btn btn-success';
+            nextTooltipButton.className = 'introjs-button introjs-nextbutton btn btn-primary';
+            skipTooltipButton.innerHTML = this._options.skipLabel;
+        }
+
+        //Set focus on "next" button, so that hitting Enter always moves you onto the next step
+        nextTooltipButton.focus();
+
+        //add target element position style
+        targetElement.element.className += ' introjs-showElement';
+
+        var currentElementPosition = _getPropValue(targetElement.element, 'position');
+        if (currentElementPosition !== 'absolute' &&
+            currentElementPosition !== 'relative') {
+            //change to new intro item
+            targetElement.element.className += ' introjs-relativePosition';
+        }
+
+        var parentElm = targetElement.element.parentNode;
+        while (parentElm != null) {
+            if (parentElm.tagName.toLowerCase() === 'body') break;
+
+            //fix The Stacking Contenxt 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)) {
+                parentElm.className += ' introjs-fixParent';
+            }
+
+            parentElm = parentElm.parentNode;
+        }
+
+        if (!_elementInViewport(targetElement.element) && this._options.scrollToElement === true) {
+            var rect = targetElement.element.getBoundingClientRect(),
+                winHeight = _getWinSize().height,
+                top = rect.bottom - (rect.bottom - rect.top),
+                bottom = rect.bottom - winHeight;
+
+            //Scroll up
+            if (top < 0 || targetElement.element.clientHeight > winHeight) {
+                window.scrollBy(0, top - 30); // 30px padding from edge to look nice
+
+                //Scroll down
+            } else {
+                window.scrollBy(0, bottom + 100); // 70px + 30px padding from edge to look nice
+            }
+        }
+
+        if (typeof (this._introAfterChangeCallback) !== 'undefined') {
+            this._introAfterChangeCallback.call(this, targetElement.element);
+        }
+    }
+
+    /**
+     * 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;
+        }
+    }
+
+    /**
+     * 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 };
+        }
+    }
+
+    /**
+     * Add overlay layer to the page
+     * 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.toLowerCase() === 'body') {
+            styleText += 'top: 0;bottom: 0; left: 0;right: 0;position: fixed;';
+            overlayLayer.setAttribute('style', 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.setAttribute('style', styleText);
+            }
+        }
+
+        targetElm.appendChild(overlayLayer);
+
+        overlayLayer.onclick = function() {
+            if (self._options.exitOnOverlayClick == true) {
+
+                //check if any callback is defined
+                if (self._introExitCallback != undefined) {
+                    self._introExitCallback.call(self);
+                }
+                _exitIntro.call(self, targetElm);
+            }
+        };
+
+        setTimeout(function() {
+            styleText += 'opacity: ' + self._options.overlayOpacity.toString() + ';';
+            overlayLayer.setAttribute('style', styleText);
+        }, 10);
+
+        return 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 elementPosition = {};
+
+        //set width
+        elementPosition.width = element.offsetWidth;
+
+        //set height
+        elementPosition.height = element.offsetHeight;
+
+        //calculate element top and left
+        var _x = 0;
+        var _y = 0;
+        while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
+            _x += element.offsetLeft;
+            _y += element.offsetTop;
+            element = element.offsetParent;
+        }
+        //set top
+        elementPosition.top = _y;
+        //set left
+        elementPosition.left = _x;
+
+        return elementPosition;
+    }
+
+    /**
+     * 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 = {};
+        for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
+        for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
+        return obj3;
+    }
+
+    var introJs = function (targetElm) {
+        if (typeof (targetElm) === 'object') {
+            //Ok, create a new instance
+            return new IntroJs(targetElm);
+
+        } else if (typeof (targetElm) === 'string') {
+            //select the target element with query selector
+            var targetElement = document.querySelector(targetElm);
+
+            if (targetElement) {
+                return new IntroJs(targetElement);
+            } else {
+                throw new Error('There is no element with given selector.');
+            }
+        } else {
+            return new IntroJs(document.body);
+        }
+    };
+
+    /**
+     * Current IntroJs version
+     *
+     * @property version
+     * @type String
+     */
+    introJs.version = VERSION;
+
+    //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 () {
+            _introForElement.call(this, this._targetElement);
+            return this;
+        },
+        goToStep: function(step) {
+            _goToStep.call(this, step);
+            return this;
+        },
+        nextStep: function() {
+            _nextStep.call(this);
+            return this;
+        },
+        previousStep: function() {
+            _previousStep.call(this);
+            return this;
+        },
+        exit: function() {
+            _exitIntro.call(this, this._targetElement);
+            return this;
+        },
+        refresh: function() {
+            _setHelperLayerPosition.call(this, document.querySelector('.introjs-helperLayer'));
+            _setHelperLayerPosition.call(this, document.querySelector('.introjs-tooltipReferenceLayer'));
+            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;
+        },
+        onexit: function(providedCallback) {
+            if (typeof (providedCallback) === 'function') {
+                this._introExitCallback = providedCallback;
+            } else {
+                throw new Error('Provided callback for onexit was not a function.');
+            }
+            return this;
+        }
+    };
+
+    exports.introJs = introJs;
+    return introJs;
+}));