bump version to 0.0.4

index.html

@@ -62,6 +62,7 @@ <h2>Debug controls</h2>
       <input id="startBtn" type="button" value="Start">
       <input id="endBtn" type="button" value="End">
       <input id="addCallout" type="button" value="addCallout">
+      <input id="rmCallout" type="button" value="rmCallout">
       <h3>Tour Options</h3>
       <label>
         <input type="checkbox" id="animateCheck"> animate
@@ -99,7 +100,7 @@ <h3>Tour Options</h3>
     -->
     <script src="js/jquery-1.7.2.js"></script>
     <!--<script src="js/hopscotch_jquery.js"></script>-->
-    <script src="js/hopscotch-0.0.3.js"></script>
+    <script src="js/hopscotch-0.0.4.js"></script>
     <script src="js/exampletour.js"></script>
     <script src="js/debug.js"></script>
     <script>

js/debug.js

@@ -89,6 +89,30 @@ for (i = 0, len = booleanControls.length; i < len; i++) {
     hopscotch.endTour();
   });
 
+  // ===========
+  // ADD CALLOUT
+  // ===========
+  addClickListener(document.getElementById('addCallout'), function() {
+    var mgr = hopscotch.getCalloutManager();
+    mgr.createCallout({
+      id: 'mycallout',
+      title: 'Title',
+      content: 'Content',
+      target: 'python',
+      orientation: 'left',
+      showNavButtons: false,
+      showNumber: false
+    });
+  });
+
+  // ==============
+  // REMOVE CALLOUT
+  // ==============
+  addClickListener(document.getElementById('rmCallout'), function() {
+    var mgr = hopscotch.getCalloutManager();
+    mgr.removeCallout('mycallout');
+  });
+
   // ===========
   // START TOUR2
   // ===========

secondpage.html

@@ -14,7 +14,7 @@ <h1>Second Test Page</h1>
       <img id="polarbears" src="http://imgur.com/MZuiD.jpg">
     </div>
     <script src="js/exampletour.js"></script>
-    <script src="js/hopscotch-0.0.3.js"></script>
+    <script src="js/hopscotch-0.0.4.js"></script>
     <script>
       //hopscotch.clearCookie();
       var printLog = function() {