From f2e1b89c899a3620944c6f0459097cbbcedd0658 Mon Sep 17 00:00:00 2001
From: Gordon Koo <gordon@gordonkoo.com>
Date: Tue, 31 Jul 2012 15:17:35 -0700
Subject: [PATCH] some code cleanup

---
 index.html          |  47 +-----
 js/debug.js         |  45 +++++-
 js/exampletour.js   |  20 +--
 js/hopscotch-min.js |   1 +
 js/hopscotch.js     | 363 ++++++++++++++++++++++----------------------
 5 files changed, 242 insertions(+), 234 deletions(-)
 create mode 100644 js/hopscotch-min.js

diff --git a/index.html b/index.html
index aa1ebfe5..b7668574 100644
--- a/index.html
+++ b/index.html
@@ -38,7 +38,7 @@ <h2 id="subheading" class="one two three">Content</h2>
         <li>Testing multi-page tours. Continue to the <a href="secondpage.html" id="secpagelink" title="hello tooltip">hopscotch</a> second page</li>
       </ul>
       <div class="img-container">
-        <img id="spiderman" src="http://i.imgur.com/0O8k3.png">
+        <img id="wave" src="http://i.imgur.com/s632o.jpg">
       </div>
       <div class="img-container">
         <img id="python" src="http://i.imgur.com/mIgyw.jpg">
@@ -77,6 +77,7 @@ <h3>Tour Options</h3>
         <input type="checkbox" id="showAsianStepNumsCheck"> showAsianStepNums
       </label>
       <br/>
+      <label>Go to step number: <input id="gototext" type="text" size="5"><input id="gotobtn" type="button" value="Go!"></label>
     </div>
     <!--
     <script src="js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
@@ -92,50 +93,6 @@ <h3>Tour Options</h3>
       hopscotch.loadTour(tour);
       //hopscotch.clearCookie();
       hopscotch.startTour();
-
-      // ==========
-      // START TOUR
-      // ==========
-      if (document.body.addEventListener) {
-        document.getElementById('startBtn').addEventListener('click', function() {
-          hopscotch.loadTour(tour);
-          hopscotch.startTour();
-        });
-      }
-      else if (document.body.attachEvent) {
-        document.getElementById('startBtn').attachEvent('onclick', function() {
-          hopscotch.loadTour(tour);
-          hopscotch.startTour();
-        });
-      }
-
-      // ========
-      // END TOUR
-      // ========
-      if (document.body.addEventListener) {
-        document.getElementById('endBtn').addEventListener('click', function() {
-          hopscotch.endTour();
-        });
-      }
-      else if (document.body.attachEvent) {
-        document.getElementById('endBtn').attachEvent('onclick', function() {
-          hopscotch.endTour();
-        });
-      }
-
-      // ============
-      // CLEAR COOKIE
-      // ============
-      if (document.body.addEventListener) {
-        document.getElementById('clearCookieBtn').addEventListener('click', function() {
-          hopscotch.clearCookie();
-        });
-      }
-      else if (document.body.attachEvent) {
-        document.getElementById('clearCookieBtn').attachEvent('onclick', function() {
-          hopscotch.clearCookie();
-        });
-      }
     </script>
   </body>
 </html>
diff --git a/js/debug.js b/js/debug.js
index 633e3305..bb01b1fc 100644
--- a/js/debug.js
+++ b/js/debug.js
@@ -11,6 +11,15 @@ var i,
       'showNextButton'
     ],
 
