$(document).ready(function(){


     //get blockUI script and init      
     jQuery.getScript('/media/system/js/jquery.blockUI.js', function(data, status){
           
           $('#btn-close-callout').live('click', function(){$('.playerspage').unblock()});
           
           $('.pp-img').not('.no-image').click( function(){
                   $('.playerspage').block({
                         message: '<div id="btn-close-callout" style="display:none"></div><img src="' + $(this).attr('src') + '" class="site-image-callout" />',
                         css:{
                            backgroundColor:'transparent',
                            border:0,
                            top:'80px',
                            cursor:'pointer' 
                         },
                         centerY: false, 
                        overlayCSS:  { 
                            backgroundColor: '#fff', 
                            opacity:         0,
                            cursor:'pointer'
                        },
                        onBlock: function(){
                            //add and position close button top right  
                            var imgWidth = $(this).find('img').width();
                            var imgOffset = $(this).find('img').position();
                            $(this).find('#btn-close-callout').css('left', (imgOffset.left + imgWidth - 10 ) ).show();
                            //nudge up block element to compensate for additional element
                            $(this).css('top',  ($(this).position().top - 20)  );  
                        }
                   });
                   $('.blockOverlay').attr('title','Click to close').click(function(){$('.playerspage').unblock()});  
           });
     });
     
     //get tooltip script for site features
     jQuery.getScript('/media/system/js/jquery.qtip-1.0.0-rc3.min.js', function(data, status){  
           $('#site-detail-features img').each(function()
           {
              $(this).qtip(
              {
                 content: $(this).attr('bt:tooltip'),
                 position: {
                    corner: {
                       target: 'topMiddle',
                       tooltip: 'bottomMiddle'
                    }
                 },
                 show: { 
                     delay:500,
                     when: 'mouseover', 
                     solo: true 
                 },
                 hide: { when: 'mouseout', fixed: true },
                 style: {
                    tip: 'bottomMiddle',
                    border: {
                       width: 0,
                       radius: 4
                    }, 
                    name: 'dark'
                 }
              }) //qtip
           }) //each;
           

     });


   }); //document.ready