/**
 * @file				bubbleinfo.js
 */
$(function () {
	$(document).ready(function () {
		$('#advices li, #header .tools li').each(function () {
	        // options
	        var distance = 10;
	        var time = 250;
	        var hideDelay = 500;
	
	        var hideDelayTimer = null;
	
	        // tracker
	        var beingShown = false;
	        var shown = false;
	        
	        var trigger = $('a', this);
	        var textualContent = $('img', trigger).attr('alt');
	        
	        //var popinHtml = '<div class="popup" style="background:red;padding:10px;">'+textualContent+'</div>';
	        var popinHtml = '<table class="popup"><tbody><tr><td class="corner" id="topleft"><span>&nbsp;</span></td><td class="top"></td><td class="corner" id="topright"><span>&nbsp;</span></td></tr><tr><td class="left"></td><td><table class="popup-contents"><tr><td>'+textualContent+'</td></tr></table></td><td class="right"></td></tr><tr><td id="bottomleft" class="corner"></td><td class="bottom"><img height="25" width="30" src="tpl/img/bubbleinfo/visu/bubble-tail2.png" alt="popup tail"></td><td class="corner" id="bottomright"></td></tr></tbody></table>';
	        trigger.parent().append(popinHtml);
	        
	        var popup = $('.popup', this).css('opacity', 0);
	        fixPng(popup);
	
	        // set the mouseover and mouseout on both element
	        $([trigger.get(0), popup.get(0)]).mouseover(function () {
	            // stops the hide event if we move from the trigger to the popup element
	            if (hideDelayTimer) clearTimeout(hideDelayTimer);
	
	            // don't trigger the animation again if we're being shown, or already visible
	            if (beingShown || shown) {
	                return;
	            } else {
	                beingShown = true;
	
	                // reset position of popup box
	                
	                var triggerWidth = trigger.width();
	                
	                var leftOffset = ((triggerWidth / 2) - (popup.width() / 2));
	                
	                var topOffset = -(popup.height() - 20);
	                popup.css({
	                    top: topOffset,
	                    left: leftOffset,
	                    display: 'block' // brings the popup back in to view
	                })
	
	                // (we're using chaining on the popup) now animate it's opacity and position
	                .animate({
	                    top: '-=' + distance + 'px',
	                    opacity: 1
	                }, time, 'swing', function() {
	                    // once the animation is complete, set the tracker variables
	                    beingShown = false;
	                    shown = true;
	                });
	            }
	        }).mouseout(function () {
	            // reset the timer if we get fired again - avoids double animations
	            if (hideDelayTimer) clearTimeout(hideDelayTimer);
	            
	            // store the timer so that it can be cleared in the mouseover if required
	            hideDelayTimer = setTimeout(function () {
	                hideDelayTimer = null;
	                popup.animate({
	                    top: '-=' + distance + 'px',
	                    opacity: 0
	                }, time, 'swing', function () {
	                    // once the animate is complete, set the tracker variables
	                    shown = false;
	                    // hide the popup entirely after the effect (opacity alone doesn't do the job)
	                    popup.css('display', 'none');
	                });
	            }, hideDelay);
	        });
	    });
	});
});