$(document).ready(function() {
	$('#carouselArea .controller').prepend('<ul id="carousel-nav"></ul>');

	$('.carousel').cycle({
		fx: "fade",
		pager:  '#carousel-nav',
		timeout: 5000,
		timeoutFn: function(currSlideElement, nextSlideElement, options, forwardFlag) {
			// first
			if (options.currSlide == 0) {
				options.fx = 'fade';
				options.speed = 1700;
				return 500;
			}
			// last
			if (options.nextSlide == 0) {
				options.fx = 'fade';
				options.speed = 1700;
			}
			// second
			else if (options.nextSlide == 1 || options.nextSlide == 2) {
				options.fx = 'fade';
				options.speed = 1700;
				return 6000;
			}
			// other
			else {
				options.fx = 'turnUp';
				options.speed = 800;
			}
			
			return 8000;
		},
		before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
			if (options.nextSlide == 0 ||
				options.nextSlide == 1 && $('#whats-ark').css('display') != 'none') {
				$('#whats-ark').fadeOut(800);
			}
			if (options.nextSlide == 2 && $('.whats-ark-dummy').css('display') == 'none') {
				$('.whats-ark-dummy').show();
			}
			if (options.nextSlide == 3 || options.nextSlide == 4) {
				$('#whats-ark').fadeIn(800);
			}
		},
		after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
			if (options.currSlide == 2) {
				$('#whats-ark').show();
				$('.whats-ark-dummy').hide();
			}
			if (options.currSlide == 3) {
				$('.whats-ark-dummy').show();
			}
		},
		onPagerEvent: function(zeroBasedSlideIndex, slideElement,options) {
			options.fx ='turnUp';
		},
		pagerAnchorBuilder: function(index, DOMelement) {
			// first
			if (index == 0) {
				return '<li><a href="#" style="display:none"> </a></li>';
			}
			return '<li id="nav-'+index+'"><a href="#">スライド'+index+'を表示</a></li>';
		}
	});

	$('.stop').click(function() { 
		$('.carousel').cycle('pause'); 
		
		$(".start").css("display", "block");
		$(".stop").css("display", "none");
	});

	$('.start').click(function() { 
		$('.carousel').cycle('resume'); 
		
		$(".start").css("display", "none");
		$(".stop").css("display", "block");
	});


  // マウスオーバーでエフェクト
  $("a.fade img").hover(function () {
    $(this).stop().fadeTo(200, 0.6);
  }, function () {
    $(this).stop().fadeTo(500, 1.0);
  });
  // まとめてエフェクト
  $("a.fade_grp1").hover(function () {
    $(this).closest("ul").find(".fade_grp1 img").stop().fadeTo(200, 0.8);
  }, function () {
    $(this).closest("ul").find(".fade_grp1 img").stop().fadeTo(500, 1.0);
  });
});