$(function(){
		if($.browser.msie){
			var imageMargin="-1px";	
		}else{
			var imageMargin="0px";
		}
	   $("#contentContainer").prepend('<table id="dpop" class="bubblepopup">'+
		'<tbody><tr>'+
			'<td id="bubbletopleft" class="bubblecorner"></td>'+
			'<td class="bubbletop" valign="top" style="text-align:right;" align="right"><div style="width:30px;float:right;margin-top:-5px;"><img src="/gfx/bubble/bubble-tail3_top.png" id="bubbleMapTopImage" style="position:absolute;height:10px;" height="10" width="30"/></div></td>'+
			'<td id="bubbletopright" class="bubblecorner"></td>'+
		'</tr>'+
		'<tr>'+
			'<td class="bubbleleft"></td>'+
			'<td style="margin: 0;padding: 0;">'+
	'<div id="bubblecontent"></div>'+
			'</td>'+
			'<td class="bubbleright"></td>'+
		'</tr>'+
		'<tr>'+
			'<td class="bubblecorner" id="bubblebottomleft"></td>'+
			'<td class="bubblebottom" valign="top"  style="text-align:right;"><div style="float:right;width:30px;"><img src="/gfx/bubble/bubble-tail3.png" style="position:absolute;width:30px;margin-top:'+imageMargin+';" id="bubbleMapBottomImage"/></div></td>'+
			'<td id="bubblebottomright" class="bubblecorner"></td>'+
		'</tr>'+
	 '</tbody></table>'); 


		var distance = 40;
		var time = 0;
		var hideDelay = 150;

		var hideDelayTimer = null;
		var beingShown = false;
		var shown = false;
		var trigger = $('.bubble', this);
		var info = $('#dpop', this).css('opacity', 0);

		$('#dpop').livequery(function(){
			$(this).hover(function(){
				if (hideDelayTimer){clearTimeout(hideDelayTimer);								  }
			},function(){
				hideDelayTimer = setTimeout(function () {
					hideDelayTimer = null;
					info.animate({
						top: '-=' + distance + 'px',
						opacity: 0
					}, time, 'swing', function () {
						shown = false;
						info.css('display', 'none');
					});
				}, hideDelay);			
			});
		});



		$('.bubble').livequery(function(){										
			$(this).hover(function (e) {		
									
				if (hideDelayTimer) clearTimeout(hideDelayTimer);											
				if (beingShown && shown==$(this).find('.bubbleItems').html()) { // trigger again?
					return false;
				} else {
					beingShown = true;

					var $bubbleItems = $(this).find('.bubbleItems');
					$('#bubblecontent').html($bubbleItems.html());
					var objectX = (e.pageX);
					var objectY = (e.pageY);
					
					var pos = $(this).children().position();
					if(!pos){
						var pos = $(this).parent().position();
					}
					//var posX = pos.left-$(this).find('.bubble').outerWidth();			
					//var posY = pos.top-$bubbleItems.outerHeight();
					
					var posY = $(this).position().top - ($bubbleItems.outerHeight());
                    var posX= pos.left  - ($bubbleItems.outerWidth());
					
					if((($(this).position().top + $('#contentContainer').position().top)- $bubbleItems.outerHeight()) - $().scrollTop() < 0){ 
						posY =	($(this).position().top + $(this).height() + 20);
						var topbot='bottom';						
					}else{ 	//erboven
						posY+=($(this).height()/2);
						var topbot='top';				
					}
					$('#bubbleMapBottomImage').hide();
					$('#bubbleMapTopImage').hide();

					if(($(this).position().left + $('#contentContainer').position().left- $bubbleItems.width()) < 0){ // rechterkant
						if(topbot=='top'){ //rechts en bovenkant = lo tonen
							$('#bubbleMapBottomImage').parent().css("float","left");
							$('#bubbleMapBottomImage').show();
						}else{ //linkerkant
							$('#bubbleMapTopImage').parent().css("float","left");
							$('#bubbleMapTopImage').show();							
						}

						posX =	$(this).outerWidth()+$(this).position().left - 30;					

					}else{
						if(topbot=='top'){ //links bovenkant
							$('#bubbleMapBottomImage').parent().css("float", "right");
							$('#bubbleMapBottomImage').show();
						}else{ // links onderkant
						
							$('#bubbleMapTopImage').parent().css("float","right");							
							$('#bubbleMapTopImage').show();							
						}
							
					}
					
					info.css({
						 top: posY,
						 left: posX,
						 position:'absolute',
						 display: 'inline'
					 }).animate({
						top: '-=' + distance + 'px',
						opacity: 1
					 }, time, 'swing', function() {
						 beingShown = false;
						 shown = $(this).find('.bubbleItems').html();
					 });				
	
				}
	
				return false;
			},function() {
				
				if (hideDelayTimer) clearTimeout(hideDelayTimer);
				hideDelayTimer = setTimeout(function () {
					
					info.animate({
						top: '-=' + distance + 'px',
						opacity: 0
					}, time, 'swing', function () {
						shown = false;
						info.css('display', 'none');
					});
	
				}, hideDelay);
	
				return false;
			});
		}); //livequery
		
		
  });






// google maps benadering
function showBubble(x,y,htmlInfo){
	
	if (hideDelayTimer) { clearTimeout(hideDelayTimer);}										
	
	$('#bubblecontent').html(htmlInfo);
	
	$('#dpop').css({
		 top: x-$('#dpop').height()+60,
		 left: y-30,
		 display: 'inline'
	 }).animate({
		top: '-= 0px',
		opacity: 1
	 }, 0, 'swing', function() {
		 beingShown = true;
		 shown = htmlInfo;
	 });	
}

function hideBubble(){
	$('#dpop').trigger();
	if (hideDelayTimer){clearTimeout(hideDelayTimer)};											
	
	hideDelayTimer = setTimeout(function () {
		
		$('#dpop').animate({
			top: '-=0px',
			opacity: 0
		}, 0, 'swing', function () {
			shown = false;
			$('#dpop').css('display', 'none');
		});	
	}, 150);
	
	return false;	
}