// JavaScript Document
$(document).ready(function() 
{

   // Use the each() method to gain access to each elements attributes
   $('span[id^=theme_]').each(function()
   {
	   
      $(this).qtip(
      {
		 
         content: {
            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<iframe src="'+$(this).attr('rel')+'" width="900" height="450" scrolling="no" frameborder="0" style="padding:0"></iframe>',
            url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
            title: {
               text: $(this).text(), // Give the tooltip a title using each elements text
               button: 'close' // Show a close link in the title
            }
         },
         position: {
            corner: {
               target: 'rightMiddle', // Position the tooltip above the link
               tooltip: 'leftMiddle'
            },
            adjust: {
               screen: false // Keep the tooltip on-screen at all times
            }
         },
         show: { 
            when: 'click', 
            solo: true // Only show one tooltip at a time
         },
         hide: 'unfocus',
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 2,
               radius: 0,
			   color:'#d02dce'
            },
			padding:15,
			
			title: {  
		 	'color':'#d02dce',
			'height': '16px' },
			button: {  
			'margin':'2px 0 0 0',
			'padding':'0 0 0 5px',
		 	'width':'30px',
			'font-size': '11px' },
            name: 'light', // Use the default light style
            width: 570 // Set the tooltip width
         }
		 
      })
   });
});