window.addEvent('domready', function() {

//Global vars
var NavList = $$('#Nav ul a');
var NavTitle = $$('#Nav .Title a');
var NavActive = null;


// Click function for nav title

NavTitle.addEvent('click', function()
{
	NavReset();
	this.blur();
});

NavTitle.removeProperty('href');


// Reset whole navigation

function NavReset()
{
	var cn = $('Nav').getElement('UL').childNodes;
	for(var i=0; i<cn.length; i++)
	{
		if(cn[i].nodeName == 'LI')
		{
			var a = cn[i].getElement('a');
			if(a != this)
			{
				a.ActiveToFirst('fast');
				a.Status = 'Blur';
				if(a.ul)
					a.SlideSub.slideOut();
			}
		}
	}

	//Rest all sub level items
	NavList.each(function(el,i)
	{
		if(!el.First)
		{
			el.Status = 'Blur';
			if(el.ul)
				el.SlideSub.hide();
			el.ActiveToChild('fast');
			el.ExpandSiblings();
		}
	});
}


//Set link items

NavList.each(function(el,i)
{
	//Setup params

	el.fx = new Fx.Morph(el, {duration:200, wait:false});
	el.arrfx = new Fx.Morph(el, {duration:0, wait:false});

	el.ul = el.getParent().getElement('UL');//get child menu, if any

	el.Page = el.href.substring(el.href.lastIndexOf('/')+1,el.href.length);//get the linked page
	if(el.Page.indexOf('#') != -1)
		el.Page = '';

	el.First = (el.parentNode.parentNode.parentNode.id == 'Nav')? true:false;//is a top level nav item?
	el.Status = 'Blur';// Blur | Open | Active

	el.removeProperty('href');//Remove link (uses onclick, href now stored in el.Page (above))


	//Mouse overs

	el.addEvent('mouseenter', function(){
		//this.fx.start({'background-color': '#f0f0f0'});
	});
	el.addEvent('mouseleave', function(){
		//this.fx.start({'background-color': '#ffffff'});
	});


	//Style functions - tranistions from one state to another

	if(el.First)
	{
		el.FirstToActive  = function()
		{
			//.Active
			this.getParent().getParent().className = 'Active';
				//this.style.fontWeight = 'bold';
				//this.style.backgroundImage = 'url(images/nav_arrows_frames.png) !important';
				//this.style.backgroundImage = 'url(images/nav_arrows_frames.png)';
				//this.style.backgroundPosition = '0 -600px';
				//this.getElement('span').style.backgroundImage = 'none';
				//this.style.cursor = 'default';

			this.arrfx.start({
				'background-position': '0 -600px'
			}).chain(function(){
				this.start.delay(100, this, {
					'background-position': '0 -500px'
				});
			}).chain(function(){
				this.start.delay(100, this, {
					'background-position': '0 -200px'
				});
			});
		}

		el.ActiveToFirst  = function()
		{
			this.getParent().getParent().className = '';
			//this.style.fontWeight = 'normal';
			//this.style.backgroundImage = 'url(images/nav_arrows_frames.png) !important';
			//this.style.backgroundImage = 'url(images/nav_arrows_frames.png)';

			if(arguments.length && arguments[0] == 'fast')
				this.style.backgroundPosition = '0 -600px';
			else
			{
				this.style.backgroundPosition = '0 -200px';
				this.arrfx.start({
					'background-position': '0 -200px'
				}).chain(function(){
					this.start.delay(100, this, {
						'background-position': '0 -500px'
					});
				}).chain(function(){
					this.start.delay(100, this, {
						'background-position': '0 -600px'
					});
				});
			}
			//this.getElement('span').style.backgroundImage = 'url(images/nav_border.png) !important';
			//this.getElement('span').style.backgroundImage = 'url(images/nav_border.png)';
			//this.getElement('span').style.backgroundColor = 'blue';
			this.style.cursor = 'pointer';
		}
	}

	el.ActiveToOpen  = function()
	{
		//.Open
		//alert(this.getParent().getParent().nodeName);
		this.getParent().getParent().className = 'Open';

			//this.fx.start({'margin-left': 0/*, 'background-color': '#f0f0f0' */});
			//this.style.fontWeight = 'bold';
			//this.style.backgroundImage = 'url(images/nav_arrows_frames.png) !important';
			//this.style.backgroundImage = 'url(images/nav_arrows_frames.png)';
			//this.style.backgroundPosition = '0 -200px';
			//this.getElement('span').style.backgroundImage = 'none !important';
			//this.getElement('span').style.backgroundImage = 'none';
			//this.style.cursor = 'pointer';

		this.arrfx.start({
			'background-position': '0 -200px'
		}).chain(function(){
			this.start.delay(100, this, {
				'background-position': '0 -300px'
			});
		}).chain(function(){
			this.start.delay(100, this, {
				'background-position': '0 -400px'
			});
		});
	}

	el.OpenToActive  = function()
	{
		//.Active
		this.getParent().getParent().className = 'Active';

			//this.fx.start({'margin-left': 0/*, 'background-color': '#f0f0f0' */});
			//this.style.fontWeight = 'bold';
			//this.style.backgroundImage = 'url(images/nav_arrows_frames.png) !important';
			//this.style.backgroundImage = 'url(images/nav_arrows_frames.png)';
			//this.style.backgroundPosition = '0 -400px';
			//this.getElement('span').style.backgroundImage = 'none !important';
			//this.getElement('span').style.backgroundImage = 'none';
			//this.style.cursor = 'default';

		this.arrfx.start({
			'background-position': '0 -400px'
		}).chain(function(){
			this.start.delay(100, this, {
				'background-position': '0 -300px'
			});
		}).chain(function(){
			this.start.delay(100, this, {
				'background-position': '0 -200px'
			});
		});
		
	}

	el.ChildToActive  = function()
	{
		//.Active
		this.getParent().getParent().className = 'Active';

			//this.fx.start({'margin-left': 0/*, 'background-color': '#f0f0f0'*/});
			//this.style.fontWeight = 'bold';
			//this.style.backgroundImage = 'url(images/nav_arrows_frames.png) !important';
			//this.style.backgroundImage = 'url(images/nav_arrows_frames.png)';
			//this.style.backgroundPosition = '0 0';
			//this.getElement('span').style.backgroundImage = 'none !important';
			//this.getElement('span').style.backgroundImage = 'none';
			//this.style.cursor = 'default';

		this.arrfx.start({
			'background-position': '0 0'
		}).chain(function(){
			this.start.delay(100, this, {
				'background-position': '0 -100px'
			});
		}).chain(function(){
			this.start.delay(100, this, {
				'background-position': '0 -200px'
			});
		});
	}

	el.ActiveToChild  = function()
	{
		//.Active
		//this.getParent().getParent().className = 'Active';

			//this.fx.start({'margin-left': 16/*, 'background-color': '#ffffff'*/});
			this.style.fontWeight = 'normal';
			//this.style.backgroundImage = 'url(images/nav_arrows_frames.png) !important';
			this.style.backgroundImage = 'url(images/nav_arrows_frames.png)';
			this.style.cursor = 'pointer';

		if(arguments.length && arguments[0] == 'fast')
			this.style.backgroundPosition = '0 0';
		else
		{
			this.style.backgroundPosition = '0 -200px';
			this.arrfx.start({
				'background-position': '0 -200px'
			}).chain(function(){
				this.start.delay(100, this, {
					'background-position': '0 -100px'
				});
			}).chain(function(){
				this.start.delay(100, this, {
					'background-position': '0 0'
				});
			});
		}
	}

	//A version of the 'click' items in the click event function
	//(so could be called without having the onclick function)
	el.ClickActive = function()
	{
		if(!this.First)
		{
			this.Status = 'Blur';
			//               a   .div       .li        .ul        .div       .li        .a 
			var parentItem = this.parentNode.parentNode.parentNode.parentNode.parentNode.getElement('a');//note there's extra DIV tags from the Slide fx
			parentItem.OpenToActive();
			parentItem.Status = 'Active';
			NavActive = parentItem;
			if(this.ul)
				this.SlideSub.slideOut();
			this.ActiveToChild();
			this.ExpandSiblings();
		}
		else
		{
			this.Status = 'Blur';
			NavActive = null;
			this.ActiveToFirst();
			if(this.ul)
				this.SlideSub.slideOut();
		}
	}


	//Slides

	el.Slide = new Fx.Slide(el);
	if(el.ul)
		el.SlideSub = new Fx.Slide(el.ul);

	el.Slide.addEvent('start', function(el) {
		//alert(el.innerHTML);
		//alert(el.innerHTML);
		//alert(el.parentNode.parentNode.nodeName);//className = 'Active';
	});



	el.CompactSiblings = function()
	{
		var cn = this.parentNode.parentNode.parentNode.childNodes;
		for(var i=0; i<cn.length; i++)
		{
			if(cn[i].nodeName == 'LI')
			{
				var a = cn[i].getElement('a');
				if(a != this)
					a.Slide.slideOut();
			}
		}
	}

	el.ExpandSiblings = function()
	{
		var cn = this.parentNode.parentNode.parentNode.childNodes;
		for(var i=0; i<cn.length; i++)
		{
			if(cn[i].nodeName == 'LI')
			{
				var a = cn[i].getElement('a');
				if(a != this)
					a.Slide.slideIn();
			}
		}
	}


	//Click functions

	if(!el.ul)
		el.addEvent('click', function(e)
		{
			//"do nothing"
			e = new Event(e);
			this.blur();
			e.stop();
		});
	else
		el.addEvent('click', function(e)
		{
			if(NavActive && NavActive.Page)
			{
				//Page Link Here - hide current page or perhaps show loading symbol
			}

			if(this.First && this.Status == 'Active')
				{}
			else
				{}

			if(!this.First)
			{
				switch(this.Status)
				{
					case 'Blur'://child click
						this.Status = 'Active';
						NavActive = this;
						this.parentNode.parentNode.parentNode.parentNode.parentNode.getElement('a').ActiveToOpen();//note there's extra DIV tags from the Slide fx
						this.parentNode.parentNode.parentNode.parentNode.parentNode.getElement('a').Status = 'Open';
						this.ChildToActive();
						this.parentNode.parentNode.parentNode.parentNode.style.height = '';//style the Slide DIV for compact siblings to work
						this.CompactSiblings();
						if(this.ul)
							this.SlideSub.slideIn();
					break;
					case 'Open':
						this.Status = 'Active';
						while(NavActive != this)
							//Changed, see el.ClickActive above...
							NavActive.ClickActive();
							//(was:)
							//Active.fireEvent('click',Active);
					break;
					case 'Active':
						//Do nothing, see el.ClickActive above...

						/*this.Status = 'Blur';
						this.parentNode.parentNode.parentNode.parentNode.parentNode.getElement('a').OpenToActive();//note there's extra DIV tags from the Slide fx
						this.parentNode.parentNode.parentNode.parentNode.parentNode.getElement('a').Status = 'Active';
						NavActive = this.parentNode.parentNode.parentNode.parentNode.parentNode.getElement('a');
						if(this.ul)
							this.SlideSub.slideOut();
						this.ActiveToChild();
						this.ExpandSiblings();*/
					break;
				}
			}
			else
			{
				this.parentNode.parentNode.className = 'Active';
				switch(this.Status)
				{
					case 'Blur'://child click
						this.Status = 'Active';
						NavActive = this;
						this.FirstToActive();
						//NavReset();



//@todo make funciton
						//Reset siblings
						var cn = this.parentNode.parentNode.parentNode.childNodes;
						for(var i=0; i<cn.length; i++)
						{
							if(cn[i].nodeName == 'LI')
							{
								var a = cn[i].getElement('a');
								if(a != this)
								{
									a.ActiveToFirst('fast');
									a.Status = 'Blur';
									if(a.ul)
										a.SlideSub.slideOut();
								}
							}
						}

						//Rest all sub level items
						NavList.each(function(el,i)
						{
							if(!el.First)
							{
								el.Status = 'Blur';
								if(el.ul)
									el.SlideSub.hide();
								el.ActiveToChild('fast');
								el.ExpandSiblings();
							}
						});




						if(this.ul)
							this.SlideSub.slideIn();
					break;
					case 'Open':
						this.Status = 'Active';
						while(NavActive != this)
							//Changed, see el.ClickActive above...
							NavActive.ClickActive();
							//(was:)
							//Active.fireEvent('click',Active);
					break;
					case 'Active':
						//Do nothing, see el.ClickActive above...

						/*this.Status = 'Blur';
						NavActive = null;
						this.ActiveToFirst();
						if(this.ul)
							this.SlideSub.slideOut();*/
					break;
				}
			}

			if(NavActive && NavActive.Page)
			{
				//Page Link Here - call pass Active.Page to AJAX etc.
			}
		});

	//Init functions
	if(!el.First)
		el.ActiveToChild('fast');
	if(el.ul)
		el.SlideSub.hide();
});


//Undo some of the CSS above (for on page load)

$$('#Nav li li').each(function(el){ el.style.display = 'block'; });

});