$(function () {
	$(".staff_img img").css({
		"cursor": "pointer"
	});

	$(".staff_profile")
		.hide()
		.css({
//			"opacity" : 0,
			 "z-index" : 1001,
			 "position" : "absolute",
			 "margin-top" : 20,
			 "margin-left" : 200/*,
			 "behavior" : "url(\"/ref/js/lib/iefix/iepngfix.htc\")" */
		})
	;
	
	$(".staff_img_move").hide();

	var default_pos = []; // 最初の位置保存用
	var move_pos = [
		{'top' : 290, 'left' :  25 },
		{'top' : 142, 'left' : 620 },
		{'top' : 134, 'left' : 692 },
		{'top' : 135, 'left' : 649 },
		{'top' : 284, 'left' :  54 },
		{'top' : 132, 'left' : 803 },
		{'top' : 149, 'left' : 746 }
	];
	var index = 0;
	
	var setHoverImage = function (object, index) {
		object.hover(
		function () {
			object.attr('src', '../ref/images/salon/staff/bg_staff_pattern0' + index + '_on.png');
		},
		function () {
			object.attr('src', '../ref/images/salon/staff/bg_staff_pattern0' + index + '.png');
		});
	};

	$(".staff_img img").each(function () {
		default_pos.push($(this).parent("div").position());
		setHoverImage($(this), default_pos.length);
	});
	
	$(".staff_img > p").css({'opacity':0, 'z-index': 1002});
	$(".staff_img img").hover(
		function() {
			$(this).next("p").stop().animate({'opacity':1}, 100);
		},
		function() {
			$(this).next('p').stop().animate({'opacity':0}, 100);
		}
	);

	$(".staff_img").click(function () {
		
		if ($(":animated").size() > 1) return;
		
		index = $(".staff_img").index($(this)); // 自分の添え字
		//console.log(index);

		$("#close").css("z-index", 1000).stop().show().animate({
			"opacity": 0.5
		},
		200);
		
		if ($.browser.msie)
		{
			$(".staff_img").animate({'opacity':0}, function(){$(".staff_img_move").show().animate({'opacity':1});});
			
			$("#profile0" + (index + 1)).css("height", 0).show().animate({
				"height": 750
			},
			500, "linear");
			
			$(".content:eq(1)").stop().animate({
				"height":  750
			},
			500, "easeOutExpo");

		}
		else
		{
			var $active_staff = $(".staff_img:eq(" + index + ")");
			var $deactive_staff = $(".staff_img:not(:eq(" + index + "))");
			
			$(".staff_img:eq(" + index + ") p").css({'visibility':'hidden'});
			
			// でっかくなる
			$active_staff.animate({
				"opacity": 0,
				"scale": 5
			},
			"normal", "swing", function () {
				//$(this).css("z-index", -1);
				$(this).hide();
			});
	
			// 端っこによける		
			$deactive_staff.each(function () {
				$(this).animate({
					"scale": 0.33,
					"top": move_pos[$(".staff_img").index($(this))].top,
					"left": move_pos[$(".staff_img").index($(this))].left
				},
				750, "swing");
			});
			
			// プロフィールを出す
			$("#profile0" + (index + 1)).css("opacity", 0).show().animate({
				"opacity": 1
			},
			500, "linear");
		}
		
		// 表示高さ変更
		$(".content_wrap").stop().animate({
			"height":  750
		},
		500, "easeOutExpo");
	});

	var setDefaultPosition = function () {

		if ($.browser.msie) {
			$("#profile0" + (index + 1)).animate({
			"height": 0
			}, function() { $(this).hide(); });
			
			$(".staff_img_move").animate({'opacity':0}, function() {$(".staff_img").animate({'opacity':1});} ).hide();
		}
		else
		{
			$(".staff_profile").animate({
			"opacity": 0
			}, function() { $(this).hide(); });
			
			$(".staff_img").each(function(){
				var index = $(".staff_img").index($(this));
				var pos = default_pos[index];
				
				$(".staff_img:eq(" + index + ")").animate({
					"top": pos.top,
					"left": pos.left,
					"opacity": 1,
					"scale": 1
				}, 750, "swing")
				.show();
			});
			
			$(".staff_img p").css({'visibility':'visible'});
		}

/*
		$(".content_wrap").stop().animate({
			"height": $(".staff").height()
		},
		500, "swing");
*/

		if ($.browser.msie)
		{
			$(".staff_img").height(170);
		}

		$("#close").css("z-index", -1).animate({
			"opacity": 0
		}, 1000 ).hide();
	};
	
	
	$("#profile01").before(
	$("<div></div>").css({
		"position": "absolute",
		"top": $(".staff").position().top,
		"left": $(".staff").position().left,
		"width": $(".staff").width(),
		"height": $(".staff").height(),
		"background-color": "#ffffff",
		"opacity": 0,
		"z-index": -1
	}).attr("id", "close").click(function () {
		if ($(":animated").size() > 1) return;
		setDefaultPosition();
	}));
});