$(function(){
		var tips = $('span.perk img').qtip({
			content: {
				text: false
			},
			position: {
				adjust: {
					//y: -8,
					//x: 3,
					screen: true
				}
			},
			style: { 
				tip: {
					corner: 'leftTop',
					color: '#666666',
					size: {
						x: 12,
						y : 6
					}
				},
				border: {
					width: 1,
					color: '#666666'
				}
			},
			hide: {
				fixed: true, 
				when: {event: 'mouseout'}
				//delay: 200 
				//effect: { 
				//	type: 'fade',
				//	length: 100
				//}
			},
			show: { 
				solo: true,
				when: {event: 'mouseover'}
				//delay: 100
				//effect: { 
				//	type: 'fade',
				//	length: 100
				//}
			},
			api: {
				beforeContentUpdate: function(content){
					
					return $(this.elements.target).parent().next().html();
						//return $('#'+content).html();
				}
			}
		});
		var modals = $('div.perks span.perk img').qtip({
			content: {
			 title: {
				text: 'Preview Coupon',
				button: 'Close'
			 },
			 text: $('#modalContent')
			},
			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: {
			 width: 513,
			 padding: '14px',
			 border: {
				width: 9,
				radius: 9,
				color: '#666666'
			 },
			 name: 'light'
			},
			api: {
			 beforeShow: function()
			 {
				//this.updateContent($('#modalContent')[0].outerHTML);
				//debugger;
				this.updateContent($(this.elements.target).parent().next().next().html());
				// 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, // 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
	});