/*

TO USE:

	<div class="slimMenuContainer" val="item1" id="slimMenu">
		<div class="slimMenu">
			<div class="slimMenuValue"></div>
			<div class="slimMenuArrow"></div>
		</div>
		<div class="slimMenuDropdown">
			<div class="slimMenuItem" val="item1">Item 1</div>
			<div class="slimMenuItem" val="item2">Item 2</div>
		</div>
	</div>

	<script>

	$('slimMenu').observe('slimMenu:value_changed',
		function(){
			alert($('slimMenu').value());
		}
	,false);

	</script>

AVAILABLE METHODS/PROPERTIES:

- add(value,caption)
	- Adds a menu item.

- remove(index)
	- Removes a menu item

- setValue(value)
	- Sets the value

- setWidth(width)
	- Sets the width of the menu

- refresh()
	- Refreshes the menu

- value()
	- Returns the current value

- items[]
	- Returns an array representing the menu items. Each menu item has a "val" and "caption" property.

*/

//////////////////////////////////////////

var slimMenuCount = 0;
var tmrSlimMenu;

function slimMenu_getMenuItem(menu,itemValue){
	// GET MENU ITEMS BELONGING TO MENU
	var menuItems = $A(menu.getElementsBySelector('div.slimMenuItem'));
	return menuItems.find(
		function(item){
			return(item.getAttribute('val')==itemValue);
		}
	);
}

function slimMenu_open(menu){
	var slimMenuDropdown = menu.down('.slimMenuDropdown');
	if(slimMenuDropdown.style.display=='block') return;
	if(menu.getAttribute('state')!='on'){
		// SHOW DROPDOWN
		slimMenuDropdown.style.display = 'block';
		// SET NEW ARROW IMAGE
		menu.down('div.slimMenuArrow').style.backgroundImage = 'url(./images/slim_menu_arrow_down.gif)';
		// HIGHLIGHT CURRENT ITEM
		var selectedItem = slimMenu_getMenuItem(menu,menu.getAttribute('val'));
		if(selectedItem) selectedItem.addClassName('highlighted');
		menu.setAttribute('state','on');
		menu.fire('slimMenu:menu_opened');
	}else{
		menu.setAttribute('state','off');
	}
}

var slimMenu_menuItem = Class.create();
slimMenu_menuItem.prototype = {
	initialize:function(val,caption){
		this.val = val;
		this.caption = caption;
	}
}

function slimMenu_init(){
	// GET ALL SLIM MENUS
	var slimMenuContainers = $$('div.slimMenuContainer');
	slimMenuContainers.each(
		function(menu){
			// PREPARE MENU
			menu.observe('mousedown',function(){slimMenu_open(this);},false);
			menu.setAttribute('state','off');
			if(!menu.getAttribute('id')){
				menu.setAttribute('id','slimMenu_'+slimMenuCount);
				slimMenuCount++;
			}
			menu.setWidth = function(width){
				var id = menu.getAttribute('id');
				var mnu = $(id);
				mnu.style.width = mnu.down('div.slimMenu').style.width = mnu.down('div.slimMenuDropdown').style.width = width + 'px';
			}
			menu.refresh = function(){
				// CLEAR DROPDOWN
				var slimMenuDropdown = menu.down('div.slimMenuDropdown');
				slimMenuDropdown.update();
				menu.items.each(
					function(item,i){
						var id = 'mnu_' + menu.getAttribute('id') + '_' + i;
						// CREATE MENU ITEM HTML
						var menuItem = document.createElement('div');
						menuItem.setAttribute('val',item.val);
						menuItem.setAttribute('id',id);
						slimMenuDropdown.appendChild(menuItem);
						menuItem = menu.down('div#' + id);
						menuItem.addClassName('slimMenuItem');
						menuItem.update(item.caption);
					}
				);
				// INIT MENU ITEMS
				slimMenu_initMenuItems();
			};
			menu.add = function(val,caption){
				menu.items.push(new slimMenu_menuItem(val,caption));
				//menu.refresh();
			}
			menu.remove = function(index){
				menu.items.splice(index,1);
				menu.refresh();
			}
			menu.setValue = function(val,triggerEvent){
				slimMenu_setValue(menu,val,triggerEvent);
			}
			menu.value = function(){return this.getAttribute('val');};
			if(menu.value()){
				menu.setValue(menu.value(),false);
			}
			menu.items = [];
			var menuItems = menu.getElementsBySelector('div.slimMenuItem');
			menuItems.length.times(
				function(i){
					// INITIALIZE items ARRAY
					var item = new slimMenu_menuItem(menuItems[i].getAttribute('val'),menuItems[i].innerHTML);
					menu.items.push(item);
				}
			);
		}
	);
	slimMenu_initMenuItems();
}

