$.fn.qtip.styles.kinetic_tip = 
{  
   textAlign: 'center',
   name: 'cream',
   tip: 'topMiddle',
   border: 
   {
     width: 7,
     radius: 5
   }
};

$.fn.qtip.styles.kinetic_tip_left = 
{  
   textAlign: 'center',
   name: 'cream',
   tip: 'topLeft',
   border: 
   {
     width: 7,
     radius: 5
   }
};
      
$(document).ready(function() 
{

   $('#contact_us_form').corner("round 10px");

   // Match all link elements with href attributes within the content div
   $('#contact_us_name').qtip(
   {
      content: 'Please enter your name' // Give it some content, in this case a simple string
      ,style: 'kinetic_tip'
      ,tip: 'topMiddle'
      ,position: 
      {
        corner: 
        {
          target: 'bottomLeft'
        }
      }
   }
   );
   

   // Match all link elements with href attributes within the content div
   $('#contact_us_email').qtip(
   {
      content: 'Please enter your email address' // Give it some content, in this case a simple string
      ,style: 'kinetic_tip'
      ,position: 
      {
        corner: 
        {
          target: 'bottomLeft'
        }
      }
   }
   );
   

   // Match all link elements with href attributes within the content div
   $('#contact_us_phone').qtip(
   {
      content: 'Please enter your phone number' // Give it some content, in this case a simple string
      ,style: 'kinetic_tip'
      ,position: 
      {
        corner: 
        {
          target: 'bottomLeft'
        }
      }
   }
   );
      
   
   // Match all link elements with href attributes within the content div
   $('#contact_us_message').qtip(
   {
      content: 'Please enter a message' // Give it some content, in this case a simple string
      ,style: 'kinetic_tip'
      ,position: 
      {
        corner: 
        {
          target: 'bottomLeft'
        }
      }
   }
   );   


   // Match all link elements with href attributes within the content div
   $('#contact_us_submit').qtip(
   {
      content: 'Send the contact information to Kinetic' // Give it some content, in this case a simple string
      ,style: 'kinetic_tip_left'

      ,position: 
      {
        corner: 
        {
          target: 'bottomLeft',
          tooltip: 'topLeft'
        }
      }
      ,tip: 'topLeft'
   }
   );  
  
 
  $('#contact_us_name').focus(toggle_field_color_focus);
  $('#contact_us_name').blur(toggle_field_color_blur);
  $('#contact_us_email').focus(toggle_field_color_focus);
  $('#contact_us_email').blur(toggle_field_color_blur);
  $('#contact_us_phone').focus(toggle_field_color_focus);
  $('#contact_us_phone').blur(toggle_field_color_blur);
  $('#contact_us_message').focus(toggle_field_color_focus);
  $('#contact_us_message').blur(toggle_field_color_blur);
   
   

});


function toggle_field_color_focus() 
{   
  $(this).addClass("focusField");   
}

    
function toggle_field_color_blur() 
{   
  $(this).removeClass("focusField");
}