var addEvent = function (obj, type, fn) {
	if (obj.addEventListener) {
		obj.addEventListener(type, fn, false);
	}
	else if (obj.attachEvent) {
		obj["e" + type + fn] = fn;
		obj[type + fn] = function () {
			obj["e" + type + fn](window.event);
		};
		obj.attachEvent("on" + type, obj[type + fn]);
	}
};

var pageCursorFinder = function (e) {
	var e = e || window.event;
	var xy = [];

	if (e.pageX) {
		xy[0] = e.pageX;
		xy[1] = e.pageY;
	}
	else if (e.clientX) {
		xy[0] = document.documentElement.scrollLeft + document.body.scrollLeft + e.clientX;
		xy[1] = document.documentElement.scrollTop + document.body.scrollTop + e.clientY;
	}

	return xy;
};

var show = function (e) {
	var myDiv = document.getElementById(this.className);
	var mouse = pageCursorFinder(e);

	var x = mouse[0];
	var y = mouse[1];

	switch(this.className)
	{
		case "mouseoverdiv1":
			x-= parseInt(myDiv.offsetWidth, 10) + 30;
			y-= (parseInt(myDiv.offsetHeight, 10) / 2);
		break;
		case "mouseoverdiv2":
			x-= (parseInt(myDiv.offsetWidth, 10) + 15);
			y-= (parseInt(myDiv.offsetHeight, 10) + 15);
		break;
		case "mouseoverdiv3":
			x-= (parseInt(myDiv.offsetWidth, 10) / 2);
			y-= (parseInt(myDiv.offsetHeight, 10) + 30);
		break;
		case "mouseoverdiv4":
			x+= 30;
			y-= (parseInt(myDiv.offsetHeight, 10) / 2);
		break;
		case "mouseoverdiv5":
			x-= (parseInt(myDiv.offsetWidth, 10) / 2);
			y+= 30;
		break;
		case "mouseoverdiv6":
			x-= (parseInt(myDiv.offsetWidth, 10) / 2);
			y+= 30;
		break;
		case "mouseoverdiv7":
			x-= (parseInt(myDiv.offsetWidth, 10) + 15);
			y+= 15;
		break;
	}

	myDiv.style.left = x + "px";
	myDiv.style.top = y + "px";
	myDiv.style.visibility = "visible";
};

var hide = function () {
	var areas = document.getElementById("mouseoverdivmap").getElementsByTagName("area");

	for (var i = 0; i < areas.length - 1; i++) {
		document.getElementById(areas[i].className).style.visibility = "hidden";
	}
};

var initialize = function () {
	var areas = document.getElementById("mouseoverdivmap").getElementsByTagName("area");

	for (var i = 0; i < areas.length - 1; i++) {
		var myDiv = document.getElementById(areas[i].className);
		myDiv.style.visibility = "hidden";
		myDiv.style.position = "absolute";
		myDiv.style.width = myDiv.getElementsByTagName("img")[0].width + "px";
		addEvent(areas[i], "mouseover", show);
		addEvent(areas[i], "mouseout", hide);
	}
};

addEvent(window, "load", initialize);