if(typeof(AC)=="undefined") { AC = {}; }

AC.ContentSwap=Class.create();
AC.ContentSwap.prototype={
	selectorList:null,
	contentList:null,
	contentSelectorHash:null,
	eventStr:null,

	initialize:function(selectorClass, contentClass, eventStr) {
		this.eventStr=eventStr;

		this.selectorList=document.getElementsByClassName(selectorClass);
		this.contentList=document.getElementsByClassName(contentClass);

		this.setMouseover();
	},

	setMouseover:function() {
		for(var i=this.selectorList.length-1,selector; selector=this.selectorList[i]; i--){
			Event.observe(selector,this.eventStr,this.swapContent.bind(this,i),false);
		}
	},

	swapContent:function(selectorIndex) {
		var selector = this.selectorList[selectorIndex];
		var content = this.contentList[selectorIndex];

		if(!Element.hasClassName(selector,'active'))
			Element.addClassName(selector,'active');
		if(!Element.hasClassName(content,'active'))
			Element.addClassName(content,'active');


		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(Element.hasClassName(this.contentList[i],'active'))
					Element.removeClassName(this.contentList[i],'active');
			}
		}

		return false;
	}
}

// local
function graphicsInit() {
	new SliderSwap('swapnav', 'swapcontent', 'click');
}

var SliderSwap = Class.create();
Object.extend(Object.extend(SliderSwap.prototype, AC.ContentSwap.prototype), {
	lastSelectorIndex: 1,
	cs1IsAnimating: false,
	cs2IsAnimating: false,
	swapContent: 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.lastSelectorIndex) {
				var lastContent = this.contentList[this.lastSelectorIndex];
		
				if(selectorIndex > this.lastSelectorIndex) {
					new Effect.MoveBy(lastContent, 0, -800, { duration: 0.5, queue: {position:'end', scope:'cs1'}, afterFinish: this.resetFlag.bind(this,'cs1IsAnimating') });
					new Effect.MoveBy(content, 0, -800, 
						{ duration: 0.5, queue: {position:'end', scope:'cs2'}, beforeStart: function() {content.style.left = '800px'}, afterFinish: this.resetFlag.bind(this,'cs2IsAnimating') }
					);
				} else {
					new Effect.MoveBy(lastContent, 0, 800, { duration: 0.5, queue: {position:'end', scope:'cs1'}, afterFinish: this.resetFlag.bind(this,'cs1IsAnimating') });
					new Effect.MoveBy(content, 0, 800,
						{ duration: 0.5, queue: {position:'end', scope:'cs2'}, beforeStart: function() {content.style.left = '-800px'}, afterFinish: this.resetFlag.bind(this,'cs2IsAnimating') }
					);		
				}
				this.lastSelectorIndex = selectorIndex;
				
			} else {
				this.resetFlag('cs1IsAnimating');
				this.resetFlag('cs2IsAnimating');
			}
		}
		
		return false;
	},
	resetFlag: function(flagName) {
		if(flagName == 'cs1IsAnimating') this.cs1IsAnimating = false;
		if(flagName == 'cs2IsAnimating') this.cs2IsAnimating = false;
	}
});
Event.observe(window, 'load', graphicsInit, false);