Add ability to set DOM object in programmatic version + Fix examples home page

Author: afshinm

example/index.html

@@ -24,6 +24,7 @@ <h3 class="muted">Examples</h3>
         <li><a href="hello-world/index.html" title='Basic Usage'>Basic Usage</a></li>
         <li><a href="programmatic/index.html" title='Programmatic defining using JSON'>Programmatic defining using JSON</a></li>
         <li><a href="multi-page/index.html" title='Multi-Page introduction'>Multi-Page introduction</a></li>
+        <li><a href="RTL/index.html" title='Multi-Page introduction'>RTL version</a></li>
       </ul>
     </div>
   </body>

example/programmatic/index.html

@@ -75,11 +75,11 @@ <h4>Section Six</h4>
           intro.setOptions({
             steps: [
               {
-                element: '#step1',
+                element: document.querySelector('#step1'),
                 intro: "This is a tooltip."
               },
               {
-                element: '#step2',
+                element: document.querySelectorAll('#step2')[0],
                 intro: "Ok, wasn't that fun?",
                 position: 'right'
               },

intro.js

@@ -1,5 +1,5 @@
 /**
- * Intro.js v0.4.0
+ * Intro.js v0.5.0
  * https://github.com/usablica/intro.js
  * MIT licensed
  *
@@ -19,7 +19,7 @@
   }
 } (this, function (exports) {
   //Default config/variables
-  var VERSION = '0.4.0';
+  var VERSION = '0.5.0';
 
   /**
    * IntroJs main class
@@ -61,8 +61,11 @@
         var currentItem = this._options.steps[i];
         //set the step
         currentItem.step = i + 1;
-        //grab the element with given selector from the page
-        currentItem.element = document.querySelector(currentItem.element);
+        //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);
+        }
         introItems.push(currentItem);
       }