$(document).ready(function(){
     
     var secondsToHide = 10,
         lang = 'nl',
         secretId = Math.ceil(Math.random() * 1000);
              
    // Overlay background
    $('<div class="overlayBackground' + secretId + '" />').appendTo('body');
    
    // Overlay background CSS Settings
    $('.overlayBackground' + secretId).css({
        'width'         : '100%',
        'height'        : '100%',
        'background'    : '#000',
        'position'      : 'absolute',
        'top'           : 0,
        'left'          : 0,
        'opacity'       : 0.7,
        'z-index'       : 100
    });
    
    
    // Overlay body
    $('<div class="overlayBody' + secretId + '"><div class="overlayContainer' + secretId + '"><a href="#hide" id="hide' + secretId + '">' + secondsToHide + '</a><h1><span>' + accountTxt + '</span> ' + blockedTxt + '</h1><h2>' + suspendTitle + '</h2><p>' + suspendTxt + '</p></div></div>').appendTo('body');
    
    // Overlay body CSS Settings
    $('.overlayBody' + secretId + '').css({
        'display'       : 'block',
        'width'         : '500px',
        'height'        : '450px',
        'background'    : '#FFF',
        'position'      : 'absolute',
        'top'           : '50%',
        'left'          : '50%',
        'margin-top'    : '-225px',
        'margin-left'   : '-250px',
        'font-family'   : 'Verdana,Arial,Helvetica,sans-serif',
        'z-index'       : 110
    });
    
    // Overlay body CSS Settings
    $('.overlayBody' + secretId + ' .overlayContainer' + secretId + '').css({
        'display'       : 'block',
        'width'         : '100%',
        'height'        : '100%',
        'position'      : 'relative'
    });
    
    // Overlay background text
    $('.overlayBody' + secretId + ' h1').css({
        'font-weight'           : 'bold',
        'display'               : 'block',
        'font-family'           : 'Georgia',
        'font-size'             : '40px',
        'position'              : 'absolute',
        'bottom'                : '10px',
        'right'                 : '10px',
        'margin'                : 0,
        'color'                 : '#CCC',
        'text-align'            : 'right',
        'line-height'           : '30px'
    });
    
    // Overlay background text
    $('.overlayBody' + secretId + ' h2').css({
        'font-weight'   : 'bold',
        'margin'        : 0,
        'margin-bottom' : 0,
        'line-height'   : 'auto',
        'padding'       : '30px 30px 10px 30px',
        'font-size'     : '30px',
        'color'         : '#A1A1A1',
        'font-family'   : 'Georgia'
    });
    
    // Overlay background text
    $('.overlayBody' + secretId + ' p').css({
        'margin'        : 0,
        'padding'       : '10px 30px 10px 30px',
        'font-size'     : '13px',
        'line-height'   : 'auto',
        'color'         : '#A1A1A1',
        'font-family'   : 'Trebuchet MS',
        'font-weight:'  : 'normal'
    });
    
    // Overlay links
    $('.overlayBody' + secretId + ' p a').css({
        'margin'        : 0,
        'font-size'     : '12px',
        'color'         : '#A1A1A1',
        'font-family'   : 'Trebuchet MS'
    });
    
    // Overlay background text
    $('.overlayBody' + secretId + ' h1 span').css({
        'color'                 : '#DDD'
    });
    
    // Overlay Hide Button
    $('.overlayBody' + secretId + ' a#hide' + secretId).css({
        'position'          : 'relative',
        'float'             : 'right',
        'margin'            : '10px',
        'display'           : 'block',
        'width'             : '30px',
        'height'            : '30px',
        'line-height'       : '30px',
        'text-align'        : 'center',
        'border'            : '1px SOLID #800000',
        'background-color'  : '#C32148',
        'color'             : '#FFF',
        'text-decoration'   : 'none',
        'font-family'       : 'Arial',
        'padding'           : 0,
        'font-weight'       : 'bold'
    });        
    
    // Disable the href action     
    $('a#hide' + secretId).click(function(){
        return false;
    });
    
    // Set Rounded border CSS
    $('<style type="text/css">.overlayBody' + secretId + ' { -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-rightright-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-rightright-radius: 15px; }</style>').appendTo('body');

    function enableHide() {
        $('.overlayBody' + secretId + ' a#hide' + secretId + '').hover(function(){
            $(this).css({
                'background'        : '#800000',
                'color'             : '#FFF'
            });
        }, function(){
            $(this).css({
                'background'        : '#C32148',
                'color'             : '#FFF',
            });
        });
        
        $('a#hide' + secretId + '').click(function(){
            $('.overlayBody' + secretId + '').fadeOut(1000, function(){
                $(this).remove();
            });
            $('.overlayBackground' + secretId + '').fadeOut(1000, function(){
                $(this).remove();
            });
        });
    }
    
    function updateHide() {
        $('a#hide' + secretId).html(secondsToHide);
    }
    
    function updateTimer(){
        
        setTimeout(function() {
           secondsToHide--;
           if(secondsToHide == 0)
           {
               $('a#hide' + secretId).html('X');
               enableHide();
           }else{
               updateHide();
               updateTimer();
           }
        }, 1000); 
    
    }
    
    updateTimer();
 });