// JavaScript Document


;(function(jQuery) {
	// メインビジュアルアニメーション処理

	jQuery.fn.spMainVisual = function(options) {
		var options = jQuery.extend(
			{},
			jQuery.fn.spMainVisual.defaults, 
			options
		);
		// 中央にあるindex
		var current = 0;
		
		var animating = false;


		
		var setCurrent = function(num, duration) {
			if (options.arrButton[current]) {
				$(options.arrButton[current]).hide();
			}
			animating = true;
			var _current = getVisual(getIndex(num));
			var _index = getIndex(num);
			var w = _current.width();
			var h = _current.height();
			var x = (options.width - w) / 2 + options.padding.left;
			var y = (options.height - h) / 2;
			_current.animate(
				{
					opacity: 1,
					left: x,
					top: y
				},
				{
					duration: duration,
					easing: "easeOutCubic",
					complete: function() {
						if (w == options.width) {
							if (options.arrButton[_index]) {
								$(options.arrButton[_index]).fadeIn();
							}
							animating = false;
							return;
						}
						_current.animate(
							{
								width: options.width,
								height: options.height,
								left: options.padding.left,
								top: 0
							},
							{
								duration: duration / 3 * 2,
								easing: "easeInCubic",
								complete: function(){
									if (options.arrButton[_index]) {
										$(options.arrButton[_index]).fadeIn();
									}
									animating = false;
								}
							}
						);
					}
				}
			);
		};
		
		var size = {
			w: options.width * options.wait.scale,
			h: options.height * options.wait.scale
		};

		var position = {
			farRight: { x: 0, y: 0},
			right:    { x: 0, y: 0},
			farLeft:  { x: 0, y: 0},
			left:     { x: 0, y: 0}
		};
		position.right.x = options.width + options.padding.left;
		position.farRight.x = position.right.x + size.w;
		
		position.left.x = options.padding.left - size.w;
		position.farLeft.x = position.left.x - size.w;
		
		position.left.y = position.farLeft.y = position.right.y = position.farRight.y = (options.height - size.h) / 2;
		
		
		var move = function(num, duration, position) {
			if (!duration) {
				getVisual(getIndex(num)).hide().css({
					width: size.w + "px",
					height: size.w + "px",
					left: position.x,
					top: position.y
				});
				return;
			}
			getVisual(getIndex(num)).animate(
				{
					width: size.w + "px",
					height: size.h + "px",
					top: position.y + "px",
					left: position.x + "px",
					opacity: options.wait.alpha
				},
				{
					duration: duration,
					easing: "easeOutCubic"
				}
			);
			
		}
		
		var getIndex = function(num) {
			var len = options.arrVisual.length;
			var index = (current + num) % len;
			if (index < 0) {
				index += len;
			}
			return index;
		};
		var getVisual = function(index) {
			return $(options.arrVisual[index]);
		};
		
		$(options.lBtn).hover(
			function(){
				if (!animating) {
					$(getVisual(getIndex(-1))).animate(
						{
							opacity: options.hover.alpha
						},
						{
							duration: options.hover.duration,
							easing: "swing"
						}
					);
				}
			},
			function(){
				if (!animating) {
					$(getVisual(getIndex(-1))).animate(
						{
							opacity: options.wait.alpha
						},
						{
							duration: options.hover.duration,
							easing: "swing"
						}
					);
				}
			}
		).click(function(){
			if (animating) {
				return;				
			}
			move(-2, 0, position.farLeft);
			setTimeout(
				function(){
					setCurrent(-1, options.animation.duration);
					move(0, options.animation.duration, position.right);
					move(-2, options.animation.duration, position.left);
					move(1, options.animation.duration, position.farRight);
					current = getIndex(-1);
				},
				0
			);
		});;
		$(options.rBtn).hover(
			function(){
				if (!animating) {
					$(getVisual(getIndex(1))).animate(
						{
							opacity: options.hover.alpha
						},
						{
							duration: options.hover.duration,
							easing: "swing"
						}
					);
				}
			},
			function(){
				if (!animating) {
					$(getVisual(getIndex(1))).animate(
						{
							opacity: options.wait.alpha
						},
						{
							duration: options.hover.duration,
							easing: "swing"
						}
					);
				}
			}
		
		).click(function(){
			if (animating) {
				return;				
			}
			move(2, 0, position.farRight);
			setTimeout(
				function(){
					setCurrent(1, options.animation.duration);
					move(0, options.animation.duration, position.left);
					move(2, options.animation.duration, position.right);
					move(-1, options.animation.duration, position.farLeft);
					current = getIndex(1);
				},
				0
			);
		});
		


		setCurrent(0, options.wait.duration);
		move(1, options.wait.duration, position.right);
		move(-1, options.wait.duration, position.left);
	};
	jQuery.fn.spMainVisual.defaults = {
		lBtn: "#main_visual_left",
		rBtn: "#main_visual_right",
		lMask: "#main_visual_left_mask",
		rMask: "#main_visual_right_mask",
		arrVisual:["#main_visual_01", "#main_visual_02", "#main_visual_03", "#main_visual_04"],
		arrButton:["", "#visual_02_link", "#visual_03_link", "#visual_04_link"],
		padding: {top: 0, right: 20, bottom: 0, left: 20},
		width: 1000,
		height: 400,
		animation: {
			duration: 600
		},
		wait: {
			duration: 600,
			scale: 0.8,
			alpha: 0.4
		},
		hover: {
			duration: 400,
			alpha: 0.8
		}
	};


	jQuery.fn.spTopRollover = function() {
		var selector = $(this).selector;
		var duration = 300;
		var alpha = 0.6;
		$(this).hover(
			function() {
				$(selector).stop();
				$(this).fadeTo(duration, 1);
				$(selector).not(this).fadeTo(duration, alpha);
				/*
				$(this).animate(
					{
						backgroundColor: '#FFFFFF',
						opacity: alpha
					},
					{
						duration: duration
					}
				);
				*/
			},
			function() {
				$(selector).not(this).fadeTo(duration, 1);
/*			
				$(this).animate(
					{
						backgroundColor: '#000000',
						opacity: 1
					},
					{
						duration: duration
					}
				);
*/
			}
		);
	};

})(jQuery);