$(document).ready(function() {
	level1_init('img.navi-1');
	level2_init('div.navi-2');
});

function level1_init(domChunk) {
	$('.navi-1').hover(function() {
		var currentImg = $(this).attr('src');
		$(this).attr('src', $(this).attr('hover'));
		$(this).attr('hover', currentImg);
	}, function() {
		var currentImg = $(this).attr('src');
		$(this).attr('src', $(this).attr('hover'));
		$(this).attr('hover', currentImg);
	});
}
function level2_init(domChunk) {
	$(domChunk).hover(function() {
		var popupParentId = this.id;
		var popupId = "";
		var naviWidth = $('#navi').width() + "px";
		var naviLeft = document.getElementById('navi').offsetLeft;
		var navi2Top = getPositionTop(popupParentId);
		var navi2Left = document.getElementById(popupParentId).offsetLeft;
		var navi2Height = document.getElementById(popupParentId).offsetHeight;
		var navi2Width = document.getElementById(popupParentId).offsetWidth;

		popupId = popupParentId.replace(/navi-2/, "navi-3");
		if (document.getElementById(popupId)) {
			document.getElementById(popupId).style.width = naviWidth;
			document.getElementById(popupId).style.top = navi2Top + navi2Height;
			document.getElementById(popupId).style.left = naviLeft;
			document.getElementById(popupId + '-inner').style.width = (navi2Left + navi2Width - naviLeft) + "px";
			document.getElementById(popupId).style.display = "block";
			return false;
		}
	}, function() {
		var popupParentId = this.id;
		var popupId = "";
		popupId = popupParentId.replace(/navi-2/, "navi-3");
		if (document.getElementById(popupId)) {
			document.getElementById(popupId).style.display = "none";
			return false;
		}
	});
}