// JavaScript Document


		function trim(str) // this function trims white space (I didn't write it)
		{  
			while(str.charAt(0) == (" ") )
			{  
				str = str.substring(1);
			}
			while(str.charAt(str.length-1) == " " )
			{  
				str = str.substring(0,str.length-1);
			}
			return str;
		}

		
	function menu_creation()
	{
	
	
	
	
	
	var base_url = "http://www.uas.edu.uy" ;
	var indexpage = "index.php" ;
		
	
	// It's important to note that the menu is being (re)constructed
	// by creating an array of each ul that represents a school wide section
	// this is denoted by the className = 'school'
	// the function is designed to loop through and analyse each section one at a time
	
	// when building or adding to the menu, make sure that menu elements are all lower case and that 
	// the structure of the menu reflects its folder structure on the site
	// eg elementary -> american_program -> grade_1 is an actual location http://www.uas.edu.uy/elementary/american_program/grade_1/index.php
	// don't forget, a link points to the index file in the respective folder
	
	
	// this gives me an array of ALL the ul tags in the document
	// this can be changed to target all within a particular 'id' tag
	var all_uls = document.getElementsByTagName('ul') ;
	
	// sets the appropriate uls to style.display = "none"
	// Why is this needed? BECAUSE if the element(ul) does no have an inline style tag	
	// then the subsequent code won't alter the style.display or whatever
	//so this implicitely sets the style.display and I DON'T HAVE TO write a style tag inline in each element
	for(none=0; none<all_uls.length ; none++)
	{
		if (all_uls[none].className == "departments" ||all_uls[none].className == "departments")
		{
			all_uls[none].style.display = "none" ;
		}
	}
	
	// this is the array that will contain ul.className = 'school'
	var school_level = new Array();
	
		// this is set so that school_level array increments from 0
		var x = 0;
		for (i=0 ; i<all_uls.length ; i++)
		{
			// targets all uls with a classname of . . . .
			if (all_uls[i].className == "school")
			{
				// passes an index target to the new array 
				// ie document.getElementsByTagName('ul')[2]
				// when can then read from that point
				school_level[x] = all_uls[i];
				x++ ; // increments on when if statement returns true
			}
			
		}
	
		
		for (t=0 ; t<school_level.length ; t++)
		{
			// this grabs the original innerHTML so that we can use it to create the link
			// this is A SECTION, such as elementary or High School
			var section_text = trim(school_level[t].getElementsByTagName('li')[0].innerHTML)
						
			// reference to the second li in a ul
			var second_li = school_level[t].getElementsByTagName('li')[1] ; // REMEMBER THIS ONLY TARGETS THE SECOND LI, SOMETIMES THERE ARE MORE
			
			// SCHOOL LEVEL
			// checks to see IF there are 2 more elements in the list and if the second has a child(ul)
			if( (second_li != null) && (second_li.getElementsByTagName('ul') != null) )
			{
			
				//variable which references where we are right now
				var second_li_ul = second_li.getElementsByTagName('ul')
				
								
				// write the <a href onclick /> to activate this part of menu --| THIS IS WORKING |--
				// this is a menu link and not an actual link
				school_level[t].getElementsByTagName('li')[0].innerHTML = "<a href='#' onclick='global_menu_functionality(this)'>" + section_text + "</a>"
				
				
					//////////----------------------------------------------------------------------------------------------
					
						// creates an array of 'all' nested uls inside the ul.className = 'school'
						var local_uls = school_level[t].getElementsByTagName('ul')
						var dept_level = new Array();
							
						// this is set so that school_level array increments from 0
						var x = 0;
						for (i=0 ; i<local_uls.length ; i++)
						{
							// filters all uls with a classname of . . . .
							if (local_uls[i].className == "departments")
							{
							// passes an index target to the new array 
							// ie document.getElementsByTagName('ul')[2]
							// when can then read from that point
							dept_level[x] = local_uls[i];
							x++ ; // increments on when if statement returns true
							}
						}
						
						// DEPARTMENT LEVEL 
						
						for (d=0 ; d<dept_level.length ; d++)
						{
							// this targets the second li in the array as it will contain the sublist if there is one
							var dept_li = dept_level[d].getElementsByTagName('li')[1] ; 
							
							// text content of the first li
							var dept_text = trim(dept_level[d].getElementsByTagName('li')[0].innerHTML)
							
							// DEPARTMENT LEVEL
							// checks to see IF there are 2 more elements in the list and if the second has a child(ul)
							if((dept_li != null) && (dept_li.getElementsByTagName('ul')[0] != null))
							{
							// write the <a href onclick /> to activate this part of menu --| THIS IS WORKING |--
							// this is a menu link and not an actual link
							dept_level[d].getElementsByTagName('li')[0].innerHTML = "<a href='#' onclick='global_menu_functionality(this)' > " + dept_text + "</a>"
							
							
							/////////////////////////////////////////////////////////////////////////////////
							// this should be the final level SUB_DEPT
							
							//an array of all the lis in the child ul
							var sub_dept_ul = dept_level[d].getElementsByTagName('ul')[0]
							var sub_dept_ul_li = sub_dept_ul.getElementsByTagName('li')
							
								for (s=0 ; s<sub_dept_ul_li.length; s++)
								{
								var sub_dept_text = trim(sub_dept_ul_li[s].innerHTML)
								var sub_linked = base_url + "/" + section_text + "/" + dept_text+ "/" + sub_dept_text + "/" + indexpage
								sub_dept_ul_li[s].innerHTML = "<a href='" + sub_linked + "'>" + sub_dept_text + "</a>"
								}
							
								
							/////////////////////////////////////////////////////////////////////////////////
							}
							
							
								// NEED TO MAKE AN ARRAY OF ALL lis that fit this 
								// if a DEPARTMENT LEVEL has no children make it a link
								// make an array of all the li elements in that section
								else if(dept_li.getElementsByTagName('ul')[0] == null)
								{
									//var dept_linked_up = new array() ;
									var dept_linked_li = dept_level[d].getElementsByTagName('li');
									
									
										// fill the array
										for (l=0 ; l<dept_linked_li.length ; l++)
										{
											var dept_text = trim(dept_level[d].getElementsByTagName('li')[l].innerHTML)
											var dept_linked = base_url + "/" + section_text + "/" + dept_text+ "/" +indexpage
											dept_level[d].getElementsByTagName('li')[l].innerHTML =  "<a href='" + dept_linked + "'>" + dept_text + "</a>"
																				
										}
									
								}
						}
						
					

				
				// TESTING ONLY prints the number of uls nested inside a department level menu
				//school_level[t].getElementsByTagName('li')[0].innerHTML += dept_level.length 

			
				
			}
			
			// if the SCHOOL LEVEL section only contains one li and NO nested ul 
			// it's obviously a link and not a menu element
			else 
			{

				// this builds the link for this routine
				var section_linked = base_url + "/" + section_text + "/" + indexpage
				school_level[t].getElementsByTagName('li')[0].innerHTML = "<a href='" + section_linked + "'>" + section_text + "</a>"			
			}
			
			// testing only
			// document.getElementById('text').innerHTML += "<br />" + school_level[t].getElementsByTagName('li')[0].innerHTML ;
		}
		// for testing only
		//document.getElementById('text').innerHTML += "<br />" + school_level.length ;
					
				
				
				// can I now remove the underscore character from all the links which
				// by now should be sitting in a tags
				
				// get the array of a elements
				var a_list = document.getElementById('global_menu').getElementsByTagName('a')
				
				// regular expression searching for underscores
				var u_score = /_/g;
				
				// loop through a list looking for underscores
				for (a=0 ; a<a_list.length ; a++)
				{
					a_list[a].innerHTML = a_list[a].innerHTML.replace( u_score, " ")
				}	
	
	
	}
	
	// end of unobtrusive javascript re-editing the menu list
	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

		// basic menu functionality
		function global_menu_functionality(clicked)
		{
	
			// can be used to iterate through the <ul> tags
			var ulists = document.getElementById("global_menu").getElementsByTagName("ul")
		
			// targets the parent of the element clicked and then re-targets the elements <ul> sibling,
			// Don't forget that path to target is not from an li element, but from an anchor dynamically
			// written inside the li, thus parentNode.parentNode
			
			var target = clicked.parentNode.parentNode.getElementsByTagName("ul")
			

					///////////////////////////////////
					if (target[0].className == "departments" )
					{
					
							// if it's, open close it
							if(target[0].style.display != "none")
								{
									for(n=0 ; n<target.length ; n++)
									{
									target[n].style.display = "none"
									}
								}
						
						
						else if(target[0].style.display == "none")
							{
								// this line closes all open menus on all levels
								for(i=0 ; i<ulists.length ; i++)
								{
									if (ulists[i].className != "school")
									{
										ulists[i].style.display = "none"
									}
								}
								// this line opens the one I clicked
																	
									for (t=0 ; t<target.length ; t++)
									{
										if (target[t].className == "departments" )
										{
										target[t].style.display = "block"
										}
									}
							}
							
					}
					////////////////////////////////
			
			if (target[0].className == "sub_depts" )
			{
			
			target = target[0] ;
			
			// this references all the <ul> tags in this 'local' section			
			var sub = clicked.parentNode.parentNode.parentNode.parentNode.getElementsByTagName("ul")
			
				//document.write(sub.length)		
				// if it's open
				if(target.style.display != "none")
					{
					// close it
					target.style.display = "none"
					}
				// else if it closed	
				else if(target.style.display == "none")
					{
					// close all and open the one I want
					
					// this line close all open menus in this 'local' section	
					for(i=0 ; i<sub.length ; i++)
					{
						if (sub[i].className == "sub_depts")
						{
							sub[i].style.display = "none"
						}
					}
					
					// this opens the one I clicked
					
					target.style.display = "block"
					}
					
				//document.getElementById("testblob").innerHTML = target.getElementsByTagName("li")[0].innerHTML	
			}
		
				

			
		}