!(function () {
    var headers = new Headers();
    headers.append("Content-Type", "application/json");

    var raw = JSON.stringify({
        "projectId": window.okidokSettings.projectId,
        "instanceId": window.okidokSettings.instanceId
    });

    var requestOptions = {
        method: 'POST',
        headers: headers,
        body: raw,
        redirect: 'follow'
    };

    fetch("https://okidok.net/api/v1/project", requestOptions)
        .then(response => response.json())
        .then(result => {
            let okidokWall = new OkidokWallConsent(result.data);
            okidokWall.render();

            // check if cookies token is present
            var cookieOkidok = (document.cookie.match(/^(?:.*;)?\s*okidok_consent\s*=\s*([^;]+)(?:.*)?$/)||[,null])[1];
            var consentCookie = JSON.parse(cookieOkidok);

            if (cookieOkidok == null) {
                let okidok = new Okidok(result.data, [], result.data.debug);
                okidok.okidokDisplayCMP();
            } else if (result.data.wall.lastUpdate > (consentCookie.createdAt/1000)) {
                let okidok = new Okidok(result.data, consentCookie.data, result.data.debug);
                okidok.okidokDisplayCMP();
            } else {
                let okidok = new Okidok(result.data, consentCookie.data, result.data.debug);
            }
        })
        .catch(error => console.log('error', error));
})();

class OkidokWallConsent {
    constructor(data) {
        this.data = data;
    }

    render() {
        let contentHead = '';
        let contentHtml = '';

        contentHead += this.renderFonts();
        contentHead += this.renderCss();

        contentHtml += `
            <!-- OKIDOK Start ------------------------------------------------------------------------------ -->
            <div id="okidok-cmp-15426" class="okidok-cmp">
                <div id="okidok-popup" class="">
        `;
        contentHtml += this.renderSteps();
        contentHtml += `
                </div>
            </div>
            <!-- OKIDOK End ------------------------------------------------------------------------------ -->
        `;

        var child = document.createElement('okidok');
        child.innerHTML = contentHtml;
        child.innerHTML += contentHead;

        document.body.appendChild(child);

        child.outerHTML = child.outerHTML.replace(/<\/?okidok>/, '');
    }

    templateStepCookies() {
        let htmlTemplate = `

        `;
    }

