// ==UserScript==
// @name         W3Schools +
// @namespace    https://greasyfork.org/users/37096/
// @version      1.1.2
// @description  W3Schools with more freedom
// @author       Hồng Minh Tâm
// @match        https://www.w3schools.com/*/*.asp
// @match        https://www.w3schools.com/*/*.asp#*
// @icon         https://www.w3schools.com/favicon.ico
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @require      https://greasyfork.org/scripts/30368-highlight-words-jquery-library/code/Highlight%20Words%20Jquery%20Library.js?version=199098
// @compatible   chrome
// @compatible   firefox
// @compatible   opera
// @license      GNU GPLv3
// @grant        GM_addStyle
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle([
        '@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";',
        '#list-title-children { background-color: #dbefdc; }',
        '#list-title-children a { padding-left: 30px; }',
        '#list-title-children a.active { color: #000000; background-color: #b7dfb8; }',

        '#leftmenuinner { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; }',
        '#input-filter { width: 100%; padding: 5px 1px 5px 14px; color: #000; background-color: #fff; border: 1px solid #ccc; }',
        '#leftmenuinnerinner { overflow-y: auto; }',
        'input.icon::-webkit-input-placeholder { font-family: Arial, Helvetica, sans-serif, FontAwesome; }',
        'input.icon::-moz-placeholder { font-family: Verdana, sans-serif, FontAwesome; }',
        'input.icon::-ms-input-placeholder { font-family:  Verdana, sans-serif, FontAwesome; }',
        'input#input-filter[type="search"]::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; }',
        '.highlight { background-color: #FFFF88; color: #000; }',
    ].join('\n'));

    var $listTitleChild = $('<div/>', {
        id: 'list-title-children'
    }).insertAfter($('#leftmenuinnerinner>.active:eq(0)'));

    var $iconTitleParent = $('<i/>', {
        class: 'fa fa-caret-up'
    });
    $('#leftmenuinnerinner>.active:eq(0)').append(' ').append($iconTitleParent);

    $('#leftmenuinnerinner>.active:eq(0)').click(function(e) {
        $listTitleChild.slideToggle();
        $iconTitleParent.toggleClass('fa-caret-down fa-caret-up');
        return false;
    });

    var index = 0;
    $('#main > h2').each(function() {
        if($(this).prop('tagName') === "H1" || $(this).prop('tagName') === "H2") {
            var idTitleChildren = 'title-'+ (++index);
            $(this).attr({
                'data-id': idTitleChildren,
                class: 'title-children-section'
            });
            var $titleChildren = $('<a/>', {
                href: '#'+idTitleChildren,
                class: 'item-title-children'
            }).text($(this).text()).appendTo($listTitleChild);
        }
    });

    $('.item-title-children[href^="#"]').click(function(e) {
        e.preventDefault();
        $(document).off('scroll');
        $('a.item-title-children').each(function () {
            $(this).removeClass('active');
        });
        $(this).addClass('active');

        var target = this.hash.replace('#', ''),
            $target = $('h2[data-id="'+target+'"]');

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top - $('#topnav').height() - 5
        }, 300, 'swing', function() {
            window.location.hash = target;
            $(document).on('scroll', onScroll);
        });
    });

    $(document).on('scroll', onScroll);
    if(window.location.hash) {
        $('.item-title-children[href^="'+window.location.hash+'"]').click();
    }
    function onScroll(e) {
        var scrollPosition = $(document).scrollTop() + $('#topnav').height() + 10;
        $('.title-children-section').each(function(index, element) {
            var $next = $('.title-children-section').eq(index + 1);
            var target = $(this).data('id');
            if($(this).position().top < scrollPosition && ($next.position()?$next.position().top:($('#main').position().top+$('#main').height())) - 10 > scrollPosition) {
                $('.item-title-children').removeClass('active');
                $('.item-title-children[href^="#'+target+'"]').addClass('active');
                window.location.hash = target;
            } else {
                $('.item-title-children[href^="#'+target+'"]').removeClass('active');
            }
        });
    }

    var $inputFilter = $('<input/>', {
        type: 'search',
        id: 'input-filter',
        placeholder: $('<div/>').html('&#xf0b0; Filter').html(),
        class: 'icon'
    }).prependTo($('#leftmenuinner'));
    $inputFilter.on('input', function(e) {
        var filterValue = $(this).val().toLowerCase();
        $('#leftmenuinnerinner a[target = "_top"]').each(function(index, item) {
            $(item).unhighlight().highlight(filterValue);
            if($(item).text().toLowerCase().indexOf(filterValue) > -1) {
                $(item).show();
            } else {
                $(item).hide();
            }
        });
        $('#list-title-children > .item-title-children').each(function(index, item) {
            $(item).unhighlight().highlight(filterValue);
            if($(item).text().toLowerCase().indexOf(filterValue) > -1) {
                $(item).show();
                $('a[target = "_top"].active').show();
            } else {
                $(item).hide();
            }
        });
        $('#leftmenuinnerinner h2').each(function(index, item) {
            if($(item).nextUntil('br').filter(':visible:not(#list-title-children)').size()) {
                $(item).show();
                $(item).nextAll('br:eq(0)').show();
            } else {
                $(item).hide();
                $(item).nextAll('br:eq(0)').hide();
            }
        });
    });
})();