$( document ).ready( function() {
    
    // set the height of the overlay :)
    $('#overlay').css( {
      'height' : Math.max( $(document).height(), $(window).height(), document.documentElement.clientHeight )
    } );
    
    // init the forms effects of showing and hiding the texts in the inputs :)
    initTheFormsEffects();
    
  } );
  
  function submitContactForm( url ) {
    
    // enter the waiting state ;)
    $('#overlay').css( { 'display' : 'block' } );
    $('body').css( { 'cursor' : 'wait' } );
    
    // get the values from the input fields and the textarea ;)
    var params = {
      'Firma' : $('#Firma').val(),
      'Name' : $('#Name').val(),
      'Telefon' : $('#Telefon').val(),
      'Ort' : $('#Ort').val(),
      'PLZ' : $('#PLZ').val(),
      'eMail' : $('#eMail').val(),
      'Nachricht' : $('#Nachricht').val(),
      'security_code' : $('#security_code').val(),
      'security_code_2' : $('#security_code_2').val(),
      'submit' : $('#submit').val(),
      'is_ajax_request' : 1
    }
    
    // and execute the request :)
    $.post(
      url,
      params,
      function( data ) {
        // populate the result :)
        $('#kontaktForma').html( data );
        // and init the effects once again :)
        initTheFormsEffects();
        // exit the waiting state ;)
        $('#overlay').css( { 'display' : 'none' } );
        $('body').css( { 'cursor' : 'default' } );
      }
    );
    
  }
  
  function initTheFormsEffects() {
    
    // the hover and hover-out effects of the form inputs :)
    $( '#contacts-form input, #contacts-form textarea' ).hover( function() {
      var input_id = $(this).attr( 'id' );
      if( default_values_of_inputs[ input_id ] != null ) {
        if( $(this).val() == default_values_of_inputs[ input_id ] ) {
          $(this).val( '' );
        }
      }
    }, function() {
      var input_id = $(this).attr( 'id' );
      if( default_values_of_inputs[ input_id ] != null ) {
        if( $(this).val() == '' && variables_of_inputs_focuses[ input_id ] != true ) {
          $(this).val( default_values_of_inputs[ input_id ] );
        }
      }
    } );
    
    // the focus effects of the form inputs :)
    $( '#contacts-form input, #contacts-form textarea' ).focus( function() {
      var input_id = $(this).attr( 'id' );
      if( default_values_of_inputs[ input_id ] != null ) {
        if( $(this).val() == default_values_of_inputs[ input_id ] ) {
          $(this).val( '' );
        }
        variables_of_inputs_focuses[ input_id ] = true;
      }
    } );
    
    // the loosing focus effect of the form inputs ;)
    $( '#contacts-form input, #contacts-form textarea' ).blur( function() {
      var input_id = $(this).attr( 'id' );
      if( default_values_of_inputs[ input_id ] != null ) {
        if( $(this).val() == '' ) {
          $(this).val( default_values_of_inputs[ input_id ] );
        }
        variables_of_inputs_focuses[ input_id ] = false;
      }
    } );
    
  }
  
  // function that refresh an image upon the image id :)
  // here is used only for the captcha image, but can be used anywhere :)
  function refresh_image( image_id ) {
    
    var image_src = $( '#' + image_id ).attr( 'src' );
    var pos = image_src.indexOf( '?' );
    if( pos >= 0 ) {
      image_src = image_src.substr( 0, pos );
    }
    var date = new Date();
    image_src = image_src + '?v=' + date.getTime();
    $( '#' + image_id ).attr( 'src', image_src );
    
    $('.search_narrow_r').val( '' );
    
  }