var timer;

function hokuspokus(){

//init popup
	var dialog = $("#infodialog");
	dialog.dialog({ 
		autoOpen: false,
		width: 350,
		close: function(){
			$("p#preview").remove();
			$("div#imagediv > img").hide();
		}
	});
	
//place markers on map. reads the x&y attr from div's with class lagergard
	var nr = 0;
	$('div.lagergard').each(function(){
		var lagergard = $(this);
		lagergard.attr("id", "nr"+nr);
		var marker = $("<img class=\"infomarker\" src=\"infomarker.png\"></img>");
		marker.attr("title",lagergard.attr("title")).css("left", lagergard.attr("x")).css("top", lagergard.attr("y")).attr("id", "nr"+nr);
		marker.appendTo("body");
		
		lagergard.children("input.small").attr("name","nr"+nr).appendTo("div#imagediv");
		nr++;
	});
	
//attach eventhandlers for mouseover
	$('.infomarker').mouseenter(function(event){
		var marker = $(this);
		timer = setTimeout(function(){
			if(marker.attr("title") != dialog.dialog('option', 'title') || !dialog.dialog( 'isOpen' )){
				$("div#infodialog").html($("div#"+marker.attr("id")).html());
				
				dialog.dialog('close').dialog('option', 'title', marker.attr("title"));
				dialog.dialog('option', 'position', [200,10]);
				dialog.dialog('open');
				imagePreview(marker.attr("id"));
			}
		}, 200);
	}).mouseleave(function(){
		if(!(typeof timer === 'undefined')){		
			clearTimeout(timer);
		}
	});
	
	$("div#infodialog").html("<img src=\"start.jpg\" />");
				
	dialog.dialog('option', 'title', 'Start');
	dialog.dialog('option', 'position', [200,10]);
	dialog.dialog('open');
	
}

function imagePreview(id){
	/* CONFIG */
		
		xOffset = 10;
		yOffset = 10;
		
	/* END CONFIG */
	var nene=document.getElementById("imagediv");
	$("input.small[name=\'"+id+"\']").each(function(){
		$(this).replaceWith($("<img name=\""+ $(this).attr("name") +"\" class=\"small\" src=\"" + $(this).attr("src") + "\" ></img>"));
	});
	
	$("img.small[name=\'" +id+"\']").show();
	
	$("img.small").mouseover(function(e){
		$("p#preview").remove();
		$("body").append("<p id='preview'><img src='"+ $(this).attr("src") +"' alt='Image preview' /></p>");
		
		$("p#preview")
			.css("top",($('#infodialog').offset().top + $('#infodialog').height() + yOffset) +"px")
			.css("left", "150px")
			.fadeIn("fast").click(function(){$(this).remove()});
		
	});

}