$(document).ready(function(){
	$('a.help').css('cursor', 'pointer'); // force the cursor for all the help links to be a pointer
	$('a.help').mouseover(function(){
		var content = $( '#'+$(this).removeClass('help').attr('class').replace('help_', '') );
		var width = $(window).width()*.62;
		var height = $(window).height()*.62;
		$(this).qtip({
			content: {
				title: {
					text: 'Help',
					button: 'Close'
				},
				text: content
			},
			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: {
				when: 'unfocus'
			},
			style: {
				width: { max: width },
				padding: '14px',
				border: {
					width: 9,
					radius: 9,
					color: '#666666'
				},
				name: 'light',
				'max-height': height,
				overflow: 'auto'
			},
			api: {
				beforeShow: function()
				{
					// $('.qtip:not(:last)').remove() // doesn't work in IE
					// 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);
					$('[qtip]').remove();
				}
			}
		});
	});
	
	$('<div id="qtip-blanket">').css({
	      position: 'absolute',
	      top: $(document).scrollTop(),
	      left: 0,
	      height: $(document).height(),
	      width: '100%',
	      opacity: 0.7,
	      backgroundColor: 'black',
	      zIndex: 5000}).appendTo(document.body).hide();
});