// Create the tooltips only on document load
jQuery(document).ready(function()
{
	// Use the each() method to gain access to each elements attributes
	jQuery('.imageMapContent area[rel]').each(function()
	{		
		var content = decodeURIComponent(jQuery(this).attr('rel'));
		jQuery(this).qtip(
		{
	  		content: {	  			
	  			text: content,
	  			title: { text: jQuery(this).attr('alt') } // Give the tooltip a title using each elements text			  		
	  		},
	  		position: {
	  			corner: {
	  				target: 'topMiddle', // Position the tooltip above the link
	  				tooltip: 'bottomMiddle'
	  			},
	  			adjust: { screen: true} // Keep the tooltip on-screen at all times			  		
	  		},
	  		show: {
	  			when: 'mouseover',
	  			solo: true // Only show one tooltip at a time
	  		},
	  		hide: 'mouseout',
	  		style: {
	  			tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner	  			
	  			width: 275, // Set the tooltip width
	  			border: {
					width: 0,
					radius: 4,
					color: '#303030'
				},
				title: {
					background: '#404040',
					color: '#f3f3f3'
				},
				background: '#c2c2c2',
				color: '#f3f3f3',
				classes: { tooltip: 'qtip-dark' }
	  		}
		});
	});
});