/*  DYNAMIC MENU v.2.1
 *  (c) 2008 John Wiley & Sons, Inc. - Nabila Yusaf
 *
 *  requirements: >=prototype v1.6
 *			Effects.js from scriptaculous
 *
 * CHANGES: fixed bug: expand submenu on arrow click as well as bar click
 *  
 *--------------------------------------------------------------------------*/
var WILEY = {};

WILEY.Menu = Class.create();
var activeMenuId = "";

WILEY.Menu.prototype = {
	initialize: function(menuItemId, options) {
		this.menuItemId = menuItemId;
		this.menuItem = $(this.menuItemId);
		this.menuItem.className = "menuButton";
		
		//generic options that can be overwritten through args list
		this.options = {
			hover: false,
			showArrow: false,
			matchWidth: false,
			snapToMenu: false,
			buttonLabel: 'button text',
			arrowButtonImage: 'images/menu_arrow.gif'
		};
		Object.extend(this.options,options || {});

		this._setMenuItemControls();	
		this._prepareSubMenu();
	},
	
	addItem: function(label, options){
		//generic options that can be overwritten through args list
		addOptions = {
			expand: false,
			toggleExpandImg: 'images/menu_expand.gif',
			toggleContractImg: 'images/menu_contract.gif'
		};
		Object.extend(addOptions,options || {});

		//Create expandable div for least commonly used items	
		if(addOptions.expand){
			//create toggle control if it doesn't exist
			if(!$(this.menuItemId+"_toggle")){
				this.toggle = document.createElement('li');
				this.toggle.className = "menuButtonItem_toggle";
				this.toggle.id = this.menuItemId+"_toggle";
				
				this.toggleImg = document.createElement('img');
				this.toggleImg.alt= "";
				this.toggleImg.className = "menu_toggleImg";
				this.toggleImg.src = addOptions.toggleExpandImg;
				
				this.toggle.appendChild(this.toggleImg);
				this.subMenuUL.appendChild(this.toggle);
			
				//create li that contains the expanding ul. 
				this.expandContainer = document.createElement('li');
				this.expandContainer.id = this.menuItemId+"_expandContainer";
				this.expandContainer.className = "menuButtonItem_expandContainer";
				this.expandContainer.style.display = "none";
				this.subMenuUL.appendChild(this.expandContainer);
			
				//create ul that expands
				this.expandUl = document.createElement('ul');
				this.expandUl.className = "menuButtonMenu_expand";
				this.expandContainer.appendChild(this.expandUl);
			}
			
			//expand UL's li items
			expandMenuItem = document.createElement('li');
			this.expandUl.appendChild(expandMenuItem);
			expandMenuItem.className = "menuButtonItem";
			
			if(addOptions.location)
				expandMenuItem.innerHTML = "<a href='"+addOptions.location+"'>"+label+"<\/a>";
			else if(addOptions.action)
				expandMenuItem.innerHTML = "<a href='#' onclick='"+addOptions.action+";return false;'>"+label+"<\/a>";	
			else
				alert("ERROR: Please provide location URL or javascript action for button id: "+this.menuItemId+", label: "+label);
			
		} else {
			subMenuItem = document.createElement('li');
			this.subMenuUL.appendChild(subMenuItem);
			subMenuItem.className = "menuButtonItem";
			
			if(addOptions.location)
				subMenuItem.innerHTML = "<a href='"+addOptions.location+"'>"+label+"<\/a>";
			else if(addOptions.action)
				subMenuItem.innerHTML = "<a href='#' onclick='"+addOptions.action+";return false;'>"+label+"<\/a>";	
			else
				alert("ERROR: Please provide location URL or javascript action for button id: "+this.menuItemId+", label: "+label);
		}	
	},
	
	addDivider: function(){
		divider = document.createElement('li');
		divider.className = "menuDivider";
		this.subMenuUL.appendChild(divider);
	},

	_prepareSubMenu: function(){
		this.subMenuUL = document.createElement('ul');
		this.subMenuUL.className = "menuButtonMenu";
		if(this.options.matchWidth)
			this.subMenuUL.style.width = this.menuItem.offsetWidth+"px";
		this.menuItem.appendChild(this.subMenuUL);
	},
	
	_toggleExpandedOptions: function(){
		new Effect.toggle(this.expandContainer.id, 'blind', {duration:0.3});
		
		//change toggle image to represent state
		if(this.expandContainer.style.display == 'none'){
			this.toggleImg.src = addOptions.toggleContractImg;
			if(this.options.snapToMenu)
			    setTimeout("window.scroll(0, document.body.scrollHeight)", 300);
		} else {
			this.toggleImg.src = addOptions.toggleExpandImg;
		}	
		
	},
	
	_toggleMenu: function(event){
		//if toggle was clicked, toggle only for expandContainer
		if(Event.element(event)==this.toggle || Event.element(event)==this.toggleImg){
			this._toggleExpandedOptions();
			return;
		}
		
		//see if a menu is already open by checking a manually created variable - if it doesn't match the current menuButton you clicked, close the previously clicked.
		if(activeMenuId!="" && activeMenuId!=this.menuItemId){
			$(activeMenuId).getElementsByTagName("ul")[0].style.visibility = "hidden";
			activeMenuId = "";
		}
			
		if(this.subMenuUL.style.visibility == 'hidden' || this.subMenuUL.style.visibility == "")
			this._show();
		else
			this._hide();
	},
	
	_show: function(){ 
		this.subMenuUL.style.visibility = "visible";
		if(this.options.snapToMenu)
    	    window.scroll(0, document.body.scrollHeight)
		if(!this.options.hover)
			activeMenuId = this.menuItemId;
	},	
	
	_hide: function(){ 
		this.subMenuUL.style.visibility = "hidden";
		if(this.expandContainer){ 
			this.expandContainer.style.display="none";
			this.toggleImg.src = addOptions.toggleExpandImg;
		}
		
		this.menuActive = false;
		if(!this.options.hover)
			activeMenuId = "";
	},

	_setMenuItemControls: function(){
		//set innerHTML
		if(this.options.action)
			this.menuItem.innerHTML = "<a href='#' onclick='"+this.options.action+";return false;'>"+this.options.buttonLabel+"<\/a><img class='arrow-btn' id='"+this.menuItemId+"_arrow' src='"+this.options.arrowButtonImage+"' alt='' \/>";
		else if(this.options.location)
			this.menuItem.innerHTML = "<a href='"+this.options.location+"'>"+this.options.buttonLabel+"<\/a><img class='arrow-btn' id='"+this.menuItemId+"_arrow' src='"+this.options.arrowButtonImage+"' alt='' \/>";
		else if(this.options.showArrow)
			this.menuItem.innerHTML = "<span class='button-label'>"+this.options.buttonLabel+"<\/span><img class='arrow-btn' id='"+this.menuItemId+"_arrow' src='"+this.options.arrowButtonImage+"' alt='' \/>";	
		else
			this.menuItem.innerHTML = "<span class='button-label'>"+this.options.buttonLabel+"<\/span>";
		
		if(this.options.action || this.options.location)
			this.menuItemArrow = $(this.menuItemId+'_arrow');
		
		//bind events depending on whether "onclick" (default)  or "onmouseover" is requested
		if(this.options.hover){
			if(this.options.action || this.options.location){
				Event.observe(this.menuItemArrow, 'mouseover', this._show.bindAsEventListener(this), false);
				Event.observe(this.menuItemArrow, 'mouseout', this._hide.bindAsEventListener(this), false);
			} else {
				Event.observe(this.menuItem, 'mouseover', this._show.bindAsEventListener(this), false);
				Event.observe(this.menuItem, 'mouseout', this._hide.bindAsEventListener(this), false);
			}				
		} else {
			if(this.options.action || this.options.location){	
				Event.observe(this.menuItemArrow, 'click', this._toggleMenu.bindAsEventListener(this), false);
			} else {
				Event.observe(this.menuItem, 'click', this._toggleMenu.bindAsEventListener(this), false);
			}	
		}	
	}
}

//Closes active menu when something other than a menubutton is clicked
function bodyClick(event){
	if( !$(Event.element(event)).up('.menuButton') && activeMenuId != "" ){
		$(activeMenuId).getElementsByTagName("ul")[0].style.visibility = "hidden";
	}	
}
Event.observe(window, 'click', bodyClick);