+addClickListener = function(el, fn) {
+  if (el.addEventListener) {
+    el.addEventListener('click', fn);
+  }
+  else {
+    el.attachEvent('onclick', fn);
+  }
+},
+
 attachListenerForOption = function(checkbox, optionName) {
   var fn = function() {
     var options = {};
@@ -25,12 +34,14 @@ attachListenerForOption = function(checkbox, optionName) {
   }
 };
 
+// BOOLEAN CONTROLS
 for (i = 0, len = booleanControls.length; i < len; i++) {
   optionName = booleanControls[i];
   checkbox = document.getElementById(optionName + 'Check');
   attachListenerForOption(checkbox, optionName);
 }
 
+// SHOW ASIAN STEP NUMS
 (function() {
   var checkbox = document.getElementById('showAsianStepNumsCheck'),
   fn = function() {
@@ -54,4 +65,36 @@ for (i = 0, len = booleanControls.length; i < len; i++) {
   else {
     checkbox.attachEvent('onchange', fn);
   }
-}())
+}());
+
+// GO TO STEP NUM
+(function() {
+  var gotobtn  = document.getElementById('gotobtn');
+  addClickListener(gotobtn, function() {
+    var gototext = document.getElementById('gototext');
+    hopscotch.showStep(parseInt(gototext.value, 10)-1);
+  });
+
+  // ==========
+  // START TOUR
+  // ==========
+  addClickListener(document.getElementById('startBtn'), function() {
+    hopscotch.loadTour(tour);
+    hopscotch.startTour();
+  });
+
+  // ========
+  // END TOUR
+  // ========
+  addClickListener(document.getElementById('endBtn'), function() {
+    hopscotch.endTour();
+  });
+
+  // ============
+  // CLEAR COOKIE
+  // ============
+  addClickListener(document.getElementById('clearCookieBtn'), function() {
+    hopscotch.clearCookie();
+  });
+
+}());
diff --git a/js/exampletour.js b/js/exampletour.js
index 86396781..b147eaa0 100644
--- a/js/exampletour.js
+++ b/js/exampletour.js
@@ -35,7 +35,7 @@ var tour = {
           content: 'Are you ready? We\'re going to try hopping to another page and then back!!! Where we\'re going, we won\'t need roads... (Please click this link.)',
           targetId: 'secpagelink',
           orientation: 'bottom',
-          showNextBtn: false,
+          showNextButton: false,
           multiPage: true
         },
         {
@@ -43,26 +43,26 @@ var tour = {
           content: 'We made it!! Polar bears are very interesting creatures.',
           targetId: 'polarbears',
           orientation: 'right',
-          showPrevBtn: false
+          showPrevButton: false
         },
         {
           title: 'Returning to the first page',
           content: 'Time to go back home... Please click this link to return to the first page.',
           targetId: 'firstpagelink',
           orientation: 'bottom',
-          showNextBtn: false,
-          showPrevBtn: false,
+          showNextButton: false,
+          showPrevButton: false,
           multiPage: true // this indicates that next step will be on a different page
         },
         {
-          title: 'Spider-man',
-          content: 'Here are some window cleaners dressed as Spider-man. Did you see the new Spider-man movie? It was pretty awesome, especially the part where Spider-man is fighting the Lizard on the bridge. I\'m pretty sure it\'s still showing. Why don\'t you <a href="http://www.fandango.com/theamazingspiderman_126975/movieoverview" target="_new">buy some tickets</a>?',
-          targetId: 'spiderman',
+          title: 'Cool wave',
+          content: 'This is a colorful wave. Here is the the <a href="http://imgur.com/s632o" target="_new">page</a> where I found it.',
+          targetId: 'wave',
           orientation: 'bottom',
           width: 500,
           xOffset: -50,
           arrowOffset: 400,
-          showPrevBtn: false
+          showPrevButton: false
         },
         {
           title: 'Python decorator',
@@ -93,8 +93,8 @@ var tour = {
       },
       */
       i18n: {
-        nextBtn: 'Go to Next',
-        prevBtn: 'Go Back A Bit',
+        nextBtn: 'Forward',
+        prevBtn: 'Backward',
         stepNums: [
           '&#x4e00;',
           '&#x4e8c;',
diff --git a/js/hopscotch-min.js b/js/hopscotch-min.js
new file mode 100644
index 00000000..c2df63ae
--- /dev/null
+++ b/js/hopscotch-min.js
@@ -0,0 +1 @@
+(function(){var i,c,h,g,f="undefined",a=(typeof window.jQuery!==f),d=(typeof window.localStorage!==f),e=document.body.style,b=(typeof e.MozTransition!==f||typeof e.MsTransition!==f||typeof e.webkitTransition!==f||typeof e.OTransition!==f||typeof e.transition!==f);if(window.hopscotch){return}g={addClass:function(l,n){var k,m,j;if(a){$(l).addClass(n)}else{if(l.className.length===0){l.className=n}else{k=l.className.split(" ");for(m=0,j=k.length;m<j;++m){if(k[m]===n){return}}k.splice(0,0,n);l.className=k.join(" ")}}},removeClass:function(m,l){var k,n,j;if(a){$(m).removeClass(l)}else{k=m.className.split(" ");for(n=0,j=k.length;n<j;++n){if(k[n]===l){break}}if(n<j){k.splice(n,1);m.className=k.join(" ")}}},getPixelValue:function(k){var j=typeof k;if(j==="number"){return k}if(j==="string"){return parseInt(k,10)}return 0},valOrDefault:function(k,j){return typeof k!==f?k:j},getScrollTop:function(){if(typeof window.pageYOffset!==f){return window.pageYOffset}else{return document.documentElement.scrollTop}},getScrollLeft:function(){if(typeof window.pageXOffset!==f){return window.pageXOffset}else{return document.documentElement.scrollLeft}},getWindowHeight:function(){return window.innerHeight?window.innerHeight:document.documentElement.clientHeight},getWindowWidth:function(){return window.innerWidth?window.innerWidth:document.documentElement.clientWidth},addClickListener:function(k,j){return k.addEventListener?k.addEventListener("click",j):k.attachEvent("onclick",j)},evtPreventDefault:function(j){if(j.preventDefault){j.preventDefault()}else{if(event){event.returnValue=false}}},extend:function(k,j){var l;for(l in j){if(j.hasOwnProperty(l)){k[l]=j[l]}}},setState:function(m,n,o){var j="",k,l;if(d){localStorage.setItem(m,n)}else{if(o){l=new Date();l.setTime(l.getTime()+(o*24*60*60*1000));j="; expires="+l.toGMTString()}document.cookie=m+"="+n+j+"; path=/"}},getState:function(k){var m=k+"=",j=document.cookie.split(";"),l,n;if(d){return localStorage.getItem(k)}else{for(var l=0;l<j.length;l++){n=j[l];while(n.charAt(0)===" "){n=n.substring(1,n.length)}if(n.indexOf(m)===0){return n.substring(m.length,n.length)}}return null}},clearState:function(j){if(d){localStorage.removeItem(j)}else{this.setState(j,"",-1)}}};h={stepNums:null,nextBtn:"Next",prevBtn:"Back",doneBtn:"Done",closeTooltip:"Close"};c=function(q){var o,p,k,j=false,n=function(t,s){var r=document.createElement("input");r.setAttribute("id",t);r.setAttribute("type","button");r.setAttribute("value",s);g.addClass(r,"hopscotch-nav-button");return r},l=function(s,r,u){var t="hide";if(u){t="hide-all"}if(typeof r===f){r=true}if(r){g.removeClass(s,t)}else{g.addClass(s,t)}},m=function(w,u){var z,r,x,t,y,v,C=document.getElementById(u.targetId),s=w.element,B=w.arrowEl,A=g.getPixelValue(u.arrowOffset);z=g.getPixelValue(u.width)||q.bubbleWidth;x=g.valOrDefault(u.padding,q.bubblePadding);t=C.getBoundingClientRect();if(u.orientation==="top"){r=s.offsetHeight;y=(t.top-r)-q.arrowWidth;v=t.left}else{if(u.orientation==="bottom"){y=t.bottom+q.arrowWidth;v=t.left}else{if(u.orientation==="left"){y=t.top;v=t.left-z-2*x-q.arrowWidth}else{if(u.orientation==="right"){y=t.top;v=t.right+q.arrowWidth}}}}if(!A){B.style.top="";B.style.left=""}else{if(u.orientation==="top"||u.orientation==="bottom"){B.style.left=A+"px"}else{if(u.orientation==="left"||u.orientation==="right"){B.style.top=A+"px"}}}v+=g.getPixelValue(u.xOffset);y+=g.getPixelValue(u.yOffset);y+=g.getScrollTop();v+=g.getScrollLeft();if(!b&&a&&q.animate){$(s).animate({top:y+"px",left:v+"px"})}else{s.style.top=y+"px";s.style.left=v+"px"}};this.init=function(){var u=document.createElement("div"),v=document.createElement("div"),t=this,s=false,r;this.element=u;this.containerEl=v;this.titleEl=document.createElement("h3");this.numberEl=document.createElement("span");this.contentEl=document.createElement("p");u.setAttribute("id","hopscotch-bubble");v.setAttribute("id","hopscotch-bubble-container");this.numberEl.setAttribute("id","hopscotch-bubble-number");v.appendChild(this.titleEl);v.appendChild(this.numberEl);v.appendChild(this.contentEl);u.appendChild(v);this.initNavButtons();if(q&&q.showCloseButton){this.initCloseButton()}this.initArrow();window.onresize=function(){if(s||!j){return}s=true;r=setTimeout(function(){m(t,k);s=false},200)};document.body.appendChild(u);return this};this.initNavButtons=function(){var r=document.createElement("div");this.prevBtnEl=n("hopscotch-prev",h.prevBtn);this.nextBtnEl=n("hopscotch-next",h.nextBtn);this.doneBtnEl=n("hopscotch-done",h.doneBtn);g.addClass(this.doneBtnEl,"hide");r.appendChild(this.prevBtnEl);r.appendChild(this.nextBtnEl);r.appendChild(this.doneBtnEl);g.addClickListener(this.prevBtnEl,function(s){if(o){o()}window.hopscotch.prevStep()});g.addClickListener(this.nextBtnEl,function(s){if(p){p()}window.hopscotch.nextStep()});g.addClickListener(this.doneBtnEl,window.hopscotch.endTour);r.setAttribute("id","hopscotch-actions");this.buttonsEl=r;this.containerEl.appendChild(r);return this};this.initCloseButton=function(){var r=document.createElement("a");r.setAttribute("id","hopscotch-bubble-close");r.setAttribute("href","#");r.setAttribute("title",h.closeTooltip);r.innerHTML="x";g.addClickListener(r,function(s){window.hopscotch.endTour();g.evtPreventDefault(s)});this.closeBtnEl=r;this.containerEl.appendChild(r);return this};this.initArrow=function(){this.arrowEl=document.createElement("div");this.arrowEl.setAttribute("id","hopscotch-bubble-arrow");this.containerEl.appendChild(this.arrowEl)};this.renderStep=function(t,x,u,y){var z=this,s=g.valOrDefault(t.showNextButton,q.showNextButton),r=g.valOrDefault(t.showPrevButton,q.showPrevButton),w,v;k=t;if(t.title){this.setTitle(t.title)}if(t.content){this.setContent(t.content)}this.setNum(x);this.showPrevButton(this.prevBtnEl&&r&&x>0);this.showNextButton(this.nextBtnEl&&s&&!u);if(u){g.removeClass(this.doneBtnEl,"hide")}else{g.addClass(this.doneBtnEl,"hide")}this.setArrow(t.orientation);w=g.getPixelValue(t.width)||q.bubbleWidth;v=g.valOrDefault(t.padding,q.bubblePadding);this.containerEl.style.width=w+"px";this.containerEl.style.padding=v+"px";if(t.orientation==="top"){setTimeout(function(){m(z,t);if(y){y()}},5)}else{m(this,t);if(y){y()}}o=t.prevCallback;p=t.nextCallback;return this};this.setTitle=function(r){if(r){this.titleEl.innerHTML=r;g.removeClass(this.titleEl,"hide")}else{g.addClass(this.titleEl,"hide")}return this};this.setContent=function(r){if(r){this.contentEl.innerHTML=r;g.removeClass(this.contentEl,"hide")}else{g.addClass(this.contentEl,"hide")}return this};this.setNum=function(r){if(h.stepNums&&r<h.stepNums.length){r=h.stepNums[r]}else{r=r+1}this.numberEl.innerHTML=r};this.setArrow=function(r){if(r==="top"){this.arrowEl.className="down"}else{if(r==="bottom"){this.arrowEl.className="up"}else{if(r==="left"){this.arrowEl.className="right"}else{if(r==="right"){this.arrowEl.className="left"}}}}};this.show=function(){var r=this;if(q.animate){setTimeout(function(){g.addClass(r.element,"animate")},50)}g.removeClass(this.element,"hide");j=true;return this};this.hide=function(){g.addClass(this.element,"hide");g.removeClass(this.element,"animate");j=false;return this};this.showPrevButton=function(r,s){l(this.prevBtnEl,r,s)};this.showNextButton=function(r,s){l(this.nextBtnEl,r,s)};this.showCloseButton=function(r,s){l(this.closeBtnEl,r,s)};this.initAnimate=function(){var r=this;setTimeout(function(){g.addClass(r.element,"animate")},50)};this.removeAnimate=function(){g.removeClass(this.element,"animate")};this.init()};i=function(j){var q,l,o,k,s,n,m=function(){if(!q){q=new c(l)}return q},r=function(){return o.steps[k]},p=function(){var J=m().element,F=g.getPixelValue(J.style.top),E=F+g.getPixelValue(J.offsetHeight),C=document.getElementById(r().targetId),K=C.getBoundingClientRect(),H=K.top+g.getScrollTop(),D=K.bottom+g.getScrollTop(),A=(F<H)?F:H,t=(E>D)?E:D,G=g.getScrollTop(),v=G+g.getWindowHeight(),w=A-50,u,z,y,I,x,B;if(a){$("body, html").animate({scrollTop:w},l.scrollDuration);return}else{if(typeof YAHOO!==f&&typeof YAHOO.env!==f&&typeof YAHOO.env.ua!==f&&typeof YAHOO.util!==f&&typeof YAHOO.util.Scroll!==f){u=YAHOO.env.ua.webkit?document.body:document.documentElement;y=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:undefined;z=new YAHOO.util.Scroll(u,{scroll:{to:[0,w]}},l.scrollDuration/1000,y);z.animate();return}}if(w<0){w=0}if(A>=G&&A<=G+50){return}if(A<G||t>v){if(l.smoothScroll){I=(G>A)?-1:1;x=Math.abs(G-A)/(l.scrollDuration/10);B=setInterval(function(){var M=g.getScrollTop(),L=M+(I*x);if((I>0&&L>=w)||I<0&&L<=w){L=w;clearInterval(B)}window.scrollTo(0,L);if(g.getScrollTop()===M){clearInterval(B)}},10)}else{window.scrollTo(0,w)}}};this.init=function(){var t,u;if(j){this.configure(j)}t=g.getState("hopscotch.tour.next");if(t){u=t.split(":");s=u[0];n=parseInt(u[1],10);if(u.length>2&&u[2]==="mp"){++n}}};this.loadTour=function(v){var u={},t,w;o=v;for(w in v){if(v.hasOwnProperty(w)&&w!=="id"&&w!=="steps"){u[w]=v[w]}}this.configure(u);t=m();t.showPrevButton(l.showPrevButton,true);t.showNextButton(l.showNextButton,true)};this.startTour=function(){var t;if(!o){throw"Need to load a tour before you start it!"}if(o.id===s&&typeof n!==f){k=n;if(!document.getElementById(o.steps[k].targetId)){if(k<=0||!document.getElementById(o.steps[--k].targetId)){this.endTour(false);return}}}else{k=0}this.showStep(k);t=m().show();if(l.animate){t.initAnimate()}this.isActive=true};this.showStep=function(w){var x=o.steps[w],v=o.steps.length,u=o.id+":"+w,t=m();if(!o){throw"No tour currently selected!"}k=w;t.renderStep(x,w,(w===v-1),p);if(x.multiPage){u+=":mp"}g.setState("hopscotch.tour.next",u,7)};this.prevStep=function(){if(k>0){this.showStep(--k)}};this.nextStep=function(){if(l.allNextCallback){l.allNextCallback(r(),k)}if(k<o.steps.length-1){this.showStep(++k)}};this.endTour=function(u){var t=m();u=g.valOrDefault(u,true);t.hide();k=n=0;if(u){g.clearState("hopscotch.tour.next")}this.isActive=false};this.configure=function(t){if(!l){l={}}g.extend(l,t);l.animate=g.valOrDefault(l.animate,false);l.smoothScroll=g.valOrDefault(l.smoothScroll,true);l.scrollDuration=g.valOrDefault(l.scrollDuration,1000);l.showCloseButton=g.valOrDefault(l.showCloseButton,true);l.showPrevButton=g.valOrDefault(l.showPrevButton,false);l.showNextButton=g.valOrDefault(l.showNextButton,true);l.bubbleWidth=g.valOrDefault(l.bubbleWidth,280);l.bubblePadding=g.valOrDefault(l.bubblePadding,10);l.arrowWidth=g.valOrDefault(l.arrowWidth,20);l.allNextCallback=g.valOrDefault(l.allNextCallback,null);if(t){g.extend(h,t.i18n)}if(l.animate){m().initAnimate()}else{m().removeAnimate()}m().showPrevButton(l.showPrevButton,true);m().showNextButton(l.showNextButton,true);m().showCloseButton(l.showCloseButton,true)};this.init(j);this.clearCookie=function(){g.clearState("hopscotch.tour.next")}};window.hopscotch=new i()}());
\ No newline at end of file
diff --git a/js/hopscotch.js b/js/hopscotch.js
index 163638f4..6a39f1b5 100644
--- a/js/hopscotch.js
+++ b/js/hopscotch.js
@@ -8,9 +8,9 @@
  *
  * TODO:
  * =====
- * event listener for window resize? (to reposition bubble);
  * test css conflicts on different sites
  * improve auto-scrolling?
+ * create hopscotch-jquery.js and hopscotch-yui.js?? blaarlkghiidsfffzp\09u93}%^*(!!
  *
  * position screws up when you align it with a position:fixed element
  * delay for displaying a step
@@ -20,10 +20,6 @@
  *
  * in addition to targetId, do we want to support specifying targetEl directly?
  *
- * how to i18n the step numbers?
- *
- * every-step callback
- *
  * http://daneden.me/animate/ for bounce animation
  *
  */
@@ -31,14 +27,17 @@
 (function() {
   var Hopscotch,
       HopscotchBubble,
+      HopscotchI18N,
       utils,
-      hasJquery         = (typeof jQuery !== 'undefined'),
+      undefinedStr      = 'undefined',
+      hasJquery         = (typeof window.jQuery !== undefinedStr),
+      hasLocalStorage   = (typeof window.localStorage !== undefinedStr),
       docStyle          = document.body.style,
-      hasCssTransitions = (typeof docStyle.MozTransition !== 'undefined' ||
-                           typeof docStyle.MsTransition !== 'undefined' ||
-                           typeof docStyle.webkitTransition !== 'undefined' ||
-                           typeof docStyle.OTransition !== 'undefined' ||
-                           typeof docStyle.transition !== 'undefined');
+      hasCssTransitions = (typeof docStyle.MozTransition    !== undefinedStr ||
+                           typeof docStyle.MsTransition     !== undefinedStr ||
+                           typeof docStyle.webkitTransition !== undefinedStr ||
+                           typeof docStyle.OTransition      !== undefinedStr ||
+                           typeof docStyle.transition       !== undefinedStr);
 
   if (window.hopscotch) {
     // Hopscotch already exists.
@@ -87,40 +86,36 @@
 
       if (hasJquery) {
         $(domEl).removeClass(classToRemove);
-        return;
       }
-
-      domClasses = domEl.className.split(' ');
-      for (i = 0, len = domClasses.length; i < len; ++i) {
-        if (domClasses[i] === classToRemove) {
-          break;
+      else {
+        domClasses = domEl.className.split(' ');
+        for (i = 0, len = domClasses.length; i < len; ++i) {
+          if (domClasses[i] === classToRemove) {
+            break;
+          }
         }
-      }
 
-      if (i < len) {
-        domClasses.splice(i, 1); // remove class from list
-        domEl.className = domClasses.join(' ');
+        if (i < len) {
+          domClasses.splice(i, 1); // remove class from list
+          domEl.className = domClasses.join(' ');
+        }
       }
     },
 
     getPixelValue: function(val) {
-      switch(typeof val) {
-        case 'undefined':
-          return 0;
-        case 'string':
-          return parseInt(val, 10); 
-        default:
-          return val;
-      }
+      var valType = typeof val;
+      if (valType === 'number') { return val; }
+      if (valType === 'string') { return parseInt(val, 10); }
+      return 0;
     },
 
     // Inspired by Python...
     valOrDefault: function(val, valDefault) {
-      return typeof val !== 'undefined' ? val : valDefault;
+      return typeof val !== undefinedStr ? val : valDefault;
     },
 
     getScrollTop: function() {
-      if (typeof window.pageYOffset !== 'undefined') {
+      if (typeof window.pageYOffset !== undefinedStr) {
         return window.pageYOffset;
       }
       else {
@@ -130,7 +125,7 @@
     },
 
     getScrollLeft: function() {
-      if (typeof window.pageXOffset !== 'undefined') {
+      if (typeof window.pageXOffset !== undefinedStr) {
         return window.pageXOffset;
       }
       else {
@@ -140,30 +135,15 @@
     },
 
     getWindowHeight: function() {
-      if (window.innerHeight) {
-        return window.innerHeight;
-      }
-      else {
-        return document.documentElement.clientHeight;
-      }
+      return window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
     },
 
     getWindowWidth: function() {
-      if (window.innerWidth) {
-        return window.innerWidth;
-      }
-      else {
-        return document.documentElement.clientWidth;
-      }
+      return window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;
     },
 
-    addClickListener: function(el, fn, prvtDefault) {
-      if (el.addEventListener) {
-        el.addEventListener('click', fn);
-      }
-      else {
-        el.attachEvent('onclick', fn);
-      }
+    addClickListener: function(el, fn) {
+      return el.addEventListener ? el.addEventListener('click', fn) : el.attachEvent('onclick', fn);
     },
 
     evtPreventDefault: function(evt) {
@@ -184,31 +164,56 @@
       }
     },
 
-    // The following three cookie-related functions are borrowed from
+    // Tour session persistence for multi-page tours. Uses HTML5 localStorage if available, then
+    // falls back to using cookies.
+    //
+    // The following cookie-related logic is borrowed from:
     // http://www.quirksmode.org/js/cookies.html
-    createCookie: function(name,value,days) {
-      if (days) {
-        var date = new Date();
-        date.setTime(date.getTime()+(days*24*60*60*1000));
-        var expires = "; expires="+date.toGMTString();
-      }
-      else var expires = "";
-      document.cookie = name+"="+value+expires+"; path=/";
+
+    setState: function(name,value,days) {
+      var expires = '',
+          userDataName,
+          date;
+
+      if (hasLocalStorage) {
+        localStorage.setItem(name, value);
+      }
+      else {
+        if (days) {
+          date = new Date();
+          date.setTime(date.getTime()+(days*24*60*60*1000));
+          expires = "; expires="+date.toGMTString();
+        }
+        document.cookie = name+"="+value+expires+"; path=/";
+      }
     },
 
-    readCookie: function(name) {
-      var nameEQ = name + "=";
-      var ca = document.cookie.split(';');
-      for(var i=0;i < ca.length;i++) {
-        var c = ca[i];
-        while (c.charAt(0)==' ') c = c.substring(1,c.length);
-        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+    getState: function(name) {
+      var nameEQ = name + "=",
+          ca = document.cookie.split(';'),
+          i,
+          c;
+
+      if (hasLocalStorage) {
+        return localStorage.getItem(name);
+      }
+      else {
+        for(var i=0;i < ca.length;i++) {
+          c = ca[i];
+          while (c.charAt(0)===' ') c = c.substring(1,c.length);
+          if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
+        }
+        return null;
       }
-      return null;
     },
 
-    eraseCookie: function(name) {
-      this.createCookie(name,"",-1);
+    clearState: function(name) {
+      if (hasLocalStorage) {
+        localStorage.removeItem(name);
+      }
+      else {
+        this.setState(name,"",-1);
+      }
     }
   };
 
@@ -242,12 +247,85 @@
         // permanent is a flag that indicates we should never show the button
         classname = 'hide-all';
       }
-      if (typeof show === 'undefined') {
+      if (typeof show === undefinedStr) {
         show = true;
       }
 
       if (show) { utils.removeClass(btnEl, classname); }
       else { utils.addClass(btnEl, classname); }
+    },
+
+    /**
+     * setPosition
+     * ===========
+     * Sets the position of the bubble using the bounding rectangle of the
+     * target element and the orientation and offset information specified by
+     * the step JSON.
+     */
+    setPosition = function(bubble, step) {
+      var bubbleWidth,
+          bubbleHeight,
+          bubblePadding,
+          boundingRect,
+          top,
+          left,
+          targetEl    = document.getElementById(step.targetId),
+          el          = bubble.element,
+          arrowEl     = bubble.arrowEl,
+          arrowOffset = utils.getPixelValue(step.arrowOffset);
+
+      bubbleWidth = utils.getPixelValue(step.width) || opt.bubbleWidth;
+      bubblePadding = utils.valOrDefault(step.padding, opt.bubblePadding);
+
+      // SET POSITION
+      boundingRect = targetEl.getBoundingClientRect();
+      if (step.orientation === 'top') {
+        bubbleHeight = el.offsetHeight;
+        top = (boundingRect.top - bubbleHeight) - opt.arrowWidth;
+        left = boundingRect.left;
+      }
+      else if (step.orientation === 'bottom') {
+        top = boundingRect.bottom + opt.arrowWidth;
+        left = boundingRect.left;
+      }
+      else if (step.orientation === 'left') {
+        top = boundingRect.top;
+        left = boundingRect.left - bubbleWidth - 2*bubblePadding - opt.arrowWidth;
+      }
+      else if (step.orientation === 'right') {
+        top = boundingRect.top;
+        left = boundingRect.right + opt.arrowWidth;
+      }
+
+      if (!arrowOffset) {
+        arrowEl.style.top = '';
+        arrowEl.style.left = '';
+      }
+      else if (step.orientation === 'top' || step.orientation === 'bottom') {
+        arrowEl.style.left = arrowOffset + 'px';
+      }
+      else if (step.orientation === 'left' || step.orientation === 'right') {
+        arrowEl.style.top = arrowOffset + 'px';
+      }
+
+      // SET OFFSETS
+      left += utils.getPixelValue(step.xOffset);
+      top += utils.getPixelValue(step.yOffset);
+
+      // ADJUST TOP FOR SCROLL POSITION
+      top += utils.getScrollTop();
+      left += utils.getScrollLeft();
+
+      if (!hasCssTransitions && hasJquery && opt.animate) {
+        $(el).animate({
+          top: top + 'px',
+          left: left + 'px'
+        });
+      }
+      else { // hasCssTransitions || !hasJquery || !opt.animate
+        el.style.top = top + 'px';
+        el.style.left = left + 'px';
+      }
     };
 
     this.init = function() {
@@ -289,7 +367,7 @@
         cooldownActive = true;
         winResizeTimeout = setTimeout(function() {
           // currStep should not be null
-          self.setPosition(currStep);
+          setPosition(self, currStep);
           cooldownActive = false;
         }, 200);
       };
@@ -357,9 +435,9 @@
     };
 
     this.renderStep = function(step, idx, isLast, callback) {
-      var self = this,
-          showNext = (typeof step.showNextBtn === 'undefined' || step.showNextBtn),
-          showPrev = (typeof step.showPrevBtn === 'undefined' || step.showPrevBtn),
+      var self     = this,
+          showNext = utils.valOrDefault(step.showNextButton, opt.showNextButton),
+          showPrev = utils.valOrDefault(step.showPrevButton, opt.showPrevButton),
           bubbleWidth,
           bubblePadding;
 
@@ -381,7 +459,7 @@
       this.setArrow(step.orientation);
 
       // Set dimensions
-      bubbleWidth = utils.getPixelValue(step.width) || opt.bubbleWidth;
+      bubbleWidth   = utils.getPixelValue(step.width) || opt.bubbleWidth;
       bubblePadding = utils.valOrDefault(step.padding, opt.bubblePadding);
       this.containerEl.style.width = bubbleWidth + 'px';
       this.containerEl.style.padding = bubblePadding + 'px';
@@ -389,13 +467,13 @@
       if (step.orientation === 'top') {
         // Timeout to get correct height of bubble for positioning.
         setTimeout(function() {
-          self.setPosition(step);
+          setPosition(self, step);
           if (callback) { callback(); }
         }, 5);
       }
       else {
         // Don't care about height for the other orientations.
-        this.setPosition(step);
+        setPosition(this, step);
         if (callback) { callback(); }
       }
 
@@ -489,80 +567,6 @@
       showButton(this.closeBtnEl, show, permanent);
     };
 
-    /**
-     * setPosition
-     * ===========
-     * Sets the position of the bubble using the bounding rectangle of the
-     * target element and the orientation and offset information specified by
-     * the step JSON.
-     */
-    this.setPosition = function(step) {
-      var bubbleWidth,
-          bubbleHeight,
-          bubblePadding,
-          boundingRect,
-          top,
-          left,
-          targetEl = document.getElementById(step.targetId),
-          el = this.element;
-
-      bubbleWidth = utils.getPixelValue(step.width) || opt.bubbleWidth;
-      bubblePadding = utils.valOrDefault(step.padding, opt.bubblePadding);
-
-      // SET POSITION
-      boundingRect = targetEl.getBoundingClientRect();
-      if (step.orientation === 'top') {
-        bubbleHeight = el.offsetHeight;
-        top = (boundingRect.top - bubbleHeight) - opt.arrowWidth;
-        left = boundingRect.left;
-      }
-      else if (step.orientation === 'bottom') {
-        top = boundingRect.bottom + opt.arrowWidth;
-        left = boundingRect.left;
-      }
-      else if (step.orientation === 'left') {
-        top = boundingRect.top;
-        left = boundingRect.left - bubbleWidth - 2*bubblePadding - opt.arrowWidth;
-      }
-      else if (step.orientation === 'right') {
-        top = boundingRect.top;
-        left = boundingRect.right + opt.arrowWidth;
-      }
-
-      if (!step.arrowOffset) {
-        this.arrowEl.style.top = '';
-        this.arrowEl.style.left = '';
-      }
-      else if (step.orientation === 'top' || step.orientation === 'bottom') {
-        this.arrowEl.style.left = step.arrowOffset + 'px';
-      }
-      else if (step.orientation === 'left' || step.orientation === 'right') {
-        this.arrowEl.style.top = step.arrowOffset + 'px';
-      }
-
-      // SET OFFSETS
-      if (step.xOffset) {
-        left += utils.getPixelValue(step.xOffset);
-      }
-      if (step.yOffset) {
-        top += utils.getPixelValue(step.yOffset);
-      }
-
-      // ADJUST TOP FOR SCROLL POSITION
-      top += utils.getScrollTop();
-      left += utils.getScrollLeft();
-
-      if (!hasCssTransitions && hasJquery && opt.animate) {
-        $(el).animate({
-          top: top + 'px',
-          left: left + 'px'
-        });
-      }
-      else { // hasCssTransitions || !hasJquery || !opt.animate
-        el.style.top = top + 'px';
-        el.style.left = left + 'px';
-      }
-    };
 
     /**
      * initAnimate
@@ -597,7 +601,7 @@
     var bubble,
         opt,
         currTour,
-        currStep,
+        currStepNum,
         cookieTourId,
         cookieTourStep,
 
@@ -611,7 +615,6 @@
       if (!bubble) {
         bubble = new HopscotchBubble(opt);
       }
-
       return bubble;
     },
 
@@ -651,11 +654,11 @@
         $('body, html').animate({ scrollTop: scrollToVal }, opt.scrollDuration);
         return;
       }
-      else if (typeof YAHOO             !== 'undefined' &&
-               typeof YAHOO.env         !== 'undefined' &&
-               typeof YAHOO.env.ua      !== 'undefined' &&
-               typeof YAHOO.util        !== 'undefined' &&
-               typeof YAHOO.util.Scroll !== 'undefined') {
+      else if (typeof YAHOO             !== undefinedStr &&
+               typeof YAHOO.env         !== undefinedStr &&
+               typeof YAHOO.env.ua      !== undefinedStr &&
+               typeof YAHOO.util        !== undefinedStr &&
+               typeof YAHOO.util.Scroll !== undefinedStr) {
         scrollEl = YAHOO.env.ua.webkit ? document.body : document.documentElement;
         yuiEase = YAHOO.util.Easing ? YAHOO.util.Easing.easeOut : undefined;
         yuiAnim = new YAHOO.util.Scroll(scrollEl, {
@@ -715,7 +718,7 @@
         this.configure(initOptions);
       }
 
-      tourState = utils.readCookie('hopscotch.tour.next');
+      tourState = utils.getState('hopscotch.tour.next');
       if (tourState) {
         tourPair      = tourState.split(':');
         cookieTourId   = tourPair[0]; // selecting tour is not supported by this framework.
@@ -735,7 +738,8 @@
      */
     this.loadTour = function(tour) {
       var tmpOpt = {},
-          bubble;
+          bubble,
+          prop;
       currTour = tour;
 
       // Set tour-specific configurations
@@ -772,11 +776,11 @@
       }
 
       // Check if we are resuming state.
-      if (currTour.id === cookieTourId && typeof cookieTourStep !== 'undefined') {
+      if (currTour.id === cookieTourId && typeof cookieTourStep !== undefinedStr) {
         currStepNum = cookieTourStep;
         if (!document.getElementById(currTour.steps[currStepNum].targetId)) {
           // May have just refreshed the page. Previous step should work. (but don't change cookie)
-          if (!document.getElementById(currTour.steps[--currStepNum].targetId)) {
+          if (currStepNum <= 0 || !document.getElementById(currTour.steps[--currStepNum].targetId)) {
             // Previous target doesn't exist either. The user may have just
             // clicked on a link that wasn't part of the tour. Let's just "end"
             // the tour and depend on the cookie to pick the user back up where
@@ -802,8 +806,8 @@
     this.showStep = function(stepIdx) {
       var step         = currTour.steps[stepIdx],
           numTourSteps = currTour.steps.length,
-          btnToHide    = null,
-          cookieVal    = currTour.id + ':' + stepIdx;
+          cookieVal    = currTour.id + ':' + stepIdx,
+          bubble       = getBubble();
 
       if (!currTour) {
         throw "No tour currently selected!";
@@ -811,12 +815,12 @@
 
       // Update bubble for current step
       currStepNum = stepIdx;
-      getBubble().renderStep(step, stepIdx, (stepIdx === numTourSteps - 1), adjustWindowScroll);
+      bubble.renderStep(step, stepIdx, (stepIdx === numTourSteps - 1), adjustWindowScroll);
 
       if (step.multiPage) {
         cookieVal += ':mp';
       }
-      utils.createCookie('hopscotch.tour.next', cookieVal, 7);
+      utils.setState('hopscotch.tour.next', cookieVal, 7);
     };
 
     this.prevStep = function() {
@@ -840,11 +844,12 @@
      * Cancels out of an active tour. No state is preserved.
      */
     this.endTour = function(clearCookie) {
+      var bubble = getBubble()
       clearCookie = utils.valOrDefault(clearCookie, true);
-      getBubble().hide();
+      bubble.hide();
       currStepNum = cookieTourStep = 0;
       if (clearCookie) {
-        utils.eraseCookie('hopscotch.tour.next');
+        utils.clearState('hopscotch.tour.next');
       }
       this.isActive = false;
     };
@@ -874,9 +879,10 @@
      *                             use own CSS. Defaults to 20.
      * allNextCallback: Function - A callback to be invoked after every click on
      *                             a "Next" button.
-     * i18n:            TODO
-     * stepNums:        Array<String> - This option is provided mainly just for i18n
-     *                             purposes. Provide a list of strings to be shown as
+     *
+     * i18n:            Object   - For i18n purposes. Allows you to change the
+     *                             text of button labels and step numbers.
+     * i18n.stepNums:   Array<String> - Provide a list of strings to be shown as
      *                             the step number, based on index of array. Unicode
      *                             characters are supported. (e.g., ['&#x4e00;',
      *                             '&#x4e8c;', '&#x4e09;']) If there are more steps
@@ -887,15 +893,16 @@
       if (!opt) {
         opt = {};
       }
+
       utils.extend(opt, options);
       opt.animate         = utils.valOrDefault(opt.animate, false);
       opt.smoothScroll    = utils.valOrDefault(opt.smoothScroll, true);
       opt.scrollDuration  = utils.valOrDefault(opt.scrollDuration, 1000);
       opt.showCloseButton = utils.valOrDefault(opt.showCloseButton, true);
-      opt.bubbleWidth     = utils.valOrDefault(opt.bubbleWidth, 280);
-      opt.bubblePadding   = utils.valOrDefault(opt.bubblePadding, 10);
       opt.showPrevButton  = utils.valOrDefault(opt.showPrevButton, false);
       opt.showNextButton  = utils.valOrDefault(opt.showNextButton, true);
+      opt.bubbleWidth     = utils.valOrDefault(opt.bubbleWidth, 280);
+      opt.bubblePadding   = utils.valOrDefault(opt.bubblePadding, 10);
       opt.arrowWidth      = utils.valOrDefault(opt.arrowWidth, 20);
       opt.allNextCallback = utils.valOrDefault(opt.allNextCallback, null);
 
@@ -910,9 +917,9 @@
         getBubble().removeAnimate();
       }
 
-      getBubble().showPrevButton(opt.showPrevButton, true)
-      getBubble().showNextButton(opt.showNextButton, true)
-      getBubble().showCloseButton(opt.showCloseButton, true)
+      getBubble().showPrevButton(opt.showPrevButton, true);
+      getBubble().showNextButton(opt.showNextButton, true);
+      getBubble().showCloseButton(opt.showCloseButton, true);
     };
 
     this.init(initOptions);
@@ -921,7 +928,7 @@
     // =====
     // REMOVE THIS LATER!!!
     this.clearCookie = function() {
-      utils.eraseCookie('hopscotch.tour.next');
+      utils.clearState('hopscotch.tour.next');
     };
   };