function observe(target, type, listener) {
    if (target.addEventListener) target.addEventListener(type, listener, false);
    else if (target.attachEvent) target.attachEvent('on' + type, function() { listener.call(target, window.event); });
    else target['on' + type] = function(e) { listener.call(target, e || window.event); };
}

function overSet1(){
	this.src = this.src.replace('\.png','_o\.png');
}

function outSet1(){
	this.src = this.src.replace('_o','');
}

function overSet2(){
	document.getElementById("nagare3").src = document.getElementById("nagare3").src.replace('\.png','_o\.png');
	document.getElementById("nagare4").src = document.getElementById("nagare4").src.replace('\.png','_o\.png');
}

function outSet2(){
	document.getElementById("nagare3").src = document.getElementById("nagare3").src.replace('_o','');
	document.getElementById("nagare4").src = document.getElementById("nagare4").src.replace('_o','');
}

function closebox(){
	document.getElementById("popbox1").style.display = "none";
	document.getElementById("popbox2").style.display = "none";
	document.getElementById("popbox3").style.display = "none";
	document.getElementById("popbox-bg").style.display = "none";
	document.getElementById("popbox-bx").style.display = "none";
}

function linkSet1(){
	document.getElementById("popbox-bx").style.display = "block";
	document.getElementById("popbox-bx").style.top = "400px";
	document.getElementById("popbox1").style.display = "block";
	document.getElementById("popbox-bg").style.display = "block";
	observe(document.getElementById("popbox-bg"), 'mousedown', closebox);
}

function linkSet2(){
	document.getElementById("popbox-bx").style.display = "block";
	document.getElementById("popbox-bx").style.top = "500px";
	document.getElementById("popbox2").style.display = "block";
	document.getElementById("popbox-bg").style.display = "block";
	observe(document.getElementById("popbox-bg"), 'mousedown', closebox);
}

function linkSet3(){
	document.getElementById("popbox-bx").style.display = "block";
	document.getElementById("popbox-bx").style.top = "600px";
	document.getElementById("popbox3").style.display = "block";
	document.getElementById("popbox-bg").style.display = "block";
	observe(document.getElementById("popbox-bg"), 'mousedown', closebox);
}

function naviSet1(navi){
	observe(document.getElementById(navi), 'mouseover', overSet1);
	observe(document.getElementById(navi), 'mouseout', outSet1);
	observe(document.getElementById(navi), 'mousedown', linkSet1);
}

function naviSet2(navi){
	observe(document.getElementById(navi), 'mouseover', overSet2);
	observe(document.getElementById(navi), 'mouseout', outSet2);
	observe(document.getElementById(navi), 'mousedown', linkSet2);
}

function naviSet3(navi){
	observe(document.getElementById(navi), 'mouseover', overSet1);
	observe(document.getElementById(navi), 'mouseout', outSet1);
	observe(document.getElementById(navi), 'mousedown', linkSet3);
}

window.onload = function(){
	naviSet1("nagare2");
	naviSet2("nagare3");
	naviSet2("nagare4");
	naviSet3("nagare5");
}