// Create the tooltips only on document load
$(document).ready(function() 
{
   // Match all link elements with href attributes within the content div
   $('td.displayImage').each(function()
   {
   	  $(this).qtip(
      {
		  content: {
			text: '<img src="' + $(this).attr('title') + '" />',
			url: false, //$(this).attr('title'),
			title: {
				text: $(this).attr('name'), 
				button: 'Close'
			}
		  },
		  
		  position: {
			  corner: 'center',
	  		  adjust:{
				scroll: false,
				x: 50
			  }  
		  },
		  
		  show: { 
			effect: { 
				type: 'grow' ,
				length: 1000
			} ,
			when:'click',
			solo: true // And hide all other tooltips
		  },
		  
		  hide: {
			fixed: true,
			when: {
				event: 'unfocus' 
			},
			effect: {
				type: 'grow' ,
				length: 1000 
			}
		  },
		  
		  style: {
				//tip: true, // Dosnt work in Safari and Opera ? Apply a speech bubble tip to the tooltip at the designated tooltip corner
				border: {
				   width: 1,
				   radius: 3,
				   color: '#EE7D15'
				}, 
				background: '#FFFFFF',
				color: 'black',
				name: 'light', // Use the default light style
				width: $(this).attr('wsize'),
				//height: $(this).attr('vsize'), //this seems to work better left out
				title: {
					color: '#EE7D15',
					'background-color': '#E7DFCE'
				}
				
		  },
		  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: '100%', // Span the full width...
         width: '100%', // ...and full height

         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
	  
   });
});