/*
 * 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;