// Fade menu_swap
var FadeSwap = Class.create();
Object.extend(Object.extend(FadeSwap.prototype, AC.ContentSwap.prototype), {
	cs1IsAnimating: false,
	cs2IsAnimating: false,

	initialize: function(selectorClass, contentClass, eventStr) {
		Element.addClassName('main', 'hasjs');

		this.eventStr = eventStr;
		
		// get lists of selectors and content in order
		this.selectorList = document.getElementsByClassName(selectorClass);
		this.contentList = document.getElementsByClassName(contentClass);
		for (var i=0; i<this.contentList.length; i++) {
			if (Element.hasClassName(this.contentList[i], 'active')) {
				this.finSelectorIndex = i;
			} else {
			this.contentList[i].style.display = 'none';
			}
			
		}
		
		this.setMouseover();
	},

	layerSwap: function(selectorIndex) {
		if(this.cs1IsAnimating == false && this.cs2IsAnimating == false) {
		
			this.cs1IsAnimating = true;
			this.cs2IsAnimating = true;
			
			var selector = this.selectorList[selectorIndex];
			var content = this.contentList[selectorIndex];
		
			// add 'on' class
			if(!Element.hasClassName(selector, 'active')) Element.addClassName(selector, 'active');
			// remove 'on' class from all other selectors and content areas
			for(var i=this.selectorList.length-1; i >= 0; i--) {
				if(i != selectorIndex) {
					if(Element.hasClassName(this.selectorList[i], 'active')) Element.removeClassName(this.selectorList[i], 'active');
				}
			}
		
			if(selectorIndex != this.finSelectorIndex) {
				var finContent = this.contentList[this.finSelectorIndex];
		
				new Effect.Fade(finContent, { duration:.25, queue:{position:'end', scope:'cs1'},
					afterFinish:this.afterFade.bind(this, finContent, content)
				});
				
				this.finSelectorIndex = selectorIndex;
				
			} else {
				this.resetFlag('cs1IsAnimating');
				this.resetFlag('cs2IsAnimating');
			}
		}
		
		return false;
	},

	afterFade: function(finContent, content) {
		this.resetFlag('cs1IsAnimating');

		new Effect.Appear(content, { duration:.25, queue:{position:'end', scope:'cs2'},
			afterFinish:this.afterAppear.bind(this, content)
		});
	},

	afterAppear: function(content) {
		this.resetFlag('cs2IsAnimating');
	},

	resetFlag: function(flagName) {
		if(flagName == 'cs1IsAnimating') this.cs1IsAnimating = false;
		if(flagName == 'cs2IsAnimating') this.cs2IsAnimating = false;
	}
});

Event.observe(window, 'load', function() {
	new FadeSwap('menu_nav', 'layerswap', 'click');
}, false);