    renderCss() {
        let data = this.data;
        let cssProperties = '';

        for (const cssProperty in data.template.style.cssProperties) {
            cssProperties += '--' + data.template.style.cssProperties[cssProperty].property + ': ' + data.template.style.cssProperties[cssProperty].value + '; ';
        }

        let cssTemplate = `
            <style type="text/css">
                :root {
                    ${cssProperties}
                }

                /* STRUCTURE */
                .okidok-cmp {
                    /* Overlay background */
                    /* background-color: transparent; */
                    position: fixed;
                    width: 100%;
                    height: 100%;
                    /* Internal elements */
                    z-index: var(--okidok-z-index);
                    overflow: hidden;
                    display: none;
                    /*visibility: hidden;*/
                    /*opacity: 0;*/
                    transition: all 1s;
                    top: 0;
                    left: 0;
                }
                .okidok-cmp.active {
                    background-color: var(--okidok-color-overlay);
                    /*visibility: visible;*/
                    /*opacity: 1;*/
                    /*display: block;*/
                    display: inline;
                }

                #okidok-popup {
                    position: absolute;
                    top: 50%;
                    left: -5000px;
                    transform: translate(-50%,-50%);
                    background-color: var(--okidok-color-bg-popup);
                    width: 500px;
                    border-radius: var(--okidok-border-radius);
                    font-family: var(--okidok-font-default);
                    overflow: hidden;
                    transition: all 1s;
                    line-height: normal;
                }
                .okidok-cmp.active #okidok-popup {
                    left: 50%;
                }
                @media only screen and (max-width: 767px) {
                    #okidok-popup {
                        width: 70%;
                    }
                }
                @media only screen and (max-width: 575px) {
                    #okidok-popup {
                        width: 85%;
                    }
                }

                #okidok-popup .okidok-content {
                    padding: var(--okidok-popup-padding);
                    z-index: 10;
                    position: relative;
                    font-family: var(--okidok-font-default);
                    line-height: initial;
                }

                #okidok-popup .okidok-content strong {
                    font-family: var(--okidok-font-default);
                    line-height: initial;
                    font-weight: bold;
                }

                #okidok-popup .okidok-image {
                    position: absolute;
                    right: -10px;
                    bottom: -25px;
                }
                #okidok-popup .okidok-image img {
                    max-width: 50px;
                }

                #okidok-popup .okidok-pages {
                    position: absolute;
                    right: 10px;
                    bottom: 5px;
                    font-family: var(--okidok-font-default);
                    line-height: initial;
                    padding: 0;
                    margin: 0;
                }
                #okidok-popup .okidok-pages span {
                    font-family: inherit;
                    line-height: inherit;
                }
                #okidok-popup .okidok-pages span:first-of-type {
                    color: var(--okidok-color-grey);
                    font-size: 17px;
                    position: absolute;
                    top: 8px;
                    left: 0;
                    font-weight: 700;
                }
                #okidok-popup .okidok-pages span:nth-of-type(2n) {
                    color: var(--okidok-color-light);
                    font-size: 30px;
                    margin: 0 3px 0 9px;
                    font-weight: 300;
                }
                #okidok-popup .okidok-pages span:last-of-type {
                    color: var(--okidok-color-grey);
                    font-size: 9px;
                    position: absolute;
                    bottom: 8px;
                    right: 0;
                }

                /* BUTTONS */
                .okidok-buttons {
                    z-index: 20;
                    display: flex;
                    position: relative;
                    justify-content: center;
                    align-content: stretch;
                    width: 100%;
                    border-top: 1px solid var(--okidok-color-light);
                    font-family: var(--okidok-font-default);
				    line-height: initial;
                }
                .okidok-buttons .okidok-btn:first-of-type {
                    border-bottom-left-radius: var(--okidok-border-radius) !important;
                }
                .okidok-buttons .okidok-btn:last-of-type {
                    border-bottom-right-radius: var(--okidok-border-radius) !important;
                }

                .okidok-btn {
                    flex: 1 1 100% !important;
                    border: 0;
                    padding: var(--okidok-btn-padding);
                    font-weight: 600;
                    cursor: pointer !important;
                    transition: all 0.15s ease 0s !important;
                    text-decoration: none;
                    font-family: inherit;
				    line-height: inherit;
                }

                .okidok-buttons .okidok-btn-light {
                    color: var(--okidok-color-btn-light);
                    background-color: var(--okidok-color-btn-bg-light);
                }
                .okidok-buttons .okidok-btn-light:hover {
                    color: var(--okidok-color-btn-light-hover);
                    background-color: var(--okidok-color-btn-bg-light-hover);
                }

                .okidok-buttons .okidok-btn-high {
                    color: var(--okidok-color-btn-high);
                    background-color: var(--okidok-color-btn-bg-high);
                }
                .okidok-buttons .okidok-btn-high:hover {
                    color: var(--okidok-color-btn-high-hover);
                    background-color: var(--okidok-color-btn-bg-high-hover);
                }


                .okidok-link-no-accept-text {
                    float: right;
                    font-family: inherit;
				    line-height: inherit;
                }
                .okidok-link-no-accept-text a {
                    color: var(--okidok-color-primary);
                    font-size: 0.8em;
                    text-decoration: underline;
                    font-family: inherit;
				    line-height: inherit;
                }
                .okidok-link-no-accept-text a:hover {
                    color: var(--okidok-color-text-links);
                }

                /* STEPS */
                .okidok-steps {
                    visibility: hidden;
                    opacity: 0;
                    height: 0;
                }
                .okidok-steps.active {
                    visibility: visible;
                    opacity: 1;
                    height: auto;
                }
                .okidok-steps .okidok-title,
                .okidok-steps .okidok-subtitle {
                    padding: 0 80px 0 0;
                }
                #okidok-step-1 .okidok-title,
                #okidok-step-1 .okidok-subtitle {
                    padding: 0 !important;
                }

                /* TEXTS */
                .okidok-title {
                    color: var(--okidok-color-text-title);
                    font-weight: var(--okidok-text-title-weight);
                    font-size: var(--okidok-text-title-size);
                    display: block;
                    padding: 0;
                    margin: 0.5em 0 0 0;
                    font-family: inherit;
                    line-height: inherit;
                }
                #okidok-step-1 .okidok-title {
                    margin-top: 1.5em;
                    margin-bottom: 0.5em;
                }
                .okidok-subtitle {
                    color: var(--okidok-color-text-subtitle);
                    font-weight: var(--okidok-text-subtitle-weight);
                    font-size: var(--okidok-text-subtitle-size);
                    display: block;
                    padding: 0;
                    margin: 0.5em 0 1em 0;
                    font-family: inherit;
                    line-height: inherit;
                }
                .okidok-description {
                    color: var(--okidok-color-text-description);
                    font-weight: var(--okidok-text-description-weight);
                    font-size: var(--okidok-text-description-size);
                    line-height: var(--okidok-text-description-line-height);
                    display: block;
                    padding: 0;
                    margin: 0 0 1em 0;
                    font-family: inherit;
                }
                .okidok-small-desc {
                    color: var(--okidok-color-text-small-desc);
                    font-weight: var(--okidok-text-small-desc-weight);
                    font-size: var(--okidok-text-small-desc-size);
                    line-height: var(--okidok-text-small-desc-line-height);
                    display: block;
                    padding: 0;
                    margin: 0 0 30px 0;
                    font-family: inherit;
                }
                .okidok-small-desc a {
                    color: var(--okidok-color-text-small-desc);
                    font-family: inherit;
                    line-height: inherit;
                    text-decoration: underline;
                }
                .okidok-by {
                    color: var(--okidok-color-text-by);
                    font-weight: var(--okidok-text-by-weight);
                    font-size: var(--okidok-text-by-size);
                    line-height: var(--okidok-text-by-line-height);
                    display: block;
                    text-align: right;
                    padding: 0 30px 0 0;
                    margin: 1em 0 0 0;
                    font-family: inherit;
                }
                .okidok-by a {
                    color: var(--okidok-color-text-by);
                    text-decoration: none;
                    font-family: inherit;
				    line-height: inherit;
                }


                /* VENDORS */
                .okidok-select-all {
                    position: absolute;
                    top: 10px;
                    right: 20px;
                    display: flex;
                    flex-direction: column;
                    align-content: flex-end;
                    font-family: var(--okidok-font-default);
				    line-height: initial;
                }
                .okidok-select-all-title {
                    font-size: 10px;
                    display: block;
                    padding: 0;
				    margin: 0 0 2px 0;
                    font-weight: 600;
                    color: var(--okidok-color-primary);
                    font-family: inherit;
				    line-height: inherit;
                }
                .okidok-cookies-list {
                    margin-bottom: 2.5em;
                    max-height: 300px;
                    overflow: auto;
                }
                .okidok-cookie {
                    position: relative;
                    border-bottom: 1px solid var(--okidok-color-light);
                    padding: 1em 1em 1.5em 1em;
                    border-radius: var(--okidok-border-cookie-radius);
                    margin-bottom: 0.5em;
                    background-color: var(--okidok-color-light2);
                }
                .okidok-cookie .okidok-cookie-container {
                    position: relative;
                    font-family: var(--okidok-font-default);
				    line-height: initial;
                }
                .okidok-cookie-icon {
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .okidok-cookie-title {
                    padding: 0 50px 0 30px;
                    color: var(--okidok-color-cookie-title);
                    font-weight: var(--okidok-text-cookie-title-weight);
                    font-size: var(--okidok-text-cookie-title-size);
                    line-height: var(--okidok-text-cookie-title-line-height);
                    font-family: inherit;
				    margin: 0;
                }
                .okidok-cookie-subtitle {
                    padding: 0 50px 0 30px;
                    color: var(--okidok-color-cookie-subtitle);
                    font-weight: var(--okidok-text-cookie-subtitle-weight);
                    font-size: var(--okidok-text-cookie-subtitle-size);
                    line-height: var(--okidok-text-cookie-subtitle-line-height);
                    font-family: inherit;
				    margin: 0;
                }
                .okidok-cookie-switch {
                    position: absolute;
                    top: 0;
                    right: 0;
                }
                .okidok-cookie-info {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    height: 50px;
                    width: 50px;
                    border-bottom-left-radius: var(--okidok-border-cookie-radius);
                    overflow: hidden;
                    font-family: var(--okidok-font-default);
                    line-height: initial;
                    margin: 0;
                    padding: 0;
                }
                .okidok-cookie-info:before {
                    position: absolute;
                    content: "";
                    bottom: 0;
                    left: -26px;
                    width: 100%;
                    height: 100%;
                    transform: skew(45deg);
                    border-radius: 0 0 0px 0px ;
                    background-color: var(--okidok-color-light);
                    cursor: pointer;
                }
                .okidok-cookie-info:hover:before {
                    background-color: var(--okidok-color-grey);
                }
                .okidok-cookie-info a {
                    position: absolute;
                    color: white;
                    font-size: 15px;
                    font-weight: 800;
                    text-decoration: none;
                    bottom: -10px;
                    left: -3px;
                    padding: 15px;
                    font-family: inherit;
				    line-height: inherit;
                }
                .okidok-cookie-info a:hover {
                    text-decoration: none;
                }

                /* SWITCH - the box around the slider */
                .okidok-cmp .switch {
                    position: relative;
                    display: inline-block;
                    width: 53px;
                    height: 28px;
                }

                /* Hide default HTML checkbox */
                .okidok-cmp .switch input {
                    opacity: 0;
                    width: 0;
                    height: 0;
                }

                /* The slider */
                .okidok-cmp .slider {
                    position: absolute;
                    cursor: pointer;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: #ccc;
                    -webkit-transition: .4s;
                    transition: .4s;
                }
                .okidok-cmp .slider:before {
                    position: absolute;
                    content: "";
                    height: 20px;
                    width: 20px;
                    left: 4px;
                    bottom: 4px;
                    background-color: white;
                    -webkit-transition: .4s;
                    transition: .4s;
                }
                .okidok-cmp input:checked + .slider {
                    background-color: var(--okidok-color-primary);
                }
                .okidok-cmp input:focus + .slider {
                    box-shadow: 0 0 1px var(--okidok-color-primary);
                }
                .okidok-cmp input:checked + .slider:before {
                    -webkit-transform: translateX(25px);
                    -ms-transform: translateX(25px);
                    transform: translateX(25px);
                }
                /* Rounded sliders */
                .okidok-cmp .slider.round {
                    border-radius: 34px;
                    margin: 0;
                    padding: 0;
                    width: auto;
                    height: auto;
                }
                .okidok-cmp .slider.round:before {
                    border-radius: 50%;
                }
            </style>
        `;


        return cssTemplate;
    }

