// common global variable
var tranceparence = 100, variate = 10, visible = true;
var timer;

function preload() {
	var img_work = new Image();
	var img_geek = new Image();
	var img_lab  = new Image();
	img_work.src = 'images/home/pickup/main_work.png';
	img_geek.src = 'images/home/pickup/main_geek.png';
	img_lab.src  = 'images/home/pickup/main_lab.png';
}

function changeImg(key) {
	resetBtn();
	selectBtn(key);
	timer = setInterval('main(\'' + key + '\');', 50);
}

function resetBtn() {
	var target = document.getElementById('pickup_navigator');
	var lists  = target.getElementsByTagName('li');

	for(i = 0; i < lists.length; ++i) {
		lists[i].setAttribute('onClick', ''); // prevent interrupt
		lists[i].firstChild.setAttribute('src', 'images/home/pickup/btn_off.png');
		lists[i].firstChild.setAttribute('alt', 'unselected');
	}
}

function selectBtn(key) {
	var target_selected = document.getElementById('pickup_' + key);
	target_selected.firstChild.setAttribute('src', 'images/home/pickup/btn_on.png');
	target_selected.firstChild.setAttribute('alt', 'selected');
}

function main(key) {
	if(visible == true) {
		tranceparence -= variate;
		changeOpacity(tranceparence);

		if(tranceparence == 0) {
			visible = false;
			document.recommend.setAttribute('src', 'images/home/pickup/main_' + key + '.png');
			changeLink(key);
		}
	}
	else {
		tranceparence += variate;
		changeOpacity(tranceparence);

		if(tranceparence == 100) {
			visible = true;
			clearInterval(timer);
			resetOnClick();
		}
	}
}

function changeOpacity(op) {
	// IE
	document.recommend.style.filter = 'alpha(opacity=' + (op) + ')';
	// Firefox
	document.recommend.style.MozOpacity = op / 100;
	// Chrome, Safari, Opera
	document.recommend.style.opacity = op / 100;
}

function changeLink(key) {
	var element = document.getElementById('recommendation');
	var target = element.getElementsByTagName('a');
	var link;
	switch(key) {
		case 'company':
			link = 'http://health2con.jp/';
			break;
		case 'work':
			link = 'works/smart_city.html';
			break;
		case 'geek':
			link = 'http://mocapdata.com/';
			break;
		case 'lab':
			link = 'company';
			break;
	}
	target[0].setAttribute('href', link);
}

// reset javascript function
function resetOnClick() {
	var target = document.getElementById('pickup_navigator');
	var lists  = target.getElementsByTagName('li');

	lists[0].setAttribute('onClick', 'changeImg(\'company\');');
	lists[1].setAttribute('onClick', 'changeImg(\'work\');');
	lists[2].setAttribute('onClick', 'changeImg(\'geek\');');
	lists[3].setAttribute('onClick', 'changeImg(\'lab\');');
}