$(function() {
    $("img.infoButton,img.infoButtonReplace,img.infoButtonExisting").hover(
        function(){$(this).attr("src","/library/offers/hd/images/btn_info_over.gif");},
        function(){$(this).attr("src","/library/offers/hd/images/btn_info.gif");}
    )
    $("a#hdPackPopup").click(function() {
        link = $(this);
        renderPopup (500, -200, 'div#hdPackInfo div.content div.content', '');        
        return false;
    });
    $("a#skyPlusPopup").click(function() {
        link = $(this);
        renderPopup (700, -200, 'div#skyPlusInfo div.content div.content', '');        
        return false;
    });    
    $("a#skyBoxPopup").click(function() {
        link = $(this);
        renderPopup (700, -200, 'div#skyBoxInfo div.content div.content', '');        
        return false;
    });        
});

// Render an information box popup
function renderPopup (offsetY, offsetX, target, source){

    $('div.infoBox').css({left:'-100em'});
    
    var infoBox = $(link).attr('href').split('#')[1];
    
    // Only if the content hasn't already been loaded
    if ($(target).children().length == 0 && source != ''){
        // Load and inject content in DOM
        $(target).load(source, function(){
            
            // Position the injected content relative to the calling link
            var infoBoxX = $(link).position().left;
            var infoBoxY = $(link).position().top;    
            $('div#' + infoBox).css({top:infoBoxY + offsetY, left:infoBoxX + offsetX});           

        });        
    } else {
        // Position the injected content relative to the calling link
        var infoBoxX = $(link).position().left;
        var infoBoxY = $(link).position().top;    
        $('div#' + infoBox).css({top:infoBoxY + offsetY, left:infoBoxX + offsetX});

    }
    
    // For all popups
    $(target).after('<a href=\"#close\" class=\"close\"><strong>Close X</strong></a>');                
    $('div#' + infoBox + ' a.close').click(function(){
       $ ('div#' + infoBox).css({left:'-100em'});
        return false;
    });
}
