/**
 * Open section on mobile if # to section in URL
 *
 * @since 2.0.7
 */

/**
 * show section by id
 * @since 2.0.7 New function
 */
function showSection(id) {

    $('#'+id).removeClass('hide');

    //change arrow icon on section teaser
    $('.section-teaser[data-id-section="'+ id + '"] span.glyphicon').removeClass('glyphicon-einfacher-pfeil-runter').addClass('glyphicon-einfacher-pfeil-hoch');

    $('[data-id-section="'+id+'"]')[0].scrollIntoView({ behavior: "smooth" });
}



/** ---------------------------------------------------------
 * Existing function needed to be changed (see @since 2.0.7)
 * This function is only called if mobile
 * @since 2.0.7 added hash check on url
 */
function initSectionCollapse() {

    var countSection = 0;
    var allSections = $('section[id]');

    /**
     * get all <section> with id
     */
    $(allSections).each( function(index, section) {

        /**
         * first section is the introduction of the page => skip collapse
         */
        if( countSection > 0) {

            var idSection = $(section).attr('id');

            /**
             * check if there are link <a> to the <section> id
             * if there are it is assumed that it is a page with a lot of content
             * which should collapse on mobile
             */
            var linkToSection = $(`a[href="#${idSection}"]`);

            if( $(linkToSection).length > 0) {

                var sectionName = $(linkToSection).html();
                /**
                 * add html teaser before section
                 */
                $(section).before(` 
                    
                    <div class="section-teaser clearfix v-center" data-id-section="${idSection}">
                        <h2 class="h3"><a>${sectionName} <span class="glyphicon glyphicon-einfacher-pfeil-runter right" aria-hidden="true"></span></a></h2>
                    </div>                   
               `);

                /**
                 * hide section on init
                 */
                $(section).addClass('hide');

                /**
                 * if last section add line after section
                 */
                if(countSection == $(allSections).length - 1) {

                    $(section).after('<div class="section-teaser last"></div>');
                }
            }
        }
        countSection ++;
    });

    /**
     * arrow element vertical align
     */
    sectionTeaserAdjust();

    /**
     * event Listener on new section teaser elements
     */
    $('.section-teaser').click( function() {
        showHideSection( $(this).attr('data-id-section') );
    });

    /**
     * @since 2.0.7 check for hash tag un url
     */
    var hash = window.location.hash;
    if(hash) {
        showSection( hash.substr(1) );
    }
}



// ------------------------------------------------------ //
// old existing functions which are not changed
// but placed here to collect all envolved functions here
//

/**
 * arrow element vertical align
 */
function sectionTeaserAdjust() {

    $('.section-teaser').each(function(index, teaser) {

        var heightText = $(teaser).find('span.left').height();

        $(teaser).find('span.glyphicon').css({ 'line-height' : heightText + 'px' });
    });
}

/**
 * show/hide section by id
 */
function showHideSection(id) {

    /**
     * show/hide section
     */
    $('#'+id).toggleClass('hide');

    /**
     * change arrow icon on section teaser
     */
    $('.section-teaser[data-id-section="'+ id + '"] span.glyphicon').toggleClass('glyphicon-einfacher-pfeil-runter glyphicon-einfacher-pfeil-hoch');
}

/**
 * undo collapsing of sections
 */
function undoSectionCollapse() {

    /**
     * show all sections
     */
    $('section[id]').removeClass('hide');

    /**
     * remove all section teaser
     */
    $('.section-teaser').remove();
}






