/*! lozad.js - v1.14.0 - 2020-01-25
* https://github.com/ApoorvSaxena/lozad.js
* Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.lozad=e()}(this,function(){"use strict";
/**
   * Detect IE browser
   * @const  {boolean}
   * @private
   */var d="undefined"!=typeof document&&document.documentMode,c={rootMargin:"0px",threshold:0,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=document.createElement("img");d&&t.getAttribute("data-iesrc")&&(e.src=t.getAttribute("data-iesrc")),t.getAttribute("data-alt")&&(e.alt=t.getAttribute("data-alt")),t.append(e)}if("video"===t.nodeName.toLowerCase()&&!t.getAttribute("data-src")&&t.children){for(var r=t.children,a=void 0,o=0;o<=r.length-1;o++)(a=r[o].getAttribute("data-src"))&&(r[o].src=a);t.load()}if(t.getAttribute("data-poster")&&(t.poster=t.getAttribute("data-poster")),t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&t.setAttribute("srcset",t.getAttribute("data-srcset")),t.getAttribute("data-background-image"))t.style.backgroundImage="url('"+t.getAttribute("data-background-image").split(",").join("'),url('")+"')";else if(t.getAttribute("data-background-image-set")){var i=t.getAttribute("data-background-image-set").split(","),n=i[0].substr(0,i[0].indexOf(" "))||i[0];// Substring before ... 1x
n=-1===n.indexOf("url(")?"url("+n+")":n,1===i.length?t.style.backgroundImage=n:t.setAttribute("style",(t.getAttribute("style")||"")+"background-image: "+n+"; background-image: -webkit-image-set("+i+"); background-image: image-set("+i+")")}t.getAttribute("data-toggle-class")&&t.classList.toggle(t.getAttribute("data-toggle-class"))},loaded:function(){}};function l(t){t.setAttribute("data-loaded",!0)}var b=function(t){return"true"===t.getAttribute("data-loaded")};return function(){var r,a,o=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".lozad",t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},e=Object.assign({},c,t),i=e.root,n=e.rootMargin,d=e.threshold,u=e.load,s=e.loaded,g=void 0;return"undefined"!=typeof window&&window.IntersectionObserver&&(g=new IntersectionObserver((r=u,a=s,function(t,e){t.forEach(function(t){(0<t.intersectionRatio||t.isIntersecting)&&(e.unobserve(t.target),b(t.target)||(r(t.target),l(t.target),a(t.target)))})}),{root:i,rootMargin:n,threshold:d})),{observe:function(){for(var t=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:document;return t instanceof Element?[t]:t instanceof NodeList?t:e.querySelectorAll(t)}(o,i),e=0;e<t.length;e++)b(t[e])||(g?g.observe(t[e]):(u(t[e]),l(t[e]),s(t[e])))},triggerLoad:function(t){b(t)||(u(t),l(t),s(t))},observer:g}}});


/**
 * AK API
 * iFrameの生成とアイコンの追加
 * @author　AKEY
 * @version　1.0
 */
 navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
     getUserMedia: function(c) {
         return new Promise(function(y, n) {
             (navigator.mozGetUserMedia ||
             navigator.webkitGetUserMedia).call(navigator, c, y, n);
         });
     }
 } : null);

const XRSnoRTC = !navigator.mediaDevices;

const xrsApi = [];

