var JN = JN || {};
JN.Nav = new (function() {
	var minimized = false,
		nav,
		navElements,
		selectedNavElement,
		navElementStyles = {
			fontSize: {
				def: {
					over: 75,
					out: 25
				},
				min: {
					over:42,
					out: 14
				}
			},
			color: {
				over: new J2.Core.CSSColor(210,210,234),
				out: J2.Core.CSSColor.prototype.create("#8183dd")
			}
		},
		currentElementStyles = "def";
	//setup BHM
	var bhm = J2.URL.getMember( "page", handlePageChange, {initialValue: ""} );
	addDOMReadyEvent(function() {
		nav = document.getElementById("nav");

		navElements = nav.getElementsByTagName("a");
		for (var i = navElements.length-1; i>=0; i--) {
			setupNavElement(navElements[i]);
		}
	});
	
	this.minimize = function(callback) {
		if (!minimized) {
			currentElementStyles = "min";
			for (var i = navElements.length-1; i>=0; i--) {
				navElements[i].fireEvent("mouseout");
			}
			minimized = true;
		}
		callback();
	}
	this.reset = function() {
		if (minimized) {
			selectedNavElement = null;
			currentElementStyles = "def";
			for (var i = navElements.length-1; i>=0; i--) {
				navElements[i].fireEvent("mouseout");
			}
			minimized = false;
		}
		nav.removeCssClass("minimized");
		bhm.updateValue("");
	}
	
	function setupNavElement(el) {
		el.addEvent("mouseover", navElement_over);
		el.addEvent("mouseout", navElement_out);
		el.addEvent("click", navElement_click);
	}
	
	function navElement_over() {
		if (this === selectedNavElement) return;

		this.animate( {
			"font-size": {
				to: navElementStyles.fontSize[currentElementStyles].over,
				time: 100,
				transition: J2.Transitions.Exp.easeOut
			}, 
			"margin-left": {
				to: 5,
				time:50
			},
			color: {
				to: navElementStyles.color.over,
				time: 100
			}
		} );
		
	}
	
	function navElement_out() {
		if (this === selectedNavElement) return;
		this.animate( {
			"font-size": {
				to: navElementStyles.fontSize[currentElementStyles].out,
				time: 200
			},
			"margin-left": {
				to: 0,
				time: 100
			},
			color: {
				to: navElementStyles.color.out,
				time: 100
			}
		} );
	}
	
	function navElement_click() {
		if (!minimized) nav.addCssClass("minimized");
		var previouslySelectedNavElement = selectedNavElement;
		selectedNavElement = this;
		if (previouslySelectedNavElement) previouslySelectedNavElement.fireEvent("mouseout");
		this.setStyle("font-size", navElementStyles.fontSize.def.over);
		this.setStyle("color", navElementStyles.color.over);
		JN.Content.show(this.innerHTML);
		bhm.updateValue(this.innerHTML);
		return false;
	}
	
	function handlePageChange(pageDetails) {
		if (pageDetails.value === "") {
			return JN.Content.reset();
		}
		if (!navElements) return;
		for (var i = navElements.length-1; i>=0; i--) {
			if (navElements[i].innerHTML === pageDetails.value) {
				navElements[i].fireEvent("click");
				break;
			}
		}
	}
});