var githubGuide = new Guideline.Guide("github");

var repositoryPage = githubGuide.addPage("repository");

repositoryPage.addStep({
    type: "overlay",
    title: "This is Guideline.js running on GitHub!",
    content: (
        "<p>Works without changing <u>anything</u> in the GitHub code</p>"+
        "<button class='btn btn-large btn-primary btn-alpha-blue hide-button'><i class='icon-circle-arrow-right'></i> Amazing... Show me more!</button>"+
        "<br/>"+
        "<a href='#' class='gl-skip'>I don't care. Skip this.</a>"
    ),
    overlayOptions: {
        style: {
            opacity: 0.9
        }
    }
});

repositoryPage.addStep({
    title: "This is the repository name. Remember it!",
    showAt: ".js-current-repository",
    align: "right middle",
    continueAfter: 5 // seconds
});

repositoryPage.addStep({
    title: "This is the exact code that is running right now!",
    showAt: function(){
        var heading = $("h3 a[name='create-a-guide']");
        return heading.length == 1 ? heading.parent() : false;
    },
    align: "center top",
    continueAfter: 8 // seconds
});

repositoryPage.addStep({
    title: "Guideline was actually created for AlphaMail!",
    content: "If you head to <a href='http://app.amail.io/'>AlphaMail</a> and signup, you'll actually get the welcome guide the first time you login!",
    showAt: function(){
        var heading = $("h2 a[name='real-world-example']");
        return heading.length == 1 ? heading.parent() : false;
    },
    align: "center top",
    continueAfter: 8 // seconds
});

repositoryPage.addStep({
    title: "You need to call setCurrentPage on every page change",
    content: "With this Guideline can track which page you're on and know what to show and when to show it.",
    showAt: function(){
        var heading = $("h4 a[name='methods']");
        return heading.length == 1 ? heading.parent().next().find("li:first-child") : false;
    },
    align: "center top",
    continueAfter: 9 // seconds
});

repositoryPage.addStep({
    title: "Guideline.getGuide(name)-method allows you to retrieve a guide from anywhere",
    content: "You can retrieve the guide using it's name. The guide is accessible this way once the guide.register()-method has been called.",
    showAt: function(){
        var heading = $("h4 a[name='methods']");
        return heading.length == 1 ? heading.parent().next().find("li:nth-child(2)") : false;
    },
    align: "center top",
    continueAfter: 9 // seconds
});

repositoryPage.addStep({
    title: "Start the guide manually",
    content: "If you're on another page, and you want to start the guide manually, you can use this method.<br />Remember to specify the 'startOnUrl'-parameter for auto redirection.",
    showAt: function(){
        var heading = $("h4 a[name='methods-1']");
        return heading.length == 1 ? heading.parent().next().find("li:nth-child(3)") : false;
    },
    align: "center top",
    continueAfter: 9 // seconds
});

repositoryPage.addStep({
    type: "overlay",
    title: "And that's it! Did you like it?",
    content: (
        '<p><a style="vertical-align:bottom;" href="https://twitter.com/intent/tweet?button_hashtag=guidelinejs&text=JavaScript%20library%20for%20creating%20non-invasive%20guides/tours." class="twitter-hashtag-button" data-lang="en" data-related="jasoncosta">Tweet #guidelinejs</a> or contribute!</p>' +
        '<p><button class="btn btn-large btn-primary btn-alpha-blue hide-button"><i class="icon-circle-arrow-right"></i> Amazing. Thanks!</button></p>' +
        '<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>'
    ),
    overlayOptions: {
        style: {
            opacity: 0.9
        }
    }
});

githubGuide.register();

Guideline.setCurrentPage("repository");

Guideline.getGuide("github").start();

{
    startOnUrl: '/home', // The URL on which the first page resists. Default: null
    skipAsDefault: true   // Whether or not the guide should initialize as 'skipped'. Meaning you must actively call the guide.start() method to start it. Default: true
}

{
    name: 'home',      // The name of this page. This value is mandatory!
    guide: someGuide   // A reference to the owning guide. This is automatically provided when calling 'guide.addPage(...)' (which is the recommended way to add a new page).
}

{
    type: 'bubble',                // The type of step. Can either be 'bubble' or 'overlay'. Default is 'bubble'.
    title: 'My amazing step!',     // Adds a headline (h1-tag) to the content. Not shown if value is 'null'. Default: null
    content: 'This is just...',    // Adds content (text/html) to the step! Not shown if value is 'null'. Default null
    showSkip: true,                // Whether or not to show a 'Skip this step' button. Default: true
    showContinue: false,           // Whether or not to show a 'Continue' button on the step. Default: false
    showAt: '#button',             // Selector for element to 'bubble' or 'overlay'. E.g. 'ul#menu li:first-child'. Can also be a callback function. If a function is provided, it will be polled until the function returns an element. Default: 'document'
    align: 'left middle',          // Determines how the bubble/overlay is aligned. Format '[x] [y]'. X = [left, center, right], Y = [top, middle, bottom]. E.g. 'center middle' or 'right bottom'. Default: 'right bottom'.
    continueWhen: 'click #button', // Condition, when met, automatically continues to the next step on the page. Can be either a string in the format of '[event name] [css selector]', e.g. 'dblclick div#bottom li:last-child'. Can also be a callback function. If a function is provided, it will be polled until the function returns true. When the function returns true, the step continues. Default: 'click [showAt]' (but only if showAt is a string)
    continueAfter: 0,              // Number of seconds until the step will continue. A small progress bar will visualize the elapsed/remaining time. If <= 0 then not shown/used. Default: 0
    guide: someGuide               // A reference to the owning guide. This is automatically provided when calling 'page.addStep(...)' (which is the recommended way to add a new step).
}