    renderSteps() {
        let data = this.data;
        let steps = this.data.wall.data;
        let template = this.data.template;
        let position = 1;
        let totalPosition = this.data.wall.data.length; // +1 because step 1 is added

        let htmlTemplate = '';

        /*
         * First
         */
        /*htmlTemplate += `
            <!-- STEP 1 -->
            <div id="okidok-step-1" class="okidok-steps active" data-stepactive="1">

                <!-- Content -->
                <div class="okidok-content">
                    <div class="okidok-link-no-accept-text okidok-link-no-accept">
                        <a href="#">${template.btn.essentials}</a>
                    </div>
                    <div class="okidok-title">${template.title}</div>
                    <div class="okidok-description">
                        ${template.content}
                    </div>
                    <div class="okidok-small-desc">
                        ${template.legal}
                    </div>

                    <!-- By -->
                    <div class="okidok-by">
                        <a href="${template.copyrightHref}" target="_blank">${template.copyright}</a>.
                    </div>
                    <div class="okidok-image"><img src="//${template.domain}/static/v1/okidok-cookie-glucone.png"></div>
                    <!-- end: By -->
                </div>
                <!-- end: Content -->

                <!-- Buttons -->
                <div class="okidok-buttons">
                    <button class="okidok-btn-steps-nav okidok-btn-light okidok-btn" data-steptarget="2">${template.btn.choice}</button>
                    <button class="okidok-btn-accept-all okidok-btn-high okidok-btn">${template.btn.all}</button>
                </div>
                <!-- end: Buttons -->

            </div>
            <!-- end: STEP 1 -->
        `;*/

        /*
         * Dynamic
         */
        for (const i in steps) {
            let step = steps[i];
            let items = step.items;

            if (step.items.length > 0) {
                var mainTitle = step.name;
                var mainSubtitle = step.subtitle;
                var mainDescription = step.description;
                var mainLegal = step.legal;
            } else {
                var mainTitle = step.name;
                var mainSubtitle = '';
                var mainDescription = step.description;
                var mainLegal = step.legal;
            }

            if (position ==1) {
                var classActive = 'active';
            } else {
                var classActive = '';
            }

            htmlTemplate += `
                <!-- STEP ${position} -->
                <div id="okidok-step-${position}" class="okidok-steps ${classActive}" data-stepactive="${position}">

                    <!-- Content -->
                    <div class="okidok-content">
            `;

            if (position == 1) {
                htmlTemplate += `
                    <div class="okidok-link-no-accept-text okidok-link-no-accept">
                        <a href="#">${template.btn.essentials}</a>
                    </div>
                `;
            }

            htmlTemplate += `
                <div class="okidok-title">${mainTitle}</div>
            `;

            if (mainSubtitle != '') {
                htmlTemplate += `<div class="okidok-subtitle">${mainSubtitle}</div>`;
            }

            htmlTemplate += `
                <div class="okidok-description">
                    ${mainDescription}
                </div>
            `;

            if (mainLegal != '') {
                htmlTemplate += `
                    <div class="okidok-small-desc">
                        ${mainLegal}
                    </div>
                `;
            }

            if (position != 1) {
                htmlTemplate += `
                    <!-- Select all -->
                    <div class="okidok-select-all">
                        <div class="okidok-select-all-title">${template.btn.all_checked}</div>
                        <div class="okidok-select-switch">
                            <label class="switch">
                                <input type="checkbox">
                                    <span class="slider round"></span>
                            </label>
                        </div>
                    </div>
                    <!-- end: Select all -->
               `;
            }

            htmlTemplate += `

                        <!-- Cookies list -->
                        <div class="okidok-cookies-list">
            `;

            for (const j in items) {
                let item = items[j];

                htmlTemplate += `
                    <!-- Cookie -->
                    <div class="okidok-cookie" data-cookie="${item.reference}">
                        <div class="okidok-cookie-container">
                            <div class="okidok-cookie-icon">
                                <img alt="" src="https://www.google.com/s2/favicons?domain=${item.url}">
                                </div>
                            <div class="okidok-cookie-title">${item.name}</div>
                            <div class="okidok-cookie-subtitle">${item.description}</div>
                            <div class="okidok-cookie-switch">
                                <label class="switch">
                                    <input type="checkbox">
                                        <span class="slider round"></span>
                                </label>
                            </div>
                        </div>
                        <div class="okidok-cookie-info"><a href="${item.url}" target="_blank">?</a></div>
                    </div>
                    <!-- end: Cookie -->
                `;
            } // end for items

            htmlTemplate += `
                        </div>
                        <!-- end: Cookies list -->
            `;

            if (position == 1) {
                htmlTemplate += `
                    <!-- By -->
                    <div class="okidok-by">
                        <a href="${template.copyrightHref}" target="_blank">${template.copyright}</a>.
                    </div>
                    <div class="okidok-image"><img src="https://${template.domain}/static/v1/okidok-cookie-glucone.png"></div>
                    <!-- end: By -->
                `;
            } else {
                htmlTemplate += `
                    <!-- Pages Number -->
                    <div class="okidok-pages">
                        <span>${position}</span><span>/</span><span>${totalPosition}</span>
                    </div>
                    <!-- end: Pages Number -->
                `;
            }

            htmlTemplate += `
                    </div>
                    <!-- end: Content -->

                    <!-- Buttons -->
                    <div class="okidok-buttons">
            `;

            if (position == 1) {
                if (position < totalPosition) {
                    htmlTemplate += `
                        <!-- Buttons -->
                        <button class="okidok-btn-steps-nav okidok-btn-light okidok-btn" data-steptarget="2">${template.btn.choice}</button>
                        <button class="okidok-btn-accept-all okidok-btn-high okidok-btn">${template.btn.all}</button>
                        <!-- end: Buttons -->
                    `;
                } else {
                    htmlTemplate += `
                        <!-- Buttons -->
                        <button class="okidok-btn-validate okidok-btn-light okidok-btn">${template.btn.end}</button>
                        <button class="okidok-btn-accept-all okidok-btn-high okidok-btn">${template.btn.all}</button>
                        <!-- end: Buttons -->
                    `;
                }
            } else {
                let previousPosition = position - 1;

                htmlTemplate += `
                    <button class="okidok-btn-steps-nav okidok-btn-light okidok-btn" data-steptarget="${previousPosition}">${template.btn.back}</button>
                    <button class="okidok-btn-accept-all okidok-btn-high okidok-btn">${template.btn.all}</button>
                `;

                if (position < totalPosition) {
                    let nextPosition = position + 1;
                    htmlTemplate += `<button class="okidok-btn-steps-nav okidok-btn-light okidok-btn" data-steptarget="${nextPosition}">${template.btn.next}</button>`;
                } else {
                    htmlTemplate += `<button class="okidok-btn-validate okidok-btn-light okidok-btn">${template.btn.end}</button>`;
                }
            }

            htmlTemplate += `
                    </div>
                    <!-- end: Buttons -->

                </div>
                <!-- end: STEP ${position} -->
            `;

            position++;
        }

        return htmlTemplate;
    }

