var PageSwapper = Class.create();
PageSwapper.prototype = {
	isAnimating1: false,
	isAnimating2: false,
	lastSelectorIndex: false,

	initialize: function(selectorWrapper, contentWrapper, eventStr) {
		this.wrapper     = $(contentWrapper);
		this.eventStr    = eventStr;
		this.lastContent = null;
		
		// initialize selector & content lists
		this.selectorList = $(selectorWrapper).select(".page-swap");
		this.contentList  = this.wrapper.select("div.page-content");
		
		for (var i=0; i<this.contentList.length; i++) {
			// set content's display to none initially
			this.contentList[i].style.display = "none";
			
			// attach swap event
			var selectorLink = this.selectorList[i].down("a");
			selectorLink.observe(eventStr,this.swapContent.bindAsEventListener(this,i));
		}
		
		// do initial swap, check if hash exists in url, if hash is in content list
		// display that content, otherwise display first content in list
		var index = 0;
		if (document.location.hash) {
			var pageHash = document.location.hash;
			pageHash = pageHash.match(/#(.*)/)[1];
			
			var contentExists = this.doesContentExist(pageHash);
			if (contentExists) {
				index = contentExists.index;
			}
		}
		this.swapContent(null,index);
	},
	
	swapContent: function(e,selectorIndex) {
		var selector = this.selectorList[selectorIndex],
			content  = this.contentList[selectorIndex];
			
		if (!this.isAnimating1 && !this.isAnimation2) {
			// set animation flags to true
			this.isAnimating1 = true;
			this.isAnimating2 = true;
			
			// add the "active" class to selector's parent li
			if (!selector.hasClassName("active")) selector.addClassName("active");
			
			// if this is the first swap (on page load)
			if (!this.lastSelectorIndex && typeof(this.lastSelectorIndex) == "boolean") {
				// display content w/out animation
				content.style.display = "block";
				
				// reset flags
				this.resetFlag("isAnimating1");
				this.resetFlag("isAnimating2");
			
			} else if (selectorIndex != this.lastSelectorIndex) {

				var lastSelector = this.selectorList[this.lastSelectorIndex];
				this.lastContent = this.contentList[this.lastSelectorIndex];
				
				// remove the "active" class from selector's parent li
				lastSelector.removeClassName("active");
				
				// set wrapper height for animation
				this.wrapper.style.height = this.lastContent.getHeight() + "px";
				
				// swap
				this.lastContent.fade({
					duration: .1,
					queue: { position: "end", scope: "" },
					afterFinish: this.afterFade.bind(this, content)
				});
				
				// set the document hash if needed
				if (e && this.eventStr != "click") {
					var selectorLink = Event.findElement(e, "A");
					var hash = selectorLink.href.split("#")[1];
					window.location.hash = hash;
				}
			} else {
				this.resetFlag("isAnimating1");
				this.resetFlag("isAnimating2");
			}
			
			// set the last index
			this.lastSelectorIndex = selectorIndex;
		}
	},
	
	afterFade: function(content) {
		this.resetFlag("isAnimating1");
		content.appear({
			duration:.1,
			queue: { position: "end", scope: "" },
			beforeStart: this.setHeight.bind(this, content),
			afterFinish: this.afterAppear.bind(this, content)
		});
	},
	
	afterAppear: function(content) {
		this.resetFlag("isAnimating2");
		content.setStyle({ opacity: "" });
		// reset wrapper height
		this.wrapper.style.height = "auto";
	},

	resetFlag: function(flagName) {
		if(flagName == "isAnimating1") this.isAnimating1 = false;
		if(flagName == "isAnimating2") this.isAnimating2 = false;
	},
	
	setHeight: function(content) {
		this.wrapper.morph({ height: content.getHeight() + "px" }, {
			duration: .2,
			queue: { position: "front", scope: ""}
		});
	},
	
	afterSetHeight: function() {
		this.wrapper.style.height = "auto";	
	},
	
	// reset the wrapper's height manually
	resetHeight: function(content) {
		this.wrapper.style.height = content.getHeight() + "px";
	},
	
	doesContentExist: function(id) {
		// does content id exist in contentList
		var status = false;
		for (var i=0; i<this.contentList.length; i++) {
			if (id == this.contentList[i].id) {
				status = { index: i };
			}
		}
		return status;
	}
}