var $product_height = 0;
var $product_timer  = null;
var $timeout 		= 125;

$(document).ready( function()
{
    /*
     * A work around for a bug in jQuery that has trouble
     * determining the actual height of a hidden element
     * resulting in a very ugly jump at the end of the slide.
     *
     * Dropdown is visible, but positioned way left in css
     * to prevent flickering on page load. Get the height,
     * save it, then hide the dropdown and put it back in
     * the correct position.
     *
     * Sliding in IE looks horrific, so we're just doing show/hide.
     */

    $product_height = $('#product_dropdown').height();
    $('.dropdown').css("display", "none" ).css("z-index", 50);

	/* Hotspot mouseenter */
    $('#products-hotspot').mouseenter( function()
	{
        if ($product_timer != null)
            clearTimeout($product_timer);     

        if ($('#product_dropdown').css("display") == "none")
            $('#product_dropdown').show();
    });


	/* Hotspot mouseleave */
    $('#products-hotspot').mouseleave( function()
	{
        $product_timer = setTimeout("$('#product_dropdown').hide()", $timeout);
    });
	
	
	/* Dropdown mouseenter */
    $('#product_dropdown').mouseenter( function()
	{
        if ($product_timer != null)
            clearTimeout($product_timer);
    });


	/* Dropdown mouseleave */
    $('#product_dropdown').mouseleave( function()
	{
        $product_timer = setTimeout("$('#product_dropdown').hide()", $timeout);
    });
});