jQuery(document).ready(function() {    
        // cache a reference to the countdown element so we don't have to query the DOM for it on each ping.
        var $countdown;
        //class="alert alert-warning"
        $('body').append('<div class="message-box message-box-warning animated fadeIn" data-sound="fail" id="mb-idle_time_out">'+
        '<div class="mb-container"><div class="mb-middle"><div class="mb-title"><span class="fa fa-warning"></span> Your session is about to <strong>expire</strong>!</div>'+
        '<div class="mb-content">'+
        '<p>'+
        'You have been idle for sometime now, therefore your account will be logged out automatically in '+
        '<a><span id="idle-timeout-counter" style="font-weight:bold; font-size: 18px;"></span></a> seconds.'+
        '<br /><br />Do you want to continue your session?</p></div>'+
        '<div class="mb-footer"><div class="pull-right">'+
        '<a href="javascript:;" id="idle-timeout-dialog-logout" class="btn btn-danger btn-lg">No, Logout</a>  '+
        '<button id="idle-timeout-dialog-keepalive" class="btn btn-success btn-lg mb-control-close">Yes, Keep Working</button>'+
        '</div></div></div></div></div>');
        
        var box = $('#mb-idle_time_out');
        
        // start the idle timer plugin
        $.idleTimeout('#mb-idle_time_out', '.mb-middle button:last', {
            idleAfter: 500, // 8 minutes
            timeout: 30000, //30 seconds to timeout
            pollingInterval: 5, // 5 seconds
            keepAliveURL: '../sys/keep_alive.php',
            serverResponseEquals: '',//default OK
            onTimeout: function(){
                window.location = "?timer-expire";
            },
            onIdle: function(){
                //$('#mb-idle_time_out').html('show');
                box.toggleClass("open");

                var sound = box.data("sound");    
                if(sound === 'alert')
                    playAudio('alert');    
                if(sound === 'fail')
                    playAudio('fail');
                $countdown = $('#idle-timeout-counter');

                $('#idle-timeout-dialog-keepalive').on('click', function () { 
                    //$('#mb-idle_time_out').html('hide');
                    $('#mb-idle_time_out').parents(".message-box").removeClass("open");
                    return false;
                });

                $('#idle-timeout-dialog-logout').on('click', function () { 
                    //$('#mb-idle_time_out').html('hide');
                    $('#mb-idle_time_out').parents(".message-box").removeClass("open");
                    window.location = "?logout";
                    //$.idleTimeout.options.onTimeout.call(this);
                });
            },
            onCountdown: function(counter){
                $countdown.html(counter); // update the counter
            }
        });
	});