// Create the tooltips only on document load
$(document).ready(function() 
{
   // Match all link elements with href attributes within the content div
   $('area').each(function()
   {
   	  $(this).qtip(
      {
		  content: {
			url: $(this).attr('href'),
			title: {
				text: $(this).attr('title'), 
				button: 'Close'
			}
		  },
		  
		  position: {
				//target: $('map:first'),//positions relative to the first map item on the page
			  corner: {
				 target: 'topRight',
				 tooltip: 'topRight'
			  },
				type: 'absolute',
			  adjust:{
					x: 290,
					y: 0, //150,
					screen: true,
					scroll: true,
					resize: true
			  }
			  
		  },
		  
		  show: { 
			effect: { 
				type: 'grow' ,
				length: 450
			} ,
			when:'click',
			solo: true // And hide all other tooltips
		  },	
		  
		  hide: {
			fixed: true,
			delay: 60000,
			when: {
				event: 'inactive' 
			},
			effect: {
				type: 'grow' ,
				length: 1000 
			}
		  },
		  
		  style: {
				//tip: {
				//	corner: 'leftMiddle'
				//},// Dosnt work in Safari and Opera ? Apply a speech bubble tip to the tooltip at the designated tooltip corner
				border: {
				   width: 1,
				   radius: 4,
				   color: '#00bce4'
				}, 
				background: '#FFFFFF',
				color: 'black',
				name: 'light', // Use the default light style
				width: {
					min:240,
					max:240
				}, // Set the tooltip width
				title: {
					color: '#000000', //00bce4
					'background-color': '#A9D7EA'
				}
				
		  }
	   })	
   });
});