var zoomNav = new Class ({
	initialize: function(containerId,targetId,items,conduitURL) {
		this.myContainer 	= $(containerId);
		this.myTarget 		= $(targetId);
		this.conduitURL		= conduitURL;
		this.myNav 			= this.myContainer.getElements(items);

		this.myNav.each(function(item) {
			var a = item.getElement('a');
			var myEnterEffect = new Fx.Morph(a, {
				duration: 100,
				transition: Fx.Transitions.Quad.easeIn
			});
			var myLeaveEffect = new Fx.Morph(a, {
				duration: 500,
				transition: Fx.Transitions.Quad.easeOut
			});
			a.addEvent("mouseenter", function(e) {
				 myLeaveEffect.cancel();
				 myEnterEffect.start({
			    	'width': [89],
			   		'height': [110],
			   		'margin-top': [-15],
			   		'font-size': [14]
				});
			});
			a.addEvent("mouseleave", function(e) {
				myEnterEffect.cancel();
				myLeaveEffect.start({
    				'width': [62],
   					'height': [81],
   					'margin-top': [0],
   					'font-size': [12]
				});
			});
		}.bind(this));
	}
});

var loadArticle = new Class ({
	initialize: function(navId,items,targetId,conduitURL,evalScripts) {
		this.myNav 			= $(navId);
		this.myItems 		= this.myNav.getElements(items);
		this.myTarget 		= $(targetId);
		this.conduitURL		= conduitURL;
		this.evalScripts	= evalScripts;
		
		this.myEffect = new Fx.Morph(this.myTarget, {
			duration: 100,
			transition: Fx.Transitions.Quad.easeIn
		});		
		
		this.myItems.each(function(item) {
			var a = item.getElement('a');
			a.addEvent("click", function(e) {
				e.stop();
				var param = a.href.split('?')[1];
				this.loadData(param);
				this.myItems.each(function(n) {
					n.removeClass('on');
				});
				item.addClass('on');
			}.bind(this));
		}.bind(this));
	},		
	loadData: function(param) {
		this.myEffect.start({'opacity': [0]}).chain(function(){
			new Request.HTML({
				url: this.conduitURL + '?' + param,
				evalScripts: false,
				onRequest: function(){
					this.myTarget.set("html","<p class=\"error throbber\">Loading...</p>");
					this.myTarget.setStyle('opacity',1);
				}.bind(this),
				onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
					this.myTarget.setStyle('opacity',0);
					this.myTarget.set("html",responseHTML)
					if (this.evalScripts) {
						eval(responseJavaScript);
					}
					this.myEffect.start({'opacity': [1]})
				}.bind(this),
				onFailure: function(){
					this.myTarget.set("html","<p class=\"error\">There has been a problem loading that data.</p>")
					this.myTarget.setStyle('opacity',1);
				}.bind(this)		
			}).send();
		}.bind(this));
	}	
});