

$(function()
{
    var hideDelay = 500;
    var currentID;
    var hideTimer = null;
    var ajax = null;
    var hideFunction = function()
    {
        if (hideTimer)
            clearTimeout(hideTimer);
        hideTimer = setTimeout(function()
        {
            currentPosition = { left: '0px', top: '0px' };
            container.css('display', 'none');
        }, hideDelay);
    };

    var currentPosition = { left: '0px', top: '0px' };

    // One instance that's reused to show info for the current person
    var container = $('<div id="personPopupContainer">'
        + '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup">'
        + '<tr>'
        + '   <td class="corner topLeft"></td>'
        + '   <td class="top"></td>'
        + '   <td class="corner topRight"></td>'
        + '</tr>'
        + '<tr>'
        + '   <td class="left">&nbsp;</td>'
        + '   <td><div id="personPopupContent"></div></td>'
        + '   <td class="right">&nbsp;</td>'
        + '</tr>'
        + '<tr>'
        + '   <td class="corner bottomLeft">&nbsp;</td>'
        + '   <td class="bottom">&nbsp;</td>'
        + '   <td class="corner bottomRight"></td>'
        + '</tr>'
        + '</table>'
        + '</div>');

    $('body').append(container);
	//$('#header').append('<p id="js1">Fensterbreite: <span></span></p>');
	//$('#header').append('<p id="js2">Fensterhöhe: <span></span></p>');

	$('.personPopupTrigger').live('mouseover', function()
    {
        if (!$(this).data('hoverIntentAttached'))
        {
            $(this).data('hoverIntentAttached', true);
            $(this).hoverIntent
            (
                // hoverIntent mouseOver
                function()
                {
                    if (hideTimer)
                        clearTimeout(hideTimer);

                    var settings = $(this).attr('rel');

                    var pos = $(this).offset();
                    var width = $(this).width();
					var fensterbreite = $(window).width();
					var fensterhoehe = window.innerHeight ? window.innerHeight : $(window).height();
					var boxwidth = 500;
					var boxheight = 200;
					var n_width = pos.left + width;
					var n_height = pos.top - 5;
					//$('#js1 span').text(pos.left + ' --- ' + width + ' --- ' + fensterbreite);
					//$('#js2 span').text(pos.top + ' --- ' + fensterhoehe);

					if((pos.left + width + boxwidth) > fensterbreite){
						n_width = pos.left + width - boxwidth - 60;
					}
					if((pos.top + boxheight) > fensterhoehe){
						n_height = pos.top - (boxheight/2);
					}
					
					var reposition = { left: n_width + 'px', top: n_height + 'px' };

					// If the same popup is already shown, then don't requery
                    if (currentPosition.left == reposition.left &&
                        currentPosition.top == reposition.top)
                        return;

                    container.css({
                        left: reposition.left,
                        top: reposition.top,
						width: boxwidth+'px'
					});

                    currentPosition = reposition;

                    $('#personPopupContent').html('&nbsp;');

					var text = $('#'+settings).html();
					//alert(text);

					$('#personPopupContent').html('<dl class="modeldetails">'+text+'</dl>');

					//container.center();
					container.css('display', 'block');
                },
                // hoverIntent mouseOut
                hideFunction
            );
            // Fire mouseover so hoverIntent can start doing its magic
            $(this).trigger('mouseover');
        }
    });

    // Allow mouse over of details without hiding details
    $('#personPopupContainer').mouseover(function()
    {
        if (hideTimer)
            clearTimeout(hideTimer);
    });

    // Hide after mouseout
    $('#personPopupContainer').mouseout(hideFunction);
});

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}
