$(document).ready( function() {
  
  var $callDiv = $('#CallToOrder');
  
  $callForm = $('<form/>');
  var html =  '<div>Имя<sup>*</sup></div>' + 
              '<div><input id="callName" name="callName" type="text" value="" maxlength="20"></div>' +
              '<div>Телефон<sup>*</sup></div>' + 
              '<div><input id="callTel" name="callTel" type="text" value="" maxlength="20"></div>' +
              '<div><input class="CallSubmit" name="submit" type="submit" value="Заказать"></div>';
  $callForm[0].method =  'POST';
  $callForm[0].action = 'index.php';
  $callForm.html( html);
  $callDiv.append( $callForm);

  $callForm.submit( function( event) {

    this.AjaxError = function() {
      alert('Непредвиденная ошибка!');
      $callDiv.slideUp(100);
    };
    this.AjaxResponse = function( data) {
      alert( data);
      $('#callName').val('');
      $('#callTel').val('');
      $callDiv.slideUp(100);
    };
    
    if ( CallValidate()) {
      $.ajax({
        url: 'calltoorder.php?validate=1',
        data: $(this).serialize(),
        type: 'POST',
        success: this.AjaxResponse,
        error: this.AjaxError
      });
    }
    event.preventDefault();
  });

  $('#callName, #callTel').focus( function() {
    $(this).removeClass( 'CallError');
  });
  
  var $link = $('#CallLink');
  $link.click( function( event) {
    $callDiv.slideToggle(100);
    event.preventDefault();
  });

  function CallValidate() {
    var validate = true;
    $('#callName').removeClass( 'CallError');
    $('#callTel').removeClass( 'CallError');
    var name = $.trim( $('#callName').val());
    var tel = $.trim( $('#callTel').val());
    if ( name == '') {
      validate =  false;
      $('#callName').addClass( 'CallError');
    }
    if ( tel == '') {
      validate =  false;
      $('#callTel').addClass( 'CallError');
    }
    return validate;
  }
});
/*
$('head').append(
  '<style type="text/css">' +
  '.CallLayout {'+
  '  background-color: #ff662c;'+
  '  padding: 2px 4px 4px;'+
  '  position: absolute;'+
  '  z-index: 110;'+
  '  font-weight: normal;'+
  '  width: 220px;'+
  '}'+
  '#CallLink {'+
  '  color: #ffffff;'+
  '  font-size: 14px;'+
  '}'+
  '#CallToOrder {'+
  '  padding: 5px 6px 1px;'+
  '  display: none;'+
  '  font-size: 12px;'+
  '  color: #ffffff;'+
  '  font-weight: normal;'+
  '}'+
  '#CallToOrder form div {'+
  '  padding-bottom: 5px;'+
  '}'+
  '#CallToOrder input {'+
  '  width: 150px;'+
  '  border: 1px solid #ffffff;'+
  '}'+
  '#CallToOrder input.CallSubmit {'+
  ' margin-top: 5px;'+
  '  font-size: 12px;'+
  '  padding-bottom: 2px;'+
  '  height: 24px;'+
  '  width: auto;'+
  '}'+
  '.CallError {'+
  '  background-color: #fcd6c8;'+
  '}'+
  '</style>'
);*/
