diff --git a/css/hopscotch.css b/css/hopscotch.css
index 50b2a4d2..d08771bc 100644
--- a/css/hopscotch.css
+++ b/css/hopscotch.css
@@ -7,8 +7,8 @@ div#hopscotch-bubble{background-color:#ffffff;border:6px solid #000000;border:6p
 div#hopscotch-bubble.invisible{opacity:0;}
 div#hopscotch-bubble.hide,div#hopscotch-bubble .hide,div#hopscotch-bubble .hide-all{display:none;}
 div#hopscotch-bubble h3,div#hopscotch-bubble #hopscotch-bubble-number{font-size:18px;}
-div#hopscotch-bubble h3{font-weight:bold;margin:0 15px 0 0;padding:0;}
-div#hopscotch-bubble #hopscotch-bubble-container{padding:15px;position:relative;-webkit-font-smoothing:antialiased;}div#hopscotch-bubble #hopscotch-bubble-container p{line-height:17px;margin:10px 0;padding:0;}
+div#hopscotch-bubble h3{font-family:Helvetica,Arial;font-weight:bold;margin:0 15px 0 0;padding:0;}
+div#hopscotch-bubble #hopscotch-bubble-container{padding:15px;position:relative;-webkit-font-smoothing:antialiased;}div#hopscotch-bubble #hopscotch-bubble-container p{font-family:Helvetica,Arial;line-height:17px;margin:10px 0;padding:0;}
 div#hopscotch-bubble #hopscotch-bubble-content{margin:0 0 0 40px;}
 div#hopscotch-bubble #hopscotch-bubble-close{color:#000;background:transparent url(../img/sprite_li.png) -200px -100px no-repeat;display:block;margin:15px 10px 0 0;position:absolute;text-decoration:none;text-indent:-9999px;width:10px;height:10px;top:0;right:0;}div#hopscotch-bubble #hopscotch-bubble-close.hide,div#hopscotch-bubble #hopscotch-bubble-close.hide-all{display:none;}
 div#hopscotch-bubble #hopscotch-bubble-number{background:transparent url(../img/sprite_li.png) 0 0 no-repeat;color:#fff;display:block;float:left;line-height:33px;margin:0 10px 0 0;text-align:center;width:30px;height:30px;}
diff --git a/css/hopscotch.less b/css/hopscotch.less
index 100e3ae4..64184ae5 100644
--- a/css/hopscotch.less
+++ b/css/hopscotch.less
@@ -52,6 +52,7 @@ div#hopscotch-bubble {
   }
 
   h3 {
+    font-family: @bubbleFontFamily;
     font-weight: bold;
     margin: 0 @bubblePadding 0 0;
     padding: 0;
@@ -63,6 +64,7 @@ div#hopscotch-bubble {
     -webkit-font-smoothing: antialiased; /* to fix text flickering */
 
     p {
+      font-family: @bubbleFontFamily;
       line-height: 17px;
       margin: 10px 0;
       padding: 0;
diff --git a/index.html b/index.html
index b305810e..e5d25c04 100644
--- a/index.html
+++ b/index.html
@@ -19,13 +19,19 @@
         background-color: #fff;
         border: 5px solid #000;
         padding: 20px;
-        position: absolute;
+        position: fixed;
         top: 0;
         right: 0;
+        z-index: 10;
       }
       #debug h3 {
         margin: 10px 0;
       }
+      #debug-output,
+      #debug-output p {
+        margin: 0;
+        padding: 0;
+      }
       .img-container {
         text-align: center;
       }
@@ -81,21 +87,46 @@ <h3>Tour Options</h3>
       </label>
       <br/>
       <label>Go to step number: <input id="gototext" type="text" size="5"><input id="gotobtn" type="button" value="Go!"></label>
+      <div id="debug-output">
+      </div>
     </div>
     <!--
     <script src="js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
     <script src="js/yui/build/animation/animation-min.js"></script>
-    <script src="js/jquery-1.7.2.js"></script>
     <script src="bootstrap/js/bootstrap-tooltip.js""></script>
     <script src="bootstrap/js/bootstrap-popover.js""></script>
     -->
+    <script src="js/jquery-1.7.2.js"></script>
+    <!--<script src="js/hopscotch_jquery.js"></script>-->
     <script src="js/hopscotch.js"></script>
     <script src="js/exampletour.js"></script>
     <script src="js/debug.js"></script>
     <script>
-      hopscotch.loadTour(tour);
       //hopscotch.clearCookie();
-      hopscotch.startTour();
+      var printLog = function(str) {
+        var el = document.getElementById('debug-output'),
+            newEl = document.createElement('p');
+        newEl.innerHTML = str;
+        el.appendChild(newEl);
+      },
+      onStart = function(tourId) {
+        printLog('global start ' + tourId);
+      },
+      onEnd = function(tourId) {
+        printLog('global end ' + tourId);
+      },
+      onNext = function(tourId, stepNum) {
+        printLog('global next ' + tourId + ' ' + stepNum);
+      },
+      onPrev = function(tourId, stepNum) {
+        printLog('global prev ' + tourId + ' ' + stepNum);
+      };
+      hopscotch.addCallback('start', onStart)
+               .addCallback('end', onEnd)
+               .addCallback('next', onNext)
+               .addCallback('prev', onPrev);
+
+      hopscotch.startTour(tour);
     </script>
   </body>
 </html>
