// coda puff effect 
//http://jqueryfordesigners.com/demo/coda-bubble.html
// one or more divs of class "bubbleInfo", inside which the effect occurs
// inside the div:
// class trigger: the element of which you hover the mouse
//                to trigger the effect
// div of class popup: the element that pops up
//
// adapted for my own use
//
$(function () {
    $('.menuitem').each(function () {
        var distance = 10;
        var time = 250;
        var hideDelay = 1000; // must be more than time
        var toppix = -31;
        var hideDelayTimer = null;

        var beingShown = false; // show animation is playing
        var shown = false; // item is being shown or hide animation is playing
        var trigger = $(this);
        var info = $('.submenu', this); 
		// .css('opacity', 0);  //werkt niet op IE8


        $([trigger.get(0), info.get(0)]).mouseenter(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                // don't trigger the animation again
                return;
            } else {
                // reset position of info box
                beingShown = true;
				// change this to set initial position
                info.css({
                    top: toppix,
					display: 'block'
                    //display: 'block'
                }).animate({
                    //top: '+=' + distance + 'px',
                    //opacity: 1  // werkt niet op IE8
                }, time, 'swing', function() {
                    shown = true;
                    beingShown = false;
                });
            }

            return false;
        }).mouseleave(function () {
            if (!beingShown && !shown) {
                // don't trigger animation when item is not shown
                return;
			}
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                info.css({
                    top: toppix
                }).animate({
                    top: '+=' + distance + 'px'
					//, opacity: 0 // werkt niet op IE8
                }, time, 'swing', function () {
                    shown = false;
                    info.css({
						top: toppix,
						display: 'none'
					});
                });

            }, hideDelay);

            return false;
        });
    });
});