var nbchat;
var oldchat;
var toutvar;

var linktmp = '';
var offre = 'SupShop';

function openSupshop() {
    clearTimeout(toutvar);
    let chatlink = 'https://supshop.bexter.fr/webview/webchat.php?supshop_id=universburger';

    if (chatlink == linktmp) {
        // console.log('ok');
        return;
    }

    frameshopsrc.location= chatlink;
    linktmp = chatlink;


    jQuery('#supshop_notif').hide();
    jQuery('#supshop_iframe').show();
}

function closeSupshop() {
    clearTimeout(toutvar);
    jQuery('#supshop_iframe').hide();
    linktmp = 'https://supshop.bexter.fr/webview/wait.php';
    frameshopsrc.location= 'https://supshop.bexter.fr/webview/wait.php'; // Pour arreter les maj
    jQuery('#supshop_notif').show();
    var tmout = 1 + '';

    if(tmout != '0'){
        jQuery.ajax('https://supshop.bexter.fr/webview/nochat.php', {
            type: 'POST',
            data: {'id': '39401bb7efcca4c7c4a201fc72b6bd1b'},
            success: function(result) {
                //console.log('log', result);
            }
        });
    }

}

jQuery(window).load(function(){
    var htmlicon = `
            <div id="supshop_notif" style="position: relative; cursor: pointer; display: block;">
                <div style="position: absolute; width: 25px; height: 25px; top: 0px; right: 0px;"></div>
                <img alt="SupShop Bexter : Plug-in Boutique en ligne Bexter" src="https://supshop.bexter.fr/webview/getPicto.php?supshop_id=universburger" onclick="openSupshop()">
                <div style="position: absolute; width: 25px; height: 25px; top: 0px; right: 30px; font-family: Helvetica, Arial, sans-serif; background: red none repeat scroll 0% 0%; font-size: 12px; color: white; border-radius: 100px; text-align: center; line-height: 25px; display: none; "></div>
            </div>
    `;
    if(offre === 'SupShop'){
        htmlicon = `
            <div id="supshop_notif" style="position: relative; cursor: pointer; display: block;">
                <i class="fa fa-shopping-cart iconfont"  title="SupShop Bexter : Plug-in Boutique en ligne Bexter" onclick="openSupshop()"></i>
            </div>
        `;
    }
    jQuery('#supshop').html(`
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <div id="supshop_container" class=" " style="position: fixed; padding: 10px; z-index: 3000000; overflow: hidden; top: initial;">
            `+ htmlicon +`
            <!--- <div id="supshop_notif" style="position: relative; cursor: pointer; display: block;">
                <div style="position: absolute; width: 25px; height: 25px; top: 0px; right: 0px;"></div>
                <img alt="SupShop Bexter : Plug-in Boutique en ligne Bexter" src="https://supshop.bexter.fr/webview/getPicto.php?supshop_id=universburger" onclick="openSupshop()">
                <div style="position: absolute; width: 25px; height: 25px; top: 0px; right: 30px; font-family: Helvetica, Arial, sans-serif; background: red none repeat scroll 0% 0%; font-size: 12px; color: white; border-radius: 100px; text-align: center; line-height: 25px; display: none; "></div>
            </div> -->
            <div id="supshop_iframe" style="display: none; background: white; border: solid 0px #eee; box-shadow: 0px 0px 10px #777; ">
                <iframe name="frameshopsrc" id="supshopFrameImage" frameborder="no" style="width: 100%; height: 315px; margin-bottom: 0;"></iframe>
                <div class="copyshop">&copy 2020 - <a href='https://www.bexter.fr/' target="_self" title='Solution internet'>SupShop Bexter</a></div>
            <div style="position: absolute;left: 285px;top: 16px;width: 100%;z-index: 2000; text-align: initial;">
                    <a href="#" onclick="closeSupshop()">
                        <i class="fa fa-times" aria-hidden="true"></i>
                    </a>
                </div>
                </div>
        </div>
        <style>
            .iconfont {
                background-color: #111111;
                color: #e37b1a;
                font-size: 30px;
                border-radius: 50% !important;
                padding: 14px 17px 16px 14px;
                box-shadow: 2px 3px 15px -7px black;
                transition: all ease 0.4s;
            }
            .iconfont:hover {
                opacity: 0.8;
            }
            .copyshop {
                width: 100% !important;
                font-size: 10px !important;
                text-align: center !important;
                height: 17px !important;
                margin-top: 0px !important;
                padding:0 0 5px 0 !important;
                border-top: solid 1px #F0F0F0 !important;
                color: #222 !important;
                line-height: 1.7 !important;
            }
            .copyshop a {
                color: #222 !important;
                text-decoration: none !important;
                font-size: 10px !important;
            }
            .fa-times {
                position: inherit;
                color: white;
                font-size: 15px;
                font-weight: normal;
            }
            .fa-times:hover {
                opacity: 0.8;
            }
            #imgbtn { margin-top: 5px;}
            #imgbtn:hover {opacity: .8;}
            #supshop_iframe, #supshopFrameImage{border-radius:  !important;}
            #supshop_container {
                /* bottom: 45%; */
                bottom: 0px;
                left: auto; right: 0px;             }
            @media (max-width: 769px) {
                #supshop_container {
                    bottom: 0px;
                    right: auto; left: 0px;                 }
                            }
            @media (min-width: 770px) {
                        }
        </style>
    `);

    var tmout = 1 + '000';
    console.log(tmout, 'supshop timeout');

    if(tmout=='-1000') {
        openSupshop(); // sans attendre
    } else if(tmout != '0000'){
        toutvar = setTimeout(openSupshop, tmout);
    }

})