// Create the tooltips only on document load
$(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   $('#content a[rel]').each(function()
   {
      $(this).qtip(
      {
         content: {
            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<div align="center"><img class="throbber" src="../Usermods/img/ajax-loader.gif" alt="Loading..." /></div>',
            url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
            title: {
               text: $(this).attr('title'), // Give the tooltip a title using each elements text
               button: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X&nbsp;&nbsp;' // Show a close link in the title
            }
         },
         position: {
            corner: {
               target: 'topMiddle', // Position the tooltip above the link
               tooltip: 'bottomLeft'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            }
         },
         show: { 
            when: 'click', 
            solo: true // Only show one tooltip at a time
         },
         hide: 'unfocus',
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               	width: 2,
               	radius: 4,
			   	color: '#84591c'
            },
			padding: 6,
			background: '#a48659',
			color: '#ffffff',
            width: 200, // Set the tooltip width
			title: {
				'font-size': 11,
				'padding': 6,
				'background': '#cdbaa3'
			} // Valid
         }
      })
   });
});


//modal dialog box
$(document).ready(function()
{
   $('#content a[lang="modal"]').each(function()
   {
      $(this).qtip(
      {
         content: {
            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<div align="center"><img class="throbber" src="../Usermods/img/ajax-loader.gif" alt="Loading..." /></div>',
            url: $(this).attr('rev'), // Use the rel attribute of each element for the url to load
            title: {
               text: $(this).attr('title'), // Give the tooltip a title using each elements text
               button: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X&nbsp;&nbsp;' // Show a close link in the title
            }
         },
      position: {
         target: $(document.body), // Position it via the document body...
         corner: 'center' // ...at the center of the viewport
      },
      show: {
         when: 'click', // Show it on click
         solo: true // And hide all other tooltips
      },
      hide: false,
      style: {
			tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
			border: {
				width: 2,
				radius: 4,
				color: '#84591c'
		 	},
			padding: 6,
			background: '#a48659',
			color: '#ffffff',
			width: 500, // Set the tooltip width
			title: {
				'font-size': 11,
				'padding': 6,
				'background': '#cdbaa3'
			 } // Valid
      },
      api: {
         beforeShow: function()
         {
            // Fade in the modal "blanket" using the defined show speed
            $('#qtip-blanket').fadeIn(this.options.show.effect.length);
         },
         beforeHide: function()
         {
            // Fade out the modal "blanket" using the defined hide speed
            $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
         }
      }
   });

   // Create the modal backdrop on document load so all modal tooltips can use it
   $('<div id="qtip-blanket">')
      .css({
         position: 'absolute',
         top: $(document).scrollTop(), // Use document scrollTop so it's on-screen even if the window is scrolled
         left: 0,
         height: $(document).height(), // Span the full document height...
         width: '100%', // ...and full width

         opacity: 0.7, // Make it slightly transparent
         backgroundColor: 'black',
         zIndex: 5000  // Make sure the zIndex is below 6000 to keep it below tooltips!
      })
      .appendTo(document.body) // Append to the document body
      .hide(); // Hide it initially

   });
});