gistfile1.js

_initWelcomeGuide : function () {
    
    var savedStep = this.getSavedWelcomeGuideStep(),
        guide, guideHandles;
    
    guide = new Y.TTW.Guide({
        
        srcNode         : '#welcome-guide',
        width           : '580px',
        tabIndex        : 0,
        visible         : false,
        centered        : true,
        zIndex          : 100,
        preventOverlap  : true,
        navigation      : true,
        children        : [
        
            {
                boundingBox : '#welcome-guide-1',
                srcNode     : '#welcome-guide-1'
            },
            {
                boundingBox : '#welcome-guide-2',
                srcNode     : '#welcome-guide-2',
                align       : {
                    
                    node    : '#create-tip',
                    points  : [Y.WidgetPositionAlign.TC, Y.WidgetPositionAlign.BC]
                    
                },
                after       : {
                    
                    selectedChange : Y.bind(function(e) {
                        
                        var step    = e.target,
                            handles = [];
                            
                        function detach () {
                            Y.each(handles, function(h){
                                h.detach();
                            });
                        }
                        
                        if (e.newVal) {
                            
                            handles.push(guide.after('visibleChange', detach));
                            handles.push(step.after('selectedChange', detach));
                            handles.push(this.after('tipList:addTip', function(e){
                                
                                var nextStep    = step.next(),
                                    tl          = e.target,
                                    tip         = e.details[0].tip,
                                    tipId       = tl.getTipId(tip);
                                    
                                nextStep.align(tip, nextStep.get('align').points);
                                guide.selectChild(nextStep.get('index'));
                                
                                handles.push(nextStep.after('selectedChange', function(e){
                                    nextStep.reset('align');
                                    detach();
                                }));
                                
                                handles.push(tl.after(['removeTip', 'updateTip', 'contentUpdate'], function(e){
                                    if (e.tip && tl.getTipId(e.tip) === tipId) {
                                        if (e.type === 'tipList:updateTip') {
                                            nextStep.align(e.newTip, nextStep.get('align').points);
                                        } else {
                                            nextStep.reset('align');
                                        }
                                    } else if (tl.get('tipNodes').size() === 0) {
                                        nextStep.reset('align');
                                        guide.selectChild(nextStep.next().get('index'));
                                    }
                                }));
                                
                            }));
                            
                        }
                        
                    }, this)
                    
                }
            },
            {
                boundingBox : '#welcome-guide-3',
                srcNode     : '#welcome-guide-3',
                align       : {
                    
                    node    : '#created-tips',
                    points  : [Y.WidgetPositionAlign.TC, Y.WidgetPositionAlign.BC]
                    
                }
            },
            {
                boundingBox : '#welcome-guide-4',
                srcNode     : '#welcome-guide-4',
                align       : {
                    
                    node    : '#funded-tips',
                    points  : [Y.WidgetPositionAlign.BC, Y.WidgetPositionAlign.TC]
                    
                }
            },
            {
                boundingBox : '#welcome-guide-5',
                srcNode     : '#welcome-guide-5',
                align       : {
                    
                    node    : '#account-summary',
                    points  : [Y.WidgetPositionAlign.RC, Y.WidgetPositionAlign.LC]
                }
            },
            {
                boundingBox : '#welcome-guide-6',
                srcNode     : '#welcome-guide-6',
                align       : {
                    
                    node    : '#bookmarklet',
                    points  : [Y.WidgetPositionAlign.RC, Y.WidgetPositionAlign.LC]
                }
            }
        
        ],
        plugins     : [
            
            { fn: Y.Plugin.WidgetAnim },
            { fn: Y.Plugin.OverlayKeepaligned },
            { fn: Y.Plugin.OverlayAutohide, cfg: {
                clickedOutside : false,
                focusedOutside : false
            }},
            { fn: Y.Plugin.OverlayPointer }
            
        ],
        after       : {
            
            visibleChange : Y.bind(function(e){
                
                if (e.newVal) {
                    
                    guideHandles = this.after([
                        
                        'tipList:contentUpdate',
                        'tipList:expandTip',
                        'tipList:collapseTip'
                        
                    ], Y.bind(guide.keepalgined.syncAlign, guide.keepalgined));
                    
                    // Save the step we’re on when the Guide shows
                    this.saveWelcomeGuideStep(guide.get('selection').get('index'));
                    
                } else {
                    
                    guideHandles.detach();
                    
                    // Remove the saved step when the Guide hides
                    this.removeSavedWelcomeGuideStep();
                    
                }
                    
            }, this),
            
            selectionChange : Y.bind(function(e){
                
                var step = e.newVal;
                
                if (step) {
                    // Updated the saved step
                    this.saveWelcomeGuideStep(step.get('index'));
                }
                
            }, this)
            
        }
        
    });
    
    if (isNumber(savedStep)) {
        guide.selectChild(savedStep);
    }
    
    guide.render().syncUI();
    
    return guide.show();
}