var animationTime = 600;
var box = "<img class='focus_box' style='position:absolute; top:-2px; left:-2px; width:105px; height:158px; z-index:0; border:2px solid #ffffff' src='../../img/box_sihirai.gif' />"

$(function() {

	$("#list2").hide();
	unsetMouseEvent($("#thumb > .item1"));
	setMouseEvent($("#thumb > .item2"));
	$("#thumb").removeClass("animation");
	$(".lineup a").before(box);
	$(".focus_box").css({opacity:0});
	$(".lineup a").mouseover(function(){
		var myshelf = this.parentNode;
		var mybox = $(myshelf).children()[0];
		$(mybox).css({opacity:1});
		var photo = $(this).children()[0];
		$(photo).css({opacity:0.7});
	}).mouseout(function(){
		var myshelf = this.parentNode;
		var mybox = $(myshelf).children()[0];
		$(mybox).css({opacity:0});
		var photo = $(this).children()[0];
		$(photo).css({opacity:1});
	});
});

function unsetMouseEvent(target) {
	target.css({opacity:0.2, cursor:"auto"});
	target.unbind();
}

function setMouseEvent(target) {
	target.css({opacity:0.9, cursor:"pointer"});
	target.click(function(){
		changeLineUp($(this).attr("class"));
	});
	target.mouseover(function(){
		$(this).css({opacity:1});
	}).mouseout(function(){
		$(this).css({opacity:0.9});
	});
}

function changeLineUp(lineup) {
	switch(lineup) {
		case "item1":
			$("#list1").animate({opacity:"show"}, {duration:animationTime, easing:"easeInQuad"});
			$("#list2").animate({opacity:"hide"}, {duration:animationTime, easing:"easeOutQuad"});
			unsetMouseEvent($("#thumb > .item1"));
			setMouseEvent($("#thumb > .item2"));
			break;
		case "item2":
			$("#list1").animate({opacity:"hide"}, {duration:animationTime, easing:"easeOutQuad"});
			$("#list2").animate({opacity:"show"}, {duration:animationTime, easing:"easeInQuad"});
			setMouseEvent($("#thumb > .item1"));
			unsetMouseEvent($("#thumb > .item2"));
			break;
	}
}