// Create the tooltips only on document load
$(document).ready(function() 
{
   // Notice the use of the each method to gain access to each element individually
   $('#brands img').each(function()
   {

      var content = '<img src="img/';
      content += $(this).attr('id');      
      content += '.jpg" alt="Loading thumbnail..." height="155" width="210" />';
            
      // Setup the tooltip with the content
      $(this).qtip(
      {
         content: content,
         position: {
            corner: {
               target: 'topMiddle',
                tooltip: 'bottomMiddle'
            }
         },
         style: {
            tip: true, // Give it a speech bubble tip with automatic corner detection
            name: 'light'
         }

      });
   });


   // Notice the use of the each method to gain access to each element individually
   $('#worldmap area').each(function()
   {

      var urlcontent = 'ajax_contacts/hq_';
      urlcontent += $(this).attr('id');      
      urlcontent += '.html';
      
      // Setup the tooltip with the content
      $(this).qtip(
      {
         content: {url: urlcontent},
         position: {
            corner: {
              target: 'bottomMiddle',
              tooltip: 'bottomMiddle'
            }
         },         
         hide: { when: 'mouseout', fixed: true },
         style: {
            tip: false, // Give it a speech bubble tip with automatic corner detection
            name: 'light',
            width: 390,
            border: {
              width: 2,
              radius: 4,
              color: '#797979'
            }            
         }
      });
   });

   // Notice the use of the each method to gain access to each element individually
   $('#location a').each(function()
   {

      var urlcontent = 'ajax_contacts/contact_';
      urlcontent += $(this).attr('id');      
      urlcontent += '.html';
      
      // Setup the tooltip with the content
      $(this).qtip(
      {
         content: {url: urlcontent},
         position: {
            corner: {
              target: 'topMiddle',
              tooltip: 'bottomMiddle'
            }
         },         
         hide: { when: 'mouseout', fixed: true },
         style: {
            tip: false, // Give it a speech bubble tip with automatic corner detection
            name: 'light',
            width: 310,
            border: {
              width: 2,
              radius: 4,
              color: '#797979'
            }            
         }
      });
   });
   // Notice the use of the each method to gain access to each element individually
   $('#search a').each(function()
   {

      var urlcontent = 'ajax_contacts/';
      urlcontent += $(this).attr('id');      
      urlcontent += '.html';
      
      // Setup the tooltip with the content
      $(this).qtip(
      {
         content: {url: urlcontent},
         position: {
            corner: {
              target: 'center',
              tooltip: 'center'
            }
         },         
         hide: { when: 'mouseout', fixed: true },
         style: {
            tip: false, // Give it a speech bubble tip with automatic corner detection
            name: 'light',
            width: 310,
            border: {
              width: 2,
              radius: 4,
              color: '#797979'
            }            
         }
      });
   });
      
});