    renderFonts() {
        let template = `<link rel="preconnect" href="https://fonts.googleapis.com">`;
        template += `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`;
        template += `<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">`;

        return template;
    }
}

class Okidok {
    constructor(data, cookiesAccepted, okidokDebug) {
        if(okidokDebug==undefined){
            this.okidokDebug=false;
        } else {
            this.okidokDebug=okidokDebug;
        }
        if(this.okidokDebug){console.log('------ Okidok.init ------');}

        this.okidokCookiesList = [];
        this.okidokCookiesListRaw = [];
        this.okidokCookiesAccepted = [];

        // Set CookiesList
        this.okidokSetCookiesListRaw(data);

        // Set CookiesAccepted
        this.okidokSetCookiesAcceptedRaw(cookiesAccepted);

        // Init Cookies list
        this.okidokInitCookiesList();

        // GTM Datalayer - consented cookies to transfer at page loading
        this.okidokConsentsToGTM(this.okidokCookiesAccepted);

        // Init Checked Cookies
        this.okidokiInitCheckedCookies();

        // Check if it's needed to change the Switch All Cookies
        this.okidokClicSwitchAllCheck(1);

        // Events Click - Display CMP
        const okidokBtnDisplayCMPs = document.getElementsByClassName('okidok-btn-displayCMP');
        for (const item of okidokBtnDisplayCMPs) {
            item.addEventListener("click", () => {this.okidokDisplayCMP();});
        }

        // Events Click - Steps Navigation
        const okidokBtnStepNavs = document.getElementsByClassName('okidok-btn-steps-nav');
        for (const item of okidokBtnStepNavs) {
            item.addEventListener("click", (evt) => {
                this.okidokDisplayStep(
                    evt.currentTarget.closest('.okidok-steps').dataset.stepactive,
                    evt.currentTarget.dataset.steptarget,
                    evt
                );
            });
        }

        // Events Click - Switch on a Cookie
        const okidokSwitchsCookie = document.querySelectorAll('.okidok-cookie-switch input');
        for (const item of okidokSwitchsCookie) {
            item.addEventListener("click", (evt) => {
                this.okidokClicSwitchCookie(
                    evt.currentTarget.closest('.okidok-cookie').dataset.cookie,
                    evt.currentTarget,
                    evt
                );
            });
        }

        // Events Click - Switch on all Cookies
        const okidokSwitchsAllCookies = document.querySelectorAll('.okidok-select-all input');
        for (const item of okidokSwitchsAllCookies) {
            item.addEventListener("click", (evt) => {
                this.okidokClicSwitchAllCookies(
                    evt.currentTarget.closest('.okidok-content').querySelector('.okidok-cookies-list'),
                    evt.currentTarget,
                    evt
                );
            });
        }

        // Events Click - Accept all cookies
        const okidokBtnsAcceptAll = document.querySelectorAll('.okidok-btn-accept-all');
        for (const item of okidokBtnsAcceptAll) {
            item.addEventListener("click", (evt) => {
                this.okidokAcceptAllCookies();
            });
        }

        // Events Click - Accept selected cookies
        const okidokBtnsAcceptSelectedCookies = document.querySelectorAll('.okidok-btn-validate');
        for (const item of okidokBtnsAcceptSelectedCookies) {
            item.addEventListener("click", (evt) => {
                this.okidokAcceptSelectedCookies();
            });
        }

        // Events Click - Accept no cookies
        const okidokBtnsAcceptNothing = document.querySelectorAll('.okidok-link-no-accept');
        for (const item of okidokBtnsAcceptNothing) {
            item.addEventListener("click", (evt) => {
                this.okidokAcceptNoCookies();
            });
        }
    }

