VAUGHN = {};
VAUGHN.frontend = {};

VAUGHN.frontend = function (){
	//currents
	var current = {
			menu: '', //on the top of the page
			mainmenu: '',
			submenu: '',
			page: '',
			product: ''
	};
	
	//List of names for which element will not be bound to ajax action
	var exclusions = ['signup','blog','landscape','architecture'];
	var currentHash='';
	var path = '';
	
	function updateCurrents(p) {
		current.menu 		= p.menu;
		current.mainmenu 	= p.mainmenu;
		current.submenu 	= p.submenu;
		current.page 		= p.page;
		current.product 	= p.product;
		document.fire('vaughn:updatemenus', {params: current});
	}
	
	function onNavigateClick(e) {
		var link = e.element();
		var form = false;
		if(link.tagName == 'INPUT' && link.readAttribute('type') == 'submit') {
			//handle form post
			//find the form
			form = link.up('FORM');
			if(form && form.readAttribute('action') != '') {
				link.hide();
				handleFormPost(form);
				e.stop(e);
			}
			return;
			//link = new Element('a', { href: form.readAttribute('action'), name: 'form_link' });
			
		} else if(link.tagName != 'A') {
			if(link.tagName != 'IMG') {
				return;
			}
			link = link.up('A');
		}
		
		//If name is in exclusions, return.
		var bypass = false;
		exclusions.each(function(s){
			if(s == link.name) {
				bypass = true;
			}
		});
		if(bypass) return;

		//Stop propagation to prevent browser reload
		e.stop(e);
		
		//get parameters
		var params = urlParse(link.href);
		var qs = '';
		if(link.href.indexOf('?') != -1) {
			qs = link.href.substr(link.href.indexOf('?'));
		}
		
		
		//reconstruct the url
		url = '/' + params.menu;
		if(params.mainmenu) url += '/' + params.mainmenu;
		if(params.submenu) url += '/' + params.submenu;
		if(params.product) url += '/' + params.product;
		var rel_url = url + qs;
		url = basePath + url;

		//Exception for the home page
		if(rel_url == '/') {
			rel_url = '/home/index';
		}
		
		window.location="#"+rel_url;
	}
	
	function handleFormPost(form) {
		var url = form.readAttribute('action');
		changePage(url, form);
	}
	
	function changePage(url, form ) {
		params = urlParse(url);
		//Call cleanup to make sure that no residual variables remain
		cleanup();
		
		updateElements = [];
		//determine what will be reloaded
		if(params.menu != current.menu)
			updateElements.push({container: 'mainmenucontainer', element: 'mainmenu', ajaxvar: 'menu' });
		if(params.mainmenu != current.mainmenu)
			updateElements.push({container: 'submenucontainer', element: 'submenu', ajaxvar: 'submenu'});
		//page content is always updated...
		updateElements.push({container: 'pagecontent', element: 'pagecontent', ajaxvar: 'page'});
		
		//change the footer to absolute
		if($('footer').getStyle('position') != 'absolute')
			$('footer').setStyle({position: 'absolute', width: '100%', top: $('pagecontent').getHeight() + 'px'});		
		
		//Set the ajax parameters
		ajaxParams = {};
		ajaxParams.ajax=1;
		if(params.page) ajaxParams.page = params.page;
		
		//Make the affected elements disappear
		effectElements = [];
		updateElements.each(function(s, i) {
			effectElements.push(new Effect.Fade(s.container, {sync: true}));
		});
		
		new Effect.Parallel(effectElements, {
			duration: 0.4,
			afterFinish: function(){
				//after the fade out, fade the loader in.
				new Effect.Appear($('pageloader'), {
					duration: 0.2,
					afterFinish: function(){
					
					//after the fade out, set up the ajax call
						//If it's a form, post
						var method = 'get';
						if(form) {
							method = 'post';
							ajaxParams = Object.extend(ajaxParams, form.serialize(true))
						}
						new Ajax.Request(url,{
							method: method,
							parameters: ajaxParams,
							onSuccess: function(r) {
							
								var currentFooterTop = $('footer').positionedOffset().top;
								
								updateCurrents(params);
								updateElements.each(function(s, i){
									if(r.responseJSON[s.ajaxvar])
										$(s.element).update(r.responseJSON[s.ajaxvar]);
									else
										$(s.element).update('');
								});
								//Fire event to update menus
								
								//Make sure that all of pagecontent's images are loaded
								//before appearing
								//calculate footer position
	
								var images = $('pagecontent').select('img');								
								new PeriodicalExecuter(function(pe){
									var c=0;
									images.each(function(s){
										//bypass
										if(s.complete){ 
											//alert(s.src); 
											c++; 
										}
									});

									if(c == images.length){ 
										pe.stop();
										
										 new Effect.Fade($('pageloader'), {
											duration: 0.2,
											afterFinish: function(){
												var footerPosition = $('pagecontent').getHeight() - currentFooterTop;
												new Effect.Move('footer', { x: 0, y: footerPosition, mode: 'relative', duration: 0.2 });
												effectElements = [];
												updateElements.each(function(s, i) {
													effectElements.push(new Effect.Appear(s.container, {sync: true}));
												});
												new Effect.Parallel(effectElements, {
													duration: 0.4});
												}
										});
									}
								}, 0.05);
							}
						});		
					}
				});
			}
		});		
	}
	
	
	function urlParse(link) {
		var params = {};
		params.menu = params.mainmenu = params.submenu = params.product = params.page = '';

		//strip the base path
		if(link.indexOf(basePath) != -1){
			link = link.substr(basePath.length);
		}
		
		//split at the '?' if there's one
		var linkArr = link.split('?');
		var linkBase = linkArr[0];
		var qs = '';
		if(typeof(linkArr[1]) != 'undefined') {
			qs = linkArr[1];
		}
		
		//handle base
		//lev1: main, lev2: menu, lev3:subMenu, lev4:product
		baseArr = linkBase.split('/');

		if(typeof(baseArr[1]) != 'undefined') params.menu = baseArr[1];
		if(typeof(baseArr[2]) != 'undefined') params.mainmenu = baseArr[2];
		if(typeof(baseArr[3]) != 'undefined') params.submenu = baseArr[3];
		if(typeof(baseArr[4]) != 'undefined') params.product = baseArr[4];
		
		//handle query string
		if(qs != '') {
			//we only expect the page to be in the qstring.
			qs.split('&').each(function(s){
				var pair = s.split('=');
				if(pair[0] == 'page') params.page = pair[1];
			});
		}

		return params;
	}
	
	function onMenuUpdate(e) {
		//update top menu active tab
		$('topmenu').select('A').each(function(s){
			if(s.name == e.memo.params.menu || (s.name == 'home' && e.memo.params.menu == '')) {
				s.addClassName('active');
			} else {
				s.removeClassName('active');
			}			
		});
		
		//update menu active tab
		$('mainmenu').select('A').each(function(s) {
			//alert(s.name + ' ' + e.memo.params.mainmenu);
			if(s.name == e.memo.params.mainmenu) {
				s.addClassName('active');
			} else {
				s.removeClassName('active');
			}
		});

		//update submenu tabs
		$('submenu').select('A').each(function(s){
			if(s.name == e.memo.params.submenu) {
				s.addClassName('active');
			} else {
				s.removeClassName('active');
			}
		});
	}

	function loadBigImage(e) {
		var elt = e.element();
		var thumbSrc = elt.src;
		var url = thumbSrc.substr(0, thumbSrc.length - 9);
		var ext = thumbSrc.substr(thumbSrc.length - 4);
		var newUrl = url+'525x443'+ext;
		
		var bi = $('bigimage');
		var il = $('imageload');
		if(bi.src != newUrl) {
			//load up the new image
			bi.hide();
			il.show();
			bi.onload = function(e){
				il.hide();
				bi.show();
			};
			bi.src = newUrl;
		}
	}
	
	//Called everytime we change page. Not the cleanest, needs to be re-coded to something like 'page_name'Cleanup
	function cleanup() {
		//Home page
		if(typeof(home_slide) != 'undefined' && home_slide instanceof VAUGHN.slideshow.Slideshow) {
			home_slide.clear();
			home_slide = null;
		}
		
		//Home page
		if(typeof(product_slide) != 'undefined' && product_slide instanceof VAUGHN.slideshow.Slideshow) {
			product_slide.clear();
			product_slide = null;
		}
	}

	function onAddToCartClick(e) {
		var elt = e.element();
		if(elt.tagName != 'BUTTON') {
			elt=elt.up('BUTTON');
		}
		e.stop(e);
		var form = elt.up('FORM');
		var params = form.serialize(true);
		params.ajax = 1;
		
		//1- hide cart button & cart from menu bar
		//2- also show label with status adding to cart...
		$('cart_status').update('Adding item to cart...');
		
		new Effect.Parallel([
		    new Effect.Fade('add_to_cart', { sync: true }),
		    new Effect.Fade('menucart', {sync: true}) ], { 
				duration: 0.3, 
				afterFinish: function() {
					new Effect.Appear('cart_status', {duration: 0.3, 
						afterFinish: function(){
							new Ajax.Request(form.action, {
								parameters: params,
								onSuccess: function(r) {
								  Effect.Fade('cart_status', { 
									  duration: 0.3, 
									  afterFinish: function() {
									  	$('cart_status').update('Item successfully added to cart');
										$('menucart').update(r.responseJSON.html);
									  	new Effect.Parallel([
										  Effect.Appear('cart_status', { sync: true }),
										  Effect.Appear('menucart', {sync: true})], {
									  		duration: 0.3,
									  		afterFinish: function(){
									  			setTimeout(function(){
									  				new Effect.Fade('cart_status', {
									  					duration: 0.3,
									  					afterFinish: function() {
									  						$('cart_status').update('');
									  						new Effect.Appear('add_to_cart', { duration: 0.3 });
									  					}
									  				});
									  			}, 2000);
									  		}
									  	  });
									  	}
									})
								}
							});
						}
					});
				}
			}
		);
	}
	
	
	return {
		init: function() {
			
			//Default location
			if(location.hash == '' || location.hash == '#')
				window.location = "#"+path;
			
			var hist_man = new ProtoHistoryManager();
			hist_man.register('page', 
				['/'], 
				function(values) {
					changePage(basePath+values[0]); 
				},
				function(values) {  },
				'(.*)'
				);
			hist_man.start();

			$('topmenu').observe('click', onNavigateClick);
			$('mainmenu').observe('click', onNavigateClick);
			$('submenu').observe('click', onNavigateClick);
			document.observe('vaughn:updatemenus', onMenuUpdate);

			//$('pagecontent').observe('pagecontent:ready', onPageContentReady);

			//hook up any next/previous page elements there might be
			//$('pagecontent').fire('pagecontent:ready');
		},
		setCurrentMenu: function(c) {
			current.menu = c;
		},		
		setCurrentMain: function(c) {
			current.mainmenu = c;
		},		
		setCurrentSubMenu: function(c) {
			current.submenu = c;
		},
		setCurrentPage: function(c) {
			current.page = c;
		},		
		setCurrentProduct: function(c) {
			current.product = c;
		},
		setBasePath: function(c) {
			basePath = c;
		},
		setPath: function(c) {
			path = c;
		},
		loadBigImage: function(e){
			return loadBigImage(e);
		},
		onNavigateClick: function(e) {
			return onNavigateClick(e);
		},
		onAddToCartClick: function(e) {
			return onAddToCartClick(e);
		}
	}
}();

document.observe('dom:loaded', VAUGHN.frontend.init);