/* submenu.js 

This script will provide dropdown menus
Requires prototype.js

need to:
* foreach submenu
* get coordinates of parent menu item
* find height of parent element
* set coordinates of child menu to: left value of parent, and top + height of parent.

*/

function Menu(button,menu) {
	this.button = button;
	this.menu = menu;
	this.dropShadow = new Array();
}

Menu.prototype.initialize = function() {
	var thisMenu = this;
		thisMenu.button.onmouseover = function () {
			thisMenu.showMenu();
		}
		thisMenu.button.onmouseout = function () {
			thisMenu.rollOff();
		}
		if (this.menu != null) {
			thisMenu.menu.onmouseover = function () {
				thisMenu.cancelTimer();
			}
			thisMenu.menu.onmouseout = function () {
				thisMenu.rollOff();
			}
		}
	this.ul = this.menu.firstDescendant();
	this.dimensions = this.menu.getDimensions();
	this.removeBottomBorder();
	this.addShadow();
}

Menu.prototype.cancelTimer = function () {
	clearTimeout(this.timer);
}

Menu.prototype.rollOff = function () {
	var closeMenu = "menuObjects["+this.id+"].hideMenu()";
	this.timer = setTimeout(closeMenu,1000);
}

Menu.prototype.showMenu = function () {
	for (i=0;i<menuObjects.length;i++) {
		menuObjects[i].hideMenu();
		menuObjects[i].cancelTimer();
	}
	if (this.menu != null) {
	this.menu.style.display = "block";
	this.button.className += " hover";
	}
}

Menu.prototype.hideMenu = function () {
	if (this.menu != null) {
	this.menu.style.display = "none";
	this.button.className = "dropdown";
	}
}

Menu.prototype.addShadow = function () {
	this.menuContainerHeight = (this.dimensions.height+10)+'px';
	this.menuContainerWidth = (this.dimensions.width+10)+'px';
	this.menuHeight = (this.dimensions.height)+'px';
	this.menuWidth = (this.dimensions.width)+'px';
	this.menu.setStyle({height:this.menuContainerHeight,width:this.menuContainerWidth});
	this.ul.setStyle({position:'absolute',zIndex:'5'});
	for (i=0; i < 5; i++) {
		this.dropShadow[i] = new Element('div');
		var opacity = 0.25-(0.05*i);
		var zeeIndex = 4-i;
		var offsetY = i+'px';
		var offsetX = i+'px';
		this.dropShadow[i].setOpacity(opacity);
		this.dropShadow[i].setStyle({position:'absolute',backgroundColor:'#000000',height:this.menuHeight,width:this.menuWidth,top:offsetY,left:offsetX,zIndex:zeeIndex,MozBorderRadius:'2px',WebkitBorderRadius:'2px'});
		this.menu.insert({'bottom':this.dropShadow[i]});
	}
}

Menu.prototype.removeBottomBorder = function () {
	var liElements = this.ul.childElements();
	var lastLi = liElements[liElements.length-1];
	lastLi.setStyle({borderBottom:'none'});
}

// initialize menus //

var menuObjects = new Array();

Event.observe(window, 'load', function() {
	var menus = $$("a.dropdown");
	for (var y=0; y < menus.length; y++) {
		var submenuID = "dropdown-"+menus[y].id;
		var submenu = $(submenuID);
		menuObjects[y] = new Menu(menus[y],submenu);
		menuObjects[y].id = y;
		menuObjects[y].initialize();
		var position = menus[y].positionedOffset();
		menuObjects[y].left = position[0];
		menuObjects[y].top = position[1];
		menuObjects[y].height = menus[y].getHeight();
		//menuObjects[y].width = menus[y].getWidth();
		submenu.style.top = (menuObjects[y].top + menuObjects[y].height)+"px";
		submenu.style.left = menuObjects[y].left + "px";
		//submenu.style.width = menuObjects[y].width + "px";
	}
});