    okidokSetCookiesListRaw(data) {
        this.okidokCookiesListRaw.push([]);

        for (const i in data.wall.data) {
            let step = data.wall.data[i];
            let arrItems = [];

            for (const j in step.items) {
                let item = step.items[j];

                arrItems.push(item.reference);
            }

            if (arrItems.length > 0) {
                this.okidokCookiesListRaw.push(arrItems);
            }
        }
    }

    okidokSetCookiesAcceptedRaw(cookies) {
        for (const i in cookies) {
            this.okidokCookiesAccepted.push(cookies[i]);
        }
    }

    /* Create Cookies list */
    okidokInitCookiesList() {
        if(this.okidokDebug){console.log('------ Okidok.okidokInitCookiesList ------');}
        if(this.okidokDebug){console.log('okidokCookiesAccepted =' + this.okidokCookiesAccepted);}

        this.okidokCookiesList = this.okidokFlatArray(this.okidokCookiesListRaw);

        if(this.okidokDebug){console.log('Okidok.okidokCookiesList= '+this.okidokCookiesList);}
    }

    okidokFlatArray(target) {
        if(this.okidokDebug){console.log('------ Okidok.okidokFlatArray ------');}
        //if(this.okidokDebug){console.log('target =' + target);}

        this.tmpFlatArray = [];

        target.forEach(function concatLev1(item) {
            if (item != '') {
                //if(this.okidokDebug){console.log('target Lv1= '+item);}
                item.forEach(function concatLev2(item2) {
                    //if(this.okidokDebug){console.log('target Lv2= '+item2);}
                    this.tmpFlatArray.push(item2);
                }, this);
            }
        }, this);

        if(this.okidokDebug){console.log('tmpFlatArray= '+this.tmpFlatArray);}

        return this.tmpFlatArray;
    }

