/*
 * @brief Bootstrap a responsive iframe
 * @author lorenzogangi@gmail.com
 */
function createIframe( id, src ){



    var scriptTag = document.getElementById( id ),
        _mobile = false,
        wrapper = document.createElement( 'div' ),
        iframe = document.createElement( 'iframe' );

    _mobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test( navigator.userAgent.toLowerCase() ) );
    wrapper.className = "tst-iframe-wrapper";
    
    iframe.className = "tst-iframe";
    iframe.setAttribute( "allowfullscreen", "" );
    iframe.setAttribute( "webkitallowfullscreen", "" );
    iframe.setAttribute( "mozallowfullscreen", "" );
    
    wrapper.appendChild( iframe );

    //insert the iframe
    scriptTag.parentNode.insertBefore( wrapper, scriptTag );
    
    //check if we are working with a small iframe
    if ( iframe.clientWidth < 640 ){
       
       //add a start screen if its not specified
       if( src.indexOf( "?" ) !== -1 ) {
           src =  src+"&startscreen=true";
       }
       else {
           src =  src+"?startscreen=true";
       }
       
       //remove the startscreen flag from the request buffer so app doesnt open with a start screen
       //modalIframe.src = src.replace( /startscreen=true/gi, "" ).replace( "&modal", "");
       var modalSrc = src.substring( 0, src.indexOf( '?' ) );
       
       //add back in the no brand flag if it is in the url.
       if( src.indexOf( "brand=false" ) !== -1 ) {
           modalSrc+="?brand=false"   
       }
       
       //create a click cover
       var clickCover = document.createElement( 'div' );
       clickCover.className = "tst-click-cover";
       wrapper.appendChild( clickCover );
       
       //desktop logic to pop the viewer in a modalish window
       if( !_mobile ) {
       
           //add a modal iframe to hold the viwer after the user clicks to start looking at it.
           var modalIframe = document.createElement( 'iframe' ),
               modalIframeClose = document.createElement( 'div' ),
               close = document.createElement('div');
               
              
           modalIframe.className = "tst-iframe tst-modal-iframe";
           modalIframeClose.className = "tst-modal-iframe-close";
           close.className = "close-x";
           close.innerHTML = "x"    
           modalIframeClose.appendChild( close );
           wrapper.appendChild( modalIframe );
           wrapper.appendChild( modalIframeClose );
       
           //bind the clickcover
           clickCover.addEventListener( "click", function( modalIframe, modalIframeClose ) {
               return function() {

                   modalIframe.classList.toggle( "tst-modal-iframe--show" );
                   modalIframeClose.classList.toggle( "tst-modal-iframe--show" );
                   
                   //load the iframe with the viewer the first time a user clicks the start screen
                   if(modalIframe.src === "") {
                      modalIframe.src = modalSrc;
                   }
                      
              };
           }( modalIframe, modalIframeClose ) );
           
           
           modalIframeClose.addEventListener( "click", function( modalIframe, modalIframeClose ) {
               
               return function() {
                   modalIframe.classList.add( "opacity-off");
                   modalIframeClose.classList.add( "opacity-off");
                   
                   setTimeout( function(){
                       modalIframe.classList.toggle( "tst-modal-iframe--show" );
                       modalIframeClose.classList.toggle( "tst-modal-iframe--show" );
                       modalIframe.classList.remove( "opacity-off");
                       modalIframeClose.classList.remove( "opacity-off");
                   }, 311)
                       
               };
                   
           }( modalIframe, modalIframeClose ) );
           
       }
       //mobile logic. Here we just send the user to a new tab containing the viewer
       else {

           clickCover.addEventListener( "click", function() {
               
               window.location = modalSrc;
               return true;
     
           } );
           
       }
       
    }
    
    //load the viewer
    iframe.src = src;

    //add the iframe css if it hasn't been added by another iframe bootstrap
    if( !document.getElementById( "tst-iframe-style" ) ) {
        var iframeStyle = document.createElement( 'style' );
        iframeStyle.id = "tst-iframe-style";
        iframeStyle.innerHTML = ".tst-iframe-wrapper{ clear: both; position: relative; padding-bottom: 65%; height: 0; overflow: hidden; max-width: 100%; }"+ 
                                ".tst-iframe { border:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; }"+
                                ".tst-modal-iframe { height: 0; width: 90%; position: fixed; top: 5%; right: 5%; bottom: 5%; left: 5%; opacity: 0; z-index: 2147483647; transition: opacity .3s ease-in-out; }"+
                                ".tst-modal-iframe-close { position: fixed; top:0; left: 0; background-color: #000; width: 100%; height: 0; z-index: 2147483646; opacity: 0; transition: opacity .5s ease-in-out; }"+
                                ".close-x { width: 30px; height: 30px; border: 2px solid white; color: white; font-size: 24px; border-radius: 50%; font-weight: bold; font-family: arial; text-align: center; line-height: 23px; position: absolute;top: 2%;right: 2%;cursor: pointer;}"+
                                //".close-x { z-index: 2147483647; width: 30px; height: 30px;  margin: 5px; background-image:url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgOTYgOTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDk2IDk2IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNNDgsMEMyMS40OTIsMCwwLDIxLjQ5MiwwLDQ4czIxLjQ5Miw0OCw0OCw0OHM0OC0yMS40OTIsNDgtNDhTNzQuNTA4LDAsNDgsMHogTTY3LjQxNiw2NC41ODQgIGMwLjc3OSwwLjc3NSwwLjc3OSwyLjA0OCwwLDIuODI4Yy0wLjM5MywwLjM5My0wLjkwNCwwLjU4NC0xLjQxNiwwLjU4NHMtMS4wMjMtMC4xOTYtMS40MTYtMC41ODRMNDgsNTAuODI4TDMxLjQxNiw2Ny40MTIgIGMtMC4zOTIsMC4zOTMtMC45MDQsMC41ODQtMS40MTYsMC41ODRzLTEuMDI0LTAuMTk2LTEuNDE2LTAuNTg0Yy0wLjc4LTAuNzgtMC43OC0yLjA1MywwLTIuODI4TDQ1LjE2OCw0OEwyOC41ODQsMzEuNDE2ICBjLTAuNzgtMC43OC0wLjc4LTIuMDQ4LDAtMi44MjhjMC43OC0wLjc4LDIuMDQ4LTAuNzgsMi44MjgsMGwxNi41ODQsMTYuNTg0TDY0LjU4LDI4LjU4OGMwLjc3OS0wLjc4LDIuMDUyLTAuNzgsMi44MjgsMCAgYzAuNzc5LDAuNzgsMC43NzksMi4wNDgsMCwyLjgyOEw1MC44MjQsNDhMNjcuNDE2LDY0LjU4NHoiLz48L3N2Zz4=\");}"+
                                ".tst-modal-iframe--show { height: 90%; opacity: 1; }"+
                                ".tst-modal-iframe-close.tst-modal-iframe--show { opacity: .8; height: 100% }"+
                                ".tst-click-cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }"+
                                ".opacity-off{ opacity:0; }"+
                                "@media (max-width: 767px) { .tst-iframe-wrapper{ padding-bottom: 165%;} }"+
                                "@media (min-width: 481px) and (max-width: 767px) and (orientation: landscape) { .tst-iframe-wrapper{ padding-bottom: 60%;} }"+
                                "@media (min-width: 768px) and (max-width: 1023px) { .tst-iframe-wrapper{ padding-bottom: 98%;} }"+
                                "@media (min-width: 1500px) { .tst-iframe-wrapper{ padding-bottom: 60%;} }";
        scriptTag.parentNode.insertBefore( iframeStyle, wrapper );
    }

    //remove the scriptTag from the dom
    scriptTag.parentNode.removeChild( scriptTag );
}


window.addEventListener( "load", function( ev ) {
    createIframe( "tst-c1kma1", "https://my.threesixty.tours/app/v/3323mu/73tzlp/c1kma1" );
})