var img_n;
var img_c;
function moveWhite(){
	$(".block-white").each(function(index){
		var top=$(this).position().top;
		if(index==0 || index==2){
			if(top<186 && top>136){
				$(this).css("top", top-8+"px");
			}else{
				$(this).css("top", top-16+"px");
			}
		}else{
			if(top<186 && top>136){
				$(this).css("top", top+8+"px");
			}else{
				
				$(this).css("top", top+16+"px");
			}
		}
	});
	if($("#white3").position().top>=155 && $("#white3").position().top<=171 ){
		$(".block-white").css("top", "163px");
			setTimeout(function(){
				$("#fx .block-normal").css("display", "block");
				$("#fx .block-normal").each(function(index){
					if(index==1||index==3){
						$("#normal"+index).css("left",(115+250*index)+"px").css("top","0px").css("background","url("+$('#photo'+img_n).attr('src')+") no-repeat -"+(115+250*index)+"px 0px").css("width", "20px").css("height", "20px");
					}else{
						$("#normal"+index).css("left",(115+250*index)+"px").css("top","327px").css("background","url("+$('#photo'+img_n).attr('src')+") no-repeat -"+(115+250*index)+"px -327px").css("width", "20px").css("height", "20px");
					}
				});
				moveNormal();
			}, 200);
		return;
	}else{
		setTimeout(function(){
			moveWhite();
		}, 45);
	}
}
function moveNormal(){
	$(".block-normal").each(function(index){
		var top=$(this).position().top;
		var left=$(this).position().left;
		if(index==0 || index==2){
			if(top<186 && top>136){
				$(this).css("top", top-8+"px").css("background-position","-"+left+"px -"+(top-8)+"px");
			}else{
				$(this).css("top", top-16+"px").css("background-position","-"+left+"px -"+(top-16)+"px");
			}
		}else{
			if(top<186 && top>136){
				$(this).css("top", top+8+"px").css("background-position","-"+left+"px -"+(top+8)+"px");
			}else{
				$(this).css("top", top+16+"px").css("background-position","-"+left+"px -"+(top+16)+"px");
			}
		}
	});
	
	if($("#normal3").position().top>=155 && $("#normal3").position().top<=171 ){
		$(".block-normal").css("top", "163px");
		$(".block-normal").each(function(index){
			$(this).css("background-position","-"+$(this).position().left+"px 50%");
		});
		$('.block-white').css("display", "none");
		setTimeout(function(){
			resizeHeight();
		}, 80);
		return;
	}else{
		setTimeout(function(){
			moveNormal();
		}, 50);
	}
}
function resizeHeight(){
	if($(".block-normal").position().top<25 || $(".block-normal").position().top>150){
		$(".block-normal").css("top", $(".block-normal").position().top-7);
		$(".block-normal").height($(".block-normal").height()+14);
	}else{
		$(".block-normal").css("top", $(".block-normal").position().top-13);
		$(".block-normal").height($(".block-normal").height()+26);
	}
	if($(".block-normal").height()>340){
		$(".block-normal").height(346);
		$(".block-normal").css("top", 0);
		resizeWidth();
		return;
	}else{
		setTimeout(function(){
			resizeHeight();
		}, 50);
	}
}
function resizeWidth(){
	$(".block-normal").each(function(index){
		var width=$(this).width();
		var left=$(this).position().left;
		if(width>235 && width<40){
			$(this).width(width+8).css("left", left-4).css("background-position", "-"+(left-4)+"px 50%");
		}else{
			$(this).width(width+16).css("left", left-8).css("background-position", "-"+(left-8)+"px 50%");
		}
	});
	if($("#normal3").width()>244){
		$(".block-normal").width(250);
		$(".block-normal").each(function(index){
			$(this).css("background-position","-"+index*250+"px 50%").css("left", index*250);
		});
		$("#fx img").each(function(){
			$(this).addClass("hide");
		});
		$("#fx").css("background","url("+$("#photo"+img_n).attr("src")+") no-repeat 0 50%");
		$(".block-normal").css("display", "none");
		setTimeout(function(){
			photoSlider();
		}, 3000);
		return;
	}else{
		setTimeout(function(){
			resizeWidth();
		}, 45);
	}
}
function photoSlider(){
	if(img_n>=(img_c-1)){
		img_n=0;
	}else{
		img_n++;
	}
	$("#fx .block-white").css("display", "block").each(function(index){
		if(index==1||index==3){
			$("#white"+index).css("left",(115+250*index)+"px").css("top","0px");
		}else{
			$("#white"+index).css("left",(115+250*index)+"px").css("top","327px");
		}
	});
	moveWhite();
}
$(function(){
	if($("#fx").length){
		img_n = 0;
		img_c = $("#fx > img").length;
		$("#fx img").each(function(index){
			$(this).attr("id","photo"+index);
		});
		for(var i=0;i<4;i++){
			$("#fx").append("<div id='white"+i+"' class='block-white'></div>");
			if(i==1||i==3){
				$("#white"+i).css("left",(115+250*i)+"px").css("top","0px");
			}else{
				$("#white"+i).css("left",(115+250*i)+"px").css("top","327px");
			}
		}
		for(var i=0;i<4;i++){
			$("#fx").append("<div id='normal"+i+"' class='block-normal'></div>");
			if(i==1||i==3){
				$("#normal"+i).css("left",(115+250*i)+"px").css("top","0px").css("background","url("+$('#photo'+img_n).attr('src')+") no-repeat -"+(115+250*i)+"px 0px");
			}else{
				$("#normal"+i).css("left",(115+250*i)+"px").css("top","327px").css("background","url("+$('#photo'+img_n).attr('src')+") no-repeat -"+(115+250*i)+"px -327px");
			}
		}
		setTimeout(function(){
			photoSlider();
		}, 3000);
	}
});