From a9339a07f428b848be508db4d6fcdb262f753485 Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 14:37:48 -0600
Subject: [PATCH 01/21] updates

---
 guide.js | 192 ++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 141 insertions(+), 51 deletions(-)

diff --git a/guide.js b/guide.js
index 06f2fee..0830d6e 100644
--- a/guide.js
+++ b/guide.js
@@ -1,9 +1,59 @@
 (function ( $ ) {
+
+    overlay = function() {
+     this.construct = function(element) {
+        this.guide = null;
+        this.classes = [];
+        this.queued = [];
+        this.nonqueued = [];
+        this.blurb = '';
+        this.count = 0;
+    };
+    this.init = function(element) {
+        this.construct();
+        var help = this;
+        this.guide = element.guide();
+        $.each(element.find('[data-blurb]'), function() {
+            if ($.inArray($(this).attr('class'), help.classes) === -1) {
+                help.classes.push($(this).attr('class'));
+                if ($(this).attr('data-order')) {
+                    var index = parseInt($(this).attr('data-order'));
+                    if (help.queued[index] != null) {
+                        help.queued.splice(index+1,0, $(this));
+                    }
+                    else {
+                        help.queued[index] = $(this);
+                    }
+                }
+                else {
+                    help.nonqueued.push($(this));
+                }
+            }
+        });
+        $.each(help.queued, function(i, e) {
+            if (e) {
+                help.blurb = $(this).attr('data-blurb');
+                $(this).addClass('blurbnum-'+help.count);
+                help.guide.addStep('.blurbnum-'+help.count, help.blurb, { direction: $(this).attr('data-direction') || 'bottom', margin: $(this).attr('data-margin') || 10 });
+                help.count++;
+            }
+        });
+        $.each(help.nonqueued, function() {
+            help.blurb = $(this).attr('data-blurb');
+            $(this).addClass('blurbnum-'+help.count);
+            help.guide.addStep('.blurbnum-'+help.count, help.blurb, { direction: $(this).attr('data-direction') || 'bottom', margin: $(this).attr('data-margin') || 10 });
+            help.count++;
+        });
+    };
+
+    return this;
+};
  
     var guide = function() {
         var container,
             defaults = {
-                margin: 10
+                margin: 10,
+                direction: 'bottom'
             },
             topMask = $("<div/>").addClass("guideMask"),
             bottomMask = $("<div/>").addClass("guideMask"),
@@ -16,7 +66,20 @@
  
             prevButton = $("<button/>").addClass("btn").html("Prev"),
             nextButton = $("<button/>").addClass("btn").html("Next"),
-            arrow = $("<div/>").addClass("guideBubble-arrow").addClass("top"),
+            arrow = $("<div/>"),
+
+            isFixed = function(element) {
+                var $element = $(element);
+                var $checkElements = $element.add($element.parents());
+                var isFixed = false;
+                $checkElements.each(function(){
+                    if ($(this).css("position") === "fixed") {
+                        isFixed = true;
+                        return false;
+                    }
+                });
+                return isFixed;
+            },
 
             gotoStep = function(i) {
                 positionMask(i);
@@ -27,7 +90,7 @@
                 if (position>=steps.length) {
                     clearGuide();
                 } else {
-                    gotoStep(position);    
+                    gotoStep(position);
                 }
             },
             prevStep = function() {
@@ -52,58 +115,62 @@
                     top = attrs.top,
                     left = attrs.left,
                     width = attrs.width,
-                    height = attrs.height;
+                    height = attrs.height,
+                    pos = 'absolute',
+                    offset = 0;
+
+                margin = parseInt(margin);
+
+                if(isFixed(element)) {
+                    pos = "fixed";
+                    offset = $(document).scrollTop();
+                }
 
                 topMask.css({
-                    height: (top - margin) + "px"
+                    height: (top - margin - offset) + "px",
+                    position: pos
                 });
                  
                 bottomMask.css({
-                    top: (height + top + margin) + "px",
-                    height: ($(document).height() - height - top - margin) + "px"
+                    top: (height + top + margin - offset) + "px",
+                    height: ($(document).height() - height - top - margin) + "px",
+                    position: pos
                 });
                  
                 leftMask.css({
                     width: (left - margin) + "px",
-                    top: (top - margin) + "px",
-                    height: (height + margin*2) + "px"
+                    top: (top - margin - offset) + "px",
+                    height: (height + margin*2) + "px",
+                    position: pos
                 });
                  
                 rightMask.css({
                     left: (left + width + margin) + "px",
-                    top: (top - margin) + "px",
+                    top: (top - margin - offset) + "px",
                     height: (height + margin*2) + "px",
                     width: ($(document).width() - width - left - margin) + "px",
+                    position: pos
                 });
             },
-            positionBubble = function(i) {
+            positionBubble = function(i) {                
                 var element = steps[i].element,
                     margin = (steps[i].options && steps[i].options.margin) ? steps[i].options.margin : options.margin,
                     top = element.offset().top,
                     left = element.offset().left,
                     width = element.outerWidth(),
-                    height = element.outerHeight();
+                    height = element.outerHeight(),
+                    direction = steps[i].options.direction,
+                    pos = 'absolute',
+                    offset = 0,
+                    toffset = 0,
+                    loffset = 0;
 
-                var css = {
-                        top: (height + top + margin + 10) + "px"
-                    };
- 
-                if ((left + bubble.outerWidth()) > $(document).width()) {
-                    $(".guideBubble-arrow", bubble).css({"right": "10px"});
-                    css.left = left + element.outerWidth() - bubble.outerWidth() + margin;
-                } else {
-                    $(".guideBubble-arrow", bubble).css({"right": "auto"});
-                     
-                    css.left = left - margin;
+
+                if (isFixed(element)) {
+                    pos = "fixed";
+                    offset = $(document).scrollTop();
                 }
- 
-                bubble.animate(css, 500, function() {
-                    scrollIntoView();
-                    if (steps[i].options.callback) {
-                        steps[i].options.callback();
-                    }
-                });
- 
+
                 $(".step", bubble).html(i + 1);
                 $(".intro", bubble).html(steps[i].intro);
                 prevButton.removeClass("disabled");
@@ -117,8 +184,40 @@
                     nextButton.html("Close").addClass("btn-danger");
                 } else {
                     nextButton.html("Next").removeClass("btn-danger");
-                }                
-                
+                } 
+
+                switch(direction) {
+                    case 'right':
+                        toffset = top - margin;
+                        loffset = width + left + margin*2;
+                    break;
+                    case 'left':
+                        toffset = top - margin;
+                        loffset = left - margin*2 - bubble.outerWidth();
+                    break;
+                    case 'top':
+                        toffset = top - bubble.outerHeight(false) - margin*2;
+                        loffset = left - margin;
+                    break;
+                    case 'bottom':
+                        toffset = top + height + margin*2;
+                        loffset = left - margin;
+                    break;
+                }
+
+                arrow.attr('class', 'guideBubble-arrow ' + direction);
+
+                var css = {
+                        top: toffset - offset,
+                        left: loffset
+                    };
+
+                bubble.css({'position': pos}).animate(css, 500, function() {
+                    scrollIntoView();
+                    if (steps[i].options.callback) {
+                        steps[i].options.callback();
+                    }
+                });               
  
                 scrollIntoView();
             },
@@ -133,22 +232,12 @@
             },
             clearGuide = function() {
                 bubble.detach();
-                topMask.add(bottomMask).add(leftMask).add(rightMask).animate({
-                    opacity: 0
-                }, 500, function() {
-                    topMask.add(bottomMask).add(leftMask).add(rightMask).detach();    
-                })
-                 
+                topMask.add(bottomMask).add(leftMask).add(rightMask).stop().fadeOut(500, function() {
+                    topMask.add(bottomMask).add(leftMask).add(rightMask).detach();
+                });
             },
             getMaximumZIndex = function() {
-                var max = 0;   
-                $("*").each(function() {
-                    var current = parseInt($(this).css("zIndex"), 10);
-                    if(current > max) {
-                        max = current;
-                    }
-                });
-                return max;
+                return 1000000;
             }
        
  
@@ -180,7 +269,7 @@
                 });
                 
                 return {
-                    addStep: function(selector, introduction, options) {
+                    addStep: function(selector, introduction, options, direction) {
                         holdingSteps.push({
                             selector: selector,
                             intro: introduction,
@@ -190,9 +279,7 @@
                     start: function() {
                         container.append(topMask, bottomMask, leftMask, rightMask);
                         container.append(bubble);
-                        topMask.add(bottomMask).add(leftMask).add(rightMask).animate({
-                            opacity: 0.5
-                        }, 500);
+                        topMask.add(bottomMask).add(leftMask).add(rightMask).stop().show();
                         position = -1;
                         steps = [];
                         $.each(holdingSteps, function(i, step) {
@@ -209,6 +296,9 @@
                             }
                         });
                         nextStep();
+                    },
+                    end: function() {
+                        clearGuide();
                     }
                 }
             },

From 76bc10ec6239c59d55e56445bb925ef0e16ea7e6 Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 14:51:12 -0600
Subject: [PATCH 02/21] updating readme

---
 README.md | 55 ++++++++++++++++++++-----------------------------------
 1 file changed, 20 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index 6dad1ac..c0ca5b3 100644
--- a/README.md
+++ b/README.md
@@ -19,52 +19,37 @@ Download [guide.js][0] and [guide.css][1] and add the following assets:
 
 ## Using
 
-In you document ready, first attach the guide to the parent element you'd like to mask:
+In your document ready, first create an instance of an overlay
 
-```HTML
-var guide = $("body").guide();
+```javascript
+var helpOverlay = overlay();
 ```
 
-Then attach the steps to the elements to highlight, using jquery selectors:
+Then attach an event handler (or any method you desire) to start the overlay
 
-```HTML
-guide.addStep("#hello", "This step says hello");
-guide.addStep("#world", "This step says world");
+```javascript
+$('#my-button').on('click', function() {
+		helpOverlay.guide.start();
+});
 ```
 
-Then initiate the guide, manually or via a trigger event
+In order to add new steps to your overlay, add the `data-blurb` attribute to any element on your page
 
 ```HTML
-guide.start();
+	data-blurb='This is the text that will show up when this step is reached.'
 ```
 
-## Methods
-
-### .guide([options])
-
-Attach the guide to the selector
-
-**Parameters:**
- - options : Object (optional)
-   Control the gap between the highlighted element and the mask with `margin`
-
-### guide.addStep(selector, introduction, options)
+Your blurb nodes will, by default, order by their position in your HTML structure. Nodes closer to the initial `<body>` tag will show before nodes closer to your closing `</body>` tag. If you would like to override this ordering, use the following option
 
-Add a step to the guide
-
-**Parameters:**
- - selector : jQuery selector identifying the DOM element to highlight
- - introduction : The string to display
- - options : Object with optional settings for `margin` and `callback`
-
-### guide.start()
+```HTML
+		data-order='1'
+```
 
-Start the guide...
+By default, ordered elements will show before any un-ordered elements, despite what the actual order number is. The un-ordered elements will then appear in the order they appear in the HTML structure. If you accidentally give two nodes the same ordering, guide.js will order them in the order they appear in the HTML, while still maintaining their order among other ordered nodes.
 
-## Roadmap
-- Abstract CSS (currently based on Bootstrap)
-- Remove jQuery dependency
-- Add keypress support
+Guide.js also allows you to define which side of your element you'd like the bubble to appear on. Use the following option
 
- [0]: https://github.com/Dozyatom/guide.js/blob/master/guide.js
- [1]: https://github.com/Dozyatom/guide.js/blob/master/guide.css
\ No newline at end of file
+```HTML
+	data-direction='top'
+```
+Your options for direction are 'top', 'bottom', 'left', and 'right'
\ No newline at end of file

From 5c134f75bf1b457fab24e4a2c736428fe04e9b4e Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 14:51:58 -0600
Subject: [PATCH 03/21] i changed my mind about periods

---
 README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index c0ca5b3..b3d64ea 100644
--- a/README.md
+++ b/README.md
@@ -19,13 +19,13 @@ Download [guide.js][0] and [guide.css][1] and add the following assets:
 
 ## Using
 
-In your document ready, first create an instance of an overlay
+In your document ready, first create an instance of an overlay.
 
 ```javascript
 var helpOverlay = overlay();
 ```
 
-Then attach an event handler (or any method you desire) to start the overlay
+Then attach an event handler (or any method you desire) to start the overlay.
 
 ```javascript
 $('#my-button').on('click', function() {
@@ -33,13 +33,13 @@ $('#my-button').on('click', function() {
 });
 ```
 
-In order to add new steps to your overlay, add the `data-blurb` attribute to any element on your page
+In order to add new steps to your overlay, add the `data-blurb` attribute to any element on your page.
 
 ```HTML
 	data-blurb='This is the text that will show up when this step is reached.'
 ```
 
-Your blurb nodes will, by default, order by their position in your HTML structure. Nodes closer to the initial `<body>` tag will show before nodes closer to your closing `</body>` tag. If you would like to override this ordering, use the following option
+Your blurb nodes will, by default, order by their position in your HTML structure. Nodes closer to the initial `<body>` tag will show before nodes closer to your closing `</body>` tag. If you would like to override this ordering, use the following option.
 
 ```HTML
 		data-order='1'
@@ -47,9 +47,9 @@ Your blurb nodes will, by default, order by their position in your HTML structur
 
 By default, ordered elements will show before any un-ordered elements, despite what the actual order number is. The un-ordered elements will then appear in the order they appear in the HTML structure. If you accidentally give two nodes the same ordering, guide.js will order them in the order they appear in the HTML, while still maintaining their order among other ordered nodes.
 
-Guide.js also allows you to define which side of your element you'd like the bubble to appear on. Use the following option
+Guide.js also allows you to define which side of your element you'd like the bubble to appear on. Use the following option.
 
 ```HTML
 	data-direction='top'
 ```
-Your options for direction are 'top', 'bottom', 'left', and 'right'
\ No newline at end of file
+Your options for direction are 'top', 'bottom', 'left', and 'right'.
\ No newline at end of file

From e844aa6f7ea27b14bc265ee40d21aa6ca6fd3a46 Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 14:52:09 -0600
Subject: [PATCH 04/21] again, periods

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b3d64ea..f82a76c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # guide.js
 
-guide.js is a jQuery plugin that creates a clickable walkthrough of elements on your webpage
+guide.js is a jQuery plugin that creates a clickable walkthrough of elements on your webpage.
 
 ## Installing
 

From dac6d304eae7ba1cc8cc66d1f15e37780075b2c1 Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 14:52:55 -0600
Subject: [PATCH 05/21] lowercase guide.js

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f82a76c..e36ac8c 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ Your blurb nodes will, by default, order by their position in your HTML structur
 
 By default, ordered elements will show before any un-ordered elements, despite what the actual order number is. The un-ordered elements will then appear in the order they appear in the HTML structure. If you accidentally give two nodes the same ordering, guide.js will order them in the order they appear in the HTML, while still maintaining their order among other ordered nodes.
 
-Guide.js also allows you to define which side of your element you'd like the bubble to appear on. Use the following option.
+guide.js also allows you to define which side of your element you'd like the bubble to appear on. Use the following option.
 
 ```HTML
 	data-direction='top'

From 183a74322bf103fe36c802d101b4cdb684d17d57 Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 14:53:39 -0600
Subject: [PATCH 06/21] tabbing fix

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index e36ac8c..dbb366f 100644
--- a/README.md
+++ b/README.md
@@ -29,20 +29,20 @@ Then attach an event handler (or any method you desire) to start the overlay.
 
 ```javascript
 $('#my-button').on('click', function() {
-		helpOverlay.guide.start();
+	helpOverlay.guide.start();
 });
 ```
 
 In order to add new steps to your overlay, add the `data-blurb` attribute to any element on your page.
 
 ```HTML
-	data-blurb='This is the text that will show up when this step is reached.'
+data-blurb='This is the text that will show up when this step is reached.'
 ```
 
 Your blurb nodes will, by default, order by their position in your HTML structure. Nodes closer to the initial `<body>` tag will show before nodes closer to your closing `</body>` tag. If you would like to override this ordering, use the following option.
 
 ```HTML
-		data-order='1'
+data-order='1'
 ```
 
 By default, ordered elements will show before any un-ordered elements, despite what the actual order number is. The un-ordered elements will then appear in the order they appear in the HTML structure. If you accidentally give two nodes the same ordering, guide.js will order them in the order they appear in the HTML, while still maintaining their order among other ordered nodes.
@@ -50,6 +50,6 @@ By default, ordered elements will show before any un-ordered elements, despite w
 guide.js also allows you to define which side of your element you'd like the bubble to appear on. Use the following option.
 
 ```HTML
-	data-direction='top'
+data-direction='top'
 ```
 Your options for direction are 'top', 'bottom', 'left', and 'right'.
\ No newline at end of file

From 998bf669db7c739a321c82f3f1abe7c0f9449386 Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 14:55:58 -0600
Subject: [PATCH 07/21] Update README.md

---
 README.md | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index dbb366f..67a654f 100644
--- a/README.md
+++ b/README.md
@@ -33,23 +33,33 @@ $('#my-button').on('click', function() {
 });
 ```
 
+### Options
+
+##### Blurb
+
 In order to add new steps to your overlay, add the `data-blurb` attribute to any element on your page.
 
 ```HTML
 data-blurb='This is the text that will show up when this step is reached.'
 ```
 
-Your blurb nodes will, by default, order by their position in your HTML structure. Nodes closer to the initial `<body>` tag will show before nodes closer to your closing `</body>` tag. If you would like to override this ordering, use the following option.
+##### Order
+
+Your blurb nodes will, by default, order by their position in your HTML structure. Nodes closer to the initial `<body>` tag will show before nodes closer to your closing `</body>` tag. If you would like to override this ordering, use the `data-order` option.
 
 ```HTML
 data-order='1'
 ```
 
+You can order from 0 to any value you desire.
+
 By default, ordered elements will show before any un-ordered elements, despite what the actual order number is. The un-ordered elements will then appear in the order they appear in the HTML structure. If you accidentally give two nodes the same ordering, guide.js will order them in the order they appear in the HTML, while still maintaining their order among other ordered nodes.
 
-guide.js also allows you to define which side of your element you'd like the bubble to appear on. Use the following option.
+##### Direction
+
+guide.js also allows you to define which side of your element you'd like the bubble to appear on. Use the `data-direction` option.
 
 ```HTML
 data-direction='top'
 ```
-Your options for direction are 'top', 'bottom', 'left', and 'right'.
\ No newline at end of file
+Your options for direction are 'top', 'bottom', 'left', and 'right'.

From 89271a9989a0d536769dc0cb8366b5c7ad3faa35 Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 14:58:38 -0600
Subject: [PATCH 08/21] Update README.md

---
 README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README.md b/README.md
index 67a654f..a91a240 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,14 @@ $('#my-button').on('click', function() {
 });
 ```
 
+guide.js will stop if you click on the darkened background. However, if you would like to add another method to close the overlay, such as a timer, you can do the following:
+
+```javascript
+setTimeout(function() {
+	helpOverlay.guide.stop();
+}, 30000); // wait 30 seconds
+```
+
 ### Options
 
 ##### Blurb

From c92c26b396c6ff86f5ec470031ae5aeee1c642a6 Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 15:00:04 -0600
Subject: [PATCH 09/21] Update README.md

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index a91a240..7085c03 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,7 @@ setTimeout(function() {
 In order to add new steps to your overlay, add the `data-blurb` attribute to any element on your page.
 
 ```HTML
-data-blurb='This is the text that will show up when this step is reached.'
+<div class='my-element' data-blurb='This is the text that will show up when this step is reached.'>Hello, World!</div>
 ```
 
 ##### Order
@@ -56,7 +56,7 @@ data-blurb='This is the text that will show up when this step is reached.'
 Your blurb nodes will, by default, order by their position in your HTML structure. Nodes closer to the initial `<body>` tag will show before nodes closer to your closing `</body>` tag. If you would like to override this ordering, use the `data-order` option.
 
 ```HTML
-data-order='1'
+<div class='my-element' data-order='1'>Hello, World!</div>
 ```
 
 You can order from 0 to any value you desire.
@@ -68,6 +68,6 @@ By default, ordered elements will show before any un-ordered elements, despite w
 guide.js also allows you to define which side of your element you'd like the bubble to appear on. Use the `data-direction` option.
 
 ```HTML
-data-direction='top'
+<div class='my-element' data-direction='top'>Hello, World!</div>
 ```
 Your options for direction are 'top', 'bottom', 'left', and 'right'.

From f72cf88e8e17bc07880f02a3b2794b520b3edc39 Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 15:01:29 -0600
Subject: [PATCH 10/21] Update README.md

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 7085c03..8353f09 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,7 @@ setTimeout(function() {
 In order to add new steps to your overlay, add the `data-blurb` attribute to any element on your page.
 
 ```HTML
-<div class='my-element' data-blurb='This is the text that will show up when this step is reached.'>Hello, World!</div>
+<div data-blurb='This is the text that will show up when this step is reached.'>Hello, World!</div>
 ```
 
 ##### Order
@@ -56,7 +56,7 @@ In order to add new steps to your overlay, add the `data-blurb` attribute to any
 Your blurb nodes will, by default, order by their position in your HTML structure. Nodes closer to the initial `<body>` tag will show before nodes closer to your closing `</body>` tag. If you would like to override this ordering, use the `data-order` option.
 
 ```HTML
-<div class='my-element' data-order='1'>Hello, World!</div>
+<div data-blurb='Show this text.' data-order='1'>Hello, World!</div>
 ```
 
 You can order from 0 to any value you desire.
@@ -68,6 +68,6 @@ By default, ordered elements will show before any un-ordered elements, despite w
 guide.js also allows you to define which side of your element you'd like the bubble to appear on. Use the `data-direction` option.
 
 ```HTML
-<div class='my-element' data-direction='top'>Hello, World!</div>
+<div data-blurb='Show this text.' data-direction='top'>Hello, World!</div>
 ```
 Your options for direction are 'top', 'bottom', 'left', and 'right'.

From cc32a40dcfb82ff36b6ff3bf6cc97872cffb3e02 Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 15:05:49 -0600
Subject: [PATCH 11/21] Update README.md

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 8353f09..33925b1 100644
--- a/README.md
+++ b/README.md
@@ -71,3 +71,6 @@ guide.js also allows you to define which side of your element you'd like the bub
 <div data-blurb='Show this text.' data-direction='top'>Hello, World!</div>
 ```
 Your options for direction are 'top', 'bottom', 'left', and 'right'.
+
+ [0]: https://github.com/Dozyatom/guide.js/blob/master/guide.js
+ [1]: https://github.com/Dozyatom/guide.js/blob/master/guide.css

From d993df0ae72cd202f4419c939639b32d82d17632 Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 15:27:22 -0600
Subject: [PATCH 12/21] adding better documentation and example

---
 README.md    | 24 +++++++++++++++------
 example.html | 60 ++++++++++++++++++++++++++++++++++------------------
 guide.css    | 14 +++++++-----
 guide.js     | 20 ++++++++++--------
 4 files changed, 77 insertions(+), 41 deletions(-)

diff --git a/README.md b/README.md
index 7085c03..37f16ad 100644
--- a/README.md
+++ b/README.md
@@ -45,18 +45,18 @@ setTimeout(function() {
 
 ##### Blurb
 
-In order to add new steps to your overlay, add the `data-blurb` attribute to any element on your page.
+In order to add new steps to your overlay, add the `data-g-blurb` attribute to any element on your page.
 
 ```HTML
-<div class='my-element' data-blurb='This is the text that will show up when this step is reached.'>Hello, World!</div>
+<div class='my-element' data-g-blurb='This is the text that will show up when this step is reached.'>Hello, World!</div>
 ```
 
 ##### Order
 
-Your blurb nodes will, by default, order by their position in your HTML structure. Nodes closer to the initial `<body>` tag will show before nodes closer to your closing `</body>` tag. If you would like to override this ordering, use the `data-order` option.
+Your blurb nodes will, by default, order by their position in your HTML structure. Nodes closer to the initial `<body>` tag will show before nodes closer to your closing `</body>` tag. If you would like to override this ordering, use the `data-g-order` option.
 
 ```HTML
-<div class='my-element' data-order='1'>Hello, World!</div>
+<div class='my-element' data-g-order='1'>Hello, World!</div>
 ```
 
 You can order from 0 to any value you desire.
@@ -65,9 +65,19 @@ By default, ordered elements will show before any un-ordered elements, despite w
 
 ##### Direction
 
-guide.js also allows you to define which side of your element you'd like the bubble to appear on. Use the `data-direction` option.
+guide.js also allows you to define which side of your element you'd like the bubble to appear on. Use the `data-g-direction` option.
 
 ```HTML
-<div class='my-element' data-direction='top'>Hello, World!</div>
+<div class='my-element' data-g-direction='top'>Hello, World!</div>
 ```
-Your options for direction are 'top', 'bottom', 'left', and 'right'.
+Your options for direction are 'top', 'bottom', 'left', and 'right'. The default is 'bottom'.
+
+##### Margin
+
+You can also specify the margin in which you'd like the bubble to assume around the element. Use the `data-g-margin` option for this.
+
+```HTML
+<div class='my-element' data-g-margin='100'>Hello, World!</div>
+```
+
+The above will result in a margin of 100 pixels. The default is 10 pixels. Note that the margin is the edge of the bubble, the margin does not account for the size of the comment arrow, which is the reason for the 10 pixel default.
diff --git a/example.html b/example.html
index 3b2d0d8..f71962f 100644
--- a/example.html
+++ b/example.html
@@ -1,24 +1,44 @@
 <html>
-<head>
-<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
-<script src="guide.js"></script>
-<link href="guide.css" rel="stylesheet">
-</head>
-<body>
-	<div id="hello" style="position:absolute;top:100px;left:200px;">Hello</div>
-	<div id="world" style="position:absolute;top:200px;left:300px;">World</div>
-<script>
+	<head>
+		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
+		<script src="guide.js"></script>
+		<link href="guide.css" rel="stylesheet">
+	</head>
 
-$(function() {
-    
-    var guide = $("body").guide();
+	<style>
+		#hello {
+			position:absolute;
+			top:100px;
+			left:200px;
+		}
+		#world {
+			position:absolute;
+			top:200px;
+			left:300px;
+		}
+		#not-shown {
+			position:absolute;
+			top:300px;
+			left:400px;
+		}
+	</style>
 
-    guide.addStep("#hello", "This step says hello");
-    guide.addStep("#world", "This step says world");
-    
-    guide.start();
-   
-});
-</script>
-</body>
+	<body>
+		<div id="hello" data-g-blurb="Show me second! Gosh darn it I really wnat to be shown first and I'm a big baby so I'll thorw a fit!!!!" data-g-direction='right' data-g-order='2'>Hello,</div>
+		
+		<div id="world" data-g-blurb="Show me third!" data-g-order='3' data-g-direction='top'>World!</div>
+		
+		<div id="not-shown" data-g-blurb="Show me third!" data-g-order='1' data-g-direction='left'>I'm skipped because I have the same class and blurb as the 'World!' element.</div>
+		<script>
+
+			$(function() {
+			    
+			    var helpOverlay = overlay();
+			    helpOverlay.init($('body'));
+			    helpOverlay.guide.start();
+			
+			});
+
+		</script>
+	</body>
 </html>
\ No newline at end of file
diff --git a/guide.css b/guide.css
index 28920f5..8016805 100644
--- a/guide.css
+++ b/guide.css
@@ -4,7 +4,8 @@
     width: 100%;
     left: 0px;
     top: 0px;
-    opacity: 0;
+    display:none;
+    opacity:0.5;
 }
 .guideBubble {
     position: absolute;
@@ -36,14 +37,14 @@
     content:'';
     position: absolute;
 }
-.guideBubble-arrow.top {
+.guideBubble-arrow.bottom {
     top: -10px;
     border-top-color:transparent;
     border-right-color:transparent;
     border-bottom-color:white;
     border-left-color:transparent;
 }
-.guideBubble-arrow.right {
+.guideBubble-arrow.left {
     right: -10px;
     top: 10px;
     border-top-color:transparent;
@@ -51,18 +52,21 @@
     border-bottom-color:transparent;
     border-left-color:white;
 }
-.guideBubble-arrow.bottom {
+.guideBubble-arrow.top {
     bottom: -10px;
     border-top-color:white;
     border-right-color:transparent;
     border-bottom-color:transparent;
     border-left-color:transparent;
 }
-.guideBubble-arrow.left {
+.guideBubble-arrow.right {
     left: -10px;
     top: 10px;
     border-top-color:transparent;
     border-right-color:white;
     border-bottom-color:transparent;
     border-left-color:transparent;
+}
+.guideBubble .btn-danger {
+    background-image: none;
 }
\ No newline at end of file
diff --git a/guide.js b/guide.js
index 0830d6e..d793b09 100644
--- a/guide.js
+++ b/guide.js
@@ -1,9 +1,10 @@
 (function ( $ ) {
 
     overlay = function() {
-     this.construct = function(element) {
+     this.construct = function() {
         this.guide = null;
         this.classes = [];
+        this.blurbs = [];
         this.queued = [];
         this.nonqueued = [];
         this.blurb = '';
@@ -13,11 +14,12 @@
         this.construct();
         var help = this;
         this.guide = element.guide();
-        $.each(element.find('[data-blurb]'), function() {
-            if ($.inArray($(this).attr('class'), help.classes) === -1) {
+        $.each(element.find('[data-g-blurb]'), function() {
+            if ($.inArray($(this).attr('class'), help.classes) === -1 || $.inArray($(this).attr('data-g-blurb'), help.blurbs) === -1) {
                 help.classes.push($(this).attr('class'));
-                if ($(this).attr('data-order')) {
-                    var index = parseInt($(this).attr('data-order'));
+                help.blurbs.push($(this).attr('data-g-blurb'));
+                if ($(this).attr('data-g-order')) {
+                    var index = parseInt($(this).attr('data-g-order'));
                     if (help.queued[index] != null) {
                         help.queued.splice(index+1,0, $(this));
                     }
@@ -32,16 +34,16 @@
         });
         $.each(help.queued, function(i, e) {
             if (e) {
-                help.blurb = $(this).attr('data-blurb');
+                help.blurb = $(this).attr('data-g-blurb');
                 $(this).addClass('blurbnum-'+help.count);
-                help.guide.addStep('.blurbnum-'+help.count, help.blurb, { direction: $(this).attr('data-direction') || 'bottom', margin: $(this).attr('data-margin') || 10 });
+                help.guide.addStep('.blurbnum-'+help.count, help.blurb, { direction: $(this).attr('data-g-direction') || 'bottom', margin: $(this).attr('data-g-margin') || 10 });
                 help.count++;
             }
         });
         $.each(help.nonqueued, function() {
-            help.blurb = $(this).attr('data-blurb');
+            help.blurb = $(this).attr('data-g-blurb');
             $(this).addClass('blurbnum-'+help.count);
-            help.guide.addStep('.blurbnum-'+help.count, help.blurb, { direction: $(this).attr('data-direction') || 'bottom', margin: $(this).attr('data-margin') || 10 });
+            help.guide.addStep('.blurbnum-'+help.count, help.blurb, { direction: $(this).attr('data-g-direction') || 'bottom', margin: $(this).attr('data-g-margin') || 10 });
             help.count++;
         });
     };

From 8f528905884a7ca957ce28d8ff030092d51f088d Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 15:36:21 -0600
Subject: [PATCH 13/21] fix

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f41cb3e..40a98f5 100644
--- a/README.md
+++ b/README.md
@@ -77,7 +77,7 @@ Your options for direction are 'top', 'bottom', 'left', and 'right'. The default
 You can also specify the margin in which you'd like the bubble to assume around the element. Use the `data-g-margin` option for this.
 
 ```HTML
-<div class='my-element' data-g-margin='100'>Hello, World!</div>
+<div data-g-blurb='Show this text.' data-g-margin='100'>Hello, World!</div>
 ```
 
 The above will result in a margin of 100 pixels. The default is 10 pixels. Note that the margin is the edge of the bubble, the margin does not account for the size of the comment arrow, which is the reason for the 10 pixel default.

From 1fecb933cf2dc84d4a79bdda47a10ff8b9a41720 Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 15:46:29 -0600
Subject: [PATCH 14/21] explaining init process

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 40a98f5..a670f15 100644
--- a/README.md
+++ b/README.md
@@ -19,10 +19,11 @@ Download [guide.js][0] and [guide.css][1] and add the following assets:
 
 ## Using
 
-In your document ready, first create an instance of an overlay.
+In your document ready, first create an instance of an overlay, and initialize it while passing in an element that encompasses all the nodes for this overlay. Typically, you'll just use $('body').
 
 ```javascript
 var helpOverlay = overlay();
+helpOverlay.init($('body'));
 ```
 
 Then attach an event handler (or any method you desire) to start the overlay.

From 4ddf93d071ffdda026c6c5a4fca5ef175f2af44f Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 15:47:05 -0600
Subject: [PATCH 15/21] style change

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a670f15..8a43e50 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ Download [guide.js][0] and [guide.css][1] and add the following assets:
 
 ## Using
 
-In your document ready, first create an instance of an overlay, and initialize it while passing in an element that encompasses all the nodes for this overlay. Typically, you'll just use $('body').
+In your document ready, first create an instance of an overlay, and initialize it while passing in an element that encompasses all the nodes for this overlay. Typically, you'll just use `$('body')`.
 
 ```javascript
 var helpOverlay = overlay();

From 6bbc74808f81d6d6a374ad387816b8ffb8152bbb Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 16:25:57 -0600
Subject: [PATCH 16/21] readme updates

---
 README.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/README.md b/README.md
index 8a43e50..5d298e0 100644
--- a/README.md
+++ b/README.md
@@ -83,5 +83,27 @@ You can also specify the margin in which you'd like the bubble to assume around
 
 The above will result in a margin of 100 pixels. The default is 10 pixels. Note that the margin is the edge of the bubble, the margin does not account for the size of the comment arrow, which is the reason for the 10 pixel default.
 
+## Nifty little ditties
+
+guide.js loves you, and wants your dev cycle to be as quick and painless as possible. With that in mind, we've added a few nifty features that make guide.js as flexible as we had the foresight to see (let us know how we can help otherwise).
+
+##### Fixed elements
+
+You may have experienced with other help overlays that once the bubble is set relative to the page, it's set. This is okay, except when the element you are wrapping is fixed on the page. When you begin to scroll, the overlay scrolls with the page, and your fixed element is left underneath the dark overlay. guide.js resolves this by performing a check on all nodes to determine if they are fixed on the page. If they are, the overlay will reflect that, and you can scroll your little hearts out.
+
+##### Front end PHP/Ruby, etc.
+
+We know that our users are skilled in the way of dev-fu, and that means that you'll be using guide.js with pages that aren't static. One problem that may arise is something like this:
+
+```php
+$foods = array("pizza","sandwiches","ice cream","cake"); 
+foreach ($foods as $item)
+{
+	echo "<div class='food-div' data-blurb='Here is an example of a div with text in it.'>I enjoy $item.</div>";
+}
+```
+
+What would happen here, is you would have four nodes that show in your tutorial cycle. All of them point to food div, and give you the same story: "Here is an example of a div with text in it." Likely, you would rather only have the first one included in the tutorial, and guide.js gives this to you. As guide.js loops your wrapper element searching for `data-g-blurb`, it keeps track of what classes, and what blurbs you've been using. After adding a blurb to the first element in this list, it will note that you have added a blurb to `.food-div`. On the next go-round, it will see that you are adding another blurb to `.food-div`, and it will go to the second check: the blurb text itself. If the blurb on this element is identical to the one on the previous element, it will skip the blurb entirely. However, if the blurb text differed, it would include the new blurb.
+
  [0]: https://github.com/Dozyatom/guide.js/blob/master/guide.js
  [1]: https://github.com/Dozyatom/guide.js/blob/master/guide.css

From 79a1f0a98fe472e967e8ff2c1482451e07cfd1fd Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Tue, 1 Apr 2014 23:38:37 -0600
Subject: [PATCH 17/21] better docs, and data-g-multiple option

---
 README.md    | 13 ++++++++++++-
 example.html |  2 +-
 guide.js     |  4 +---
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 5d298e0..58688ed 100644
--- a/README.md
+++ b/README.md
@@ -83,6 +83,17 @@ You can also specify the margin in which you'd like the bubble to assume around
 
 The above will result in a margin of 100 pixels. The default is 10 pixels. Note that the margin is the edge of the bubble, the margin does not account for the size of the comment arrow, which is the reason for the 10 pixel default.
 
+##### Multiple occurrences of same blurb
+
+You may find that there is a time you want to have two or more blurbs on the same page with the exact same text. Take a peek at the 'Nifty little ditties' section to see what we're doing to prevent accidental multiples. If you do want multiples however, you may use the `data-g-multiple` option on your element.
+
+```HTML
+<div data-g-blurb='Exact same text.' data-g-multiple>My blurb will show!</div>
+<div data-g-blurb='Exact same text.' data-g-multiple>So will mine!</div>
+```
+
+There are no options for `data-g-multiple`. Simply having the attribute present is enough.
+
 ## Nifty little ditties
 
 guide.js loves you, and wants your dev cycle to be as quick and painless as possible. With that in mind, we've added a few nifty features that make guide.js as flexible as we had the foresight to see (let us know how we can help otherwise).
@@ -103,7 +114,7 @@ foreach ($foods as $item)
 }
 ```
 
-What would happen here, is you would have four nodes that show in your tutorial cycle. All of them point to food div, and give you the same story: "Here is an example of a div with text in it." Likely, you would rather only have the first one included in the tutorial, and guide.js gives this to you. As guide.js loops your wrapper element searching for `data-g-blurb`, it keeps track of what classes, and what blurbs you've been using. After adding a blurb to the first element in this list, it will note that you have added a blurb to `.food-div`. On the next go-round, it will see that you are adding another blurb to `.food-div`, and it will go to the second check: the blurb text itself. If the blurb on this element is identical to the one on the previous element, it will skip the blurb entirely. However, if the blurb text differed, it would include the new blurb.
+What would happen here is you would have four nodes that show in your tutorial cycle. All of them point to a food div, and give you the same story: 'Here is an example of a div with text in it.' Likely, you would rather only have the first one included in the tutorial, and guide.js gives you this ability. As guide.js loops your wrapper element searching for `data-g-blurb`, it keeps track of what blurbs you've been using. After adding a blurb to the first element in this list, it will note that you have added a blurb with the content 'Here is an example of a div with text in it.' On the next go-round, it will see that you are adding another blurb with the same text, and it will go to the second check: the `data-g-multiple` option. If the option is set on this element, it will include the blurb. If it is not, it will skip the blurb entirely. Note that the identical blurbs do not have to be right next to each other in the HTML as in our above example. They just have to be within the same overlay wrapper element.
 
  [0]: https://github.com/Dozyatom/guide.js/blob/master/guide.js
  [1]: https://github.com/Dozyatom/guide.js/blob/master/guide.css
diff --git a/example.html b/example.html
index f71962f..999df11 100644
--- a/example.html
+++ b/example.html
@@ -28,7 +28,7 @@
 		
 		<div id="world" data-g-blurb="Show me third!" data-g-order='3' data-g-direction='top'>World!</div>
 		
-		<div id="not-shown" data-g-blurb="Show me third!" data-g-order='1' data-g-direction='left'>I'm skipped because I have the same class and blurb as the 'World!' element.</div>
+		<div id="not-shown" data-g-blurb="Show me third!" data-g-order='1' data-g-direction='left'>I'm skipped because I have the same blurb as the 'World!' element.</div>
 		<script>
 
 			$(function() {
diff --git a/guide.js b/guide.js
index d793b09..2493f68 100644
--- a/guide.js
+++ b/guide.js
@@ -3,7 +3,6 @@
     overlay = function() {
      this.construct = function() {
         this.guide = null;
-        this.classes = [];
         this.blurbs = [];
         this.queued = [];
         this.nonqueued = [];
@@ -15,8 +14,7 @@
         var help = this;
         this.guide = element.guide();
         $.each(element.find('[data-g-blurb]'), function() {
-            if ($.inArray($(this).attr('class'), help.classes) === -1 || $.inArray($(this).attr('data-g-blurb'), help.blurbs) === -1) {
-                help.classes.push($(this).attr('class'));
+            if ($.inArray($(this).attr('data-g-blurb'), help.blurbs) === -1 || $(this).is('[data-g-multiple]')) {
                 help.blurbs.push($(this).attr('data-g-blurb'));
                 if ($(this).attr('data-g-order')) {
                     var index = parseInt($(this).attr('data-g-order'));

From 15a387678801905e5d3dc519b870781a6f2a2837 Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Wed, 2 Apr 2014 00:12:00 -0600
Subject: [PATCH 18/21] updating docs, and moving guide() into a element method

---
 README.md    |   7 ++-
 example.html |   9 ++--
 guide.js     | 120 +++++++++++++++++++++++----------------------------
 3 files changed, 61 insertions(+), 75 deletions(-)

diff --git a/README.md b/README.md
index 58688ed..b18ca33 100644
--- a/README.md
+++ b/README.md
@@ -22,15 +22,14 @@ Download [guide.js][0] and [guide.css][1] and add the following assets:
 In your document ready, first create an instance of an overlay, and initialize it while passing in an element that encompasses all the nodes for this overlay. Typically, you'll just use `$('body')`.
 
 ```javascript
-var helpOverlay = overlay();
-helpOverlay.init($('body'));
+var helpOverlay = $('body').guide();
 ```
 
 Then attach an event handler (or any method you desire) to start the overlay.
 
 ```javascript
 $('#my-button').on('click', function() {
-	helpOverlay.guide.start();
+	helpOverlay.start();
 });
 ```
 
@@ -38,7 +37,7 @@ guide.js will stop if you click on the darkened background. However, if you woul
 
 ```javascript
 setTimeout(function() {
-	helpOverlay.guide.stop();
+	helpOverlay.end();
 }, 30000); // wait 30 seconds
 ```
 
diff --git a/example.html b/example.html
index 999df11..e7209e0 100644
--- a/example.html
+++ b/example.html
@@ -24,18 +24,17 @@
 	</style>
 
 	<body>
-		<div id="hello" data-g-blurb="Show me second! Gosh darn it I really wnat to be shown first and I'm a big baby so I'll thorw a fit!!!!" data-g-direction='right' data-g-order='2'>Hello,</div>
+		<div id="hello" data-g-blurb="Show me second!" data-g-direction='right' data-g-order='2'>Hello,</div>
 		
 		<div id="world" data-g-blurb="Show me third!" data-g-order='3' data-g-direction='top'>World!</div>
 		
-		<div id="not-shown" data-g-blurb="Show me third!" data-g-order='1' data-g-direction='left'>I'm skipped because I have the same blurb as the 'World!' element.</div>
+		<div id="not-shown" data-g-blurb="Show me third!" data-g-order='1' data-g-multiple data-g-direction='left'>I will show first. And I will not be skipped even though I have the same blurb as 'World!'</div>
 		<script>
 
 			$(function() {
 			    
-			    var helpOverlay = overlay();
-			    helpOverlay.init($('body'));
-			    helpOverlay.guide.start();
+			    var helpOverlay = $('body').guide();
+			    helpOverlay.start();
 			
 			});
 
diff --git a/guide.js b/guide.js
index 2493f68..088e263 100644
--- a/guide.js
+++ b/guide.js
@@ -1,53 +1,4 @@
 (function ( $ ) {
-
-    overlay = function() {
-     this.construct = function() {
-        this.guide = null;
-        this.blurbs = [];
-        this.queued = [];
-        this.nonqueued = [];
-        this.blurb = '';
-        this.count = 0;
-    };
-    this.init = function(element) {
-        this.construct();
-        var help = this;
-        this.guide = element.guide();
-        $.each(element.find('[data-g-blurb]'), function() {
-            if ($.inArray($(this).attr('data-g-blurb'), help.blurbs) === -1 || $(this).is('[data-g-multiple]')) {
-                help.blurbs.push($(this).attr('data-g-blurb'));
-                if ($(this).attr('data-g-order')) {
-                    var index = parseInt($(this).attr('data-g-order'));
-                    if (help.queued[index] != null) {
-                        help.queued.splice(index+1,0, $(this));
-                    }
-                    else {
-                        help.queued[index] = $(this);
-                    }
-                }
-                else {
-                    help.nonqueued.push($(this));
-                }
-            }
-        });
-        $.each(help.queued, function(i, e) {
-            if (e) {
-                help.blurb = $(this).attr('data-g-blurb');
-                $(this).addClass('blurbnum-'+help.count);
-                help.guide.addStep('.blurbnum-'+help.count, help.blurb, { direction: $(this).attr('data-g-direction') || 'bottom', margin: $(this).attr('data-g-margin') || 10 });
-                help.count++;
-            }
-        });
-        $.each(help.nonqueued, function() {
-            help.blurb = $(this).attr('data-g-blurb');
-            $(this).addClass('blurbnum-'+help.count);
-            help.guide.addStep('.blurbnum-'+help.count, help.blurb, { direction: $(this).attr('data-g-direction') || 'bottom', margin: $(this).attr('data-g-margin') || 10 });
-            help.count++;
-        });
-    };
-
-    return this;
-};
  
     var guide = function() {
         var container,
@@ -60,14 +11,64 @@
             leftMask = $("<div/>").addClass("guideMask"),
             rightMask = $("<div/>").addClass("guideMask"),
             bubble = $("<div/>").addClass("guideBubble"),
-            holdingSteps,
-            steps,
-            position,
+            holdingSteps = [],
+            steps = [],
+            position = -1,
+            blurbs = [],
+            queued = [],
+            nonqueued = [],
+            blurb = '',
+            count = 0,
+            zIndex = 1000000,
  
             prevButton = $("<button/>").addClass("btn").html("Prev"),
             nextButton = $("<button/>").addClass("btn").html("Next"),
             arrow = $("<div/>"),
 
+
+            initialize = function() {
+                var element = container;
+                $.each(element.find('[data-g-blurb]'), function() {
+                    if ($.inArray($(this).attr('data-g-blurb'), blurbs) === -1 || $(this).is('[data-g-multiple]')) {
+                        blurbs.push($(this).attr('data-g-blurb'));
+                        if ($(this).attr('data-g-order')) {
+                            var index = parseInt($(this).attr('data-g-order'));
+                            if (queued[index] != null) {
+                                queued.splice(index+1,0, $(this));
+                            }
+                            else {
+                                queued[index] = $(this);
+                            }
+                        }
+                        else {
+                            nonqueued.push($(this));
+                        }
+                    }
+                });
+                $.each(queued, function(i, e) {
+                    if (e) {
+                        blurb = $(this).attr('data-g-blurb');
+                        $(this).addClass('blurbnum-'+count);
+                        addStep('.blurbnum-'+count, blurb, { direction: $(this).attr('data-g-direction') || 'bottom', margin: $(this).attr('data-g-margin') || 10 });
+                        count++;
+                    }
+                });
+                $.each(nonqueued, function() {
+                    blurb = $(this).attr('data-g-blurb');
+                    $(this).addClass('blurbnum-'+count);
+                    addStep('.blurbnum-'+count, blurb, { direction: $(this).attr('data-g-direction') || 'bottom', margin: $(this).attr('data-g-margin') || 10 });
+                    count++;
+                });
+            },
+
+            addStep = function(selector, introduction, options, direction) {
+                holdingSteps.push({
+                    selector: selector,
+                    intro: introduction,
+                    options: options || {}
+                });
+            },
+
             isFixed = function(element) {
                 var $element = $(element);
                 var $checkElements = $element.add($element.parents());
@@ -235,20 +236,14 @@
                 topMask.add(bottomMask).add(leftMask).add(rightMask).stop().fadeOut(500, function() {
                     topMask.add(bottomMask).add(leftMask).add(rightMask).detach();
                 });
-            },
-            getMaximumZIndex = function() {
-                return 1000000;
             }
        
  
         return {
             init: function(opts) {
                 container = $(this);
+                initialize();
                 options = $.extend({}, defaults, opts);
-                steps = [];
-                holdingSteps = [];
-                position = -1;
-                zIndex = getMaximumZIndex();
    
                 topMask.add(bottomMask).add(leftMask).add(rightMask).css("z-index", zIndex + 1);
                 bubble.css("z-index", zIndex + 2).html("").append(arrow).append($("<div/>").addClass("step").html("1")).append($("<div/>").addClass("intro")).append($("<div/>").addClass("btn-group pull-right").append(prevButton).append(nextButton));
@@ -269,13 +264,6 @@
                 });
                 
                 return {
-                    addStep: function(selector, introduction, options, direction) {
-                        holdingSteps.push({
-                            selector: selector,
-                            intro: introduction,
-                            options: options || {}
-                        });
-                    },
                     start: function() {
                         container.append(topMask, bottomMask, leftMask, rightMask);
                         container.append(bubble);

From 85c445ee3432749813da600b91efbac593c514cd Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Wed, 2 Apr 2014 00:17:36 -0600
Subject: [PATCH 19/21] updating docs

---
 README.md | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index b18ca33..9d31b32 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ setTimeout(function() {
 
 ### Options
 
-##### Blurb
+#### Blurb
 
 In order to add new steps to your overlay, add the `data-g-blurb` attribute to any element on your page.
 
@@ -51,7 +51,7 @@ In order to add new steps to your overlay, add the `data-g-blurb` attribute to a
 <div data-g-blurb='This is the text that will show up when this step is reached.'>Hello, World!</div>
 ```
 
-##### Order
+#### Order
 
 Your blurb nodes will, by default, order by their position in your HTML structure. Nodes closer to the initial `<body>` tag will show before nodes closer to your closing `</body>` tag. If you would like to override this ordering, use the `data-g-order` option.
 
@@ -63,7 +63,7 @@ You can order from 0 to any value you desire.
 
 By default, ordered elements will show before any un-ordered elements, despite what the actual order number is. The un-ordered elements will then appear in the order they appear in the HTML structure. If you accidentally give two nodes the same ordering, guide.js will order them in the order they appear in the HTML, while still maintaining their order among other ordered nodes.
 
-##### Direction
+#### Direction
 
 guide.js also allows you to define which side of your element you'd like the bubble to appear on. Use the `data-g-direction` option.
 
@@ -72,7 +72,7 @@ guide.js also allows you to define which side of your element you'd like the bub
 ```
 Your options for direction are 'top', 'bottom', 'left', and 'right'. The default is 'bottom'.
 
-##### Margin
+#### Margin
 
 You can also specify the margin in which you'd like the bubble to assume around the element. Use the `data-g-margin` option for this.
 
@@ -82,7 +82,7 @@ You can also specify the margin in which you'd like the bubble to assume around
 
 The above will result in a margin of 100 pixels. The default is 10 pixels. Note that the margin is the edge of the bubble, the margin does not account for the size of the comment arrow, which is the reason for the 10 pixel default.
 
-##### Multiple occurrences of same blurb
+#### Multiple occurrences of same blurb
 
 You may find that there is a time you want to have two or more blurbs on the same page with the exact same text. Take a peek at the 'Nifty little ditties' section to see what we're doing to prevent accidental multiples. If you do want multiples however, you may use the `data-g-multiple` option on your element.
 
@@ -97,11 +97,11 @@ There are no options for `data-g-multiple`. Simply having the attribute present
 
 guide.js loves you, and wants your dev cycle to be as quick and painless as possible. With that in mind, we've added a few nifty features that make guide.js as flexible as we had the foresight to see (let us know how we can help otherwise).
 
-##### Fixed elements
+#### Fixed elements
 
 You may have experienced with other help overlays that once the bubble is set relative to the page, it's set. This is okay, except when the element you are wrapping is fixed on the page. When you begin to scroll, the overlay scrolls with the page, and your fixed element is left underneath the dark overlay. guide.js resolves this by performing a check on all nodes to determine if they are fixed on the page. If they are, the overlay will reflect that, and you can scroll your little hearts out.
 
-##### Front end PHP/Ruby, etc.
+#### Front end PHP/Ruby, etc.
 
 We know that our users are skilled in the way of dev-fu, and that means that you'll be using guide.js with pages that aren't static. One problem that may arise is something like this:
 
@@ -115,5 +115,19 @@ foreach ($foods as $item)
 
 What would happen here is you would have four nodes that show in your tutorial cycle. All of them point to a food div, and give you the same story: 'Here is an example of a div with text in it.' Likely, you would rather only have the first one included in the tutorial, and guide.js gives you this ability. As guide.js loops your wrapper element searching for `data-g-blurb`, it keeps track of what blurbs you've been using. After adding a blurb to the first element in this list, it will note that you have added a blurb with the content 'Here is an example of a div with text in it.' On the next go-round, it will see that you are adding another blurb with the same text, and it will go to the second check: the `data-g-multiple` option. If the option is set on this element, it will include the blurb. If it is not, it will skip the blurb entirely. Note that the identical blurbs do not have to be right next to each other in the HTML as in our above example. They just have to be within the same overlay wrapper element.
 
+## End notes
+
+#### Created by
+[Dozyatom][2]
+[ethanwelborn][3]
+
+#### Roadmap
+- Abstract CSS (currently based on Bootstrap)
+- Remove jQuery dependency
+- Add keypress support
+
+
  [0]: https://github.com/Dozyatom/guide.js/blob/master/guide.js
  [1]: https://github.com/Dozyatom/guide.js/blob/master/guide.css
+ [2]: https://github.com/Dozyatom
+ [3]: https://github.com/ethanwelborn

From 5f69e8cc20a29f1bc07db782a25733e348ab569a Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Wed, 2 Apr 2014 00:18:05 -0600
Subject: [PATCH 20/21] docs update

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 9d31b32..a327ffb 100644
--- a/README.md
+++ b/README.md
@@ -119,6 +119,7 @@ What would happen here is you would have four nodes that show in your tutorial c
 
 #### Created by
 [Dozyatom][2]
+
 [ethanwelborn][3]
 
 #### Roadmap

From 2015c9adf3bce92b4d2f1a83a74c75349fb04fac Mon Sep 17 00:00:00 2001
From: Ethan Welborn <welborn.ethan@gmail.com>
Date: Wed, 2 Apr 2014 00:19:26 -0600
Subject: [PATCH 21/21] doc fix

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index a327ffb..5fefaf3 100644
--- a/README.md
+++ b/README.md
@@ -120,6 +120,7 @@ What would happen here is you would have four nodes that show in your tutorial c
 #### Created by
 [Dozyatom][2]
 
+##### Contributors
 [ethanwelborn][3]
 
 #### Roadmap