var isIE;
                
window.addEvent('domready',function(){
    $('ssdiv').set('morph', {onComplete: morphComplete, duration: 'short'});
    $('ssdiv').addEvent('keydown',function(e){
        if (e.key == 'esc')
            hidess(e);
    });

    isIE = Browser.Engine.trident;
    
    // we only use a mask behind the image on non-IE because they support position:fixed
    if (!isIE)
    {
        $('ssmask').setStyle('opacity',0);
        $('ssmask').set('tween',{duration: 'short'});
    }
    
    // if IE6 use a non PNG close button
    if (isIE && Browser.Engine.version == 4)
        $('closebtn').src = "/bbimages/closex2.gif";
    
    // don't reduce to just addEvent, using a bind(this) - IE likes it as below
    $$('.showsslink').each(function(el){
        el.addEvent('click', function(e){
            e.stop();
            showImagePopup(el);
        });
    });
    
    $('ssclose').addEvent('click', hidess);
});

function showImagePopup(thumbLink)
{
    var thumbsize = thumbLink.getSize();
    
    // IE requires us to get the position of the cell containing the link
    var thumbpos = thumbLink.getParent().getPosition(); 
            
    // we add on a bit for the padding and borders etc                                                                  
    var ssheight=parseInt(thumbLink.getProperty('imageheight')) + 52;
    var sswidth=parseInt(thumbLink.getProperty('imagewidth')) + 52;

    $('ssimage').set('src',thumbLink.getProperty('bigimage'));
    
    //center it
    var winsize = window.getSize();
    var winscroll = window.getScroll();
    var iLeft = (winsize.x - sswidth) / 2;
    var iTop = winscroll.y + ((winsize.y - ssheight) / 2);
    
    // start pos and size
    $('ssdiv').setStyles({'width': (thumbsize.x / 2)+"px", 'height': (thumbsize.y / 2)+"px", 'left': thumbpos.x, 'top': thumbpos.y, 'display': 'block' });
    
    if (!isIE)
        $('ssmask').setStyles({'width': winsize.x+"px", 'height': winsize.y+"px", 'display':'block'});
        
    // set final size and pos for morph
    $('ssdiv').morph({'width': sswidth+"px", 'height': ssheight+"px", 'left': iLeft, 'top': iTop});
}
    
function hidess(e)
{
    e.stop();
    $('ssdiv').setStyle('display','none');
    $('ssmask').setStyles({'display':'none', 'opacity': 0});
}

function morphComplete()
{
    // focus on link, so you can just hit Esc to hide it
    $('ssclose').focus();
    if (!isIE)
        $('ssmask').fade(0.5);
}