var Contents,
    contents,
    newHeading;

Contents = require('contents');

// If you are using ./dist/ version, then Contents is available under "gajus" global property, i.e.
// Contents = gajus.Contents;

// This example generates a table of contents for all of the headings in the document.
// Table of contents is an ordered list element.
contents = Contents();

// Append the generated list element (table of contents) to the container.
document.querySelector('#your-table-of-contents-container').appendChild(contents.list());

// Attach event listeners:
contents.eventEmitter().on('change', function () {
    console.log('User has navigated to a new section of the page.');
});

// The rest of the code illustrates firing "resize" event after you have
// added new content after generating the table of contents.
newHeading = document.createElement('h2');
hewHeading.innerHTML = 'Dynamically generated title';

document.body.appendChild(newHeading);

// Firing the "resize" event will regenerate the table of contents.
contents.eventEmitter().trigger('resize');

/**
 * @return {array} Array representation of the table of contents.
 */
contents.tree();

[
    // Node
    {
        // Hierarchy level (e.g. h1 = 1)
        level: 1,
        // Id derived using articleId() function.
        id: '',
        // Name derived using articleName() function.
        name: '',
        // The article element.
        element: null,
        // Collection of the descendant nodes.
        descendants: [ /* node */ ]
    }
]

gajus
    .contents({
        articles: document.querySelectorAll('main h2, main h2')
        // If you are using jQuery
        // articles: $('main').find('h2, h3').get()
    });

$('main').find('.summary').data('gajus.contents.level', 4);

gajus
    .contents({
        articles: $('main').find('h1, h2, h3, .summary').get()
    });

/**
 * This function is called after the table of contents is generated.
 * It is called for each article in the index.
 * Used to represent article in the table of contents and to setup navigation.
 * 
 * @param {HTMLElement} guide An element in the table of contents representing an article.
 * @param {HTMLElement} article The represented content element.
 */
Contents.link = function (guide, article) {
    var guideLink = document.createElement('a'),
        articleLink = document.createElement('a'),
        articleName = article.innerText,
        articleId = article.id || Contents.id(articleName);

    article.id = articleId;

    articleLink.href = '#' + articleId;

    while (article.childNodes.length) {
        articleLink.appendChild(article.childNodes[0], articleLink);
    }

    article.appendChild(articleLink);

    guideLink.appendChild(document.createTextNode(articleName));
    guideLink.href = '#' + articleId;
    guide.insertBefore(guideLink, guide.firstChild);
};

Contents({
    // Example of implementation that does not wrap
    // article node in a hyperlink.
    link: function (guide, article) {
        var guideLink,
            articleName,
            articleId;

        guide = $(guide);
        article = $(article);

        guideLink = $('<a>');
        articleName = article.text();
        articleId = article.attr('id') || Contents.id(articleName);

        guideLink
            .text(articleName)
            .attr('href', '#' + articleId)
            .prependTo(guide);

        article
            .attr('id', articleId);
    }
});

var contents = Contents();

contents.eventEmitter.on('ready', function () {});
contents.eventEmitter.on('resize', function () {});

contents.eventEmitter.on('change', function (data) {
    if (data.previous) {
        $(data.previous.article).removeClass('active-article');
        $(data.previous.guide).removeClass('active-guide');
    }

    $(data.current.article).addClass('active-article');
    $(data.current.guide).addClass('active-guide');
});

contents.eventEmitter.trigger('resize');