(() => {
    'use strict';

    let xrs_FullScreen = false;
    let xrs_WideScreen = false;

    // 本番では空欄
    const path = "https://web-xr.studio"; //http://localhost:8888/webxr/posar/public
    
    const xrs_screenfull = document.createElement('script');
        xrs_screenfull.src = "https://web-xr.studio/js/vendor/screenfull.min.js";
        document.head.appendChild(xrs_screenfull);

    const xrs_style = document.createElement("style");

    xrs_style.innerHTML = `
        .xr-studio {position: relative}
        .xr-studio, .xrs_inner, .xrs_inner iframe {
            width: 100%;
            height: 100%;
        }
        .xrs_inner .xrs_icon {
            position: absolute;
            bottom: 12px;
            font-size: 24px;
            color: #fff;
            cursor: pointer;
            text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,
            -1px 1px 0 #000, 1px -1px 0 #000,
            0px 1px 0 #000,  0-1px 0 #000,
            -1px 0 0 #000, 1px 0 0 #000;
        }
        .xrs_inner .xrs_icon--close {right: 20px; display: none}
        .xrs_inner .xrs_icon--tv {right: 20px}
        .xrs_inner .xrs_cover {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        .xrs_inner .xrs_box {
            background: rgba(0, 0, 0, .5);
            cursor: default;
            position: absolute;
            right: 1px;
            bottom: 48px;
            display: none;
        }
        .xrs_inner .xrs_icon--wide {padding: 6px; cursor: pointer}
        .xrs_inner .xrs_icon--open {padding: 6px; cursor: pointer}
                .xrs_vr {display: none!important}
                        .xrs_inner .xrs_icon--zoom:hover {
            -webkit-animation: zoom .3s;
            animation: zoom .3s;
        }
        @-webkit-keyframes zoom {
          50% {
            -webkit-transform: scale(1.3);
          }
        }
        @keyframes  zoom {
          50% {
            transform: scale(1.3);
          }
        }
        `;

    if (XRSnoRTC) xrs_style.innerHTML += '.xrs_ar {display: none!important}';

        xrs_style.innerHTML += '.xrs_arcore {display: none!important}';
    
    
    document.head.appendChild(xrs_style);

    window.addEventListener('DOMContentLoaded', () => {
        const $xr = document.getElementsByClassName('xr-studio');
        let _overflow;
        let _withoutBox = false, _withoutFullBox = false, pmDone = false;
        const xrsTime = [], xrsTimeArr = [], xrsCheck = [], pmInterval = [];
        const $xrsWides = [], $xrsFulls = [];
        const $xrsWide = document.getElementsByClassName('xrs-wide');
        const $xrsFull = document.getElementsByClassName('xrs-full');
        for (var i = 0; i <= 10; i++) $xrsWides.push(document.getElementsByClassName('xrs-wide-' + i));
        for (var i = 0; i <= 10; i++) $xrsFulls.push(document.getElementsByClassName('xrs-full-' + i));
        const _region = "jp";

        const showXRS = (xrsID) => {
            for (var i = 0; i < $xr.length; i++) {
                const _id = $xr[i].dataset.id;

                if (_id == xrsID) {
                    const _option = $xr[i].dataset.option;
                    const _timeout = $xr[i].dataset.timeout;
                    let _opt = '?';
                    _withoutFullBox = false;

                    if (_option && _option.toLowerCase().indexOf('onlypagefull') != -1) _withoutBox = true;
                    if (_option && _option.toLowerCase().indexOf('nofull') != -1) _withoutFullBox = true;
                    if (_option && _option.toLowerCase().indexOf('transparent') != -1) _opt += 'transparent=true&';
                    if (_option && _option.toLowerCase().indexOf('noconfig') != -1) _opt += 'noconfig=true&';
                    _opt += 'key=48c30a94a34a40255d4dec63dce12d1f&';
                    _opt += 'api=' + i;

                    if (_withoutFullBox) {
                        $xr[i].innerHTML = `
                        <div id="xrs_body--${i}" class="xrs_inner" class="h-100 w-100">
                            <iframe id="xrs_frame--${i}"
                                                                src="https://web-xr.studio/${_region}/${_id}/embed${_opt}"
                                                                scrolling="no" frameborder="no">
                            </iframe>
                        </div>`;
                    } else {
                        $xr[i].innerHTML = `
                        <div id="xrs_body--${i}" class="xrs_inner" class="h-100 w-100">
                            <iframe id="xrs_frame--${i}"
                                                                src="https://web-xr.studio/${_region}/${_id}/embed${_opt}"
                                                                scrolling="no" frameborder="no">
                            </iframe>
                            <div id="xrs_tv--${i}" class="xrs_icon xrs_icon--tv" style="width:32px; height:32px; background-image:url(${path}/svg/expand.svg); background-size:100%; display: inline-block; vertical-align: middle;"></div>
                            <div id="xrs_close--${i}" class="xrs_icon xrs_icon--close xrs_icon--zoom" style="width:32px; height:32px; background-image:url(${path}/svg/min.svg); background-size:100%; vertical-align: middle;"></div>
                            <div id="xrs_cover--${i}" class="xrs_cover"></div>
                            <div id="xrs_box--${i}" class="xrs_icon xrs_box" style="height: 44px;">
                                <div id="xrs_wide--${i}" class="xrs_icon--wide xrs_icon--zoom" style="margin: 0 3px; width:32px; height:32px; background-image:url(${path}/svg/pagefull.svg); background-size:100%; display: inline-block; vertical-align: middle;"></div>
                                <div id="xrs_open--${i}" class="xrs_icon--open xrs_icon--zoom" style="margin: 0 3px; width:32px; height:32px; background-image:url(${path}/svg/fullscreen.svg); background-size:100%; display: inline-block; vertical-align: middle;"></div>
                            </div>
                        </div>`;
                    }

                    xrsApi.push(document.getElementById('xrs_frame--' + i).contentWindow);

                    //NOTE: タイムアウトまでの時間。
                    const _setTime = _timeout ? _timeout : 30;

                    //NOTE: 読み込みを感知しなければ、ここで削除のはず。
                    //単一コンテンツの場合のみ作動させる。
                    //ローカルファイルの場合はpostMessageが動かないので除外。
                    if (location.protocol != 'file:') {
                        if ($xr.length <= 1) {
                            xrsTime[i] = setTimeout((i) => {
                                xrsApi[i].postMessage({act: 'time', id: i}, '*');
                            }, parseInt(_setTime) * 1000, i);

                            xrsCheck[i] = setTimeout((i) => {
                                if (xrsTimeArr.indexOf(i) == -1) $xr[i].innerHTML = '';
                            }, (parseInt(_setTime) + 1) * 1000, i);
                        }

                        pmInterval[i] = setInterval((i) => {
                            if (pmDone) clearInterval(pmInterval[i]);
                            xrsApi[i].postMessage({act: 'check', id: i}, '*');
                        }, 1000, i);
                    }

                    if (!_withoutFullBox) {
                        const $open = document.getElementById('xrs_open--' + i);
                        const $wide = document.getElementById('xrs_wide--' + i);
                        const $close = document.getElementById('xrs_close--' + i);
                        const $cover = document.getElementById('xrs_cover--' + i);
                        const $box = document.getElementById('xrs_box--' + i);
                        const $tv = document.getElementById('xrs_tv--' + i);

                        $open.addEventListener('click', (e) => {
                            const _id = e.target.id.replace('xrs_open--', '');
                            const $e_box = document.getElementById('xrs_box--' + _id);
                            const $e_cover = document.getElementById('xrs_cover--' + _id);
                            const $e_close = document.getElementById('xrs_close--' + _id);
                            const $e_tv = document.getElementById('xrs_tv--' + _id);

                            $e_close.style.display = 'block';
                            $e_tv.style.display = 'none';
                            $e_box.style.display = 'none';
                            $e_cover.style.display = 'none';

                            if (screenfull.isEnabled) {
                                if (!xrs_FullScreen) {
                                    xrs_FullScreen = true;
                                    const _id = e.target.id.replace('xrs_open--', '');
                                    const element = document.getElementById('xrs_body--' + _id);
                                    screenfull.request(element);

                                    for (var i = 0; i < $xrsFull.length; i++) $xrsFull[i].classList.add('xrs-full--on');
                                    for (var i = 0; i <= 10; i++) {
                                        for (var c = 0; c < $xrsFulls[i][c].length; c++) $xrsFulls[i][c].classList.add(`xrs-full-${i}--on`);
                                    }
                                }
                            }
                            else{
                                alert("フルスクリーン未対応です");
                            }
                        });

                        $wide.addEventListener('click', (e) => {
                            xrs_WideScreen = true;
                            const _id = e.target.id.replace('xrs_wide--', '');
                            const $element = document.getElementById('xrs_body--' + _id);
                            const $e_box = document.getElementById('xrs_box--' + _id);
                            const $e_cover = document.getElementById('xrs_cover--' + _id);
                            const $e_close = document.getElementById('xrs_close--' + _id);
                            const $e_tv = document.getElementById('xrs_tv--' + _id);

                            $e_close.style.display = 'block';
                            $e_tv.style.display = 'none';
                            $e_box.style.display = 'none';
                            $e_cover.style.display = 'none';
                            $element.style.position = 'fixed';
                            $element.style.zIndex = 2000;
                            $element.style.top = 0;
                            $element.style.left = 0;
                            _overflow = document.body.style.overflow;
                            document.body.style.overflow = 'hidden';

                            for (var i = 0; i < $xrsWide.length; i++) $xrsWide[i].classList.add('xrs-wide--on');
                            for (var i = 0; i <= 10; i++) {
                                for (var c = 0; c < $xrsWides[i].length; c++) $xrsWides[i][c].classList.add(`xrs-wide-${i}--on`);
                            }
                        });

                        $close.addEventListener('click', (e) => {
                            const _id = e.target.id.replace('xrs_close--', '');
                            const $e_tv = document.getElementById('xrs_tv--' + _id);

                            $e_tv.style.display = 'block';
                            e.target.style.display = 'none';

                            if (xrs_FullScreen) {
                                xrs_FullScreen = false;
                                screenfull.exit();

                                for (var i = 0; i < $xrsFull.length; i++) $xrsFull[i].classList.remove('xrs-full--on');
                                for (var i = 0; i <= 10; i++) {
                                    for (var c = 0; c < $xrsFulls[i].length; c++) $xrsFulls[i][c].classList.remove(`xrs-full-${i}--on`);
                                }
                            }

                            if (xrs_WideScreen) {
                                xrs_WideScreen = false;
                                const _id = e.target.id.replace('xrs_close--', '');
                                const $element = document.getElementById('xrs_body--' + _id);

                                $element.style.zIndex = 1;
                                $element.style.position = 'unset';
                                document.body.style.overflow = _overflow;

                                for (var i = 0; i < $xrsWide.length; i++) $xrsWide[i].classList.remove('xrs-wide--on');
                                for (var i = 0; i <= 10; i++) {
                                    for (var c = 0; c < $xrsWides[i].length; c++) $xrsWides[i][c].classList.remove(`xrs-wide-${i}--on`);
                                }
                            }
                        });


                                                if (navigator.platform == "MacIntel" &&
                            navigator.userAgent.indexOf("Safari") != -1 &&
                            navigator.userAgent.indexOf("Chrome") == -1) {
                            if (navigator.standalone !== undefined) {
                                _withoutBox = true;
                            }
                        }
                        
                        if (_withoutBox) {
                            $tv.addEventListener('click', (e) => {
                                xrs_WideScreen = true;
                                const _id = e.target.id.replace('xrs_tv--', '');
                                const $element = document.getElementById('xrs_body--' + _id);
                                const $e_box = document.getElementById('xrs_box--' + _id);
                                const $e_cover = document.getElementById('xrs_cover--' + _id);
                                const $e_close = document.getElementById('xrs_close--' + _id);
                                const $e_tv = document.getElementById('xrs_tv--' + _id);

                                $e_close.style.display = 'block';
                                $e_tv.style.display = 'none';
                                $e_box.style.display = 'none';
                                $e_cover.style.display = 'none';
                                $element.style.position = 'fixed';
                                $element.style.zIndex = 2000;
                                $element.style.top = 0;
                                $element.style.left = 0;
                                _overflow = document.body.style.overflow;
                                document.body.style.overflow = 'hidden';

                                for (var i = 0; i < $xrsWide.length; i++) $xrsWide[i].classList.add('xrs-wide--on');
                                for (var i = 0; i <= 10; i++) {
                                    for (var c = 0; c < $xrsWides[i].length; c++) $xrsWides[i][c].classList.add(`xrs-wide-${i}--on`);
                                }
                            });
                        } else {
                            $tv.addEventListener('click', (e) => {
                                const _id = e.target.id.replace('xrs_tv--', '');
                                const $e_box = document.getElementById('xrs_box--' + _id);
                                const $e_cover = document.getElementById('xrs_cover--' + _id);

                                $e_box.style.display = 'block';
                                $e_cover.style.display = 'block';

                                for (var i = 0; i < $xrsWide.length; i++) $xrsWide[i].classList.remove('xrs-wide--on');
                                for (var i = 0; i <= 10; i++) {
                                    for (var c = 0; c < $xrsWides[i].length; c++) $xrsWides[i][c].classList.remove(`xrs-wide-${i}--on`);
                                }
                            });
                        }


                        $cover.addEventListener('click', (e) => {
                            const _id = e.target.id.replace('xrs_cover--', '');
                            const $e_box = document.getElementById('xrs_box--' + _id);

                            $e_box.style.display = 'none';
                            e.target.style.display = 'none';
                        });
                    }
                }
            }
        };

        window.addEventListener('message', (e) => {
            if (e.data.act == 'done') pmDone = true;
        });

        window.addEventListener('message', (e) => {
            if (e.data.act == 'time') xrsTimeArr.push(e.data.onLoad);
        });

        const displayArr = [];
        let $xrsIDarr = [], xrsIsFirst = true, displayTimer = [];

        for (var i = 0; i < $xr.length; i++) {
            $xrsIDarr.push($xr[i].dataset.id);
        }

        const observer = lozad('.xr-studio', {
            rootMargin: '10%',
            load: function(el) {
                displayArr.push(el.dataset.id);

                if (xrsIsFirst) {
                    xrsIsFirst = false;
                    $xrsIDarr = $xrsIDarr.filter(n => n !== el.dataset.id);
                    showXRS(el.dataset.id);
                }
            }
        });
        observer.observe();

        displayTimer = setInterval(() => {
            if (!xrsIsFirst) {
                let _isFirst = true;

                displayArr.map((val) => {
                    $xrsIDarr.map((id) => {
                        if (_isFirst && val == id) {
                            $xrsIDarr = $xrsIDarr.filter(n => n !== id);
                            _isFirst = false;
                            showXRS(val);
                            if ($xrsIDarr.length <= 0) clearInterval(displayTimer);
                        }
                    });
                });
            }
        }, 600);
    });
})();