var Overlay = {
	
	active: false,
	
	setup: function() {
		
		Overlay.overlay	= new Element("div", {"id": "lb_overlay"}).addEvents({"click": Overlay.close});
		Overlay.overlay.setStyles({
			"top": window.getScrollTop(),
			"height": window.getHeight()
		});
		
		Overlay.center		= new Element("div", {"id": "lb_center"});
		Overlay.center.setStyles({
			"top": window.getScrollTop() + (window.getHeight() / 15)
		});
		
		Overlay.content	= new Element("div", {"id": "lb_content"});
		Overlay.content.injectInside(Overlay.center);
		Overlay.content.setStyles({
			"display": "none"
		});
		
		
		Overlay.close = new Element("div", {"class": "lb_close"}).addEvents({"click": Overlay.close});
		Overlay.close.injectInside(Overlay.center);
		
		Overlay.description = new Element("div", {"class": "lb_description"});
		Overlay.description.injectInside(Overlay.center);
		
		
		Overlay.fx				= new Object();
		Overlay.fx.overlay		= new Fx.Tween(Overlay.overlay, {"property": "opacity"}).set(0);
		Overlay.fx.center		= new Fx.Tween(Overlay.center, {"property": "opacity"}).set(0);
		Overlay.fx.content		= new Fx.Tween(Overlay.content, {"property": "opacity"}).set(0);
		Overlay.fx.description	= new Fx.Tween(Overlay.description, {"property": "opacity"}).set(0.7);
		
		Overlay.fx.resize		= new Fx.Morph(Overlay.center, {"duration": 400});
		
		$(document.body).adopt(
			$$([Overlay.overlay, Overlay.center])
		);
		
	},
	
	position: function() {
		
		Overlay.overlay.setStyles({
			"top": window.getScrollTop(),
			"height": window.getHeight()
		});
		
		Overlay.center.setStyles({
			"top": window.getScrollTop() + (window.getHeight() / 15)
		});
		
	},
	
	hideElements: function() {
		["object", window.ie ? "select" : "embed"].forEach(function(tag) {
			Array.forEach(document.getElementsByTagName(tag), function(el) {
				if(Overlay.active) el.visibleState = el.style.visibility;
				el.style.visibility = Overlay.active ? "hidden" : el.visibleState;
			});
		});
		
		var fn = Overlay.active ? "addEvent" : "removeEvent";
		
		window[fn]("scroll", Overlay.position)[fn]("resize", Overlay.position);
		document[fn]("keydown", Overlay.keyDown);
	},
	
	clearContent: function() {
		Overlay.content.innerHTML = "";
		Overlay.content.setStyles({
			"width": 250,
			"height": 250,
			"display": "none"
		});
		
		Overlay.center.addClass("lb_load");
		Overlay.fx.resize.onComplete = null;
		Overlay.fx.resize.set({
			"width": 250,
			"height": 250,
			"marginLeft": -125
		});
	},
	
	open: function() {
		
		Overlay.active = true;
		Overlay.hideElements();
		Overlay.position();
		
		Overlay.clearContent();
		
		Overlay.fx.overlay.set(0.8);
		Overlay.fx.center.set(1);
		
		return false;
	},
	
	close: function() {
		
		Overlay.active = false;
		
		for(var f in Overlay.fx) Overlay.fx[f].cancel();
		
		Overlay.fx.center.set(0);
		Overlay.fx.overlay.set(0);
		Overlay.clearContent();
		
		Overlay.position();
		Overlay.hideElements();
		
		return false;
	},
	
	keyDown: function(event) {
		switch(event.code) {
			case 27:				// Esc
			case 88:				// 'x'
			case 67:				// 'c'
				Overlay.close();
				break;
		}
		return false;
	},
	
	
	loadImage: function(target, description) {
		
		var image = new Asset.image(target, {
			id: 'overlayImage',
			title: description,
			onload: function() {
				
				Overlay.center.removeClass("lb_load");
				Overlay.content.adopt(this);
				
				Overlay.fx.resize.onComplete = function() {
					Overlay.fx.content.set(1);
					Overlay.content.setStyles({
						"width": this.width,
						"height": this.height,
						"display": "block"
					});
				}
				
				Overlay.fx.resize.start({
					"width": this.width,
					"height": this.height,
					"marginLeft": - (this.width / 2)
				});
				
				Overlay.description.set("html", description);
				
			}
		});
		
	}
	
};


window.addEvent("domready", Overlay.setup);
window.addEvent("domready", function() {
	
	$$("a.overlay").addEvent("click", function(e) {
		
		Overlay.open();
		Overlay.loadImage(this.href, this.title);
		
		return false;
	});
	
});