jQuery(document).ready(function() {
	jQuery('body').append(
		'<div id="housemaplightboxshadow"></div>' +
		'<div id="housemaplightbox"></div>' +
		'<div id="housemaplightboxcloser">Karte schließen</div>'
	);
	var lightbox = jQuery('#housemaplightbox');
	var lightboxshadow = jQuery('#housemaplightboxshadow');
	var lightboxcloser = jQuery('#housemaplightboxcloser');
	
	jQuery('.housemap').click(function() {
		
		showShadow();
		
		lightbox.html('').fadeIn();
		jQuery.ajax({
			url: jQuery('.housemap').attr('href'),
			success: function(data) {
			
				lightboxshadow.removeClass('loading');
				lightbox.html(data);
				lightboxcloser.fadeIn();
				
				var allPois = jQuery('#housemaplightbox .poi');
				var infoZone = jQuery('#housemaplightbox .infozone');
				var mapContainer = jQuery('#housemaplightbox .map');
				var mapImage = infoZone.next('img');
				var mapImageHeightBig = mapImage.attr('height');
				var mapImageWidthBig = mapImage.attr('width');
				var mapImageWidthSmall = 310;
				var mapImageHeightSmall = mapImageWidthSmall * mapImageHeightBig / mapImageWidthBig;
				var mapHighlight = jQuery('#housemaplightbox .maphighlight');
				
				
				jQuery('#housemaplightbox .hdl-map').css("display", "block");
				function openDetailView() {
					jQuery('#housemaplightbox .hdl-map').css("display", "none");
					allPois.hide();
					mapImage.animate({
						width: mapImageWidthSmall + 'px',
						height: mapImageHeightSmall + 'px',
						paddingTop: '330px'
					}).addClass('small');
					mapContainer.animate({
						padding: '10px',
						height: '680px'
					});
					infoZone.fadeIn();
					allPois.hide(); // called 2nd time because sometimes pois were not hidden
				}
				
				function openMapView() {
					infoZone.fadeOut();
					mapImage.animate({
						width: mapImageWidthBig + 'px',
						height: mapImageHeightBig + 'px',
						paddingTop: '0'
					}).removeClass('small');
					setTimeout("jQuery('#housemaplightbox .poi').fadeIn()", 400);
					mapContainer.animate({
						padding: '0',
						height: '1000px'
					});
					mapHighlight.hide();
					jQuery('#housemaplightbox .hdl-map').css("display", "block");
					//setTimeout('jQuery("#housemaplightbox .hdl-map").css("display", "block")', 400);
				}
				
				function setMapHighlight(poi) {
					var coords = {
						x: Math.round(poi.attr('data-xOffsetPerc') * mapImageWidthSmall) -6,
						y: Math.round(poi.attr('data-yOffsetPerc') * mapImageHeightSmall) -4
					};
					mapHighlight.show().animate({
						marginLeft: coords.x,
						marginTop: coords.y-mapImageHeightSmall
					});
				}
				
				function fillDetailView(html) {
					infoZone.html(html);
					infoZone.find('.jlink').each(function(i, el) {
						jQuery(el).click(function() {
							var clicked = jQuery(this);
							var targetPoi = jQuery('#housemaplightbox .poi[data-addressid=' + clicked.attr('data-linkto') + ']');
							fillDetailView(targetPoi.html());
							setMapHighlight(targetPoi);
						});
					});
					infoZone.find('.backtooverview').click(function (){
						openMapView();
					});
				}
				
				
				// Open Detail View, Close Map
				allPois.click(function() {
					var clickedPoi = jQuery(this);
					openDetailView();
					fillDetailView(clickedPoi.html());
					setMapHighlight(clickedPoi);
				});
				
				// Open Map, Close Detail View
				mapImage.click(function() {				
					openMapView();
				});
							
				// jlinks
				allPois.each(function(i, el) {
					var references = jQuery('.jlink-to-' + jQuery(el).attr('data-addressid'));
					references.click(function() {
						jQuery(this).hide();
					});
				});
			}
		});
		return false;
	});
	
	function showShadow() {
		if(jQuery.browser.msie) {
			lightboxshadow.show();
		} else {
			lightboxshadow.fadeIn();
		}
		lightboxshadow.addClass('loading');
	}
	
	function hideShadow() {
		if(jQuery.browser.msie) {
			lightboxshadow.hide();
		} else {
			lightboxshadow.fadeOut();
		}
		lightboxshadow.removeClass('loading');
	}
	
	function closeHouseMap() {
		hideShadow();
		lightbox.fadeOut().html('');
		lightboxcloser.fadeOut();
	}
	
	lightboxcloser.click(function(){closeHouseMap()});
	lightboxshadow.click(function(){closeHouseMap()});
	
});