Element.addMethods({
	getOffsetFrom: function(someElement, someTarget){
		var someParent = someElement.getOffsetParent();
		var someOffset = someElement.positionedOffset();
		if(someParent.descendantOf(someTarget)){
			var someParentOffset = someParent.getOffsetFrom(someTarget);
			someOffset[0] += someParentOffset[0];
			someOffset[1] += someParentOffset[1];
		}

		return someOffset;
	},
	
	hitTest: function(someElement, someEvent, someMargin){
		var pointer = someEvent.pointer();
		var offset = someElement.getOffsetFrom(document.body);
		var dimensions = someElement.getDimensions();
		if((pointer.x > (offset[0] - someMargin) && pointer.x < (offset[0] + dimensions.width + someMargin)) && (pointer.y > (offset[1] - someMargin) && pointer.y < (offset[1] + dimensions.height + someMargin))){
			return true;
		}else{
			return false;
		}
	}
});

var GUI = Class.create({
	initialize: function(){
		["/images/nav-our-story.png", "/images/nav-over-our-story.png", "/images/nav-bios.png", "/images/nav-over-bios.png", "/images/nav-nutrition.png", "/images/nav-over-nutrition.png", "/images/nav-blog.png", "/images/nav-over-blog.png", "/images/arrow-left-over.png", "/images/arrow-left-off.png", "/images/arrow-right-over.png", "/images/arrow-right-off.png"].each(function(i){
			new Element('img', { src: i });
		});
		Event.observe(window, "load", this.appear.bindAsEventListener(this));
		$$("form").each(function(someElement){
			new Validate(someElement);
		});
		$$(".page_").each(function(someElement, someIndex){
			if(someElement.getStyle('display') != "none"){
				this.index = someIndex;
			}
		}, this);
		this.pageTracker = _gat._getTracker("UA-18043922-1");
		this.maxIndex = 3;
		this.count = 4;
		this.animate = true;
		this.buttonEnabled = true;
		this.rightPos = { left: '1025px', top: '0px',  display: 'block' };
		this.leftPos = { left: '-1025px', top: '0px', display: 'block' };
		this.navigate = this.handleNavigation.bindAsEventListener(this);
		this.subnav = this.handleDropDowns.bindAsEventListener(this);
		this.tab = this.handleTabs.bindAsEventListener(this);
		this.clean = this.cleanUp.bind(this);
		this.navigationActive = false;
		this.navigationItems = $('navigation_').select('ul.nav > li > a');
		this.navigationItems.invoke("observe", "mouseover", this.navigate);
		this.navigationItems.invoke("observe", "subtext:click", this.navigate);
		this.navigationItems.invoke("observe", "click", this.navigate);
		$('navigation_').select('ul.nav').invoke("observe", "mouseleave", this.navigate);
		$('navigation_').select('a.logo').invoke("observe", "click", this.navigate);
		if(this.buttonNav = $('navigation_').select('button')){
			this.buttonNav.invoke("observe", "click", this.handleButtons.bindAsEventListener(this));
		}
		$$("dt").invoke("observe", "click", this.tab);
		$('navigation_').select('ul.subnav ul').invoke('setStyle', { visibility: 'hidden' });
		$('navigation_').select('ul.subnav > li').invoke('observe', 'mouseenter', this.subnav);
		$('navigation_').select('ul.subnav > li').invoke('observe', 'mouseleave', this.subnav);
		$('navigation_').select('ul.subnav > li > ul').invoke('observe', 'mouseleave', this.subnav);
		
	},
	
	appear: function(someEvent){
		this.trackPage();
		new Effect.Appear("root_", { queue: { scope: "pages", position: "end" } });
		if(this.index != 0){
			var someNav = this.navigationItems[this.index - 1];
			someNav.fire("subtext:click");
			var can = $$(".page_.index-" + this.index + " img.product").first();
			$("content_").setStyle({ overflow: 'visible' });
			new Effect.Appear(can, { duration: 0.5, queue: { scope: "pages", position: "end" } });
		}
	},
	
	handleNavigation: function(someEvent){
		var someElement = someEvent.findElement('a');
		switch(someEvent.type){
		case "dataavailable":
		case "mouseover":
			if(this.animate){
				if(!someElement.hasClassName("active")){
					this.animate = false;
					someElement.addClassName("active");
					if(this.navigationActive){
						var currentItem = this.navigationActive;
						currentItem.removeClassName("active");
						this.navigationActive = someElement;
						new Effect.Parallel([
							new Effect.Move(someElement, { x: 25, y: 0, mode: 'relative', sync: true }),
							new Effect.Move(currentItem, { x: -25, y: 0, mode: 'relative', sync: true })],
							{ duration: 0.125, afterFinish: function(){ myGUI.animate = true; }, queue: { scope: "navigation", position: "end" } });
					}else{
						this.navigationActive = someElement;
						new Effect.Move(someElement, { x: 25, y: 0, mode: 'relative', duration: 0.125, afterFinish: function(){ myGUI.animate = true; }, queue: { scope: "navigation", position: "end" } });
					}
				}
			}
			break;
		case "mouseleave":
		case "mouseout":
			if(this.animate){
				someElement = someEvent.findElement('ul');
				var someNav = $("navigation_").select("a.active").first();
				if(someNav){
					someNav.removeClassName("active");
					this.animate = false;
					this.navigationActive = false;
					new Effect.Move(someNav, { x: -25, y: 0, mode: 'relative', duration: 0.125, afterFinish: function(){ myGUI.animate = true; }, queue: { scope: "navigation", position: "end" } });
				}
			}
			break;
		case "click":
			if(this.buttonNav.size() > 0){
				someEvent.stop();
				if(this.buttonEnabled){
					var nextIndex;
					if(!(nextIndex = this.navigationItems.indexOf(someElement) + 1)){
						nextIndex = 0;
					}
					if(nextIndex != this.index){
						this.buttonEnabled = false;
						var nextPage = $("content_").select('.page_.index-' + nextIndex).first();
						var currentPage = $("content_").select('.page_.index-' + this.index).first();
						nextPage.setStyle(this.rightPos);
						var options = { x: -1025, y: 0, mode: 'relative', sync: true };
						this.index = nextIndex;
						currentPage.addClassName("previous");
						$("content_").setStyle({ overflow: 'hidden' });
						new Effect.Parallel([ new Effect.Move(currentPage, options), new Effect.Move(nextPage, options)], { duration: 1.0, afterFinish: this.clean, queue: { scope: "pages", position: "end" } });
					}
				}
			}
			break;
		}
	},
	
	handleButtons: function(someEvent){
		if(this.buttonEnabled){
			this.buttonEnabled = false;
			var someButton = someEvent.findElement('button');
			var nextIndex;
			var nextPage;
			var currentPage = $("content_").select('.page_.index-' + this.index).first();
			var nextPos;
			var options;
			switch(someButton.className){
			case "right":
				nextIndex = this.getIndex(1);
				nextPos = this.rightPos;
				options = { x: -1025, y: 0, mode: 'relative', sync: true };
				break;
			case "left":
				nextIndex = this.getIndex(0);
				nextPos = this.leftPos;
				options = { x: 1025, y: 0, mode: 'relative', sync: true };
				break;
			}
		}
		nextPage = $("content_").select('.page_.index-' + nextIndex).first();
		nextPage.setStyle(nextPos);
		this.index = nextIndex;
		currentPage.addClassName("previous");
		if(this.index != 0){
			var someNav = this.navigationItems[this.index - 1];
			someNav.fire("subtext:click");
		}else{
			var someNav = $("navigation_").select("a.active").first();
			if(someNav){
				someNav.removeClassName("active");
				this.animate = false;
				this.navigationActive = false;
				new Effect.Move(someNav, { x: -25, y: 0, mode: 'relative', duration: 0.125, afterFinish: function(){ myGUI.animate = true; }, queue: { scope: "navigation", position: "end" } });
			}
		}
		$("content_").setStyle({ overflow: 'hidden' });
		
		new Effect.Parallel([ new Effect.Move(currentPage, options), new Effect.Move(nextPage, options)], { duration: 1.0, afterFinish: this.clean, queue: { scope: "pages", position: "end" } });
	},
	
	handleTabs: function(someEvent){
		var someTab = someEvent.findElement("dt");
		if(!someTab.hasClassName("active")){
			var someParent = someTab.up("dl");
			var re = /index\-(\d){1,3}/;
			re.match(someTab.className);
			var someIndex = RegExp.$1
			someParent.select("dt").invoke("removeClassName", "active");
			someParent.select("dd").invoke("hide");
			someTab.addClassName("active");
			someParent.down("dd.index-" + someIndex).show();
		}
	},
	
	handleDropDowns: function(someEvent){
		var someItem = someEvent.findElement('li');
		var someList = someItem.down('ul');
		switch(someEvent.type){
		case "mouseover":
		case "mouseenter":
			if(someList){
				someList.setStyle({ visibility: 'visible' });
			}
			break;
		case "mouseout":
		case "mouseleave":
			if(someList){
				if(!someList.hitTest(someEvent, 10)){
					someList.setStyle({ visibility: 'hidden' });
				}
			}else{
				subList = someEvent.findElement('ul');
				if(subList.up(1).hasClassName('subnav')){
					someItem.up('ul').setStyle({ visibility: 'hidden' });
				}
			}
			break;
		}
	},
	
	cleanUp: function(someObject){
		var somePage = $("content_").select('.page_.previous').first();
		var currentPage = $("content_").select('.page_.index-' + this.index).first();
		if(somePage.down("img.product")){
			somePage.down("img.product").hide();
		}
		somePage.removeClassName("previous");
		somePage.hide();
		$("content_").setStyle({ overflow: 'visible' });
		if(this.index != 0){
			new Effect.Appear(currentPage.down("img.product"), { duration: 0.5, afterFinish: function(){ myGUI.buttonEnabled = true; }, queue: { scope: "pages", position: "front" } });
		}else{
			this.buttonEnabled = true;
		}
		this.trackPage();
	},

	getIndex: function(someInt){
		var nextIndex;
		if(someInt){
			if(this.index + 1 < this.count){
				nextIndex = this.index + 1;
			}else{
				nextIndex = 0;
			}
		}else{
			if(this.index - 1 < 0){
				nextIndex = this.maxIndex;
			}else{
				nextIndex = this.index - 1;
			}
		}
		return nextIndex;
	},
	
	trackPage: function(){
		switch(parseInt(this.index)){
		case 0:
			this.pageTracker._trackPageview("home");
			break;
		case 1:
			this.pageTracker._trackPageview("awaken");
			break;
		case 2:
			this.pageTracker._trackPageview("restore");
			break;
		case 3:
			this.pageTracker._trackPageview("relax");
			break;
		case 8:
			this.pageTracker._trackPageview("bios");
			break;
		case 9:
			this.pageTracker._trackPageview("nutrition");
			break;
		default:
			this.pageTracker._trackPageview("/");
			break;
		}
	}
});

