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.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.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;
	},
	
	
	load: function(target, width, height) {
		
		var htmlRequest	= new Request.HTML({
			"url": "video.php",
			"method": "get",
			"evalScripts": true,
			"evalResponse": true,
			"data": "&path=" + target + "&width=" + width + "&height=" + height,
			"onSuccess": function(responseText) {
				
				Overlay.center.removeClass("lb_load");
				Overlay.content.adopt(responseText);
				
				Overlay.fx.resize.onComplete = function() {
					Overlay.fx.content.set(1);
					Overlay.content.setStyles({
						"width": width,
						"height": height,
						"display": "block"
					});
				}
				
				Overlay.fx.resize.start({
					"width": width,
					"height": height,
					"marginLeft": - (width / 2)
				});
				
			}
		}).send();
		
	}
	
};


window.addEvent("domready", Overlay.setup);
window.addEvent("domready", function() {
	
	$$("#container .video_links a").addEvent("click", function(e) {
		
		Overlay.open();
		
		var dimensions = this.title;
		var width = parseInt(dimensions.split("x")[0]);
		var height = parseInt(dimensions.split("x")[1]);
		
		Overlay.load(this.href, width, height);
		
		return false;
	});
	
});