$().ready(
  function()
    {
    $('#fbackbutton').click(function()
      {
       // return false;
       creatOverlay();
       
      });
    }
    );

      
      
  function creatOverlay()   // - функция затемнения страницы И запуска анимации И запрос на сервер
    {
     
    // проверка заполенения полей Имя и Сайт
    var namendsite = true ;  
    var errmsg = "" ;
        
    var str = $("input[name='input_feedback_name']").val() ;
    var str = str.replace(/^\s+/, "").replace(/\s+$/, "") ;
    if ( str == "" ) 
      { 
        namendsite = false ; 
        errmsg += "<P>Не введено Имя" ;
      };
    
    var str = $("input[name='input_feedback_site']").val() ;
    var str = str.replace(/^\s+/, "").replace(/\s+$/, "") ;    
    if ( str == "" ) 
      { 
        namendsite = false ; 
        errmsg += "<P>Не введен адрес сайта" ;
      };    
    
    // проверка корректности почты
    var regxp_mail = /[0-9a-z_]+@[0-9a-z_]+\.[a-z]{2,5}/i; 
    var check_mail = regxp_mail.test($("input[name='input_feedback_mail']").val()) ; 
    if (!check_mail) errmsg += "<P>Не верно заполнен адрес электронной почты" ;

    // проверка каптчи
    var checkcaptcha = Math.floor(Math.sqrt(parseInt($("input[name='input_feedback_cpkf1']").val()) + parseInt($("input[name='input_feedback_cpkf2']").val()) * 3));
    
    var str = $("input[name='input_feedback_captcha']").val() ;
    var str = str.replace(/^\s+/, "").replace(/\s+$/, "") ;
    if ( str != "" )
      {
        captcha = parseInt(str) ;
        if ( captcha != checkcaptcha ) 
          {
            captcha = false ;
            errmsg += "<P>Не верно введена проверочная сумма" ;
          };  
        
      }  
    else
      {
        captcha = false ;
        errmsg += "<P>Не верно введена проверочная сумма" ;
      };
             
    
    
        
    // затемнение
    var docHeight = $(document).height();
 
    $("<div id='overlay'></div>")
    .appendTo("body")
    .height(docHeight)
    .css({
      'opacity': 0.6,
      'position': 'absolute',
      'top': 0,
      'left': 0,
      'background-color': 'black',
      'width': '100%',
      'z-index': 4000
    })
    .click(function()
      {
      $('#overlay').detach();
      $('#overlay_alert_bg').detach();
      imgObj.hide();
      });
    // -- затемнение
    
      var width_bg = 420;
      var height_bg = 214;
      var centerY = $(window).scrollTop() + ( $(window).height() )/2 - height_bg/2;
      var centerX = $(window).scrollLeft() + ( $(window).width() )/2 - width_bg/2;    
            
    $("<div id='overlay_alert_bg'></div>")
    .appendTo("body")
    .css({
      'opacity': 0.8,
      'position': 'absolute',
      'top': centerY,
      'left': centerX,
      'background-color': 'transparent',
      'width': width_bg + 'px',
      'height': height_bg + 'px',
      'z-index': 4005
    });  


        
    $("<div id='overlay_alert'></div>")
    .appendTo("#overlay_alert_bg")
    .html('<p>Ожидание...')
    .css({
      'opacity': 0.9,
      'position': 'relative',
      'top': 51,
      'left': 8,
      'background-color': '#512200',
      'text-align': 'center',
      'vertical-align': 'middle',
      'border': '1px solid white',
      'padding': '25px',
      'width': '350px',
      'height': '100px',
      'z-index': 4010
    });  
    
    if ( !check_mail || !namendsite || !captcha ) 
      $('#overlay_alert').html(errmsg)
    else 
    {  

               // запуск анимации
              // найдем элемент с изображением загрузки и уберем невидимость:
              var imgObj = $('#loadImg');
              imgObj.show();
             
              // вычислим в какие координаты нужно поместить изображение загрузки,
              // чтобы оно оказалось в серидине страницы:
              var centerY = $(window).scrollTop() + ($(window).height())/2 - height_bg/2;
              var centerX = $(window).scrollLeft() + ($(window).width())/2 - imgObj.width()/2;
             
              // поменяем координаты изображения на нужные:
              imgObj.offset({top:centerY, left:centerX});
              //  -- запуск анимации
              
                 
                 $.post(
                  "/mail.php", $("#feedback").serialize(),
                  function(data) { $('#overlay_alert').html(data); imgObj.hide(); }
                  );
              
          
  };    
    };