    /* Display CMP */
    okidokDisplayCMP() {
        if(this.okidokDebug){console.log('------ Okidok.okidokDisplayCMP------ ');}
        document.getElementById("okidok-cmp-15426").classList.add("active");
    }

    /* Close CMP */
    okidokCloseCMP() {
        if(this.okidokDebug){console.log('------ Okidok.okidokCloseCMP ------');}
        document.getElementById("okidok-cmp-15426").classList.remove("active");
    }

    /* Display CMP - 'Home' */
    okidokDisplayHome() {
        if(this.okidokDebug){console.log('------ Okidok.okidokDisplayHome ------');}

        const okidokAllSteps = document.querySelectorAll('.okidok-steps');
        for (const item of okidokAllSteps) {
            item.classList.remove("active");
        }
        document.getElementById('okidok-step-1').classList.add("active");
    }

    /* Navig between Steps */
    okidokDisplayStep(activeStep,targetStep,evt) {
        if(this.okidokDebug){
            console.log('------ Okidok.okidokInitSteps ------');
            console.log('activeStep='+activeStep);
            console.log('targetStep='+targetStep);
        }
        document.getElementById('okidok-step-'+activeStep).classList.toggle("active");
        document.getElementById('okidok-step-'+targetStep).classList.toggle("active");

        // Check if it's needed to change the Switch All Cookies
        this.okidokClicSwitchAllCheck(targetStep);
    }

    /* Switch on a Cookie */
    okidokClicSwitchCookie(activeCookie,targetSwitch,evt) {
        if(this.okidokDebug){console.log('------ Okidok.okidokClicSwitchCookie ------');}
        if(targetSwitch.hasAttribute("checked")){
            targetSwitch.removeAttribute("checked");
            targetSwitch.checked = false;
        } else {
            targetSwitch.setAttribute("checked", "");
            targetSwitch.checked = true;
        }
        // Check if it's needed to change the Switch All Cookies
        this.okidokClicSwitchAllCheck(targetSwitch.closest('.okidok-steps').dataset.stepactive);
    }

    /* Switch Select all cookies */
    okidokClicSwitchAllCookies(targetCookiesList,targetSwitch,evt) {
        if(this.okidokDebug){console.log('------ Okidok.okidokClicSwitchAllCookies ------');}
        let targetCookiesListInputs = targetCookiesList.querySelectorAll('.okidok-cookie-switch input');
        if(targetSwitch.hasAttribute("checked")){ // Uncheck all cookies in the targeted list
            targetSwitch.removeAttribute("checked");
            targetSwitch.checked = false;
            for (const targetCookiesListInput of targetCookiesListInputs) {
                targetCookiesListInput.removeAttribute("checked");
                targetCookiesListInput.checked = false;
            }
        } else { // Check all cookies in the targeted list
            targetSwitch.setAttribute("checked", "");
            targetSwitch.checked = true;
            for (const targetCookiesListInput of targetCookiesListInputs) {
                targetCookiesListInput.setAttribute("checked", "");
                targetCookiesListInput.checked = true;
            }
        }
    }

