From cc1bd9d5029144740b5a33a7ee53c3584361debd Mon Sep 17 00:00:00 2001
From: Gordon Koo <gordon@gordonkoo.com>
Date: Wed, 1 Aug 2012 17:04:43 -0700
Subject: [PATCH] added scrollTopMargin config option

---
 js/exampletour.js   | 1 +
 js/hopscotch-min.js | 2 +-
 js/hopscotch.js     | 8 ++++++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/js/exampletour.js b/js/exampletour.js
index 96c0ebd3..1bebe188 100644
--- a/js/exampletour.js
+++ b/js/exampletour.js
@@ -75,6 +75,7 @@ var tour = {
   animate: false,
   //smoothScroll: false,
   //showCloseButton: false,
+  scrollTopMargin: 200,
   showPrevButton: true,
   showNextButton: true,
   arrowWidth: 20,
diff --git a/js/hopscotch-min.js b/js/hopscotch-min.js
index d7b594ab..3ab3520d 100644
--- a/js/hopscotch-min.js
+++ b/js/hopscotch-min.js
@@ -1 +1 @@
-(function(){var k,e,j,i,h="undefined",g=false,a=false,b=(typeof window.jQuery!==h),d=(typeof window.localStorage!==h),f=document.body.style,c=(typeof f.MozTransition!==h||typeof f.MsTransition!==h||typeof f.webkitTransition!==h||typeof f.OTransition!==h||typeof f.transition!==h);if(window.hopscotch){return}window.addEventListener("load",function(){g=true;if(a){window.hopscotch.startTour()}});i={addClass:function(n,p){var m,o,l;if(b){$(n).addClass(p)}else{if(n.className.length===0){n.className=p}else{m=n.className.split(" ");for(o=0,l=m.length;o<l;++o){if(m[o]===p){return}}m.splice(0,0,p);n.className=m.join(" ")}}},removeClass:function(l,q){var p,t,r,o,m,s,n;if(b){$(l).removeClass(q)}else{t=q.split(" ");p=l.className.split(" ");for(o=0,s=t.length;o<s;++o){r=t[o];for(m=0,n=p.length;m<n;++m){if(p[m]===r){break}}if(m<n){p.splice(m,1)}}l.className=p.join(" ")}},getPixelValue:function(m){var l=typeof m;if(l==="number"){return m}if(l==="string"){return parseInt(m,10)}return 0},valOrDefault:function(m,l){return typeof m!==h?m:l},getScrollTop:function(){if(typeof window.pageYOffset!==h){return window.pageYOffset}else{return document.documentElement.scrollTop}},getScrollLeft:function(){if(typeof window.pageXOffset!==h){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(m,l){return m.addEventListener?m.addEventListener("click",l):m.attachEvent("onclick",l)},evtPreventDefault:function(l){if(l.preventDefault){l.preventDefault()}else{if(event){event.returnValue=false}}},extend:function(m,l){var n;for(n in l){if(l.hasOwnProperty(n)){m[n]=l[n]}}},setState:function(o,p,q){var l="",m,n;if(d){localStorage.setItem(o,p)}else{if(q){n=new Date();n.setTime(n.getTime()+(q*24*60*60*1000));l="; expires="+n.toGMTString()}document.cookie=o+"="+p+l+"; path=/"}},getState:function(m){var o=m+"=",l=document.cookie.split(";"),n,p;if(d){return localStorage.getItem(m)}else{for(var n=0;n<l.length;n++){p=l[n];while(p.charAt(0)===" "){p=p.substring(1,p.length)}if(p.indexOf(o)===0){return p.substring(o.length,p.length)}}return null}},clearState:function(l){if(d){localStorage.removeItem(l)}else{this.setState(l,"",-1)}}};j={stepNums:null,nextBtn:"Next",prevBtn:"Back",doneBtn:"Done",closeTooltip:"Close"};e=function(s){var q,r,m,l=false,p=function(v,u){var t=document.createElement("input");t.setAttribute("id",v);t.setAttribute("type","button");t.setAttribute("value",u);i.addClass(t,"hopscotch-nav-button");return t},n=function(u,t,w){var v="hide";if(w){v="hide-all"}if(typeof t===h){t=true}if(t){i.removeClass(u,v)}else{i.addClass(u,v)}},o=function(A,w,H){var D,t,B,v,y,z,C,x,G=document.getElementById(w.targetId),u=A.element,F=A.arrowEl,E=i.getPixelValue(w.arrowOffset);H=i.valOrDefault(H,true);D=i.getPixelValue(w.width)||s.bubbleWidth;B=i.valOrDefault(w.padding,s.bubblePadding);i.removeClass(u,"bounce-down bounce-up bounce-left bounce-right");v=G.getBoundingClientRect();if(w.orientation==="top"){t=u.offsetHeight;C=(v.top-t)-s.arrowWidth;x=v.left;z="bounce-down"}else{if(w.orientation==="bottom"){C=v.bottom+s.arrowWidth;x=v.left;z="bounce-up"}else{if(w.orientation==="left"){C=v.top;x=v.left-D-2*B-s.arrowWidth;z="bounce-right"}else{if(w.orientation==="right"){C=v.top;x=v.right+s.arrowWidth;z="bounce-left"}}}}if(!E){F.style.top="";F.style.left=""}else{if(w.orientation==="top"||w.orientation==="bottom"){F.style.left=E+"px"}else{if(w.orientation==="left"||w.orientation==="right"){F.style.top=E+"px"}}}x+=i.getPixelValue(w.xOffset);C+=i.getPixelValue(w.yOffset);C+=i.getScrollTop();x+=i.getScrollLeft();if(s.animate){if(!c&&b&&s.animate){$(u).animate({top:C+"px",left:x+"px"})}else{u.style.top=C+"px";u.style.left=x+"px"}}else{u.style.top=C+"px";u.style.left=x+"px";if(H){y=s.smoothScroll?s.scrollDuration:0;setTimeout(function(){i.addClass(u,z)},y);setTimeout(function(){i.removeClass(u,z)},y+2000)}}};this.init=function(){var w=document.createElement("div"),x=document.createElement("div"),v=this,u=false,t;this.element=w;this.containerEl=x;this.titleEl=document.createElement("h3");this.numberEl=document.createElement("span");this.contentEl=document.createElement("p");w.setAttribute("id","hopscotch-bubble");i.addClass(w,"animated");x.setAttribute("id","hopscotch-bubble-container");this.numberEl.setAttribute("id","hopscotch-bubble-number");x.appendChild(this.titleEl);x.appendChild(this.numberEl);x.appendChild(this.contentEl);w.appendChild(x);this.initNavButtons();if(s&&s.showCloseButton){this.initCloseButton()}this.initArrow();window.onresize=function(){if(u||!l){return}u=true;t=setTimeout(function(){o(v,m,false);u=false},200)};document.body.appendChild(w);return this};this.initNavButtons=function(){var t=document.createElement("div");this.prevBtnEl=p("hopscotch-prev",j.prevBtn);this.nextBtnEl=p("hopscotch-next",j.nextBtn);this.doneBtnEl=p("hopscotch-done",j.doneBtn);i.addClass(this.doneBtnEl,"hide");t.appendChild(this.prevBtnEl);t.appendChild(this.nextBtnEl);t.appendChild(this.doneBtnEl);i.addClickListener(this.prevBtnEl,function(u){if(q){q()}window.hopscotch.prevStep()});i.addClickListener(this.nextBtnEl,function(u){if(r){r()}window.hopscotch.nextStep()});i.addClickListener(this.doneBtnEl,window.hopscotch.endTour);t.setAttribute("id","hopscotch-actions");this.buttonsEl=t;this.containerEl.appendChild(t);return this};this.initCloseButton=function(){var t=document.createElement("a");t.setAttribute("id","hopscotch-bubble-close");t.setAttribute("href","#");t.setAttribute("title",j.closeTooltip);t.innerHTML="x";i.addClickListener(t,function(u){window.hopscotch.endTour();i.evtPreventDefault(u)});this.closeBtnEl=t;this.containerEl.appendChild(t);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(v,z,w,A){var B=this,u=i.valOrDefault(v.showNextButton,s.showNextButton),t=i.valOrDefault(v.showPrevButton,s.showPrevButton),y,x;m=v;if(v.title){this.setTitle(v.title)}if(v.content){this.setContent(v.content)}this.setNum(z);this.showPrevButton(this.prevBtnEl&&t&&z>0);this.showNextButton(this.nextBtnEl&&u&&!w);if(w){i.removeClass(this.doneBtnEl,"hide")}else{i.addClass(this.doneBtnEl,"hide")}this.setArrow(v.orientation);y=i.getPixelValue(v.width)||s.bubbleWidth;x=i.valOrDefault(v.padding,s.bubblePadding);this.containerEl.style.width=y+"px";this.containerEl.style.padding=x+"px";if(v.orientation==="top"){setTimeout(function(){o(B,v);if(A){A()}},5)}else{o(this,v);if(A){A()}}q=v.onPrev;r=v.onNext;return this};this.setTitle=function(t){if(t){this.titleEl.innerHTML=t;i.removeClass(this.titleEl,"hide")}else{i.addClass(this.titleEl,"hide")}return this};this.setContent=function(t){if(t){this.contentEl.innerHTML=t;i.removeClass(this.contentEl,"hide")}else{i.addClass(this.contentEl,"hide")}return this};this.setNum=function(t){if(j.stepNums&&t<j.stepNums.length){t=j.stepNums[t]}else{t=t+1}this.numberEl.innerHTML=t};this.setArrow=function(t){if(t==="top"){this.arrowEl.className="down"}else{if(t==="bottom"){this.arrowEl.className="up"}else{if(t==="left"){this.arrowEl.className="right"}else{if(t==="right"){this.arrowEl.className="left"}}}}};this.show=function(){var t=this;if(s.animate){setTimeout(function(){i.addClass(t.element,"animate")},50)}i.removeClass(this.element,"hide");l=true;return this};this.hide=function(){i.addClass(this.element,"hide");i.removeClass(this.element,"animate");l=false;return this};this.showPrevButton=function(t,u){n(this.prevBtnEl,t,u)};this.showNextButton=function(t,u){n(this.nextBtnEl,t,u)};this.showCloseButton=function(t,u){n(this.closeBtnEl,t,u)};this.initAnimate=function(){var t=this;setTimeout(function(){i.addClass(t.element,"animate")},50)};this.removeAnimate=function(){i.removeClass(this.element,"animate")};this.init()};k=function(l){var s,n,q,m,u,p,o=function(){if(!s){s=new e(n)}return s},t=function(){return q.steps[m]},r=function(){var L=o().element,H=i.getPixelValue(L.style.top),G=H+i.getPixelValue(L.offsetHeight),E=document.getElementById(t().targetId),M=E.getBoundingClientRect(),J=M.top+i.getScrollTop(),F=M.bottom+i.getScrollTop(),C=(H<J)?H:J,v=(G>F)?G:F,I=i.getScrollTop(),x=I+i.getWindowHeight(),y=C-50,w,B,A,K,z,D;if(b){$("body, html").animate({scrollTop:y},n.scrollDuration);return}else{if(typeof YAHOO!==h&&typeof YAHOO.env!==h&&typeof YAHOO.env.ua!==h&&typeof YAHOO.util!==h&&typeof YAHOO.util.Scroll!==h){w=YAHOO.env.ua.webkit?document.body:document.documentElement;A=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:undefined;B=new YAHOO.util.Scroll(w,{scroll:{to:[0,y]}},n.scrollDuration/1000,A);B.animate();return}}if(y<0){y=0}if(C>=I&&C<=I+50){return}if(C<I||v>x){if(n.smoothScroll){K=(I>C)?-1:1;z=Math.abs(I-C)/(n.scrollDuration/10);D=setInterval(function(){var O=i.getScrollTop(),N=O+(K*z);if((K>0&&N>=y)||K<0&&N<=y){N=y;clearInterval(D)}window.scrollTo(0,N);if(i.getScrollTop()===O){clearInterval(D)}},10)}else{window.scrollTo(0,y)}}};this.init=function(){var v,w;if(l){this.configure(l)}};this.loadTour=function(x){var w={},v,y;q=x;for(y in x){if(x.hasOwnProperty(y)&&y!=="id"&&y!=="steps"){w[y]=x[y]}}this.configure(w);tourState=i.getState(n.cookieName);if(tourState){tourPair=tourState.split(":");u=tourPair[0];p=parseInt(tourPair[1],10);if(tourPair.length>2&&tourPair[2]==="mp"){++p}}v=o();v.showPrevButton(n.showPrevButton,true);v.showNextButton(n.showNextButton,true)};this.startTour=function(){var v;if(!q){throw"Need to load a tour before you start it!"}if(!g){a=true;return}if(q.id===u&&typeof p!==h){m=p;if(!document.getElementById(q.steps[m].targetId)){if(m<=0||!document.getElementById(q.steps[--m].targetId)){this.endTour(false);return}}}else{m=0}this.showStep(m);v=o().show();if(n.animate){v.initAnimate()}this.isActive=true};this.showStep=function(y){var z=q.steps[y],x=q.steps.length,w=q.id+":"+y,v=o();if(!q){throw"No tour currently selected!"}m=y;v.renderStep(z,y,(y===x-1),r);if(z.multiPage){w+=":mp"}i.setState(n.cookieName,w,1)};this.prevStep=function(){if(m>0){this.showStep(--m)}};this.nextStep=function(){if(n.onNext){n.onNext(t(),m)}if(m<q.steps.length-1){this.showStep(++m)}};this.endTour=function(w){var v=o();w=i.valOrDefault(w,true);v.hide();m=p=0;if(w){i.clearState(n.cookieName)}this.isActive=false};this.configure=function(v){if(!n){n={}}i.extend(n,v);n.animate=i.valOrDefault(n.animate,false);n.smoothScroll=i.valOrDefault(n.smoothScroll,true);n.scrollDuration=i.valOrDefault(n.scrollDuration,1000);n.showCloseButton=i.valOrDefault(n.showCloseButton,true);n.showPrevButton=i.valOrDefault(n.showPrevButton,false);n.showNextButton=i.valOrDefault(n.showNextButton,true);n.bubbleWidth=i.valOrDefault(n.bubbleWidth,280);n.bubblePadding=i.valOrDefault(n.bubblePadding,10);n.arrowWidth=i.valOrDefault(n.arrowWidth,20);n.onNext=i.valOrDefault(n.onNext,null);n.cookieName=i.valOrDefault(n.cookieName,"hopscotch.tour.state");if(v){i.extend(j,v.i18n)}if(n.animate){o().initAnimate()}else{o().removeAnimate()}o().showPrevButton(n.showPrevButton,true);o().showNextButton(n.showNextButton,true);o().showCloseButton(n.showCloseButton,true)};this.init(l);this.clearCookie=function(){i.clearState(n.cookieName)}};window.hopscotch=new k()}());
\ No newline at end of file
+(function(){var k,e,j,i,h="undefined",g=false,a=false,b=(typeof window.jQuery!==h),d=(typeof window.localStorage!==h),f=document.body.style,c=(typeof f.MozTransition!==h||typeof f.MsTransition!==h||typeof f.webkitTransition!==h||typeof f.OTransition!==h||typeof f.transition!==h);if(window.hopscotch){return}window.addEventListener("load",function(){g=true;if(a){window.hopscotch.startTour()}});i={addClass:function(n,p){var m,o,l;if(b){$(n).addClass(p)}else{if(n.className.length===0){n.className=p}else{m=n.className.split(" ");for(o=0,l=m.length;o<l;++o){if(m[o]===p){return}}m.splice(0,0,p);n.className=m.join(" ")}}},removeClass:function(l,q){var p,t,r,o,m,s,n;if(b){$(l).removeClass(q)}else{t=q.split(" ");p=l.className.split(" ");for(o=0,s=t.length;o<s;++o){r=t[o];for(m=0,n=p.length;m<n;++m){if(p[m]===r){break}}if(m<n){p.splice(m,1)}}l.className=p.join(" ")}},getPixelValue:function(m){var l=typeof m;if(l==="number"){return m}if(l==="string"){return parseInt(m,10)}return 0},valOrDefault:function(m,l){return typeof m!==h?m:l},getScrollTop:function(){if(typeof window.pageYOffset!==h){return window.pageYOffset}else{return document.documentElement.scrollTop}},getScrollLeft:function(){if(typeof window.pageXOffset!==h){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(m,l){return m.addEventListener?m.addEventListener("click",l):m.attachEvent("onclick",l)},evtPreventDefault:function(l){if(l.preventDefault){l.preventDefault()}else{if(event){event.returnValue=false}}},extend:function(m,l){var n;for(n in l){if(l.hasOwnProperty(n)){m[n]=l[n]}}},setState:function(o,p,q){var l="",m,n;if(d){localStorage.setItem(o,p)}else{if(q){n=new Date();n.setTime(n.getTime()+(q*24*60*60*1000));l="; expires="+n.toGMTString()}document.cookie=o+"="+p+l+"; path=/"}},getState:function(m){var o=m+"=",l=document.cookie.split(";"),n,p;if(d){return localStorage.getItem(m)}else{for(var n=0;n<l.length;n++){p=l[n];while(p.charAt(0)===" "){p=p.substring(1,p.length)}if(p.indexOf(o)===0){return p.substring(o.length,p.length)}}return null}},clearState:function(l){if(d){localStorage.removeItem(l)}else{this.setState(l,"",-1)}}};j={stepNums:null,nextBtn:"Next",prevBtn:"Back",doneBtn:"Done",closeTooltip:"Close"};e=function(s){var q,r,m,l=false,p=function(v,u){var t=document.createElement("input");t.setAttribute("id",v);t.setAttribute("type","button");t.setAttribute("value",u);i.addClass(t,"hopscotch-nav-button");return t},n=function(u,t,w){var v="hide";if(w){v="hide-all"}if(typeof t===h){t=true}if(t){i.removeClass(u,v)}else{i.addClass(u,v)}},o=function(A,w,H){var D,t,B,v,y,z,C,x,G=document.getElementById(w.targetId),u=A.element,F=A.arrowEl,E=i.getPixelValue(w.arrowOffset);H=i.valOrDefault(H,true);D=i.getPixelValue(w.width)||s.bubbleWidth;B=i.valOrDefault(w.padding,s.bubblePadding);i.removeClass(u,"bounce-down bounce-up bounce-left bounce-right");v=G.getBoundingClientRect();if(w.orientation==="top"){t=u.offsetHeight;C=(v.top-t)-s.arrowWidth;x=v.left;z="bounce-down"}else{if(w.orientation==="bottom"){C=v.bottom+s.arrowWidth;x=v.left;z="bounce-up"}else{if(w.orientation==="left"){C=v.top;x=v.left-D-2*B-s.arrowWidth;z="bounce-right"}else{if(w.orientation==="right"){C=v.top;x=v.right+s.arrowWidth;z="bounce-left"}}}}if(!E){F.style.top="";F.style.left=""}else{if(w.orientation==="top"||w.orientation==="bottom"){F.style.left=E+"px"}else{if(w.orientation==="left"||w.orientation==="right"){F.style.top=E+"px"}}}x+=i.getPixelValue(w.xOffset);C+=i.getPixelValue(w.yOffset);C+=i.getScrollTop();x+=i.getScrollLeft();if(s.animate){if(!c&&b&&s.animate){$(u).animate({top:C+"px",left:x+"px"})}else{u.style.top=C+"px";u.style.left=x+"px"}}else{u.style.top=C+"px";u.style.left=x+"px";if(H){y=s.smoothScroll?s.scrollDuration:0;setTimeout(function(){i.addClass(u,z)},y);setTimeout(function(){i.removeClass(u,z)},y+2000)}}};this.init=function(){var w=document.createElement("div"),x=document.createElement("div"),v=this,u=false,t;this.element=w;this.containerEl=x;this.titleEl=document.createElement("h3");this.numberEl=document.createElement("span");this.contentEl=document.createElement("p");w.setAttribute("id","hopscotch-bubble");i.addClass(w,"animated");x.setAttribute("id","hopscotch-bubble-container");this.numberEl.setAttribute("id","hopscotch-bubble-number");x.appendChild(this.titleEl);x.appendChild(this.numberEl);x.appendChild(this.contentEl);w.appendChild(x);this.initNavButtons();if(s&&s.showCloseButton){this.initCloseButton()}this.initArrow();window.onresize=function(){if(u||!l){return}u=true;t=setTimeout(function(){o(v,m,false);u=false},200)};document.body.appendChild(w);return this};this.initNavButtons=function(){var t=document.createElement("div");this.prevBtnEl=p("hopscotch-prev",j.prevBtn);this.nextBtnEl=p("hopscotch-next",j.nextBtn);this.doneBtnEl=p("hopscotch-done",j.doneBtn);i.addClass(this.doneBtnEl,"hide");t.appendChild(this.prevBtnEl);t.appendChild(this.nextBtnEl);t.appendChild(this.doneBtnEl);i.addClickListener(this.prevBtnEl,function(u){if(q){q()}window.hopscotch.prevStep()});i.addClickListener(this.nextBtnEl,function(u){if(r){r()}window.hopscotch.nextStep()});i.addClickListener(this.doneBtnEl,window.hopscotch.endTour);t.setAttribute("id","hopscotch-actions");this.buttonsEl=t;this.containerEl.appendChild(t);return this};this.initCloseButton=function(){var t=document.createElement("a");t.setAttribute("id","hopscotch-bubble-close");t.setAttribute("href","#");t.setAttribute("title",j.closeTooltip);t.innerHTML="x";i.addClickListener(t,function(u){window.hopscotch.endTour();i.evtPreventDefault(u)});this.closeBtnEl=t;this.containerEl.appendChild(t);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(v,z,w,A){var B=this,u=i.valOrDefault(v.showNextButton,s.showNextButton),t=i.valOrDefault(v.showPrevButton,s.showPrevButton),y,x;m=v;if(v.title){this.setTitle(v.title)}if(v.content){this.setContent(v.content)}this.setNum(z);this.showPrevButton(this.prevBtnEl&&t&&z>0);this.showNextButton(this.nextBtnEl&&u&&!w);if(w){i.removeClass(this.doneBtnEl,"hide")}else{i.addClass(this.doneBtnEl,"hide")}this.setArrow(v.orientation);y=i.getPixelValue(v.width)||s.bubbleWidth;x=i.valOrDefault(v.padding,s.bubblePadding);this.containerEl.style.width=y+"px";this.containerEl.style.padding=x+"px";if(v.orientation==="top"){setTimeout(function(){o(B,v);if(A){A()}},5)}else{o(this,v);if(A){A()}}q=v.onPrev;r=v.onNext;return this};this.setTitle=function(t){if(t){this.titleEl.innerHTML=t;i.removeClass(this.titleEl,"hide")}else{i.addClass(this.titleEl,"hide")}return this};this.setContent=function(t){if(t){this.contentEl.innerHTML=t;i.removeClass(this.contentEl,"hide")}else{i.addClass(this.contentEl,"hide")}return this};this.setNum=function(t){if(j.stepNums&&t<j.stepNums.length){t=j.stepNums[t]}else{t=t+1}this.numberEl.innerHTML=t};this.setArrow=function(t){if(t==="top"){this.arrowEl.className="down"}else{if(t==="bottom"){this.arrowEl.className="up"}else{if(t==="left"){this.arrowEl.className="right"}else{if(t==="right"){this.arrowEl.className="left"}}}}};this.show=function(){var t=this;if(s.animate){setTimeout(function(){i.addClass(t.element,"animate")},50)}i.removeClass(this.element,"hide");l=true;return this};this.hide=function(){i.addClass(this.element,"hide");i.removeClass(this.element,"animate");l=false;return this};this.showPrevButton=function(t,u){n(this.prevBtnEl,t,u)};this.showNextButton=function(t,u){n(this.nextBtnEl,t,u)};this.showCloseButton=function(t,u){n(this.closeBtnEl,t,u)};this.initAnimate=function(){var t=this;setTimeout(function(){i.addClass(t.element,"animate")},50)};this.removeAnimate=function(){i.removeClass(this.element,"animate")};this.init()};k=function(l){var s,n,q,m,u,p,o=function(){if(!s){s=new e(n)}return s},t=function(){return q.steps[m]},r=function(){var L=o().element,H=i.getPixelValue(L.style.top),G=H+i.getPixelValue(L.offsetHeight),E=document.getElementById(t().targetId),M=E.getBoundingClientRect(),J=M.top+i.getScrollTop(),F=M.bottom+i.getScrollTop(),C=(H<J)?H:J,v=(G>F)?G:F,I=i.getScrollTop(),x=I+i.getWindowHeight(),y=C-n.scrollTopMargin,w,B,A,K,z,D;if(b){$("body, html").animate({scrollTop:y},n.scrollDuration);return}else{if(typeof YAHOO!==h&&typeof YAHOO.env!==h&&typeof YAHOO.env.ua!==h&&typeof YAHOO.util!==h&&typeof YAHOO.util.Scroll!==h){w=YAHOO.env.ua.webkit?document.body:document.documentElement;A=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:undefined;B=new YAHOO.util.Scroll(w,{scroll:{to:[0,y]}},n.scrollDuration/1000,A);B.animate();return}}if(y<0){y=0}if(C>=I&&C<=I+n.scrollTopMargin){return}if(C<I||v>x){if(n.smoothScroll){K=(I>C)?-1:1;z=Math.abs(I-C)/(n.scrollDuration/10);D=setInterval(function(){var O=i.getScrollTop(),N=O+(K*z);if((K>0&&N>=y)||K<0&&N<=y){N=y;clearInterval(D)}window.scrollTo(0,N);if(i.getScrollTop()===O){clearInterval(D)}},10)}else{window.scrollTo(0,y)}}};this.init=function(){var v,w;if(l){this.configure(l)}};this.loadTour=function(x){var w={},v,y;q=x;for(y in x){if(x.hasOwnProperty(y)&&y!=="id"&&y!=="steps"){w[y]=x[y]}}this.configure(w);tourState=i.getState(n.cookieName);if(tourState){tourPair=tourState.split(":");u=tourPair[0];p=parseInt(tourPair[1],10);if(tourPair.length>2&&tourPair[2]==="mp"){++p}}v=o();v.showPrevButton(n.showPrevButton,true);v.showNextButton(n.showNextButton,true)};this.startTour=function(){var v;if(!q){throw"Need to load a tour before you start it!"}if(!g){a=true;return}if(q.id===u&&typeof p!==h){m=p;if(!document.getElementById(q.steps[m].targetId)){if(m<=0||!document.getElementById(q.steps[--m].targetId)){this.endTour(false);return}}}else{m=0}this.showStep(m);v=o().show();if(n.animate){v.initAnimate()}this.isActive=true};this.showStep=function(y){var z=q.steps[y],x=q.steps.length,w=q.id+":"+y,v=o();if(!q){throw"No tour currently selected!"}m=y;v.renderStep(z,y,(y===x-1),r);if(z.multiPage){w+=":mp"}i.setState(n.cookieName,w,1)};this.prevStep=function(){if(m>0){this.showStep(--m)}};this.nextStep=function(){if(n.onNext){n.onNext(t(),m)}if(m<q.steps.length-1){this.showStep(++m)}};this.endTour=function(w){var v=o();w=i.valOrDefault(w,true);v.hide();m=p=0;if(w){i.clearState(n.cookieName)}this.isActive=false};this.configure=function(v){if(!n){n={}}i.extend(n,v);n.animate=i.valOrDefault(n.animate,false);n.smoothScroll=i.valOrDefault(n.smoothScroll,true);n.scrollDuration=i.valOrDefault(n.scrollDuration,1000);n.scrollTopMargin=i.valOrDefault(n.scrollTopMargin,50);n.showCloseButton=i.valOrDefault(n.showCloseButton,true);n.showPrevButton=i.valOrDefault(n.showPrevButton,false);n.showNextButton=i.valOrDefault(n.showNextButton,true);n.bubbleWidth=i.valOrDefault(n.bubbleWidth,280);n.bubblePadding=i.valOrDefault(n.bubblePadding,10);n.arrowWidth=i.valOrDefault(n.arrowWidth,20);n.onNext=i.valOrDefault(n.onNext,null);n.cookieName=i.valOrDefault(n.cookieName,"hopscotch.tour.state");if(v){i.extend(j,v.i18n)}if(n.animate){o().initAnimate()}else{o().removeAnimate()}o().showPrevButton(n.showPrevButton,true);o().showNextButton(n.showNextButton,true);o().showCloseButton(n.showCloseButton,true)};this.init(l);this.clearCookie=function(){i.clearState(n.cookieName)}};window.hopscotch=new k()}());
\ No newline at end of file
diff --git a/js/hopscotch.js b/js/hopscotch.js
index 8d6146f2..145cbdb1 100644
--- a/js/hopscotch.js
+++ b/js/hopscotch.js
@@ -697,7 +697,7 @@
           targetBottom   = (bubbleBottom > targetElBottom) ? bubbleBottom : targetElBottom, // whichever is lower
           windowTop      = utils.getScrollTop(),
           windowBottom   = windowTop + utils.getWindowHeight(),
-          scrollToVal    = targetTop - 50, // This is our final target scroll value.
+          scrollToVal    = targetTop - opt.scrollTopMargin, // This is our final target scroll value.
           scrollEl,
           yuiAnim,
           yuiEase,
@@ -728,7 +728,7 @@
         scrollToVal = 0;
       }
 
-      if (targetTop >= windowTop && targetTop <= windowTop + 50) {
+      if (targetTop >= windowTop && targetTop <= windowTop + opt.scrollTopMargin) {
         return;
       }
 
@@ -929,6 +929,9 @@
      * scrollDuration:  Number   - Duration of page scroll. Only relevant when
      *                             smoothScroll is set to true. Defaults to
      *                             1000ms.
+     * scrollTopMargin: NUMBER   - When the page scrolls, how much space should there
+     *                             be between the bubble/targetElement and the top
+     *                             of the viewport? Defaults to 50.
      * showCloseButton: Boolean  - should the tour bubble show a close (X) button?
      *                             Defaults to TRUE.
      * showPrevButton:  Boolean  - should the bubble have the Previous button?
@@ -962,6 +965,7 @@
       opt.animate         = utils.valOrDefault(opt.animate, false);
       opt.smoothScroll    = utils.valOrDefault(opt.smoothScroll, true);
       opt.scrollDuration  = utils.valOrDefault(opt.scrollDuration, 1000);
+      opt.scrollTopMargin = utils.valOrDefault(opt.scrollTopMargin, 50);
       opt.showCloseButton = utils.valOrDefault(opt.showCloseButton, true);
       opt.showPrevButton  = utils.valOrDefault(opt.showPrevButton, false);
       opt.showNextButton  = utils.valOrDefault(opt.showNextButton, true);