/*-----------------------------------------------*/
//home.js
/*-----------------------------------------------*/

function $(id) {
	return document.getElementById(id);
}

function addEvent(o, e, f, c) {
	(o.addEventListener) ? o.addEventListener(e, f, c) : o.attachEvent('on' + e, f);
}

function removeEvent(o, e, f, c) {
	(o.removeEventListener) ? o.removeEventListener(e, f, c) : o.detachEvent('on' + e, f);
}

function setOpacity (target, percent) {
	target.style.filter = 'alpha(opacity=' + (percent) + ')';
	target.style.MozOpacity = percent / 100;
	target.style.opacity = percent / 100;
	target.style.display = (percent == 0) ? 'none' : 'block';
}

//----------------------------

var nowPercent = 100;
var inTarget;
var outTarget;

function exClose(e) {
	(e.preventDefault) ? e.preventDefault() : e.returnValue = false;
	removeEvent($("close").getElementsByTagName("a")[0], "click", exClose, false);
	inTarget = $("navi");
	outTarget = $("explanation");
	fadeOut();
}

function exOpen(e) {
	(e.preventDefault) ? e.preventDefault() : e.returnValue = false;
	removeEvent($("theme").getElementsByTagName("a")[0], "click", exOpen, false);
	$("theme").getElementsByTagName("a")[0].className = "select";
	inTarget = $("explanation");
	outTarget = $("navi");
	fadeOut();
}

function fadeOut() {
	clearTimeout();
	nowPercent -= 5;
	setOpacity(outTarget, nowPercent)
	if (nowPercent > 0) {
		setTimeout(fadeOut, 50);
	}
	else {
		fadeIn();
	}
}

function fadeIn() {
	clearTimeout();
	nowPercent += 5;
	setOpacity(inTarget, nowPercent);
	if (nowPercent < 100) {
		setTimeout(fadeIn, 50);
	}
	else {
		if (inTarget === $('explanation')) {
			addEvent($("close").getElementsByTagName("a")[0], "click", exClose, false);		
		}
		else {
			addEvent($("theme").getElementsByTagName("a")[0], "click", exOpen, false);	
			$("theme").getElementsByTagName("a")[0].className = "";
		}
	}
}

addEvent(window, "load", function() {
	setOpacity($("explanation"), 0);
	addEvent($("theme").getElementsByTagName("a")[0], "click", exOpen, false);
}, false);