    /* Switch all cookies - Auto switch depending the numbers of child 'checked cookies'  */
    okidokClicSwitchAllCheck(activeStep) {
        if(this.okidokDebug){console.log('------ Okidok.okidokClicSwitchAllCookiesCheck ------');}
        if(this.okidokDebug){console.log('activeStep ='+activeStep);}

        if(this.okidokDebug){console.log("this.okidokCookiesListRaw[activeStep-1].length= "+this.okidokCookiesListRaw[activeStep-1].length);}

        if(this.okidokCookiesListRaw[activeStep-1].length >=1){
            let i=0;
            let okidokActiveStep = document.getElementById("okidok-step-"+activeStep);
            let itemsCookies = okidokActiveStep.querySelectorAll('.okidok-cookie-switch input');
            for (const itemsCookie of itemsCookies) {
                if(this.okidokDebug){console.log('>> Loop Cookies - '+ itemsCookie.closest('.okidok-cookie').dataset.cookie);}
                if(itemsCookie.hasAttribute("checked")){
                    i++
                }
            }
            if(this.okidokDebug){console.log("i= "+i);}
            if(this.okidokDebug){console.log("this.okidokCookiesListRaw[activeStep-1].length= "+this.okidokCookiesListRaw[activeStep-1].length);}

            let itemSwitchAll = okidokActiveStep.querySelector('.okidok-select-all input');
            if(itemSwitchAll!=undefined){
                if(i == this.okidokCookiesListRaw[activeStep-1].length){
                    if(this.okidokDebug){console.log("All cookies checked in this step");}
                    itemSwitchAll.setAttribute("checked", "");
                    itemSwitchAll.checked = true;
                } else {
                    if(this.okidokDebug){console.log("Not all cookies checked in this step");}
                    itemSwitchAll.removeAttribute("checked");
                    itemSwitchAll.checked = false;

                }
            }
        }
    }

    /* Accept all cookies */
    okidokAcceptAllCookies() {
        if(this.okidokDebug){console.log('------ Okidok.okidokAcceptAllCookies ------');}

        // Push all cookies in a specific array and add checked on all of them
        const okidokAllSteps = document.querySelectorAll('.okidok-steps');
        for (const item of okidokAllSteps) {
            if(this.okidokDebug){console.log('> Loop Step - '+item.dataset.stepactive);}

            const itemSwitchAll = item.querySelector('.okidok-select-all input');
            if(itemSwitchAll!=undefined){
                itemSwitchAll.setAttribute("checked", "");
                itemSwitchAll.checked = true;
            }

            const itemsCookies = item.querySelectorAll('.okidok-cookie-switch input');
            for (const itemsCookie of itemsCookies) {
                if(this.okidokDebug){console.log('>> Loop Cookies - '+ itemsCookie.closest('.okidok-cookie').dataset.cookie);}
                itemsCookie.setAttribute("checked", "");
                itemsCookie.checked = true;
                //this.okidokCookiesAccepted.push(itemsCookie.closest('.okidok-cookie').dataset.cookie);
            }
        }
        this.okidokCookiesAccepted = this.okidokCookiesList;
        if(this.okidokDebug){console.log('Accepted Cookie List= ' + this.okidokCookiesAccepted);}

        // GTM Datalayer - datas to transfer
        this.okidokConsentsToGTM(this.okidokCookiesAccepted);
        this.okidokConsentsToAPI(this.okidokCookiesAccepted);

        this.okidokCloseCMP();
        this.okidokDisplayHome();
    }

    /* Accept selected cookies */
    okidokAcceptSelectedCookies() {
        if(this.okidokDebug){console.log('------ Okidok.okidokAcceptSelectedCookies ------');}

        this.okidokCookiesAccepted = []; // reset the Accepted Cookies list
        if(this.okidokDebug){console.log('Reset Cookies List= ' + this.okidokCookiesAccepted);}

        // Push selected cookies in a specific array
        const okidokAllSteps = document.querySelectorAll('.okidok-steps');
        for (const item of okidokAllSteps) {
            if(this.okidokDebug){console.log('> Loop Step - '+item.dataset.stepactive);}
            const itemsCookies = item.querySelectorAll('.okidok-cookie-switch input');
            for (const itemsCookie of itemsCookies) {
                if(this.okidokDebug){console.log('>> Loop Cookies - '+ itemsCookie.closest('.okidok-cookie').dataset.cookie);}
                if(itemsCookie.hasAttribute("checked")){
                    if(this.okidokDebug){console.log('Add selected Cookie= ' + itemsCookie.closest('.okidok-cookie').dataset.cookie);}
                    this.okidokCookiesAccepted.push(itemsCookie.closest('.okidok-cookie').dataset.cookie);
                }
            }
        }
        if(this.okidokDebug){console.log('All accepted Cookies List= ' + this.okidokCookiesAccepted);}

        // GTM Datalayer - datas to transfer
        this.okidokConsentsToGTM(this.okidokCookiesAccepted);
        this.okidokConsentsToAPI(this.okidokCookiesAccepted);

        this.okidokCloseCMP();
        this.okidokDisplayHome();
    }

