var JN = JN || {};
JN.Content = new (function() {
	var currentPage,
		prepared = {Nav: false, Logo: false},
		contentNode = document.createElement("div", {id: "content"}),
		closeButton = document.createElement("a", {cssClass: "close", href: "#"}),
		initialH1,
		me = this;
	this.visible = false;
	closeButton.appendChild(document.createElement("img", {src: "img/close.png", alt: ""}));
	closeButton.addEvent("click", close);
	contentNode.setStyle("opacity", 0);
	addEvent("resize", open);
	addDOMReadyEvent( init );
	
	this.show = function(page) {
		JN.Events.Content.opening.fire();
		JN.Circles.stopTwinkle();
		if (currentPage === page && this.visible) {
			open( false, false );
		} else {
			currentPage = page;
			prepare();
		}
		this.visible = true;
	}
	this.reset = function() {
		close();
	}
	
	function init() {
		initialH1 = document.getElementsByTagName("h1")[0];
	}
	
	function prepare() {
		if (prepared.Nav && prepared.Logo) {
			finishShowingContent();
		} else {
			JN.Nav.minimize( function() {handlePrepared("Nav");} );
			JN.Logo.minimize( function() {handlePrepared("Logo");} );
		}
	}
	
	function handlePrepared(type) {
		prepared[type] = true;
		if (!prepared.Nav || !prepared.Logo) return;
		document.body.appendChild(contentNode);
		finishShowingContent();
	}
	
	function finishShowingContent() {
		open(true, me.visible);
		Cache.get(currentPage, loadContent);
	}
	
	function loadContent(content) {
		var span = document.createElement("span", {innerHTML:content});
		contentNode.appendChild(span);
		span.remove(true);
	}
	
	function open(empty, animate) {
		initialH1.remove();
		if (empty === true) {
			contentNode.removeAllChildren();
			contentNode.appendChild(closeButton);
		}
		var height = Math.max(200, J2.Window.height() - 240);
		contentNode.setStyle("top", 220);
		contentNode.setStyle("left", 20);
		contentNode.setStyle("width", J2.Window.width() - (height > J2.Window.height() - 240 ? 60 : 40) - 40);
		contentNode.setStyle("height", height - 40);
		if (animate === true) {
			contentNode.animate( {
				opacity: 1,
				time: 250
			}, JN.Events.Content.opened.fire );
		}
	}
	
	function close() {
		JN.Events.Content.closing.fire();
		contentNode.animate( {
			opacity: 0,
			time: 250
		}, function() {
			contentNode.remove();
			JN.Nav.reset();
			JN.Logo.reset();
			document.body.insert(initialH1, J2.Element.nodePosition.first());
			JN.Events.Content.closed.fire();
		} );
		this.visible = false;
		prepare.Nav = false;
		prepared.Logo = false;
		currentPage = null;
		JN.Circles.startTwinkle();
		return false;
	}
	
	var Cache = new (function() {
		//preload all the content:
		var pages = ["About", "Powers", "Connect", "Evidence", "JSquared"];
		pageContent = {};
		for (var i = pages.length-1; i>=0; i--) {
			pageContent[pages[i]] = new PageContent(pages[i]);
		}
		
		this.get = function( page, callback ) {
			pageContent[page].getContent( callback );
		}
		
		function PageContent(page) {
			var content = null,
				loaded = false,
				requested = false,
				currentCallback = null;
			this.page = page;
			this.url = "pages/" + page + ".html";
			var ajax = new J2.AJAX( {
				URL: this.url,
				onSuccess: handleLoadContent,
				scope:this
			} );
			
			this.getContent = function(callback) {
				if (loaded) {
					callback(content);
				} else {
					ajax.send();
					currentCallback = callback;
					requested = true;
				}
			}
			
			function handleLoadContent(ajax) {
				content = ajax.getResponseText();
				loaded = true;
				if (requested) {
					currentCallback(content);
					requested = false;
					currentCallback = null;
				}
			}
		}
		
	});
	
});