/*
* Javascript for dropdown menus
*
* This website and its contents are solely owned by Loup Public Power District.
* Copyright 1933 - 2009. All rights reserved.
*
* Originally developed by Michael on Liegeber.com, posted here:
* http://www.leigeber.com/2008/11/drop-down-menu/ .
*
* Variable names clarified, comments added, and code formatted
* by Eric Grubaugh (eric.grubaugh@gmail.com).
* Date: 6/3/2009
*/

// Menu class
var menu=function(){

	// Fade transition time (ms)
	var fadeTime = 4;
	
	// Slide transition effect
	var slideTime = 5;
	
	// z-index of dropdown menus
	var z_index = 100;
	
	// Classname used on mouseover
	var hover_class;
	
	// This function creates a new menu
	function constructMenu(id){
	
		// DocumentID for menu
		this.menu_id = id;
		
		// Arrays to hold parent and corresponding child menus
		this.menu_parents = [];
		this.menu_children = [];
	}
	
	// This function initializes data members of the menu and assigns
	// event handler function to HTML elements
	constructMenu.prototype.init = function(id,classname){
	
		// Assign hover classname
		hover_class = classname;
		
		// Retrieve current menu
		var menu = document.getElementById(id);
		
		// Get array of child ul elements
		var submenus = menu.getElementsByTagName('ul');
		
		// Get number of children
		var len = submenus.length;
		
		var i=0;
		for(i; i<len; i++){
		
			// Assign current parent
			var parent = submenus[i].parentNode;
			
			// Add current parent to parents array
			this.menu_parents[i] = parent;
			
			// Add current child to children array
			this.menu_children[i] = submenus[i];
			
			// Assign event handlers to current parent
			parent.onmouseover = new Function(this.menu_id + '.menuevent(' + i + ',true)');
			parent.onmouseout = new Function(this.menu_id + '.menuevent(' + i + ')');
		}
	}
	
	// This function handles the mouseover and mouseout events
	constructMenu.prototype.menuevent = function(index, mouseover){
	
		// Assign current child menu
		var child = this.menu_children[index];
		
		// Assign parent of current child
		var parent = this.menu_parents[index];
		
		// Assign first link of parent menu
		var parent_link = parent.getElementsByTagName('a')[0];
		
		// Remove interval on child
		clearInterval(child.fadeTime);
		
		child.style.overflow = 'hidden';
		
		// Mouseover
		if(mouseover){
		
			// Add hover classname to current classname
			parent_link.className += ' ' + hover_class;
			
			// Set position of current child if not already set
			if(!child.mh){
				child.style.display = 'block';
				child.style.height = '';
				child.mh = child.offsetHeight;
				child.style.height = 0;
			}
			
			// Child position already set, display child
			if(child.mh == child.offsetHeight){
				child.style.overflow = 'visible';
				
			}else{
				// Set z-index of child
				child.style.zIndex = z_index;
				
				// Raise z-index by 1
				z_index++;
				
				child.fadeTime = setInterval(function(){
					fade(child,true);
				}, fadeTime);
			}
		
		// Mouseout
		}else{
		
			// Remove hover classname from current classname
			parent_link.className = parent_link.className.replace(hover_class,'');
			
			child.fadeTime = setInterval(function(){
				fade(child,false)
			}, fadeTime)
		}
	}
	
	function fade(currentChild, mouseover){
	
		// Get current offset height
		var ht = currentChild.offsetHeight;
		
		// Determine whether fade in (1) or fade out (-1)
		var fadeDirection = mouseover ? 1 : -1;
		
		// Check whether mouseover or mouseout and verify offset height
		if((ht <= 0 && !mouseover) || (ht >= currentChild.mh && mouseover)){
		
			// Display child on mouseover
			if(mouseover){
				currentChild.style.filter = '';
				currentChild.style.opacity = 1;
				currentChild.style.overflow = 'visible';
			}
			
			// Remove interval on child
			clearInterval(currentChild.fadeTime);
			
			return;
		}
		
		// Determine amount of child to display (slide effect)
		var distance = mouseover ? Math.ceil((currentChild.mh - ht) / slideTime) : Math.ceil(ht / slideTime);
		
		// Set current opacity
		var opacity = ht / currentChild.mh;
		
		// Fade effect for submenu
		currentChild.style.opacity = opacity;
		currentChild.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
		currentChild.style.height = ht + (distance * fadeDirection) + 'px';
	}
	
	return{constructMenu:constructMenu}
}();