/**
 * carousel.js
 * http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/
 */

$(document).ready(function() {
	var easing = 'easeOutExpo';
	$('#cnav').show();
	$('#cnav li:first a').addClass('active');
	
	// 総画像幅取得
	var imageWidth = $('#carousel').width();
	var imageSum = $('#image li').size();
	var imageReelWidth = imageWidth * imageSum;
	$('#carousel ul').css({ 'width' : imageReelWidth });
	
	rotate = function() {
		var triggerID = $active.attr('rel') - 1;
		var image_reelPosition = triggerID * imageWidth;
		$('#cnav li a').removeClass('active');
		$active.addClass('active');
		$('#carousel ul').css({ opacity: 0, left: -image_reelPosition })
		.animate({ opacity: 1 }, 1000, easing);
	}; 
	
	rotateSwitch = function() {
		play = setInterval(function() {
			$active = $('#cnav li a.active').parent('li').next('li').find('a');
			if ( $active.length === 0) {
				$active = $('#cnav li:first a');
			} rotate();
		}, 6000);
	};
	rotateSwitch();
	
	// On Hover
	$('#carousel ul a').hover(function() {
		clearInterval(play);
	}, function() {
		rotateSwitch();
	});	
	
	// On Click
	$('#cnav a').click(function() {
		$active = $(this);
		clearInterval(play);
		rotate();
		rotateSwitch();
		return false;
	});
});