var isIE;
var sCaption="";
var sType="";
var finalDivHeight=0;
var finalDivWidth=0;
var movieName="";

var M$ = document.id;
//var M$$ = document.search;

//window.addEvent('domready',function(){
//init_popouts();
//});
                

function init_popouts()
{

    isIE = Browser.Engine.trident;

    isIE6 = (isIE && Browser.Engine.version < 5);

    // we only use a mask behind the image on non-IE because they support position:fixed. Cannot use strict doctype on DNN4
    if (!isIE)
    {
        M$('ssmask').setStyle('opacity',0);
        M$('ssmask').set('tween',{duration: 'short'});
    }
    
    // if IE6 use a non PNG close button
    if (isIE6)
    {
       M$('closebtn').set('src', "/bbimages/closex2.gif");
    }

    M$('ssdiv').set('morph', {onComplete: morphComplete, duration: 'short'});//, duration: 'short'});
    M$('ssdiv').addEvent('keydown',function(e){
        if (e.key == 'esc')
            hidess(e);
    });
    
    // don't reduce to just addEvent, using a bind(this) - IE likes it as below
    $$('.showsslink').addEvent('click', function(e){
            e.stop();
            showImagePopup(this);
       
    });
    
    M$('ssclose').addEvent('click', hidess);
}

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

    
    //center it
    var winsize = window.getSize();
    var winscroll = window.getScroll();
    var iLeft = (winsize.x - sswidth) / 2;
    var iTop = winscroll.y + ((winsize.y - ssheight) / 2);

    //bDoMap = false;
    sType = thumbLink.get('sstype');
    switch (sType) 
    {
       case "image":
       var bigimage = thumbLink.get('bigimage');
       M$('ssimage').set('src',bigimage);
       M$('ssimage').setStyle('display','block');
       break;

       case "map":
       case "movie":
       finalDivHeight = parseInt(thumbLink.get('imageheight'));
       finalDivWidth = parseInt(thumbLink.get('imagewidth'));
       movieName = thumbLink.get("moviefile");
       break;
    }

    
    // does this image have a caption?
    sCaption = thumbLink.get('caption');

    // start pos and size
    M$('ssdiv').setStyles({'width': (thumbsize.x)+"px", 'height': (thumbsize.y)+"px", 'left': thumbpos.x, 'top': thumbpos.y - thumbsize.y, 'display': 'block' });
    
    if (!isIE)
        M$('ssmask').setStyles({'width': winsize.x+"px", 'height': winsize.y+"px", 'display':'block'});
        
    // set final size and pos for morph
    M$('ssdiv').morph({'width': sswidth+"px", 'height': ssheight+"px", 'left': iLeft, 'top': iTop});

}

function hidess(e)
{
    e.stop();
    
    M$('ssdiv').setStyle('display','none');
    M$('ssmask').setStyles({'display':'none', 'opacity': 0});

    switch (sType) 
    {
       case "image":
		M$('ssimage').setStyle('display','none');
          break;
       case "map":
       case "movie":
          M$('ssdisplaydiv').setStyle('display','none');
	  M$("fplayer").setStyle("display","none");
	  // flowplayer - stop playback
	  $f('fplayer').stop();
          break;
    }

    if (sCaption!=null) {
       M$('sscaption').setStyle('display','none');
    }
}

function morphComplete()
{
   if (!isIE)
       M$('ssmask').fade(0.4);

    // focus on link, so you can just hit Esc to hide it
    M$('ssclose').focus();

    switch (sType) 
    {
    case "map":
       M$('ssdisplaydiv').setStyles({'display':'block','width': finalDivWidth, 'height': finalDivHeight});
       gmap_init('ssdisplaydiv');
       break;

    case "movie":
       if (!isIE) 
          var iHeight = finalDivHeight + 8;

      // M$('ssdisplaydiv').setStyles({'display':'block','width': finalDivWidth, 'height': iHeight});
      // new Swiff(movieName, {id: 'flashplayer', width: finalDivWidth, height: finalDivHeight, container: M$('ssdisplaydiv'), params: {autoplay: 'true'} });
	M$('ssdisplaydiv').setStyle("display","block");
	M$('fplayer').setStyle("display","block"); 
	//flowplayer - start playback
	$f('fplayer').play();    
	break;
    }

    // show the caption
    if (sCaption!=null)
    {
       M$('sscaption').set('html',sCaption);
       M$('sscaption').setStyle('display','block');
       var ssize = M$('ssdiv').getSize();
       var csize = M$('sscaption').getSize();
       M$('ssdiv').setStyle('height',(ssize.y + csize.y + 8)+"px");
    }
}