var map_container=null;
var map_default=null;
var map_current=null;
var map_current_hover=null;
var map_standorte=[];
var map_pos=null;
var map_picB=null;
var map_picR=null;
var map_linkSize = [10,10];
var map_hovers=[];
var map_hover_last=null;

$(document).ready (function () {
	map_container = $("#map_container").eq(0);
	map_default = $("#map_default").eq(0);
	map_pos = $("#map_img").offset();

	var img_blue = document.createElement("img");
	img_blue.src = "uploads/pics/blue_big.png";
	map_picB = $(img_blue);
	map_picB.css ("position", "absolute");
	map_picB.css ("left", "-100px");
	$(document.body).append (map_picB);
	
	var img_red = document.createElement("img");
	img_red.src = "uploads/pics/red_big.png";
	map_picR = $(img_red);
	map_picR.css ("position", "absolute");
	map_picR.css ("left", "-100px");
	$(document.body).append (map_picR);

	function show_hover (left, top) {
		hide_hover ();
		
		map_hovers[map_current_hover][1].css("left", left+"px").css("top", top+"px");
		map_hover_last = map_current_hover;
	}
	function hide_hover () {
		if (map_hover_last != null) {
			map_hovers[map_hover_last][1].css("left", "-200px").css("top", "-200px");
			map_hover_last = null;
		}	
	}

	function item_by_pos (x,y) {
		for (var i=0; i<map_standorte.length; i++) {
			if (x > (map_standorte[i][0].left+map_pos.left-5) && x < (map_standorte[i][0].left+map_pos.left+5)
				&& y > (map_standorte[i][0].top+map_pos.top-5) && y < (map_standorte[i][0].top+map_pos.top+5)) {
				
				return i;
			}
		}

		return null;
	}
		
	function create_hover (jq) {
		var div = document.createElement("div");
		div.style.position="absolute"; div.style.left="-200px"; div.style.top="-200px";
		var hover = $(div);
		$(document.body).append (hover);

		hover.append (jq);
		return hover;
	}
	$(".map_red").each (function () {
		var t = $(this).clone ();

		var ht = t.find(".hover").eq (0);
		var hover = create_hover (ht.clone());
		ht.remove ();

		var pos = {"left": parseInt(t.css("left")), "top": parseInt(t.css("top"))};

		t.css ("left", "").css ("top", ""). css ("position", "");
		
		map_standorte.push ( [pos, t, "red"] );
		map_hovers.push ( [pos, hover] );
		map_container.append (t);
	}).remove ();

	$(".map_blue").each (function () {
		var t = $(this).clone ();

		var ht = t.find(".hover").eq (0);
		var hover = create_hover (ht.clone());
		ht.remove ();

		var pos = {"left": parseInt(t.css("left")), "top": parseInt(t.css("top"))};

		t.css ("left", "").css ("top", ""). css ("position", "");
		
		map_standorte.push ( [pos, t, "blue"] );
		map_hovers.push ( [pos, hover] );	
		map_container.append (t);
	}).remove ();

	$(document.body).mousemove (function(eve) {
		var x = eve.pageX;
		var y = eve.pageY;

		var i = item_by_pos (x,y);
		if (i != null) {
			if (map_current_hover != i) {
				map_current_hover = i;
				
				var start_x = map_standorte[i][0].left+map_pos.left-5;
				var start_y = map_standorte[i][0].top+map_pos.top-5;
				
				if (map_standorte[i][2] == "blue") {
					map_picR.css ("left", "-100px");
					
					map_picB.css ("display", "none"). css ("width", "10px") . css ("height", "10px");
					map_picB.css ("left", start_x+"px") . css ("top", start_y+"px");

					map_picB.animate( {left: start_x-5, top: start_y-5, width: "21", height: "21"}, 200 );
				} else {
					map_picB.css ("left", "-100px");
					
					map_picR.css ("display", "none"). css ("width", "10px") . css ("height", "10px");
					map_picR.css ("left", start_x+"px") . css ("top", start_y+"px");

					map_picR.animate( {left: start_x-5, top: start_y-5, width: "21", height: "21"}, 200 );
				}

				show_hover (map_standorte[i][0].left+map_pos.left, map_standorte[i][0].top+map_pos.top);
			}
		} else {
			map_current_hover = null; 

			map_picB.css ("left", "-100px");
			map_picR.css ("left", "-100px");

			hide_hover ();
		}
	});

	var click_handler = function(eve) {
		var x = eve.pageX;
		var y = eve.pageY;

		var i = item_by_pos (x,y);
		if (i != null) {
			if (map_current == null)
				map_default.css ("display", "none");
			else
				map_standorte[map_current][1].css ("display", "none");

			map_standorte[i][1].css ("display", "block");
			map_current = i;
		}
	};

	map_picB.click (click_handler);
	map_picR.click (click_handler);
	$(document.body).click (click_handler);
	
});