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

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

//FIXES Moomore 1.2.3 and Moocore 1.2 conflict. We are using Mootools 1.2 because slideshow.js uses it.

//document.id	=	$;

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

//HASHIN!		

document.addEvent('domready' , function ()
{
	var pageURL	=	window.location.toString();
	
	if (pageURL.contains("about") == true)
	{
		var page = 'about';
	}
	
	if (pageURL.contains("web") == true)
	{
		var page = 'web';
	}
	
	if (pageURL.contains("identity") == true)
	{
		var page = 'identity';
	}
	
	if (pageURL.contains("interactive") == true)
	{
		var page = 'interactive';
	}

	if (pageURL.contains("contact") == true)
	{
		var page = 'contact';
	}

	if (pageURL.contains("jobs") == true)
	{
		var page = 'jobs';
	}

	//VARIABLES

	//Global Selectors
	
	var About		=	$('about'),
		Work		=	$('work'),
		Other		=	$('other'),
		Anchors		=	$$('.remove'),
		HashAnchors	=	$$('.anchor'),
		Titles		=	$$('.title'),
		SubMenu		=	$$('.submenu-item'),
		SiteURL		=	"http://www.creativelifeform.com/";
		
	//Global Variables
		
	var speed	=	'normal',
		link	=	'cancel',
		transit	=	Fx.Transitions.Sine.easeOut,
		expo	=	Fx.Transitions.Expo.easeInOut,
		emerald	=	'#333333',
		deep	=	'#0d1f15',
		jade	=	'#429D68',
		white	=	'#FFFFFF',
		yOffset	=	-40,
		xOffset	=	0,
		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')
		});
	}
	
	//the statement below handles all the functionality for the about page, smooth scrolling etc.,

	if (page == 'about')
	{
		HashAnchors.each(function(item , index)
		{
			var initHref	=	item.getProperty('href'),
				newHref		=	initHref + "_";
			
			if(initHref.contains("_"))
			{
				return;
			}
			else
			{	
				item.setProperty('href',newHref);
			}
		});
	
		//create smooth scroll property for the HashAnchors
		
		new Fx.SmoothScroll({
			duration:750,
			wheelStops:false,
			transition:expo

		},window);


		function imoojLoader()
		{
			if(Browser.Engine.trident == true)
			{
				Scroll();
				return;
			}
			else
			{

				var body	=	document.getElement('body'),
				all_images	=	document.getElements('img'),
				src_images	=	new Array(),
				page_fader	=	new Fx.Tween(body, {link:'ignore',duration:'normal',transition:Fx.Transitions.Linear,onComplete:Scroll});

				body.setStyle('opacity','0');

				all_images.each(function(item)
				{
					src_images.push(item.get('src'));
				})

				new Asset.images(src_images,
				{
					onComplete:function()
					{
						page_fader.start('opacity' , '0' , '1');
					}
				})


			}

			function Scroll()
			{
				var el = window.location.hash.substring(1); // the hash anchor
				if(el.contains("_"))
				{
					//do nothing
				}
				else
				{
					el = window.location.hash.substring(1) + "_";
				}

				if(el)
				{
					var destination = window.location.hash.substring(1);
					if(destination == 'aboutus'){handleSubMenu($('about-intro'))}
					if(destination == 'team'){handleSubMenu($('about-people'));}
					if(destination == 'services'){handleSubMenu($('about-services'));}

					window.scrollTo(0,0);
					var scroll = new Fx.Scroll(window, { link: 'cancel', duration: 750, transition:expo });

					var land	=	function(){scroll.toElement(el);}
					land.delay(500);
				}
			}
		}		

		imoojLoader();
	}

		
	//we remove the href property for javascript users because we don't want the colours to be off.	
	
	Anchors.each(function (item , index) 
	{
		var href = item.getProperty("href");
		
		if(page == 'about')
		{
			if(href != "about.html") //we want the hrefs to remain on the about sub-menu because we use them for smooth scrolling
			{
				item.addEvent('click' , function () 
				{
					window.location = href;
				});
				item.removeAttribute("href");
			}
		}
		
		if(page == 'web' | page == 'identity' | page == 'interactive')
		{
			item.addEvent('click' , function () 
			{
				window.location = href;
			});
			item.removeAttribute("href");
		}

		if(page=='contact' | page=='jobs')
		{
			item.addEvent('click' , function ()
			{
				window.location = href;
			});
			item.removeAttribute("href");
		}
	});
		
	//turn on the menu on domready	
	
	if(page == 'about')
	{
		handleMenu(About , 'turnOn');
	}

	if(page == 'contact')
	{
		handleMenu(Other , 'turnOn');
		handleSubMenu($('other-contact'));
	}

	if(page == 'jobs')
	{
		handleMenu(Other , 'turnOn');
		handleSubMenu($('other-jobs'));
	}
	
	if(page == 'web')
	{
		handleMenu(Work , 'turnOn');
		handleSubMenu($('work-web'));
	}
	
	if(page == 'identity')
	{
		handleMenu(Work , 'turnOn');
		handleSubMenu($('work-identity'));
	}
	
	if(page == 'interactive')
	{
		handleMenu(Work , 'turnOn');
		handleSubMenu($('work-interactive'));
	}
	
				
	//---------------------------------------------------------------------------------------------------

	//EVENT HANDLERS
	
	//Main Menu
	
	//mouseenter
	
	About.addEvent('mouseenter' , function ()
	{
		if(this.state == 'on')
		{
			return;
		}
		else
		{
			handleMenu(this,'turnOn');
		}
	});
	
	Work.addEvent('mouseenter' , function ()
	{
		if(this.state == 'on')
		{
			return;
		}
		else
		{
			handleMenu(this,'turnOn');
		}	
	});
	
	Other.addEvent('mouseenter' , function ()
	{
		if(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)
	{
		item.addEvent('click',function()
		{
			var titleText = this.get('text');

			if (titleText.contains('about'))
			{
				window.location = SiteURL + 'about.html#top_'
			}
			else if (titleText.contains('work'))
			{
				window.location = SiteURL + 'work/web.html'
			}
			else
			{
				window.location = SiteURL + 'contact.html'
			}
		})
	});
	
	//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'))
			{
				return
			}
			else
			{
				SubMenu.removeClass('sub-click');
				handleSubMenu(this);
			}
		});
			
	});

	
	//---------------------------------------------------------------------------------------------------
	
	//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)
	{				
		element.addClass('sub-click');
	}
		
				
});