function slimMenu_initMenuItems(){
	// GET ALL SLIM MENU ITEMS
	var slimMenuItems = $$('.slimMenuItem');
	slimMenuItems.each(
		function(item){
			//if(!item.hasClassName('slimMenuDropdown')){
				// HIGHLIGHT ITEM WHEN HOVERED OVER
				item.observe('mouseover',
					function(){
						slimMenu_highlightItem(this);
					}
				,false);
				// HIDE MENU ON MOUSE OUT
				item.observe('mouseout',
					function(){
						var menu = slimMenu_getMenu(this);
						// REMOVE HIGHLIGHTING
						this.removeClassName('highlighted');
						menu.setAttribute('active','false');
						// DEFER CLOSING TO ALLOW mouseover EVENT TO FIRE
						window.clearTimeout(tmrSlimMenu);
						tmrSlimMenu = setTimeout(slimMenu_closeInactives,1);
					}
				,false);
			//}
			//if(item.hasClassName('slimMenuItem')){
				// MENU ITEM CLICK EVENTS
				item.observe('click',
					function(){
						// CLOSE MENU AND SET VALUE
						var menu = slimMenu_getMenu(this);
						slimMenu_close(menu);
						menu.setValue(this.getAttribute('val'),true);
					}
				,false);
			//}
		}
	);
	$$('.slimMenuContainer').each(function(container){
		container.observe('mouseout',function(){
			container.setAttribute('active','false');
			// DEFER CLOSING TO ALLOW mouseover EVENT TO FIRE
			window.clearTimeout(tmrSlimMenu);
			tmrSlimMenu = setTimeout(slimMenu_closeInactives,1);
		});
	});
}

function slimMenu_highlightItem(menuItem){
	// GET PARENT MENU
	var menu = slimMenu_getMenu(menuItem);
	slimMenu_unhighlightItems(menu);
	menu.setAttribute('active','true');
	// HIGHLIGHT
	menuItem.addClassName('highlighted');
}

function slimMenu_unhighlightItems(menu){
	var menuItems = $A(menu.getElementsBySelector('div.slimMenuItem'));
	menuItems.each(
		function(item){
			item.removeClassName('highlighted');
		}
	);
}

function slimMenu_setValue(menu,value,triggerEvent){
	var menuItem = slimMenu_getMenuItem(menu,value);
	var itemCaption = (menuItem)?slimMenu_getMenuItem(menu,value).innerHTML:value;
	slimMenu_setText(menu,itemCaption);
	if(triggerEvent&&menu.value()!=value){
		menu.setAttribute('val',value);
		menu.fire('slimMenu:value_changed',value);
	}else{
		menu.setAttribute('val',value);
	}
}

function slimMenu_setText(menu,value){
	// FOR TPG PORTFOLIO ONLY; REMOVE FROM GENERAL USE:
	value = value.replace('_eventID','e');
	value = value.replace('_counted','c');
	//

	menu.down('div.slimMenuValue').update(value);
}

function slimMenu_getMenu(elt){
	return elt.up('div.slimMenuContainer');
}

function slimMenu_closeInactives(){
	// GET ALL SLIM MENUS
	var slimMenuContainers = $$('div.slimMenuContainer');
	slimMenuContainers.each(
		function(item){
			// IF MENU IS SHOWN AND IS NOT HOVERED OVER, CLOSE IT
			if(item.getAttribute('state')=='on'&&item.getAttribute('active')=='false'){
				slimMenu_close(item);
			}
		}
	);
}

function slimMenu_close(menu){
	var slimMenuDropdown = menu.down('.slimMenuDropdown');
	slimMenuDropdown.style.display = 'none';
	// SET NEW ARROW IMAGE
	menu.down('div.slimMenuArrow').style.backgroundImage = 'url(./images/slim_menu_arrow_up.gif)';
	menu.setAttribute('state','off');
	menu.fire('slimMenu:menu_closed');
}

Event.observe(window,'load',
	function(){
		slimMenu_init();
		// WORKAROUND FOR IE Z-INDEX ISSUES
		if(window.details.ieVersion()>-1){
			$('mnuCaseStudies').observe('slimMenu:menu_opened',
				function(){
					$('mnuCategories').style.visibility = 'hidden';
				}
			,false);
			$('mnuCaseStudies').observe('slimMenu:menu_closed',
				function(){
					$('mnuCategories').style.visibility = 'visible';
				}
			,false);

		}
	}
,false);