if (typeof $ == 'undefined') {
	javascript: (function (e, s) {
		e.src = s;
		e.onload = function () {
			$ = jQuery.noConflict();
			includeLoadingCustomEvent();
		};
		document.head.appendChild(e);
	})(
		document.createElement('script'),
		'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'
	);
} else {
	includeLoadingCustomEvent();
}

function includeLoadingCustomEvent() {
	//Check enable file customEvent
    let conditionIncludeFileEventSetup = sessionStorage.getItem(
        'OT_FACEBOOK_EVENT_SETUP'
    );
    let isCustomEventPage = ot_getUrlParam('otCustomEvent');
	if (conditionIncludeFileEventSetup == 'show' || isCustomEventPage == '1') {
		sessionStorage.setItem('OT_FACEBOOK_EVENT_SETUP', 'show');
    let domEventBuilder = document.querySelector('.event_content');
    let domeLoading = document.querySelector('#ot-fb__backdrop-loading-custom-event');
      if(!domEventBuilder && !domeLoading){
        otCustomEventAppendCss();
        otCustomEventAppendHtml();
      }
	}
}

function ot_getUrlParam(paramName) {
	var match = window.location.search.match(
		'[?&]' + paramName + '(?:&|$|=([^&]*))'
	);
	return match ? (match[1] ? match[1] : '') : null;
}

function otCustomEventAppendCss(){
    let css_string = `
    <style>
        #ot-fb__backdrop-loading-custom-event {
            position: fixed;
            width: 100%;
            background-color: #515151b8;
            height: 100%;
            top: 0;
            z-index: 10000;
        }
        
        .l-wrapper {
            position: absolute;
            height: 276px;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            text-align: center;
          }
          
          svg {
            height: 120px;
            width: 120px;
            margin: 0 2em 2em;
            overflow: visible;
            /*   border: 1px solid red; */
          }
          
          .g--circle {
            transform-origin: 60px 60px;
            fill: dodgerblue;
            -webkit-animation: opacity 1.2s linear infinite;
                    animation: opacity 1.2s linear infinite;
          }
          .g--circle:nth-child(12n+1) {
            -webkit-animation-delay: -0.1s;
                    animation-delay: -0.1s;
            transform: rotate(-30deg) translate(5px, 5px) scale(0.9);
          }
          .g--circle:nth-child(12n+2) {
            -webkit-animation-delay: -0.2s;
                    animation-delay: -0.2s;
            transform: rotate(-60deg) translate(5px, 5px) scale(0.9);
          }
          .g--circle:nth-child(12n+3) {
            -webkit-animation-delay: -0.3s;
                    animation-delay: -0.3s;
            transform: rotate(-90deg) translate(5px, 5px) scale(0.9);
          }
          .g--circle:nth-child(12n+4) {
            -webkit-animation-delay: -0.4s;
                    animation-delay: -0.4s;
            transform: rotate(-120deg) translate(5px, 5px) scale(0.9);
          }
          .g--circle:nth-child(12n+5) {
            -webkit-animation-delay: -0.5s;
                    animation-delay: -0.5s;
            transform: rotate(-150deg) translate(5px, 5px) scale(0.9);
          }
          .g--circle:nth-child(12n+6) {
            -webkit-animation-delay: -0.6s;
                    animation-delay: -0.6s;
            transform: rotate(-180deg) translate(5px, 5px) scale(0.9);
          }
          .g--circle:nth-child(12n+7) {
            -webkit-animation-delay: -0.7s;
                    animation-delay: -0.7s;
            transform: rotate(-210deg) translate(5px, 5px) scale(0.9);
          }
          .g--circle:nth-child(12n+8) {
            -webkit-animation-delay: -0.8s;
                    animation-delay: -0.8s;
            transform: rotate(-240deg) translate(5px, 5px) scale(0.9);
          }
          .g--circle:nth-child(12n+9) {
            -webkit-animation-delay: -0.9s;
                    animation-delay: -0.9s;
            transform: rotate(-270deg) translate(5px, 5px) scale(0.9);
          }
          .g--circle:nth-child(12n+10) {
            -webkit-animation-delay: -1s;
                    animation-delay: -1s;
            transform: rotate(-300deg) translate(5px, 5px) scale(0.9);
          }
          .g--circle:nth-child(12n+11) {
            -webkit-animation-delay: -1.1s;
                    animation-delay: -1.1s;
            transform: rotate(-330deg) translate(5px, 5px) scale(0.9);
          }
          .g--circle:nth-child(12n+12) {
            -webkit-animation-delay: -1.2s;
                    animation-delay: -1.2s;
            transform: rotate(-360deg) translate(5px, 5px) scale(0.9);
          }
          
          @-webkit-keyframes opacity {
            3% {
              fill-opacity: 1;
            }
            75% {
              fill-opacity: 0;
            }
          }
          
          @keyframes opacity {
            3% {
              fill-opacity: 1;
            }
            75% {
              fill-opacity: 0;
            }
          }
          
    </style>
    `
    $('body').append(css_string);
}

function otCustomEventAppendHtml(){
    let html_string = 
        `<div id="ot-fb__backdrop-loading-custom-event">
        <div class="l-wrapper">
          <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink">
            <symbol id="s--circle">
              <circle r="10" cx="20" cy="20"></circle>
            </symbol>
            <g class="g-circles g-circles--v1">
              <g class="g--circle">
                <use xlink:href="#s--circle" class="u--circle" />
              </g>
              <g class="g--circle">
                <use xlink:href="#s--circle" class="u--circle" />
              </g>
              <g class="g--circle">
                <use xlink:href="#s--circle" class="u--circle" />
              </g>
              <g class="g--circle">
                <use xlink:href="#s--circle" class="u--circle" />
              </g>
              <g class="g--circle">
                <use xlink:href="#s--circle" class="u--circle" />
              </g>
              <g class="g--circle">
                <use xlink:href="#s--circle" class="u--circle" />
              </g>
              <g class="g--circle">
                <use xlink:href="#s--circle" class="u--circle" />
              </g>
              <g class="g--circle">
                <use xlink:href="#s--circle" class="u--circle" />
              </g>
              <g class="g--circle">
                <use xlink:href="#s--circle" class="u--circle" />
              </g>
              <g class="g--circle">
                <use xlink:href="#s--circle" class="u--circle" />
              </g>
              <g class="g--circle">
                <use xlink:href="#s--circle" class="u--circle" />
              </g>
              <g class="g--circle">
                <use xlink:href="#s--circle" class="u--circle" />
              </g>
            </g>
          </svg>
          <p style="font-size: 20px; color: white">System processing. Please wait a few seconds to continue<p>
        </div>
      </div>`
    $('body').append(html_string);
    console.log('Append loading event builder!')
}