Lightbox = {};

// main div placeholders
Lightbox.container = null;
Lightbox.mask = null;
Lightbox.img = null;
Lightbox.int = null;
Lightbox.text = null;
Lightbox.fx = null;

// cached sizes for faster execution
Lightbox.containerSize = null;
Lightbox.documentSize = null;
Lightbox.viewportSize = null;
Lightbox.scrollSize = null;

// set container, document, viewport and scroll sizes
Lightbox.setContainerSize = function() { this.containerSize = this.container.getSize(); };
Lightbox.setDocumentSize = function() { this.documentSize = $(window).getScrollSize(); };
Lightbox.setViewportSize = function() { this.viewportSize = $(window).getSize(); };
Lightbox.setScrollSize = function() { this.scrollSize = $(window).getScroll(); };

// scan all lightbox links and attach events
Lightbox.scan = function() {
	var as = $(document.body).getElements('a[rel=lightbox]');
	as.removeEvents('click');
	as.addEvent('click', function(event) {
		var target = $(event.target);
		if (target.tagName != 'A')
			target = target.getParent();
		Lightbox.show(target.href);
		Lightbox.text = target.title;
		return false;
	});
};

// init popup div - container and mask
Lightbox.init = function() {
	// check if container and mask already exist
	if (this.container != null && this.mask != null) return;
	
	// create container div
	if (this.container == null) {
		this.container = new Element('div', { styles: { position: 'absolute', top: 0, left: 0, display: 'none', zIndex: '10001', background: '#ffffff url(/image/spacer.gif)' } });
		this.container.set('morph', { transition: 'back:out', link: 'cancel' });
		$(document.body).grab(this.container);
	};
	
	// create mask div
	if (this.mask == null) {
		this.mask = new Element('div', { styles: { position: 'absolute', display: 'none', top: 0, left: 0, zIndex: '10000', background: '#000000 url(/image/spacer.gif)', opacity: 0, width: 0, height: 0 } });
		$(document.body).grab(this.mask);
		this.mask.addEvent('click', function() {
			Lightbox.hide();
		});
  	};
};
                                                        
// show popup div
Lightbox.show = function(url) {
	// hide selects if needed
	this.toggleSelects(false);
	
	// init needed sizes
	this.setViewportSize();
	this.setScrollSize();
	
	// stretch mask to fill screen
	this.stretchMask(1);
	
	// show mask div
	this.mask.set('morph', {
		onComplete: function() {
			// show loading image
			var img = new Element('img', { src: '/images/lightbox-ajax-loader.gif', width: 126, height: 22 });
			Lightbox.container.grab(img);
			Lightbox.container.setStyles({ width: 126, height: 22 });
			
			// initially positioning
			Lightbox.container.setStyles({ display: 'block' });
			Lightbox.setContainerSize();
			Lightbox.center(function() {
				Lightbox.img = new Image();
				Lightbox.img.src = url;
				Lightbox.int = setInterval(Lightbox.update.bind(Lightbox), 50);
			});
			
			// bind repositioning to window resize
			$(window).addEvent('resize', Lightbox.boundResizeWindow);
		}
	});
	this.mask.morph({ opacity: 0.3 });
	Lightbox.fx = this.mask.get('morph');
};

// stretch mask, if argument provided - init mode
Lightbox.stretchMask = function() {
	if (!arguments.length) this.mask.setStyle('display', 'none');
	
	this.setDocumentSize();
	if (arguments.length)
		this.mask.setStyles({ 
			width: Lightbox.documentSize.x,
			height: Lightbox.documentSize.y,
			display: 'block'
		});
	else {
		this.mask.setStyle('display', 'block');
		this.mask.set('morph', {}).morph({ 
			width: Lightbox.documentSize.x,
			height: Lightbox.documentSize.y
		});
		Lightbox.fx = this.mask.get('morph');
	};
};

