/* ----- ANIMATION FUNCTIONS ----- */
function slideUpDown(element) {
    $(element).slideUp();
}

function slideDownUp(element) {
    $(element).slideDown();
}

// ----- OBSERVER DISPLAY PROPERTY FUNCTION ----- */
function observeAndSlide(elements) {
    const observer = new MutationObserver((mutationsList) => {
        mutationsList.forEach((mutation) => {
            console.log('foreach')
            if (mutation.attributeName === 'style') {
                const element = $(mutation.target);
                // Elems (none -> block)
                if (element.css('display') === 'none' && element.data('changed')) {
                    element.css('display', 'block')
                    element.data('changed', false);
                    slideUpDown(element.parent());
                    element.css('display', 'none')
                }
                // Elems (block -> none)
                else if (element.css('display') !== 'none' && !element.data('changed')) {
                    element.data('changed', true);
                    slideDownUp(element.parent());
                }
            }
        });
    });

    // Set an observer on each elem
    elements.forEach((element) => {
        if (element instanceof Node) {
            observer.observe(element, { attributes: true });
        }
    });
}

$(document).ready(function() {
	/* 
	Key: PD = Parent Div
	ID = Inner Div 
	*/
	
	//Gets all PD and ID fields
	const contentPages = $("[id^='contentPage']");
	const parentDivs = [];
	const innerDivs = [];
	contentPages.each(function () {
	    const children = $(this).children();
	    children.each(function () {
	        parentDivs.push($(this)[0]);
	        innerDivs.push($(this).children().first())
	
	        // If ID display is none set PD display to none else set to block
	        var PD = $(this);
	        var ID = $(this).children().first();
	        if (ID.css('display') == 'none')
	            PD.css('display', 'none');
	        else {
	            PD.css('display', 'block');
	        }
	    });
	});
	
	// Convert jQuery objects to DOM nodes
	const domNodes = innerDivs.map((elem) => elem[0]);
	observeAndSlide(domNodes);
})