Tiny Wizard

tinywizard.js

        var Wizard = function (access_token) {
            this.access_token = access_token;
            this.page = 0;
            this.el = {
                main: document.getElementById('main'),
                pageNumber: document.getElementById('pageNumber')
            };
            this.el.pageNumber.setAttribute('style', 'display:block"');
        }

        Wizard.prototype.gotoPageName = function (pageName) {
            console.log('Wizard ', this, 'Page ', this.page, 'to', pageName);
            // find element with attribute data-name === pageName
            this.nextPage(
                document.querySelector('script[type="text/mustache"][data-name="merge"]').id.match(/^page-(\d+)$/)[1]
            );
        }

        Wizard.prototype.nextPage = function (pageNumber) {
            console.log('Wizard ', this, 'Page ', this.page, 'to', this.page + 1);
            if (pageNumber) {
                this.page = pageNumber;
            } else {
                this.page ++;
            }
            try {
                this.el.main.innerHTML = Mustache.render(
                    document.getElementById('page-' + this.page).innerHTML.toString(), 
                    {Config: Config, wizard: wizard}
                );
                this.el.pageNumber.innerText = this.page;
            } catch (e) {
                console.error(e);
            }
            var fn = 'page' + this.page;
            if (typeof window[fn] === 'function') {
                window[fn]( arguments );
            }
            console.log('Page = ', this.page);
        }
       
       /* 
       <script type='text/mustache' id='page-1'>
            <h3>....</h3>
        </script>
        <script>
                var page1 = function () {
                        // ...
                }
        </script>
        */