diff --git a/js/debug.js b/js/debug.js
index 544f5ffc..6cff084e 100644
--- a/js/debug.js
+++ b/js/debug.js
@@ -67,8 +67,8 @@ for (i = 0, len = booleanControls.length; i < len; i++) {
   }
 }());
 
-// GO TO STEP NUM
 (function() {
+  // GO TO STEP NUM
   var gotobtn  = document.getElementById('gotobtn');
   addClickListener(gotobtn, function() {
     var gototext = document.getElementById('gototext');
@@ -79,8 +79,7 @@ for (i = 0, len = booleanControls.length; i < len; i++) {
   // START TOUR
   // ==========
   addClickListener(document.getElementById('startBtn'), function() {
-    hopscotch.loadTour(tour);
-    hopscotch.startTour();
+    hopscotch.startTour(tour);
   });
 
   // ========
diff --git a/js/exampletour.js b/js/exampletour.js
index b0f2ef0b..3a127526 100644
--- a/js/exampletour.js
+++ b/js/exampletour.js
@@ -7,17 +7,10 @@ var tour = {
       target: 'subheading',
       orientation: 'bottom',
       arrowOffset: 30,
+      nextOnTargetClick: true,
       onNext: function() {
         document.getElementById('pageTitle').style.color = '#f00';
-      },
-    },
-    {
-      title: 'Mission district',
-      content: 'Some sort of sound heat map in the mission? Did you notice that this bubble isn\'t completely aligned with this image? That\'s because I\'m using xOffset and yOffset options, which are available if you need to make slight positioning adjustments! Hopscotch has never been more fun!',
-      target: 'mission',
-      orientation: 'top',
-      xOffset: 100,
-      arrowOffset: 100
+      }
     },
     {
       title: 'Debug controls',
@@ -28,19 +21,29 @@ var tour = {
       height: 480,
       showSkip: true,
       fixedElement: true,
-      xOffset: 20,
+      //xOffset: 20,
       zindex: 15,
-      delay: 1000,
+      showPrevButton: true,
+      showNextButton: true,
+      delay: 5000,
       onPrev: function() {
         document.getElementById('pageTitle').style.color = '#000';
       }
     },
+    {
+      title: 'Mission district',
+      content: 'Some sort of sound heat map in the mission? Did you notice that this bubble isn\'t completely aligned with this image? That\'s because I\'m using xOffset and yOffset options, which are available if you need to make slight positioning adjustments! Hopscotch has never been more fun!',
+      target: 'mission',
+      orientation: 'top',
+      xOffset: 100,
+      arrowOffset: 100
+    },
     {
       title: 'Cool wave',
       content: 'This is a <b>colorful</b> wave. Here is the the <a href="http://imgur.com/s632o" target="_new">page</a> where I found it.',
       target: 'wave',
       orientation: 'bottom',
-      width: 500,
+      width: 500
       //xOffset: -50,
       //arrowOffset: 400,
       //showPrevButton: false
@@ -77,14 +80,12 @@ var tour = {
       xOffset: 200
     }
   ],
-  animate: false,
+  //animate: true,
   //smoothScroll: false,
   //showCloseButton: false,
-  //scrollTopMargin: 200,
-  showPrevButton: true,
-  showNextButton: true,
+  scrollTopMargin: 50,
   arrowWidth: 20,
-  scrollDuration: 500,
+  //scrollDuration: 2000,
   cookieName: 'li_hs',
   skipIfNoElement: true,
   onNext: function(tourId, idx) {
@@ -98,16 +99,18 @@ var tour = {
     }
   },
   onPrev: function(tourId, idx) {
-    console.log('tour prev ' + tourId + ' ' + idx);
+    printLog('tour prev ' + tourId + ' ' + idx);
   },
-  onStart: function(tourId) {
-    console.log('tour start ' + tourId);
+  onStart: function(tourId, idx) {
+    printLog('tour start ' + tourId + ' and idx is: ' + idx);
   },
   onEnd: function(tourId) {
-    console.log('tour end ' + tourId);
+    printLog('tour end ' + tourId);
+  },
+  onShow: function(tourId, idx) {
+    printLog('showing step: ' + tourId + ' ' + idx);
   },
   onError: function(tourId, idx) {
-    //alert('DANGER!!! tourId: ' + tourId + ' and idx: ' + idx);
     var newLi,
         list = document.getElementById('my-list');
     if (list) {
@@ -118,7 +121,7 @@ var tour = {
     }
   },
   onClose: function() {
-    console.log('closing');
+    printLog('closing');
   }
   //i18n: {
     ////nextBtn: 'Forward',
diff --git a/secondpage.html b/secondpage.html
index b2703c15..b7688523 100644
--- a/secondpage.html
+++ b/secondpage.html
@@ -16,9 +16,10 @@ <h1>Second Test Page</h1>
     <script src="js/exampletour.js"></script>
     <script src="js/hopscotch.js"></script>
     <script>
-      hopscotch.loadTour(tour);
       //hopscotch.clearCookie();
-      hopscotch.startTour();
+      var printLog = function() {
+      };
+      hopscotch.startTour(tour);
     </script>
   </body>
 </html>