/**
 * @author huw.edwards
 * Javascript functions to display and manipulate main menu
 */

			
function moveIt( element , amount )		
{
	var obj = document.getElementById( element );
	obj.style.position = "absolute";
	obj.style.top = amount + "px";
	var elem = document.getElementById("project_sub_menu");
	elem.style.visibility = "visible"; 
}

// 'current' is current position and 'end' is where we wnat to end up 
function slideItIn(elementID, current, end) 						
{				
	var next = current - 5;
	var obj = document.getElementById( elementID );
	obj.style.position = "absolute";
	obj.style.top = next + "px";
	//First hide the projects submenu 
	document.getElementById("project_sub_menu").style.visibility = "hidden"; 									
	if( next > end )
	{
		setTimeout(function()
		{
			slideItIn(elementID, next, end );
		}, 5);
	}
	else					
	{
		//If the animation has finished...
		/// show the 'arabic' menu
		document.getElementById("arabic_menu").style.visibility = "visible";
		// and show the ISO and RIBA logos
		document.getElementById("iso_riba").style.visibility = "visible"; // or "hidden"									
	}
}



// Slide the other menu items down and show the projects sub menu 
// current is current menu position and end is where we want to end up 	
function slideItOut(elementID, current, end) 					
{
	var next = current + 5;
	var obj = document.getElementById( elementID );
	obj.style.position = "absolute";
	obj.style.top = next + "px";
	//First hide the ISO and RIBA logos 
	document.getElementById("iso_riba").style.visibility = "hidden"; 									
	// and the arabic menu
	document.getElementById("arabic_menu").style.visibility = "hidden";

	if( next < end )
	{
		setTimeout(function()
		{
			slideItOut(elementID, next, end );
		}, 5);
	}
	else				
	{
		//If the animation has finished, show projects submenu
		obj = document.getElementById("project_sub_menu");
		obj.style.visibility = "visible"; // or "hidden"									
	}
}




function positionElement( elementID, x, y)			
{
	var obj = document.getElementById( elementID );
	obj.style.position = "absolute";
//	obj.style.position = "relative";
	obj.style.left = x + "px";
	obj.style.top = y + "px";
}

function revealProjectsSubMenu()			
{
	slideItOut("non_project_menu",25, 240);
}

function hideProjectsSubMenu()			
{
	slideItIn("non_project_menu",240, 25);
}

function toggleProjectsSubMenu()			
{
	//Check if the sub menu is visible or not
	if(document.getElementById( "project_sub_menu" ).style.visibility == "hidden")				
	{
		// It's not displaying, so slide down the other menu items and show the sub menu
		revealProjectsSubMenu();
	}
	else	
	{
		// It is displaying, so hide it and slide up the other menu items
		hideProjectsSubMenu();
	}
}

/* Here's the code which generates the HTML for the menu and calls the JavaScript functions above */

function showJavaScriptMenu()
{
	//Output the menu as HTML

	//'PROJECT' menu item
	document.writeln('<div id="project_menu" style="position:absolute; z-index:10;">');
	document.writeln('<ul class="menuList"><li><a href="projects.html" title = "projects" onclick="toggleProjectsSubMenu();return false">PROJECTS</a></li></ul>');
	document.writeln('</div>');
	
	// Other items in main menu	
	document.writeln('<div id="non_project_menu" style="position:absolute; z-index:10;"><ul class="menuList">');
	document.writeln('<li><a href="background.html" title="approach">APPROACH</a></li>');
	// document.writeln('<li><a href="studio.html" title="studio">STUDIO</a></li>');
	document.writeln('<li><a href="people.html" title="people">PEOPLE</a></li>');
	document.writeln('<li><a href="news.php" title="news">NEWS</a></li>');
	document.writeln('<li><a href="recruitment.html" title="careers">CAREERS</a></li>');
	document.writeln('<li><a href="contact.html" title="contact">CONTACT</a></li>');
	document.writeln('</ul></div>');
	
	//Projects submenu		
	document.writeln('<div id="project_sub_menu" style="position:absolute; z-index:10;"><ul class="subMenuList">');
	document.writeln('<li><a href="residential.html" title="residential">residential</a></li>');
	document.writeln('<li><a href="small.html" title="small projects">small projects</a></li>');
	document.writeln('<li><a href="interiors_projects.html" title="interiors">interiors</a></li>');
	document.writeln('<li><a href="civic.html" title="civic">civic</a></li>');
	document.writeln('<li><a href="arts_buildings.html" title="arts & leisure">arts & leisure</a></li>');
	document.writeln('<li><a href="conservation.html" title="conservation">conservation</a></li>');
	document.writeln('<li><a href="education.html" title="education">education</a></li>');
	document.writeln('<li><a href="hotels.html" title="hotels">hotels</a></li>');
	document.writeln('<li><a href="international.html" title="international">international</a></li>');
	document.writeln('<li><a href="masterplanning.html" title="masterplanning">masterplanning</a></li>');
	document.writeln('<li><a href="retail.html" title="retail & commerical">retail & commerical</a></li>');
	document.writeln('</ul></div>');
	
	// Arabic menu
	document.writeln('<div id="arabic_menu" style="position:absolute; z-index:10;"><ul class="menuList">');
	document.writeln('<li><a href="arabic.html" title="arabic version">ARABIC VERSION</a></li></ul></div>');

	
	//Thatched background
	document.writeln('<div id="background"  style="position:absolute; z-index:1; ">');
	document.writeln('<img src="images/thatchlines_faint.png" alt="Background" /></div>');

	//Logo
	document.writeln('<div id = "logo" style="position:absolute; z-index:2;" >');
	document.writeln('<a href="index.html"><img src="images/company_logo.png" border="0" alt="CDMS Partners logo" /></a></div>');
	
	//ISO and RIBA logos
	document.writeln('<div id="iso_riba"  style="position:absolute; z-index:3; ">');
	document.writeln('<img src="images/riba_logo_small.jpg" id = "logo" alt="RIBA logo" />');
	document.writeln('<img src="images/iso9001_logo_smaller.jpg" id = "logo" alt="ISO 9001 logo" /></div>');
		
	positionMenuItems();

}

function positionMenuItems()
{ 	// Hide the projects sub menu
	document.getElementById("project_sub_menu").style.visibility = "hidden"; // or "visible"
	// Now position the elements
	///I'm using negative numbers for positioning for now since I can't yet work out where to adjust this in the style sheet
	positionElement('project_menu', -45, 0);
	positionElement('project_sub_menu', -30, 21); 
	positionElement('non_project_menu', -45, 25); // These values have been tweaked in conjunction with 'lineHeight setting in the style sheet
	positionElement('arabic_menu', -45, 250);
	
	positionElement('background', 0, 0);
	positionElement('logo', -5, 430);
	positionElement('iso_riba', 10, 360);

}