/*
 * Name: showElement
 * Author: Michael Stowe
 * Version 1.2
 * ---------------------
 * Displays an element when either it or its parent are being hovered on, using the "showelement" 
 * attribute on the parent, and the correpsonding ID on the element to be displayed.
 * ---------------------
 * Example: 
 * <a href="javascript:void(0);" showelement="example" effect="show" delay="0">Show Div</a>
 * <div style="display: none;" id="example">This is an example div</div>
 * ---------------------
 * Changelog: 
 * Added support for Fade, Slide, or Show jQuery effects, as defined by the "effect" attribute
 * Added ability to set delay using the delay attribute (500 = .5 seconds = default)
 * ---------------------
 * (c) 2010, http://www.mikestowe.com
 */

element_selected_id = 'void';
element_menuTimer = 'void';

function show_element(id,effect) {
	var formatted_id = '#'+id;
	if(element_menuTimer != 'void') { clearInterval(element_menuTimer); }
	if(element_selected_id != id && element_selected_id != 'void') { hide_element_now(element_selected_id, effect); }
	show_element_now(formatted_id,effect);
	element_selected_id = id;
}

function show_element_now(formatted_id,effect) {
	if(effect == 'show') { $(formatted_id).show(); }
	else if(effect == 'slide') { $(formatted_id).slideDown(); }
	else { $(formatted_id).fadeIn(); }
}

function hide_element(id,effect,delay) {
	element_formatted_id = '#'+id;
	if(effect == 'show') { element_menuTimer = setInterval('$(element_formatted_id).css(\'display\',\'none\')',delay); }
	else if(effect == 'slide') { element_menuTimer = setInterval('$(element_formatted_id).slideDown(\'fast\')',delay); }
	else { element_menuTimer = setInterval('$(element_formatted_id).fadeOut(\'fast\')',delay); }
	
}

function hide_element_now(id,effect) {
	var formatted_id = '#'+id;
	if(effect == 'show') { $(formatted_id).hide('fast'); }
	else if(effect == 'slide') { $(formatted_id).slideUp('fast'); }
	else { $(formatted_id).fadeOut('fast'); }
}

function load_showelement() {
	$.each($('[showelement]'),function(item) {
		var attr = $(this).attr('showelement');
		var id = $(this).attr('id');
		var effect = $(this).attr('effect');
		if(effect == 'undefined') { var effect = 'fade'; }
		var delay = $(this).attr('delay');
		if(parseInt(delay)!= delay-0) { var delay = 500; }
		var format = '#'+attr;

		// Update Parent Elements
		$(this).hover (
			function() {
				show_element(attr,effect);
			},
			function() {
				hide_element(attr,effect,delay);
		});

		// Do the same for the child element
		$(format).hover (
				function() {
					show_element(attr,effect);
				},
				function() {
					hide_element(attr,effect,delay);
		});
	});
}

window.onload = load_showelement;