$( document ).ready( function () {

    sessionStorage.getItem( 'menuOpen' ) ? sessionStorage.setItem( 'menuOpen', sessionStorage.getItem( 'menuOpen' ) ) : sessionStorage.setItem( 'menuOpen', false );

    document.addEventListener( 'scroll', scrolled );
    document.addEventListener( 'resize', scrolled );

    let revealables = document.querySelectorAll( '.reveal' );
    let heights = $( document ).height() / ( revealables.length + 1 );
    let currentlyShowing = Math.round( window.scrollY / heights ) < revealables.length + 1 ? Math.round( window.scrollY / heights ) : revealables.length;

    for ( let i = 0; i < currentlyShowing; i++ ) {
        if ( i < parseInt( revealables.length ) ) {
            revealables[ i ].classList.add( 'active' );
        }
    }

    trackProgress();

    let timeout = setTimeout( showScrollHint, 3500 );

    if ( currentlyShowing >= revealables.length ) {
        clearTimeout( timeout );
    }

    function showScrollHint () {
        if ( sessionStorage.getItem( 'menuOpen' ) == 'false' ) {
            $( '#scroll-hint' ).fadeIn( 300 );
        } else {
            timeout = setTimeout( showScrollHint, 7000 );
        }
    }

    function scrolled() {
        heights = $( document ).height() / ( revealables.length + 1 );
        let regPos = Math.round( window.scrollY / heights );
        if ( regPos != currentlyShowing && regPos < revealables.length + 1 ) {
            for ( let i = 0; i < regPos + 1; i++ ) {
                $( `#step-${i + 1}` ).addClass( 'active' );
            }
    
            for ( let i = regPos + 1; i < revealables.length + 1; i++ ) {
                $( `#step-${i + 1}` ).removeClass( 'active' );
            }

            clearTimeout( timeout );
            $( '#scroll-hint' ).fadeOut( 300 );
            if ( regPos < revealables.length ) {
                timeout = setTimeout( showScrollHint, 7000 );
            }
            currentlyShowing = regPos;
            trackProgress();
        }
    }

    function trackProgress () {
        $( '.progress-item' ).attr( 'src', `/assets/radio_button_unchecked.svg` );
        $( `#step${currentlyShowing + 1}` ).attr( 'src', `/assets/radio_button_checked.svg` );
    }

    $( '.progress-item' ).click( function () {
        moveTo( parseInt( $( this ).attr( 'id' ).substring( 4 ) ) );
    } );

    $( '.scroll-container' ).click( function () {
        moveTo( currentlyShowing + 2 );
    } );

    function moveTo ( id ) {
        $( '#scroll-hint' ).fadeOut( 300 );
        let future = id - 1;
        for ( let i = 0; i < future + 1; i++ ) {
            $( `#step-${i + 1}` ).addClass( 'active' );
        }

        for ( let i = future + 1; i < revealables.length + 1; i++ ) {
            $( `#step-${i + 1}` ).removeClass( 'active' );
        }

        clearTimeout( timeout );
        $( '#scroll-hint' ).fadeOut( 300 );
        if ( future < revealables.length ) {
            timeout = setTimeout( showScrollHint, 7000 );
        }
        currentlyShowing = future;
        trackProgress();
        window.scrollTo( { top: future * heights, behavior: 'instant' } );
    }
} );