//CREATIVE LIFEFORM SITE MENU 
//Copyright  2009. Creative Lifeform All rights reserved.
//Code written by Rohan Deshpande for Creative Lifeform.

//---------------------------------------------------------------------------------------------------------

//HASHIN!

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

	
	//VARIABLES

	//Global Selectors
	
	var About		=	$('about'),
		aboutInfo	=	$('about-info').getChildren(('.text-item')),
		Work		=	$('work'),
		workInfo	=	$('work-info').getChildren(('.text-item')),
		Other		=	$('other'),
		otherInfo	=	$('other-info').getChildren(('.text-item')),
		Anchors		=	$$('.remove'),
		SubMenu		=	$$('.submenu-item'),
		Titles		=	$$('.title'),
		Texts		=	$$('.text-item'),
		Controls	=	$$('.control');
		Prev		=	$$('.control-left'),
		Next		=	$$('.control-right');
	
	//Global Variables
		
	var speed	=	'normal',
		link	=	'chain',
		transit	=	Fx.Transitions.Sine.easeOut,
		emerald	=	'#333333',
		deep	=	'#0d1f15',
		jade	=	'#429D68',
		white	=	'#FFFFFF',
		yOffset	=	-120,
		xOffset	=	40,
		i		=	0;
	
	//---------------------------------------------------------------------------------------------------
	
	//INITIALIZE

	//get rid of the nojs classes from the menu

	if($$('div').hasClass('nojs-title'))
	{
		$$('div').each(function(item)
		{
			item.removeClass('nojs-title')
		});
	}

	if($$('div').hasClass('nojs-link'))
	{
		$$('div').each(function(item)
		{
			item.removeClass('nojs-link')
		});
	}

	if($$('li').hasClass('nojs-li'))
	{
		$$('li').each(function(item)
		{
			item.removeClass('nojs-li')
		});
	}
	
	//remove the hrefs from the links in the submenu (they are there for noscript users)
	
	Anchors.each(function (item , index) 
	{
		item.removeAttribute("href"); 
	});
	
	//set the status of each text-item on domready
	
	Texts.each(function(item,index)
	{
		item.status ='off'
	});
		
	//turn on the menu on domready	
		
	handleMenu(About , 'turnOn');
	
	//display the initial elements
	
	fadeIn($('intro'));
	Controls.setStyle('opacity' , '1');
	$('about-intro').addClass('sub-click');
	
	//---------------------------------------------------------------------------------------------------

	//EVENT HANDLERS
	
	//Main Menu
	
	//mouseenter
	
	About.addEvent('mouseenter' , function ()
	{
		if(statusCheck(aboutInfo) == true | this.state == 'on')
		{
			return;
		}
		else
		{
			handleMenu(this,'turnOn');
		}
	});
	
	Work.addEvent('mouseenter' , function ()
	{
		if(statusCheck(workInfo) == true | this.state == 'on')
		{
			return;
		}
		else
		{
			handleMenu(this,'turnOn');
		}	
	});
	
	Other.addEvent('mouseenter' , function ()
	{
		if(statusCheck(otherInfo) == true | this.state == 'on')
		{
			return;
		}
		else
		{
			handleMenu(this,'turnOn');
		}
	});
	
	//mouseleave
		
	About.addEvent('mouseleave' , function ()
	{
		if(Work.state == 'on' | Other.state == 'on') 
		{
			handleMenu(this,'turnOff');
		}
	});
	
		
	Work.addEvent('mouseleave' , function ()
	{
		if(About.state == 'on' | Other.state == 'on') 
		{
			handleMenu(this,'turnOff');
		}
	});
	
		
	Other.addEvent('mouseleave' , function ()
	{
		if(About.state == 'on' | Work.state == 'on') 
		{
			handleMenu(this,'turnOff');
		}
	});
	
	//Titles
	
	Titles.each(function (item , index)
	{
		item.addEvent('click' , function()
		{
			var nextChild	=	$(item.getNext());
			var firstSub	=	$(nextChild.getFirst());
			
			if (firstSub.hasClass('sub-click'))
			{
				handleSubMenu(firstSub);
			}
			else
			{
				fadeTextItems();
				SubMenu.removeClass('sub-click');
				handleSubMenu(firstSub);	
			}
		});
	});
	
	//Sub Menu
	
	SubMenu.each(function(item , index)
	{
		item.addEvent('mouseenter' , function() 
		{
			this.addClass('sub-on');
		});
		
		item.addEvent('mouseleave' , function() 
		{
			this.removeClass('sub-on');
		});
		
		item.addEvent('click' , function()
		{
			if(this.hasClass('sub-click'))
			{
				handleSubMenu(this);
			}
			else
			{
				fadeTextItems();
				SubMenu.removeClass('sub-click');
				handleSubMenu(this);
			}
		});
			
	});
	
	//Controls
	
	Next.addEvent('mousedown' , function() 
	{
		this.setStyle('margin-top' , '1px');
	});
	
	Next.addEvent('mouseup' , function() 
	{
		this.setStyle('margin-top' , '0px');
	});
	
	Prev.addEvent('mousedown' , function() 
	{
		this.setStyle('margin-top' , '1px');
	});
	
	Prev.addEvent('mouseup' , function() 
	{
		this.setStyle('margin-top' , '0px');
	});
	
	Next.addEvent('mouseenter' , function () 
	{
		this.addClass('right-over');
	});
	
	Prev.addEvent('mouseenter' , function ()
	{
		this.addClass('left-over');
	});
	
	Next.addEvent('mouseleave' , function ()
	{
		if(this.hasClass('right-over'))
		{
			this.removeClass('right-over');
		}
		else
		{
			return;
		}
	});
	
	Prev.addEvent('mouseleave' , function ()
	{
		if(this.hasClass('left-over'))
		{
			this.removeClass('left-over');
		}
		else
		{
			return;
		}
	});
	
	Next.addEvent('click' , function () 
	{
		var stepArray	=	step('forward'),
			displayed	=	stepArray[0],
			incoming	=	stepArray[1],
			checkAbout	=	('about-' + stepArray[1].id), 
			checkWork	=	('work-' + stepArray[1].id),
			checkOther	=	('other-' + stepArray[1].id);
		
		fadeOut(displayed);
		fadeIn(incoming);
		
		scrollTo($(incoming));
		
		//these statements check to see what main menu <li> the corresponding submenu item is a child of
		
		if(About.getElement('#'+checkAbout))
		{
			if(About.state !='on')
			{
				if(Work.state == 'on'){handleMenu(Work , 'turnOff')}
				if(Other.state == 'on'){handleMenu(Other , 'turnOff')}
				handleMenu(About,'turnOn');
			}
			
			SubMenu.removeClass('sub-click');
			$(checkAbout).addClass('sub-click');
			
		}
		if(Work.getElement('#'+checkWork))
		{
			if(Work.state !='on')
			{
				if(About.state == 'on'){handleMenu(About , 'turnOff')}
				if(Other.state == 'on'){handleMenu(Other , 'turnOff')}
				handleMenu(Work,'turnOn');
			}
			SubMenu.removeClass('sub-click');
			$(checkWork).addClass('sub-click');
		}
		if(Other.getElement('#'+checkOther))
		{
			if(Other.state !='on')
			{
				if(About.state == 'on'){handleMenu(About , 'turnOff')}
				if(Work.state == 'on'){handleMenu(Work , 'turnOff')}
				handleMenu(Other,'turnOn');
			}
			SubMenu.removeClass('sub-click');
			$(checkOther).addClass('sub-click');
		}
	});
	
	Prev.addEvent('click' , function () 
	{
		var stepArray	=	step('reverse'),
			displayed	=	stepArray[0],
			incoming	=	stepArray[1],
			checkAbout	=	('about-' + stepArray[1].id), 
			checkWork	=	('work-' + stepArray[1].id),
			checkOther	=	('other-' + stepArray[1].id);
			
		
		fadeOut(displayed);
		fadeIn(incoming);

		scrollTo($(incoming));
		
		//these statements check to see what main menu <li> the corresponding submenu item is a child of	
		
		if(About.getElement('#'+checkAbout))
		{
			if(About.state !='on')
			{
				if(Work.state == 'on'){handleMenu(Work , 'turnOff')}
				if(Other.state == 'on'){handleMenu(Other , 'turnOff')}
				handleMenu(About,'turnOn');
			}
			
			SubMenu.removeClass('sub-click');
			$(checkAbout).addClass('sub-click');
			
		}
		if(Work.getElement('#'+checkWork))
		{
			if(Work.state !='on')
			{
				if(About.state == 'on'){handleMenu(About , 'turnOff')}
				if(Other.state == 'on'){handleMenu(Other , 'turnOff')}
				handleMenu(Work,'turnOn');
			}
			SubMenu.removeClass('sub-click');
			$(checkWork).addClass('sub-click');
		}
		if(Other.getElement('#'+checkOther))
		{
			if(Other.state !='on')
			{
				if(About.state == 'on'){handleMenu(About , 'turnOff')}
				if(Work.state == 'on'){handleMenu(Work , 'turnOff')}
				handleMenu(Other,'turnOn');
			}
			SubMenu.removeClass('sub-click');
			$(checkOther).addClass('sub-click');
		}	
	});

	
	//---------------------------------------------------------------------------------------------------
	
	//FUNCTIONS
	
	function handleMenu(element , state)
	{
		//Get the title and submenu elements
		
		var title			=	element.getElement('.title'),
			subMenu			=	element.getElement('.sub-menu'),
			morphOptions	=	{link:link,duration:speed,transition:transit};
		
		//Tween vars
		
		element.set('morph' , morphOptions);
		title.set('morph' , morphOptions);
		subMenu.set('morph' , morphOptions);
		
		//Turn it on or off
		
		if(state == 'turnOn')
		{
			element.state = 'on';
			title.morph({'color':[emerald, white]});
			subMenu.morph({'color':[emerald, white]});
			element.morph({'border-bottom-color':[deep, jade]});
			
		}
		else
		{
			element.state = 'off';
			title.morph({'color':[white, emerald]});
			subMenu.morph({'color':[white, emerald]});
			element.morph({'border-bottom-color':[jade, deep]});
		}
	}

	function handleSubMenu(element)
	{
		//Fade in the correct div
		
		var elementID	=	element.id,
			textArray	=	elementID.split("-"),
			textID		=	textArray[1];
		
		if(element.hasClass('sub-click') != true)
		{
			element.addClass('sub-click');
			fadeIn($(textID));
		}
		
		//Scroll the window to the correct position
		
		scrollTo($(textID));
		
		//Show the controls
		
		$$('.control').setStyle('opacity' , '1');
		
		//Turn off the irrelevant main menu <li>'s 
		
		if(element.getParent('li').id == 'work')
		{
			if(About.state == 'on') {handleMenu(About , 'turnOff')};
			if(Other.state == 'on') {handleMenu(Other , 'turnOff')};
		}
		
		if(element.getParent('li').id == 'about')
		{
			if(Work.state == 'on') {handleMenu(Work , 'turnOff')};
			if(Other.state == 'on') {handleMenu(Other , 'turnOff')};
		}
		
		if(element.getParent('li').id == 'other')
		{
			if(About.state == 'on') {handleMenu(About , 'turnOff')};
			if(Work.state == 'on') {handleMenu(Work , 'turnOff')};
		}
	}
	
	function fadeIn(element)
		{
			//browser detection
	
			if(Browser.Engine.trident == true)
			{
				element.setStyles(
				{
					'display':'block',
					'opacity':1,
					'z-index':1000
				});
			}
			else
			{
				element.setStyle('opacity' , '0');
				var fadeInFx = new Fx.Tween(element, {link:link,duration:speed,transition:transit});
				fadeInFx.start('opacity' , '0' , '1');
				element.setStyle('z-index','1000');
			}
			element.status = 'on';
		}
		
	//fades out an element
	
	function fadeOut(element)
	{
			//browser detection
	
			if(Browser.Engine.trident == true)
			{
				element.setStyles(
				{
					'display':'none',
					'opacity':0,
					'z-index':-1000
				});
			}
			else
			{
				var fadeFx = new Fx.Tween(element, 
					{
						link:link,
						duration:speed,
						transition:transit
					});			
				fadeFx.start('opacity' , '1' , '0');
				element.setStyle('z-index','-1');
			}
			element.status = 'off';
	}
	
	//Fades out all the text-items
	
	function fadeTextItems()
	{
		Texts.each(function(item,index) 
		{
			if(item.status == 'on')
			{
				fadeOut(item);
			}
		});
	}
	
	//Checks the status of the text-items. If they are opacity:1 they are 'on' (true) if not, they are 'off' (false)
	
	function statusCheck(array) {
		for(i = 0 ; i<array.length ; i++)
		{
			if(array[i].status == 'on')
			{
				return true;
			}
			else
			{
				return false;
			}
				
		}
	}
	
	function scrollTo(element)
	{
		new SmoothScroll({duration: 750, transition: Fx.Transitions.Expo.easeInOut,offset:{x:xOffset,y:yOffset}}).toElement(element);	
	}
	
	//Handles the controls for shuffling through the text-items. Returns arrays of divs to apply Fx to based on the argument.
	
	function step(string) {
		for(i=0 ; i<Texts.length ; i++)
		{
			if(string == 'forward')
			{
				if(Texts[i].status == 'on')
				{
					var current = Texts[i];
					
					if(i+1 == Texts.length)
					{
						var next = Texts[0];
					}
					else
					{
						var next = Texts[i+1];
					}
					
					var forwardArray = new Array();
					forwardArray.push($(current),$(next));
					return forwardArray;
				}
			}
			if(string == 'reverse')
			{
				if(Texts[i].status == 'on')
				{
					var current = Texts[i];
					
					if(i-1 == -1)
					{
						var prev = Texts[8];
					}
					else
					{
						var prev = Texts[i-1];
					}
					
					var reverseArray = new Array();
					reverseArray.push($(current),$(prev));
					return reverseArray;
				}
			}
		}
		
	}
			
				
	//---------------------------------------------------------------------------------------------------
});