window.addEvent('domready',function(){
/* create the screenshot slider */
if (typeof(noobSlide)!="undefined")
{
 nS4 = new noobSlide({
   box: $('screenshotbox'),
   items: $$('#screenshotbox div'),
   size: 480,
   handles: $$('#handles4 a'),
   onWalk: function(currentItem,currentHandle)
   {
      this.handles.removeClass('activebutton');
      currentHandle.addClass('activebutton');
   }
});
}

/* initialise the screenshot div */
$('ssdiv').setStyle('opacity', 0);
$('ssdiv').set('tween', {'duration': 'short', onComplete: tweenComplete});
$('ssdiv').addEvent('keydown',function(e){
   if (e.key == 'esc')
      hideScreenshot(e);
});

/* initialise the dark screen mask, though we only use for non-IE browsers */
$('screenmask').setStyle('opacity', 0);
$('screenmask').set('tween', {'duration': 'short'});

/* ssclose class hides screenshot */
$$('.ssclose').addEvent('click', hideScreenshot);
$$('.ssthumbnail').addEvent('click',function(e){
   $('bigss').set('src', this.getProperty('bigss'));

   // center the screenshot
   var ssdiv = $('ssdiv');
   ssdiv.setStyles({'display': 'block', 'visibility': 'hidden'}); // so we can get the size
   var ss_size = ssdiv.getSize();
   var winsize = window.getSize();
   var winscroll = window.getScroll();
   var iLeft = (winsize.x - Math.max(ss_size.x,500)) / 2;
   var iTop = winscroll.y + ((winsize.y - Math.max(ss_size.y,400)) / 2);
   ssdiv.setStyles({'display': 'inline', 'left': iLeft, 'top': iTop});  
   ssdiv.fade('in');

   /* if not IE, fade out the screen behind */
   if (!Browser.Engine.trident)
   {
      $('screenmask').setStyles({'display': 'block', 'width': winsize.x, 'height': winsize.y});
      $('screenmask').fade(0.3);
   }
});

});

function hideScreenshot(e)
{
   e.stop();
   $('ssdiv').setStyles({'display':'none', 'opacity':0});
   $('screenmask').setStyles({'display':'none', 'opacity':0});
}

function tweenComplete()
{
   $('sscloselink').focus();
}