/**
 *---------------------------
 * masked PR Animation
 * by jeia.co.jp
 *---------------------------
 */

jQuery.extend( jQuery.easing,
{
	easeOutCubic: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t + 1) + b;
	}
});

new function() {
	
	// config
	var areaSelector = '#branding_alt';
	var naviSelector = '#branding_navi ul';
	
	var areaImages = [
		new areaImage( './top/branding_images/news_000017.jpg', 'http://www.wasshoy-mailform.com/' ),
		new areaImage( './top/branding_images/web.jpg', '/service/web/' ),
		new areaImage( './top/branding_images/system.jpg', '/service/system/' ),
		new areaImage( './top/branding_images/netshop.jpg', '/service/netshop/' ),
		new areaImage( './top/branding_images/twitter.jpg', '/service/system/twitter.html' )
	];
	
	var checkInterval = 300;
	var playInterval = 8000;
	var switchTime = 1200;
	var switchDelay = 120;
	
	// stats
	var $area = null;
	var $navi = null;
	var timer = null;
	var animating = true;
	var imageClass = 'image';
	var selectedClass = 'selected';
	
	
	// ready
	if ( typeof jQuery == 'undefined' ) {
		return;
	}
	
	$(document).ready( function() {
		init();
	});
	
	
	/**
	 * init
	 */
	function init() {
		
		$area = jQuery( areaSelector );
		$navi = jQuery( naviSelector );
		
		if ( ! $area.length || ! $navi.length ) {
			return;
		}
		
		jQuery.each( areaImages, function( _i, _val ) {
			addImage( _i, _val );
			addNavi( _i );
		});
		
		checkLoad();
	}
	
	/**
	 * addImage
	 */
	function addImage( _num, _img ) {
		
		var html = [
			'<p class="', imageClass ,'" id="',imageClass,'-',_num,'">',
				'<a href="', _img.href, '">',
					'<img src="', _img.src, '" alt="" />',
				'</a>',
			'</p>',
		].join('');
		
		$area.append( html ).
		find( '.'+(imageClass)+':last' ).css({
			display: 'block',
			position: 'absolute',
			left: '-9999px',
			top: '-9999px'
		});
	}
	
	/**
	 * addNavi
	 */
	function addNavi( _num ) {
		
		var html = [
			'<li>',
				'<a href="#',imageClass,'-',_num,'">PR</a>',
			'</li>'
		].join('');
		
		$navi.append( html );
		
		var w = $navi.children( 'li' ).width() * (_num + 1);
		
		$navi.css({
			width: w + 'px'
		});
	}
	
	/**
	 * checkLoad
	 */
	function checkLoad() {
		
		var complete = true;
		
		$area.find( '.'+imageClass ).each( function() {
			if ( ! jQuery(this).width() ) {
				complete = false;
			}
		});
		
		if ( complete ) {
			playImage();
		}
		else {
			setTimeout( checkLoad, checkInterval );
		}
	}
	
	/**
	 * playimage
	 */
	function playImage() {
		$area.find( '.'+imageClass ).css({
			left: '0px',
			top: '0px'
		}).hide();
		
		$navi.find( 'li a' ).
		bind( 'click', onClickNavi );
		
		var href = $navi.find( 'li a:first' ).attr( 'href' );
		var key = href.substr( href.indexOf( '#' ) );
		
		timer = setTimeout( function() {
			show( key );
		}, 1200 );
	}
	
	/**
	 * onClickNavi
	 */
	function onClickNavi( _e ) {
		
		if ( jQuery(this).hasClass( selectedClass ) ) {
			return false;
		}
		
		var href = jQuery(this).attr( 'href' );
		var key = href.substr( href.indexOf( '#' ) );
		
		if ( ! animating ) {
			show( key );
		}
		
		try {
			jQuery(this).get(0).blur();
		}catch(_e){}
		
		return false;
	}
	
	/**
	 * showNext
	 */
	function showNext() {
		
		animating = true;
		
		var $selected = $navi.find( 'li a.' + selectedClass );
		
		if ( ! $selected.length ) {
			return;
		}
		
		var $next = $selected.parent().next().find( 'a' );
		
		if ( ! $next.length ) {
			$next = $navi.find( 'li a:first' );
		}
		
		var href = $next.attr( 'href' );
		var key = href.substr( href.indexOf( '#' ) );
		
		show( key );
	}
	
	/**
	 * show
	 */
	function show( _key ) {
		
		animating = true;
		
		if ( timer ) {
			clearTimeout( timer );
		}
		
		// select
		$navi.find( 'li a' ).
		removeClass( selectedClass ).
		each( function() {
			var href = jQuery( this ).attr( 'href' );
			var key = href.substr( href.indexOf( '#' ) );
			
			if ( key == _key ) {
				$(this).addClass( selectedClass );
				return;
			}
		});
		
		var $prev = $area.find( 'p:last' ).stop();
		var $next = $area.find( _key ).stop();
		
		if ( $prev.get(0) != $next.get(0) ) {
			
			setTimeout( function() {
				$prev.animate({
					left: ( $prev.width() * 0.7 ) + 'px'
				}, switchTime, 'easeOutCubic' );
			}, switchDelay );
			
			$next.appendTo( $area.get(0) ).
			css({
				left: '-300px',
				top: '0px',
				width: '0px'
			}).
			animate({
				left: '0px',
				width: '100%'
			}, switchTime, 'easeOutCubic', showComplete );
		}
	}
	
	function showComplete() {
		
		animating = false;
		
		timer = setTimeout( function() {
			showNext();
		}, playInterval );
	}
	
	/**
	 * areaImage Class
	 */
	function areaImage( _image, _url ) {
		this.src = _image;
		this.href = _url;
		
		return this;
	}
};