$(document).ready(function() {

// Add counter to steps headlines
var headlines = $('.tutorial__text').find('h2');
headlines.each(function(i) {
    $(this).attr('data-count', i + 1);
});
// Handle switching between snippets tabs
function switchSnippet(target){
    var tabs = $('.tutorial__snippets-tabs');
    var nav = $('.tutorial__snippets-nav');
    var navItem = nav.find('a[href="' + target + '"]').parent();
    // Check if item is not already active
    if (!$(navItem).hasClass('tutorial__snippets-nav-item--active')){
        // Add active class to selected item
        $(navItem).addClass('tutorial__snippets-nav-item--active');
        // Remove active class from already labeled items
        nav.find('.tutorial__snippets-nav-item--active').not(navItem).removeClass('tutorial__snippets-nav-item--active');
    }
    // Check if target element is not already active
    if (!$(target).hasClass('tutorial__snippets-tab--active')){
        // Add active class to selected tab (make it visible)
        $(target).addClass('tutorial__snippets-tab--active');
        // Remove active class from rest of tabs (hide them)
        tabs.find('.tutorial__snippets-tab--active').not(target).removeClass('tutorial__snippets-tab--active');
    }
    // Clear highlighted cells if needed
    $('.nb-cell--highlight').removeClass('nb-cell--highlight');
}
// Enable tab switch between snippet files on nav click
$('.tutorial__snippets-nav-link').click(function(e){
    // Prevent browser from redirecting to target
    (e).preventDefault();
    // Get the link href / target & pass it into switchSnippet function
    var target = $(this).attr('href');
    switchSnippet(target);
});
// Highlight specific lines in code snippet
function lineHighlight(target, lines){
    // Set the hash location path
    var path = target + '.' + lines;
    window.location.hash = path;
}
// Highlight specific cells in code snippet (notebook)
function cellHighlight(target, cells){
    // Get DOM elements for provided arguments
    var notebookContainer = document.getElementById(target);
    var cellElement = $(notebookContainer).find('[data-cell="' + cells + '"]');
    // Add highlight class to selected cell
    $(cellElement).addClass('nb-cell--highlight');
    // Remove highlight class from previously selected
    $(notebookContainer).find('.nb-cell--highlight').not(cellElement).removeClass('nb-cell--highlight');
    // Set scroll position to match the cell
    var cellPosition = cellElement.offset().top;
    var containerPosition =  $(notebookContainer).offset().top;
    var position = cellPosition - containerPosition;
    if (position !== 0.625) notebookContainer.scrollTop = position;
}
// Switch active paragraph
function switchParagraph(element, target){
    var paragraph;
    var allParagraphs = $('.tutorial__text').find('p');
    var prevButton = $('#prev');
    var nextButton = $('#next');
    var inactiveClass = 'tutorial__snippets-btn--inactive';
    // If paragraph is provided in arguments
    if (element !== undefined){
        paragraph = element;
    } 
    // If paragraph is not provided, use target
    else {
        // Get current active paragraph from DOM & its closest siblings
        var activeParagraph = $('.tutorial__text .highlight');
        var prevParagraph = $(activeParagraph).prevAll('p').eq(0);
        var nextParagraph = $(activeParagraph).nextAll('p').eq(0);
        if (target == 'prev'){
            // Switch to first paragraph
            if (activeParagraph.length && prevParagraph.length){
                paragraph = prevParagraph;
            }
        } else if (target == 'next'){
            // Switch to next paragraph
            if (activeParagraph.length && nextParagraph.length){
                paragraph = nextParagraph;
            }
            // Switch to first paragraph
            else if (!activeParagraph.length){
                var firstParagraph = $('.tutorial__text p').first();
                paragraph = firstParagraph;
            }
        }
    }
    // Check if paragraph is defined & wasn't already activated
    if (paragraph !== undefined && !paragraph.hasClass('highlight')){
        // Get paragraph attributes from DOM
        var lines = $(paragraph).attr('data-highlight');
        var cells = $(paragraph).attr('cell-highlight');
        var snippet = $(paragraph).attr('data-snippet');
        var snippetId = '#' + snippet;
        // If paragraph was not already selected, highlight it
        allParagraphs.not(paragraph).removeClass('highlight');
        paragraph.addClass('highlight');
        // Check if selected snippet is visible in active tab
        if($(snippetId).hasClass('tutorial__snippets-tab--active')){
            if(lines !== undefined){
                // Highlight lines if provided
                lineHighlight(snippet, lines);
            } else if (cells !== undefined){
                // Highlight cells if provided
                cellHighlight(snippet, cells);
            }
        } 
        // Check if snippet is provided in paragraph data
        else if (snippet !== undefined){
            // Change snippet tab first, then highlight lines
            $.when(switchSnippet(snippetId)).done(function() {
                if(lines !== undefined){
                    // Highlight lines if provided
                    lineHighlight(snippet, lines);
                } else if (cells !== undefined){
                    // Highlight cells if provided
                    cellHighlight(snippet, cells);
                }
            });
        }
        // Get paragraphs closest siblings (active/inactive buttons)
        var prevElement = $(paragraph).prevAll('p').eq(0);
        var nextElement = $(paragraph).nextAll('p').eq(0);
        if (!prevElement.length){
            $(prevButton).addClass(inactiveClass);
        } else if (!nextElement.length){
            $(nextButton).addClass(inactiveClass);
        } else {
            $('.tutorial__snippets-btn').removeClass(inactiveClass);
        }
        // Set the scroll location (vertically centered)
        var elOffset = $(paragraph).offset().top,
        elHeight = $(paragraph).height(),
        windowHeight = $(window).height(),
        position;
        if (elHeight < windowHeight) {
            position = elOffset - ((windowHeight / 2) - (elHeight / 2));
        }
        else {
            position = elOffset;
        }
        // Animate to scroll position
        $('html, body').animate({ 
            scrollTop: position 
        }, 500);
    }
}
// Actions on keydown (up/down)
$(document).keydown(function(e) {
    switch(e.which) {
        case 38: // When user press up
            switchParagraph(undefined, 'prev');
        break;
        case 40: // When user press down
            switchParagraph(undefined, 'next');
        break;
        default: return; 
    }
    e.preventDefault(); 
});
// Actions on paragraph click
$('.tutorial__text p').click(function(){
    switchParagraph($(this));
});
// Actions on buttons click
$('.tutorial__snippets-btn').click(function(){
    var id = $(this).attr('id').toString();
    switchParagraph(undefined, id);
});
// Change background after clicking 'copy' button
$(document).on("click", ".copy-to-clipboard-button", function () {
    var snippet = '.tutorial__snippets-tab--active';
    var timeout = 1000;
    var onClickClass = 'tutorial__snippets-tab--highlight';
    // Add class immediately after click
    $(snippet).addClass(onClickClass);
    // Remove class after timeout period
    setTimeout(function() {
        $(snippet).removeClass(onClickClass);
    }, timeout);
});
// Add jupyter notebook rendering using notebook.js
// https://github.com/jsvine/notebookjs
$('.tutorial__snippets-tab--notebook').each(function() {
    // Get the path to notebook file from data-attribute
    var tab = $(this);
    var path = tab.attr("data-src");
    // Fetch file from provided path
    fetch(path).then(response => response.text()).then(data => {
        // Use notebook.js to parse & render file
        var ipynb = JSON.parse(data);
        var notebook = nb.parse(ipynb);
        var rendered = notebook.render();
        // Add rendered output to the tab
        $(tab).append(rendered);
        // Rerun Prism syntax highlighting on the current page
        Prism.highlightAll();
        // Add data-cell attribute to each cell in rendered notebook
        $('.nb-cell').each(function(i) {
            $(this).attr('data-cell', i + 1);
        });
    });
});

});