internetconnection - v2

var InternetConnection = function() {

    var isRunning = false;

    this.connected = true;

    var isShowedDialog = false;

    //init popup
    var initPopup = setInterval(function() {
        if (document.body) {
            clearInterval(initPopup);

            var popup_style = document.createElement('style');
            popup_style.innerHTML = '#no_internet_popup { z-index: 10000001; top: 0%; width: 100%; height: 100%; -webkit-transform: translateZ(0); font-size: 8px; background-color: rgba(0,0,0,0.5) } ' +
                            '#no_internet_popup { position: fixed; left: 0; right: 0; bottom: 0; text-align: center } ' +
                            '#no_internet_popup > div { display: inline-block; vertical-align: middle } ' +
                            '#no_internet_popup .info_cont { margin-top: -8em; top: 50% } ' +
                            '#no_internet_popup { -webkit-transform: translateZ(0); position: absolute; left: 0; color: #000; z-index: 9999 } ' +
                            '#no_internet_popup .info_cont { width: 36em; background: rgba(255, 255, 255, 0.9); text-align: center; position: relative } ' +
                            '#no_internet_popup .title { font-weight: bold; padding: 1em 1em 0 1em } ' +
                            '#no_internet_popup .title span { font-size: 3em } ' +
                            '#no_internet_popup .body { padding: 1em } ' +
                            '#no_internet_popup .body span { font-size: 2em } ' +
                            '#no_internet_popup .actions { color: #60A5F2 } ' +
                            '#no_internet_popup .actions div { padding: 1em; width: 15.9em } ' +
                            '#no_internet_popup .actions span { font-size: 2.5em } ' +
                            '.popup_yes { float: left; font-weight: bold; border-top: 1px solid #DCDCDC; border-right: 1px solid #DCDCDC } ' +
                            '.popup_no { float: left; font-weight: bold; border-top: 1px solid #DCDCDC }';
            document.head.appendChild(popup_style);

            var no_internet_popup = document.createElement('div');
            no_internet_popup.id = 'no_internet_popup';
            no_internet_popup.style.cssText = 'display: none;';
            no_internet_popup.innerHTML = '<div class="info_cont radius5">\
                    <div class="title" id="no_internet_popup_header"><span>No internet connection</span></div>\
                    <div class="body" id="no_internet_popup_body"><span>Please check your internet connection</span></div>\
                    <div class="actions">\
                            <div id="cancel_yes" class="popup_yes" onclick="no_internet_popup_close();" tabindex="0">\
                                    <span>Close</span>\
                            </div>\
                            <div id="cancel_no" class="popup_no" onclick="no_internet_popup_resume();" tabindex="0">\
                                    <span>Retry</span>\
                            </div>\
                            <div class="clear"></div>\
                    </div>\
                </div>';
            document.body.appendChild(no_internet_popup);
        }
    }, 500);

    function showDialog(dialog) {
        isShowedDialog = true;
        var ele = document.getElementById(dialog);
        ele.style.display = '';
    }

    function hideDialog(dialog) {
        isShowedDialog = false;
        var ele = document.getElementById(dialog);
        ele.style.display = 'none';
    }

    function checkConnection() {
        if (!isShowedDialog)
            window.InternetConnection.check();
    }

    window.no_internet_popup_close = function () {
        send_tracking(tracking_actions.ads_close);
    }

    window.no_internet_popup_resume = function() {
        hideDialog('no_internet_popup');
    }

    this.canConnectInternet = function() {
        return window.InternetConnection.connected;
    }

    this.check = function() {
        if(isRunning) return;

        var request = new XMLHttpRequest();
        request.open("GET", resource.get_src('asset/ping.txt'), true);
        request.timeout = 10000; //10sec
        request.overrideMimeType('text/plain; charset=x-user-defined');

        request.onload = function(){
            window.InternetConnection.connected = request.response.startsWith('OK');
            isRunning = false;
        };

        request.onerror = function(){
            window.InternetConnection.connected = false;
            showDialog('no_internet_popup');
            isRunning = false;
        };

        request.ontimeout = function(){
            window.InternetConnection.connected = false;
            showDialog('no_internet_popup');
            isRunning = false;
        };

        isRunning = true;
        request.send();
    }
}

var InternetConnection = new InternetConnection();