// JavaScript Document 
	
// Drop-o-matic Scripts
// Created: 8.12.2010
// Author: Sam Napolitano
// URL: http://www.napolitopia.com/

// Makes sure prototype is loaded prior to this file

// Load function loops through all divs looking for anything with _menu that matches the link class 
// ie sample_menu where 'sample' is the class applied to the link under the nav entity
// Hides anything it finds and instantiates the mouseover observer. 

document.observe("dom:loaded", function (e)
	{
		//remove pesky span tags
		$$('#nav a').each(function(span){
			var old_html = span.innerHTML;
			var new_html = old_html.substr(6);
			var span_leng = new_html.length;
			span_leng = span_leng - 7;
			new_html = new_html.substr(0, span_leng); 
			span.innerHTML = new_html;
		});
				
		$$('#nav a').each(function (element)
		{

			var menu = $($A(element.classNames()).first() + "_menu");
			if(menu) {
				menu.hide();
				element.observe('mouseover', function (e)
					{
						link_item = $A(Event.element(e).classNames());
						show_drop(menu, link_item.first());	
					});

			}
		});
		
	}
);

// Function to show and hide div menu items. Looks for the div and the button to attach it to. 
function show_drop(drop_div, button_class){
	
	$$('div.drop').each(function (e){
		e.hide();
	});
	
	//get rid of any pesk 'active' class bugs
	$$('a.active').each(function(e){
		e.removeClassName('active');
	});
	
	//find all the nav items on the page, sort them and apply unique ID's if they dont exist
	//then get their height or width property to pass to the functions below
	$$('#nav a.' + button_class).each(function (e){
			e.addClassName('active');
			button = e.identify();
			button_width = $(button).getWidth();
			button_height = $(button).getHeight();
		}
	);
	
	//Find and attach the drop menu div to the nav item

	$(drop_div).setStyle({
		position: 'absolute'
	});
	
	$(drop_div).clonePosition(button, { 
		setLeft:true,
		setTop:true,
		setWidth: false,
		setHeight: false,
		//this is where you will set the offset
		//un comment the below lines for a vertical implementation
		//offsetLeft: button_width,
		//offsetTop: 0
		offsetLeft:0,
		offsetTop: button_height
		}
	);

	//show the div
	$(drop_div).show();
	
	// Roll in out functions for the divs
	$(drop_div).observe('mouseout', function(){		
		clearTimeout(document.timer);	
		document.timer = setTimeout( function(){
			$(drop_div).hide();
			$(button).removeClassName('active');}, 
			500);
			
		}
		
	);
	
	$(drop_div).observe('mouseover', function(){
		$(drop_div).show();
		$(button).addClassName('active');
		clearTimeout(document.timer);
		}
	);
	
	// Roll in out functions for the buttons
	$(button).observe('mouseout', function(){		
		clearTimeout(document.timer);	
		document.timer = setTimeout( function(){
			$(drop_div).hide();
			$(button).removeClassName('active');},
			500);
		}
		
	);
	
	$(button).observe('mouseover', function(){
		$(drop_div).show();
		$(button).addClassName('active');
		clearTimeout(document.timer);
		}
	);
	
	
}