// What to do when the document is loaded.
document.addEventListener('DOMContentLoaded', function () {
    // init materialize elements
    initModals();
    initSidenav();
    initSelects();

    // opening event modal if given
    var eventId = parseInt(window.location.hash.substring(1));
    if (!isNaN(eventId)) {
        openEventModal(eventId);
    }
});

// Inits for MaterializeCss (mCss) elements

// Init select forms
function initSelects() {
    var selectElements = document.querySelectorAll('select');
    // var selectInstances = 
    M.FormSelect.init(selectElements, {});
    console.log('initSelect');
}

// Init SideNav menu
function initSidenav() {
    var sidenavElements = document.querySelectorAll('.sidenav');
    // var sidenavInstances = 
    M.Sidenav.init(sidenavElements, {});
};

// Init Modals
function initModals() {
    var modalElements = document.querySelectorAll('.modal');
    // var modalInstances = 
    M.Modal.init(modalElements, {
        // @todo Temporary disabled. Normally the selects need to be init after the modal shows. MaterializeCss 2 seems to change this.
        // 'onOpenEnd': initSelects
    });
};

// Open the modal of an event by event Id
function openEventModal(eventId) {
    openModal(`#event-modal-${eventId}`);
}

// Open a modal by html-Id
function openModal(modalId) {
    var modalElement = document.querySelector(modalId);
    if (modalElement === null) {
        return;
    }
    var modalInstance = M.Modal.getInstance(modalElement);
    modalInstance.open();
}