// Script: Welcome.js

var WelcomeView = {
	
	init: function()
	{
		
		// initialise the ShinyItems function
		WelcomeView.initShinyItems();
		
	},
	
	initShinyItems: function()
	{
		
		// define an array of all the items with the '.shinyItem' class
		var els = $$( '.shinyItem' );

		// define a variable for the background colour and fade colour that we get from our set theme
		var initialBgColor = '#FFFFFF';
		
		// for each '.shinyItem'
		els.each(
			function( itm )
			{
				
				itm.style.display = 'block';
				
				// define a variable for the '.shinyItem_background' class
				var bgEl = itm.getElement( '.shinyItem_background' );
				
				if ( bgEl )
				{
					
					// set the background of this element to the colour we specfied above
					bgEl.setStyle( 'background', initialBgColor );
					
					// init the tween
					bgEl.set( 'tween', { duration: 200 } )
					
					// add events for both mouseover and mouseout
					itm.addEvent( 'mouseenter',
						function() { bgEl.tween( 'background-color', Theme.colour6 ); }
					);
					
					itm.addEvent( 'mouseleave',
						function() { bgEl.tween( 'background-color', initialBgColor ); }
					);
					
				}
				
				
				// link dropdown menus
				if ( itm.hasClass( 'shinyItem_menu' ) )
				{
					var menuKey = itm.id.substring( 5 );
					
					// for each menu element, define an array adding the 'menu_' text to the beginning of each
					var menuEl = $( 'menu_' + menuKey );
					
					// hide the specific menu element
					menuEl.hide();
					
					// add the event, that if it is clicked, perform the fuction to expand and reveal itself
					itm.addEvent( 'click', function() { WelcomeView.expandMenu( menuKey ) } );
					
				}
				
				
			}
		);
		
		// define all the links we have in an array which have the class '.shinyMenu .menuItem'
		var links = $$( '.shinyMenu .menuItem' );
		
		// for each link in the array
		links.each(
			function( lnk )
			{
			
				// set the bgEl variable to the '.menuItemBackground' style
				var bgEl = lnk.getElement( '.menuItemBackground' );
				
				// if there is a background element...
				if ( bgEl )
				{
					// set the background style, opacity and fade effect that we want
					bgEl.setOpacity( 0 );
					
					// add an event that if there is a mouseover, fade in the above background colour to the specified amount
					lnk.addEvent( 'mouseenter',
						function() {
							bgEl.setStyle( 'background', Theme.colour6 );
							bgEl.set('tween', { duration: 100 }).fade( 0.4 );
						}
					);
					
					// and if there is a mouseout, fade out the colour
					lnk.addEvent( 'mouseleave',
						function() { 
							bgEl.set('tween', { duration: 250 }).fade( 'out' );
						}
					);
					
				}
				
			}
		);
		
	},
	
	expandMenu: function( menuKey )
	{
		
		var showMenu = function()
		{
		
			// define the current menu that is selected, we get that information from the menuKey
			WelcomeView.currentMenu = menuKey;
			
			// define the normal link in an array, adding 'link_' to the beginning and the appropriate menuKey
			var linkEl = $( 'link_' + menuKey );
			
			// define the menu in an array and hide them all with styles
			var menuEl = $( 'menu_' + menuKey )
				.setStyles( {
					visibility: 'hidden',
					position: 'absolute'
					} )
				.show();
			
			// get the menuBody element from the menu selected
			var bodyEl = menuEl.getElement( '.menuBody' ).set( 'tween', { duration: 250, transition: Fx.Transitions.Quad.easeOut } );
						
			// set the menuBody style with a height of auto
			bodyEl.setStyle( 'height', 'auto' );
			// define a variable that is the vertical size of the element
			var toHeight = bodyEl.getSize().y;
			
			// set the height to 10 so it doesn't jump around when animating/changing over
			bodyEl.setStyle( 'height', 20 );
			
			// hide the original link to the menu
			linkEl.hide();
			
			// show the new menu with the item links
			menuEl.setStyles( {
					position: 'relative',
					visibility: 'visible'
				} );
			
			// start the animation effect to the specific height we got just before
			bodyEl.tween( 'height', toHeight );
		
		}
		
		
		// ? (unsure) is this when a menu is switched back to its original state, or when the first time the page is viewed?
		if ( WelcomeView.currentMenu )
		{
		
			var old_linkEl = $( 'link_' + WelcomeView.currentMenu );
			var old_menuEl = $( 'menu_' + WelcomeView.currentMenu );
			var old_bodyEl = old_menuEl.getElement( '.menuBody' );
			
			old_bodyEl.tween( 'height', 1 );
			
			var cleanup = function()
			{
				old_menuEl.hide();
				old_linkEl.show();
			}
			
			cleanup.delay( 350 );
			
		}
		
		showMenu();
				
	}
	
}

window.addEvent('domready', WelcomeView.init);