// Mootools 1.2 based lightbox slideshow with gradient background
// (c)2010 Standupweb

var SwCustomLightbox = new Class({
    Implements: [Options, Events],
    options: {
		content: 'swCustomLightbox',		// id of the div to be shown inside the lightbox
		gradientBgId: 'gradient-bg',		// id of the lightbox
		onStart: Class.empty				// event fired when the lightbox opens
    },
    content: null,
    gradientBg: null,
    initialize: function(options){
		this.setOptions(options);
		// insert the html for the slideshow
		this.gradientBg = new Element('div', {'id':this.options.gradientBgId});
		this.gradientBg.set('html', '<div id="grad-top-left"></div><div id="grad-top-right"></div><div id="grad-bottom-left"></div><div id="grad-bottom-right"></div>');
		this.content=$(this.options.content);
		// hide the lightbox
		this.gradientBg.setStyles({'opacity':0, 'z-index':-100});
		// reflow!!
		this.gradientBg.wraps(this.content);
		// display visible for the content (although not visible yet, because the lightbox has opacity=0
		this.content.setStyle('display', 'block');
		// add key event to exit the slideshow
		window.addEvent('keydown', function(e){
			if (e.key=='esc') {
				this.close();
			}
		}.bind(this));
		// add the window resize event
		window.addEvent('resize', function(){ this.paint(); }.bind(this));
	},
	paint: function(){
		// compute size of the light box made of 4 div in order to display a nicer gradient
		var bodyElement = $(document.body);
		var midX = parseInt(bodyElement.getSize().x/2); 
		var midY = parseInt(bodyElement.getSize().y/2);
		var viewPortWidth = bodyElement.getSize().x;
		var viewPortHeight = bodyElement.getSize().y;
		var viewPortOriginX = bodyElement.getScroll().x;
		var viewPortOriginY = bodyElement.getScroll().y;
		var midX = parseInt(viewPortWidth/2); 
		var midY = parseInt(viewPortHeight/2);
		
		// init origin of the lightbox
		// reflow!!
		this.gradientBg.setStyles({ 'width':viewPortWidth+'px', 'height':viewPortHeight+'px','top':viewPortOriginY+'px','left':viewPortOriginX+'px' });

		// init the position of the content
		// reflow!!
		this.content.setStyles({
			'top':midY -this.content.getStyle('height').toInt()/2 -this.content.getStyle('padding-top').toInt()/2 -this.content.getStyle('padding-bottom').toInt()/2,
			'left':midX -this.content.getStyle('width').toInt()/2 -this.content.getStyle('padding-left').toInt()/2 -this.content.getStyle('padding-right').toInt()/2
		});
		// init the 4 divs surrounding the content
		// reflow!!
		$('grad-bottom-left').setStyles({'top':midY+'px', 'left':'0px', 'width':midX+'px', 'height':midY+'px'});
		$('grad-bottom-right').setStyles({'top':midY+'px', 'left':midX+'px', 'width':midX+'px', 'height':midY+'px'});
		$('grad-top-left').setStyles({'top':'0px', 'left':'0px', 'width':midX+'px', 'height':midY+'px'});
		$('grad-top-right').setStyles({'top':'0px', 'left':midX+'px', 'width':midX+'px', 'height':midY+'px'});
	},
	open: function() {
		$(document.body).setStyle('overflow', 'hidden');
		this.paint();
		this.gradientBg.setStyle('z-index', 100);
		this.gradientBg.tween('opacity', 1);
		this.fireEvent('start', this);
	},
	close: function() {
		this.gradientBg.setStyle('z-index', -100);
		this.gradientBg.tween('opacity', 0);
		$(document.body).setStyle('overflow', 'auto');
	}
});