//$namespace('ecounseling');
if(Object.isUndefined(ecounseling)) var ecounseling = {};

ecounseling.MegaDropDown = Class.create(
{
	_properties: function()
	{
		this.FIND_A_COUNSELOR 	= '/find-counselor/menu';
		this.RESOURCES 			= '/content/category/menu';
		this.HOW_TO 			= '/how-to/menu';
		this.FAQ 				= '/faq/menu';
		
		this.navigation = null;
		this.dropdown = null;
		this.dom = {};
		
		this.dropDownVisible = false;
		this.itemLoaded = null; // null, "find", "resources", "how-to" or "faq"
		this.cache = 
		{
			findACounselor: null,
			resources: null,
			howTo: null,
			faq: null
		};
	},
	
	initialize: function()
	{
		this._properties();
		
		this.navigation = $("navigation");
		this.dropdown = $("megamenu");
		this.container = $("megamenu-container");
		this.closeButton = $("megamenu-close");
		
		this._initDOM();
		this._initEvents();
	},
	
	_initDOM: function()
	{
		this.dom.findACounselor = this.navigation.select('.find')[0];
		this.dom.resources = this.navigation.select('.resources')[0];
		this.dom.howTo = this.navigation.select('.how-to')[0];
		this.dom.faq = this.navigation.select('.faq')[0];
	},
	
	_initEvents: function()
	{
		this.dom.findACounselor.on('click', this.handler.clickFindACounselor.bind(this));
		this.dom.resources.on('click', this.handler.clickResources.bind(this));
		this.dom.howTo.on('click', this.handler.clickHowTo.bind(this));
		this.dom.faq.on('click', this.handler.clickFaq.bind(this));
		
		this.closeButton.on('click', this.handler.clickClose.bind(this));
		//this.dropdown.on('click', this.handler.click.bind(this));
		
		
		Event.observe(document, 'mega-drop-down::hide', this.handler.hide.bind(this));
		Event.observe(document, 'mega-drop-down::show', this.handler.show.bind(this));
		//Event.observe(document, 'click', this.handler.clickOutside.bind(this));
		//this.dropdown.on('mouseleave', this.handler.clickOutside.bind(this));
		Event.observe(document, 'mega-drop-down:find-counselor', this.handler.clickFindACounselor.bind(this));
	},
	
	activate: function(item)
	{
		this.dom.findACounselor.removeClassName('active');
		this.dom.resources.removeClassName('active');
		this.dom.howTo.removeClassName('active');
		this.dom.faq.removeClassName('active');
		
		item.addClassName('active');
	},
	
	show: function()
	{
		if(this.dropDownVisible === true)
		{
			return this; // already visible
		}
		Effect.BlindDown(this.dropdown);
		
		//this.dropdown.show();
		this.dropDownVisible = true;
		return this;
	},
	
	hide: function()
	{
		if(this.dropDownVisible === false)
		{
			return this; // already hidden
		}
		
		Effect.BlindUp(this.dropdown);
		//this.dropdown.hide();
		this.dropDownVisible = false;
		return this;
	},
	
	loadFindACounselor: function()
	{
		this.show();
		this.activate(this.dom.findACounselor);
		
		if(this.itemLoaded != 'find')
		{
			if(this.cache.findACounselor !== null)
			{
				// content is cached, use cache
				
				this.container.update(this.cache.findACounselor);
				this.itemLoaded = 'find';
				this.show();
				return;
			}
			
			// content is not cached, load from server
			
			new Ajax.Request(this.FIND_A_COUNSELOR,
			{
				method: 'get',
				onSuccess: function(response)
				{
					this.cache.findACounselor = response.responseText;
					this.container.update(this.cache.findACounselor);
					this.itemLoaded = 'find';
					this.show();
					
				}.bind(this)
			});
		}
	},
	
	loadResources: function()
	{
		this.show();
		this.activate(this.dom.resources);
		
		if(this.itemLoaded != 'resources')
		{
			if(this.cache.resources !== null)
			{
				// content is cached, use cache
				
				this.container.update(this.cache.resources);
				this.itemLoaded = 'resources';
				this.show();
				return;
			}
			
			// content is not cached, load from server
			
			new Ajax.Request(this.RESOURCES,
			{
				method: 'get',
				onSuccess: function(response)
				{
					this.cache.resources = response.responseText;
					this.container.update(this.cache.resources);
					this.itemLoaded = 'resources';
					this.show();
					
				}.bind(this)
			});
		}
	},
	
	loadHowTo: function()
	{
		this.show();
		this.activate(this.dom.howTo);
		
		if(this.itemLoaded != 'how-to')
		{
			if(this.cache.howTo !== null)
			{
				// content is cached, use cache
				
				this.container.update(this.cache.howTo);
				this.itemLoaded = 'how-to';
				this.show();
				return;
			}
			
			// content is not cached, load from server
			
			new Ajax.Request(this.HOW_TO,
			{
				method: 'get',
				onSuccess: function(response)
				{
					this.cache.howTo = response.responseText;
					this.container.update(this.cache.howTo);
					this.itemLoaded = 'how-to';
					this.show();
					
				}.bind(this)
			});
		}
	},
	
	loadFaq: function()
	{
		this.show();
		this.activate(this.dom.faq);
		
		if(this.itemLoaded != 'faq')
		{
			if(this.cache.faq !== null)
			{
				// content is cached, use cache
				
				this.container.update(this.cache.faq);
				this.itemLoaded = 'faq';
				this.show();
				return;
			}
			
			// content is not cached, load from server
			
			new Ajax.Request(this.FAQ,
			{
				method: 'get',
				onSuccess: function(response)
				{
					this.cache.faq = response.responseText;
					this.container.update(this.cache.faq);
					this.itemLoaded = 'faq';
					this.show();
					
				}.bind(this)
			});
		}
	},
	
	handler:
	{
		clickFindACounselor: function(e)
		{
			Event.stop(e);
			this.loadFindACounselor();
		},
		
		clickResources: function(e)
		{
			Event.stop(e);
			this.loadResources();
		},
		
		clickHowTo: function(e)
		{
			Event.stop(e);
			this.loadHowTo();
		},
		
		clickFaq: function(e)
		{
			Event.stop(e);
			this.loadFaq();
		},
		
		hide: function(e)
		{
			this.hide();
		},
		
		show: function(e)
		{
			this.show();
		},
		
		click: function(e)
		{
			Event.stop(e);
		},
		
		clickClose: function(e)
		{
			Event.fire(document, 'mega-drop-down::hide');
		}
	}
});

document.on('dom:loaded', function(){ new ecounseling.MegaDropDown(); });