var Validate = Class.create({
	initialize: function(someForm){
		this.re_empty = /\w+/;
		this.re_email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
		this.form = $(someForm);
		this.caption = this.form.down('input.default').value;
		this.inputs = this.form.select('input.validate');
		this.submit = this.validateForm.bindAsEventListener(this);
		this.response = this.parseResponse.bind(this);
		someForm.observe('submit', this.submit);
		this.inputs.invoke('observe', 'focus', this.onFocus.bindAsEventListener(this));
		this.inputs.invoke('observe', 'blur', this.onBlur.bindAsEventListener(this));
	},
	
	validateForm: function(someEvent){
		someEvent.stop();
		if(this.inputs.all(function(someInput){
			if(someInput.hasClassName('blank')){
				if(!this.re_empty.test(someInput.value) || someInput.value == this.caption){
					someInput.addClassName('red');
					someInput.value = this.caption;
					someInput.blur();
					return false;
				}
			}
			if(someInput.hasClassName('email')){
				if(!this.re_email.test(someInput.value)){
					someInput.addClassName('red');
					someInput.value = "invalid email";
					someInput.blur();
					return false;
				}
			}
			return true;
		}, this)){
			if(String(this.form.action).indexOf('AddNewsletter') > 0){
				new Ajax.Request('/addnewsletter.php', { method: 'post', params: this.form.serialize({ hash: true, submit: false }), onComplete: this.response });
			}else{
				this.form.submit();
			}
		}
	},
	
	onFocus: function(someEvent){
		var someInput = someEvent.findElement('input');
		someInput.removeClassName('red');
		if(someInput.value == this.caption){
			someInput.value = "";
		}
	},
	
	onBlur: function(someEvent){
		var someInput = someEvent.findElement('input');
		if(!this.re_empty.test(someInput.value)){
			someInput.value = this.caption;
		}
	},
	
	parseResponse: function(someAjax){
		if(someAjax.responseText.indexOf('Added!') != -1 || someAjax.responseText.indexOf('Success') != -1){
		// SUCCESS
			this.form.email.value = "email added!";
		}else{
		// FAILURE
			this.form.email.addClassName('red');
			this.form.email.value = "error";
		}
	}
});

var initGUI = function(){ myGUI = new GUI(); }
document.observe("dom:loaded", initGUI);
