// JavaScript Document

var iconimg = '<figure id="topimgselect"><img src="img/contents/icon_arrow.png" width="15" height="10"></figure>';

var point = new Array();
point.push({key:2, top:235, left:310});
point.push({key:1, top:235, left:105});
point.push({key:3, top:235, left:515});

var setKey = 2;

$(function() {
	var firstFlg = true;
	var cnt = 0;
	$('.cycle img').each(function() {
		cnt++;
		$(this).attr("id", "topimg" + cnt);
		if(firstFlg == false) {
			$(this).hide();
		}
		firstFlg = false;
	});
	
	cnt = 0;
	$("#hdrLinks li").each(function() {
		cnt++;
		$(this).data("key", cnt);
	});
	$('.cycle').parent().css("position", "relative").append(iconimg);
	$("#topimgselect").css("position", "absolute").css("top", point[0].top + "px").css("left", point[0].left + "px").css("width", "15px").css("height", "10px").css("line-height", 0);
	setTopimgchange();
});

function setTopimgchange() {
	var timer = setInterval(function() {
		if(setKey == point.length) {
			setKey = 1;
		} else {
			setKey++;
		}
		getTopimgchange();
	}, 3000);
	
	$("#hdrLinks li").mouseover(function() {
		timer = clearTimeout(timer);
		setKey = $(this).data("key");
		getTopimgchange();
	}).mouseout(function() {
		timer = setInterval(function() {
			if(setKey == point.length) {
				setKey = 1;
			} else {
				setKey++;
			}
			getTopimgchange();
		}, 3000);
	});
}

function getTopimgchange() {
	for(var i = 0; i < point.length; i++) {
		if(point[i].key == setKey) {
			$("#topimgselect").css("top", point[i].top + "px").css("left", point[i].left + "px");
			$("#topimg" + (i + 1)).fadeIn("slow");
		} else {
			$("#topimg" + (i + 1)).hide();
		}
	}
}