    /* Init checked cookies */
    okidokiInitCheckedCookies() {
        if(this.okidokDebug){console.log('------ Okidok.okidokiInitCheckedCookies ------');}

        const okidokAllSteps = document.querySelectorAll('.okidok-steps');
        for (const item of okidokAllSteps) {
            if(this.okidokDebug){console.log('> Loop Step - '+item.dataset.stepactive);}

            const itemsCookies = item.querySelectorAll('.okidok-cookie-switch input');
            for (const itemsCookie of itemsCookies) {
                if(this.okidokDebug){console.log('>> Loop Cookies - '+ itemsCookie.closest('.okidok-cookie').dataset.cookie);}


                // Cookie checked
                if(this.okidokCookiesAccepted.indexOf(itemsCookie.closest('.okidok-cookie').dataset.cookie) != -1){
                    if(this.okidokDebug){console.log('Add selected Cookie= ' + itemsCookie.closest('.okidok-cookie').dataset.cookie);}
                    itemsCookie.setAttribute("checked", "");
                    itemsCookie.checked = true;
                }


            }
        }
    }

    /* Accept no cookies -> Only essentials cookies */
    okidokAcceptNoCookies() {
        if(this.okidokDebug){console.log('------ Okidok.okidokAcceptNoCookies ------');}

        // Uncheck all cookies
        const okidokAllSteps = document.querySelectorAll('.okidok-steps');
        for (const item of okidokAllSteps) {
            if(this.okidokDebug){console.log('> Loop Step - '+item.dataset.stepactive);}

            const itemSwitchAll = item.querySelector('.okidok-select-all input');
            if(itemSwitchAll!=undefined){
                itemSwitchAll.removeAttribute("checked");
                itemSwitchAll.checked = false;
            }

            const itemsCookies = item.querySelectorAll('.okidok-cookie-switch input');
            for (const itemsCookie of itemsCookies) {
                if(this.okidokDebug){console.log('>> Loop Cookies - '+ itemsCookie.closest('.okidok-cookie').dataset.cookie);}
                itemsCookie.removeAttribute("checked");
                itemsCookie.checked = false;
            }
        }
        this.okidokCookiesAccepted = [];
        if(this.okidokDebug){console.log('Accepted Cookie List= ' + this.okidokCookiesAccepted);}

        // GTM Datalayer - datas to transfer
        this.okidokConsentsToGTM(this.okidokCookiesAccepted);

        this.okidokCloseCMP();
        this.okidokDisplayHome();
        this.okidokConsentsToAPI(this.okidokCookiesAccepted);
    }

    /*
     * GTM - Datalayer push
     * CMP - Push
     */
    okidokConsentsToGTM(datas) {
        if(this.okidokDebug){console.log('------ Okidok.okidokConsentsToGTM------ ');}
        if(this.okidokDebug){console.log('Consents pushed to GTM= '+datas);}

        // Send full list of activated cookies
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'okidok_cookies_consent',
            'okidok_cookies_enabled': datas.toString(),
        });

        // Send separated (un)activated cookies
        this.okidokCookiesList.forEach(function (item) {
            if(datas.indexOf(item) === -1) {
                // Event - cookie unactivated
                if(this.okidokDebug){console.log('------ Event - cookie - Unactivated------ '+item);}
                window.dataLayer.push({
                    'event': 'okidok_unactivate_'+item,
                    ['okidok_'+item]: false,
                    'okidok_cookie_name': item,
                });
            } else {
                // Event - cookie activated
                if(this.okidokDebug){console.log('------ Event - cookie - Activated------ '+item);}
                window.dataLayer.push({
                    'event': 'okidok_activate_'+item,
                    ['okidok_'+item]: true,
                    'okidok_cookie_name': item,
                });
            }
        }, this);
    }

    okidokConsentsToAPI(datas) {
        let expirationDays = 365;
        let values = '';


        values = {
            projectId: window.okidokSettings.projectId,
            instanceId: window.okidokSettings.instanceId,
            token: ""+this.okidokGenerateToken()+"",
            data: datas,
            createdAt: ""+ Date.now() +""
        };

        var headers = new Headers();
        headers.append("Content-Type", "application/json");

        var raw = JSON.stringify(values);

        var requestOptions = {
            method: 'POST',
            headers: headers,
            body: raw,
            redirect: 'follow'
        };

        fetch("https://okidok.net/api/v1/consent", requestOptions)
            .then(response => response.json())
            .then(result => {
                const d = new Date();
                d.setTime(d.getTime() + (expirationDays*24*60*60*1000));
                let expires = "expires="+ d.toUTCString();

                document.cookie = "okidok_consent=" + raw + ";" + expires + ";path=/";
            })
            .catch(error => console.log('error', error));

    }


    okidokGenerateToken() {
        return String(this.simpleHash(window.location.hostname) + this.uniqid());
    }
    uniqid(prefix = "", random = false) {
        const sec = Date.now() * 1000 + Math.random() * 1000;
        const id = sec.toString(16).replace(/\./g, "").padEnd(14, "0");
        return `${prefix}${id}${random ? `.${Math.trunc(Math.random() * 100000000)}`:""}`;
    };
    simpleHash(str) {
        var hash = 0,
            i, chr;
        if (str.length === 0) return hash;
        for (i = 0; i < str.length; i++) {
            chr = str.charCodeAt(i);
            hash = ((hash << 5) - hash) + chr;
            hash |= 0; // Convert to 32bit integer
        }
        return hash;
    }
    setCookie(cname, cvalue, exdays) {
        const d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        let expires = "expires="+ d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }
}