// center window
Lightbox.center = function() {
	if (this.container.get('html') == '') {
		this.container.setStyles({
			top: Math.round(Lightbox.viewportSize.y / 2 - Lightbox.containerSize.y / 2) + Lightbox.scrollSize.y,
			left: Math.round(Lightbox.viewportSize.x / 2 - Lightbox.containerSize.x / 2) + Lightbox.scrollSize.x
		});
		return;
	}
	
	var f = function() {};
	if (arguments.length == 1)
		f = arguments[0];
	
	this.container.set('morph', { 
		link: 'cancel', 
		transition: 'back:out',
		onComplete: f
	}).morph({
		top: Math.round(Lightbox.viewportSize.y / 2 - Lightbox.containerSize.y / 2) + Lightbox.scrollSize.y,
		left: Math.round(Lightbox.viewportSize.x / 2 - Lightbox.containerSize.x / 2) + Lightbox.scrollSize.x
	});
	Lightbox.fx = this.container.get('morph');
};

// window listeners
Lightbox.resizeWindow = function() { this.setViewportSize(); this.setScrollSize(); this.stretchMask(); this.center(); };
Lightbox.boundResizeWindow = Lightbox.resizeWindow.bind(Lightbox);

// hide popup div and empty container
Lightbox.hide = function() {
	// hide and empty container divs
	if (this.int) clearInterval(this.int);
	if (this.fx) this.fx.cancel();
	
	this.container.setStyle('display', 'none');
	this.container.set('html', '');
	this.container.setStyles({ margin: 0, left: 0, top: 0, width: 0, height: 0 });
	this.img = null;
	
	
	// hide mask
	this.mask.set('morph', {
		onComplete: function(e) {
			e.setStyle('display', 'none');
			
			// show selects if needed
			Lightbox.toggleSelects(true);
		}
	});
	this.mask.morph({ opacity: 0.0 });
	
	// unbind events
	$(window).removeEvent('resize', this.boundResizeWindow);
};

Lightbox.toggleSelects = function(state) {
	if (!Browser.Engine.trident4) return;
	$(document.body).getElements('select').setStyle('visibility', state ? 'visible' : 'hidden');
};

Lightbox.update = function(img) {
	if (!this.img.complete) return;
	
	if (this.img.width == 0) {
		this.hide();
		return;
	}
	
	clearInterval(this.int);
	
	this.container.set('html', '');
	this.container.setStyles({ width: 0, height: 0 });
	this.setContainerSize();
	this.center();
	
	var marginTop = 0 - Math.round(Lightbox.img.height / 2) - 15;
	marginTop = Math.abs(marginTop) <= Math.round(this.viewportSize.y / 2) ? marginTop : 0 - Math.round(this.viewportSize.y / 2);
	var marginLeft = 0 - Math.round(Lightbox.img.width / 2) - 15;
	marginLeft = Math.abs(marginLeft) <= Math.round(this.viewportSize.x / 2) ? marginLeft : 0 - Math.round(this.viewportSize.x / 2);
	this.container.set('morph', {
		duration: 'long',
		transition: 'back:out',
		onComplete: function() {
			var img = new Element('img', { src: Lightbox.img.src, title: 'click to close' });
			img.setStyles({ opacity: 0, margin: '15px 15px 5px 15px', border: '1px solid #DDDDDD' });
			img.addEvent('click', function() {
				Lightbox.hide();
			});
			Lightbox.container.grab(img);
			img.set('morph', {
				onComplete: function() {
					var div = new Element('div');
					Lightbox.container.setStyles({ height: 'auto' });
					div.set('text', Lightbox.text);
					div.setStyles({ padding: '0px 15px 5px 15px', color: '#000000' });
					Lightbox.container.grab(div);
				}
			}).morph({ opacity: 1 });
			Lightbox.fx = img.get('morph');
		}
	}).morph({
		width: Lightbox.img.width + 30,
		height: Lightbox.img.height + 30,
		marginTop: marginTop,
		marginLeft: marginLeft
	});
	Lightbox.fx = this.container.get('morph');
};

$(window).addEvent('domready', function() {
	Lightbox.scan();
	Lightbox.init();
});