(function($) {

	$.fn.worldPageEffect = function(callback) {
		var $element = $(this);
		var gWait = 0;
		$element.children().css({visibility: 'hidden'});
		
		var to = function(){
			var f = Array.prototype.shift.apply(arguments);
			args = arguments;
			return setTimeout(function() { f.apply(null, args) }, gWait);
		}
		var transform = function(){
			var i = 0, L = $element.children().length;
			to(function f(fin){
				if( !$( $element.children()[i] ).attr('wait') ){
					gWait = 500;
				}
				else{
					gWait = parseInt( $( $element.children()[i] ).attr('wait') );
				}
				if (!(i < L)){
					return fin();
				}
				//============================================================
				// 表示重ね位置の調整
				//
				if( $( $element.children()[i] ).attr('zindex') ){
					$( $element.children()[i] ).css({
						zIndex: $( $element.children()[i] ).attr('zindex')
					});
				}
				
				//============================================================
				// エフェクト処理一覧
				//
				// fadeIn
				// moveRightIn
				// moveLeftIn
				// moveTopIn
				// moveBottomIn
				// changeImage
				//
				
				//------------------------------------------------------------
				// エフェクト設定
				//
				var effect_type = $( $element.children()[i] ).attr('effect'),
					timer = parseInt($( $element.children()[i] ).attr('timer')),
					move_position = 40,
					move_speed = 1000,
					posAfter,
					posBefore
				;
				
				//IE判別
				var isMSIE = /*@cc_on!@*/false;
				
				//------------------------------------------------------------
				// fadeIn
				//
				// ex:
				// <div class="absolute" style="top: 0px; left: 0px;" effect="fadeIn"><img src="xxx.png" alt=""></div>
				//
				if( effect_type === 'fadeIn' ){
					$( $element.children()[i] )
					.css({ visibility: 'visible', left: $( $element.children()[i] ).attr('left') + 'px', top: $( $element.children()[i] ).attr('top') + 'px' })
					.hide().fadeIn();
				}
				
				//------------------------------------------------------------
				// moveRightIn
				//
				// ex:
				// <div class="absolute" style="top: 0px; left: 0px;" effect="moveRightIn"><img src="xxx.png" alt=""></div>
				//
				if( effect_type.match(/moveRightIn/) ){
					posAfter = parseInt( $( $element.children()[i] ).attr('left') );
					posBefore = posAfter + move_position;
					
					if( isMSIE ){
						$( $element.children()[i] )
							.css({ left: posBefore + 'px', top: $( $element.children()[i] ).attr('top') + 'px', visibility: 'visible' })
							.animate({ left: posAfter + 'px' }, move_speed)
						;
					}
					else{
						$( $element.children()[i] )
							.css({ left: posBefore + 'px', top: $( $element.children()[i] ).attr('top') + 'px', opacity: 0, visibility: 'visible' })
							.animate({ left: posAfter + 'px', opacity: 1 }, move_speed)
						;
					}
				}
				
				//------------------------------------------------------------
				// moveLeftIn
				//
				// ex:
				// <div class="absolute" style="top: 0px; left: 0px;" effect="moveLeftIn"><img src="xxx.png" alt=""></div>
				//
				if( effect_type.match(/moveLeftIn/) ){
					posAfter = parseInt( $( $element.children()[i] ).attr('left') );
					posBefore = posAfter - move_position;
					
					if( isMSIE ){
						$( $element.children()[i] )
							.css({ left: posBefore + 'px', top: $( $element.children()[i] ).attr('top') + 'px', visibility: 'visible' })
							.animate({ left: posAfter + 'px' }, move_speed)
						;
					}
					else{
						$( $element.children()[i] )
							.css({ left: posBefore + 'px', top: $( $element.children()[i] ).attr('top') + 'px', opacity: 0, visibility: 'visible' })
							.animate({ left: posAfter + 'px', opacity: 1 }, move_speed)
						;
					}
				}
				
				//------------------------------------------------------------
				// moveTopIn
				//
				// ex:
				// <div class="absolute" style="top: 0px; left: 0px;" effect="moveTopIn"><img src="xxx.png" alt=""></div>
				//
				if( effect_type.match(/moveTopIn/) ){
					posAfter = parseInt( $( $element.children()[i] ).attr('top') );
					posBefore = posAfter - move_position;
					
					if( isMSIE ){
						$( $element.children()[i] )
							.css({ top: posBefore + 'px', left: $( $element.children()[i] ).attr('left') + 'px', visibility: 'visible' })
							.animate({ top: posAfter + 'px' }, move_speed)
						;
					}
					else {
						$( $element.children()[i] )
							.css({ top: posBefore + 'px', left: $( $element.children()[i] ).attr('left') + 'px', opacity: 0, visibility: 'visible' })
							.animate({ top: posAfter + 'px', opacity: 1 }, move_speed)
						;
					}
				}
				
				//------------------------------------------------------------
				// moveBottomIn
				//
				// ex:
				// <div class="absolute" style="top: 0px; left: 0px;" effect="moveBottomIn" start="598"><img src="xxx.png" alt=""></div>
				//
				if( effect_type.match(/moveBottomIn/) ){
					posAfter = parseInt( $( $element.children()[i] ).attr('top') );
					posBefore = ( $( $element.children()[i] ).attr('start') )? parseInt( $( $element.children()[i] ).attr('start') ) : posAfter + move_position;
					
					if( isMSIE ){
						$( $element.children()[i] )
							.css({ top: posBefore + 'px', left: $( $element.children()[i] ).attr('left') + 'px', visibility: 'visible' })
							.animate({ top: posAfter + 'px' }, move_speed)
						;
					}
					else{
						$( $element.children()[i] )
							.css({ top: posBefore + 'px', left: $( $element.children()[i] ).attr('left') + 'px', opacity: 0, visibility: 'visible' })
							.animate({ top: posAfter + 'px', opacity: 1 }, move_speed)
						;
					}
				}
				
				//------------------------------------------------------------
				// changeImage
				//
				// ex:
				// <ul class="absolute" style="top: 0px; left: 0px;" effect="changeImage">
				//     <li><img src="xxx1.png" alt=""></li>
				//     <li><img src="xxx2.png" alt=""></li>
				// </ul>
				//
				if( effect_type.match(/changeImage/) ){
					var pos = 0;
					var elm = $( $element.children()[i] ),
						li = $( 'li', $element.children()[i] ),
						setTimer
					;
					var changeCol = function(num){
						for( var j = 0, L = li.length; j < L; j++ ){
							$(li[j]).hide();
						}
						$(li[num]).show();
						var speed = ( $(li[num]).attr('speed') )? parseInt( $(li[num]).attr('speed') ): 500;
						elm.hide().fadeIn(speed);
					}
					changeCol(pos);
					elm.css({ visibility: 'visible', top: $( $element.children()[i] ).attr('top') + 'px', left: $( $element.children()[i] ).attr('left') + 'px' });
					
					var speed = ( elm.attr('speed') )? parseInt( elm.attr('speed') ): 4000;
					setTimer = setInterval(function(){
						if( 0 <= pos && pos < li.length - 1 ){
							pos += 1;
							changeCol(pos);
						}
						else {
							pos = 0;
							changeCol(pos);
						}
						
					}, speed);
					
					function changeClear(){
						clearInterval(setTimer);
					}
					if( document.getElementById('btnBack') || document.getElementById('btnNext') ){
						$('#btnBack').bind('click', changeClear);
						$('#btnNext').bind('click', changeClear);
					}
				}
				
				//------------------------------------------------------------
				// hoverChangeImage
				//
				// ex:
				//	<div class="absolute hoverImages" top="116" left="490" effect="hoverChangeImage" wait="1000" zindex="2">
				//		<ul>
				//		<li class="hoverChangeImageDefault"><img src="xxx1.png"></li>
				//		<li class="hoverImage hoverImage1"><img src="xxx2.png"></li>
				//		<li class="hoverImage hoverImage2"><img src="xxx3.png"></li>
				//		<li class="hoverImage hoverImage3"><img src="xxx4.png"></li>
				//		</ul>
				//	</div>
				//	<div class="absolute hoverChangeImageSwitches" top="70"  left="808" effect="moveRightIn" zindex="2">
				//		<p><img src="xxx5.png" class="hoverChangeImageSwitch" switch="hoverImage1" /></p>
				//		<p class="mt20"><img src="xxx6.png" class="hoverChangeImageSwitch" alt="" switch="hoverImage2" /></p>
				//		<p class="mt20"><img src="xxx7.png" class="hoverChangeImageSwitch" alt="" switch="hoverImage3" /></p>
				//	</div>
				//
				if( effect_type.match(/hoverChangeImage/) ){
					$( $element.children()[i] )
					.css({ visibility: 'visible', left: $( $element.children()[i] ).attr('left') + 'px', top: $( $element.children()[i] ).attr('top') + 'px' })
					.hide().fadeIn();
					var hoverChangeImageDefault = $('.hoverChangeImageDefault',$element);//デフォルト画像
					var hoverChangeImageArea = $('div.hoverChangeImageSwitches',$element);//サムネイルエリア
					var hoverChangeImageSwitch = $('.hoverChangeImageSwitch',hoverChangeImageArea);//サムネイル
					var hoverImages = $('div.hoverImages ul li',$element);//切り替わる画像
					var hoverFadeSpeed = 'slow';//切り替わるスピード
					//サムネイルをマウスが離れると
					hoverChangeImageArea.mouseleave(function(event){
						hoverChangeImageDefault.stop(true, true).fadeIn(hoverFadeSpeed).siblings().stop(true, true).fadeOut(hoverFadeSpeed);
					});
					//サムネイルをマウスオーバーすると
					hoverChangeImageSwitch.mouseover(function(event){
						var mouseoverClassName = $(this).attr('switch');
						$('.'+ mouseoverClassName,$element).stop(true, true).fadeIn(hoverFadeSpeed).siblings().stop(true, true).fadeOut(hoverFadeSpeed);
					});
				}

				//------------------------------------------------------------
				i++;
				to(f, fin);
			}, function(){
				//------------------------------------------------------------
				// コールバック関数
				//
				if( typeof(callback) !== 'undefined' ){
					callback();
				}
				
				//------------------------------------------------------------
			});
		}
		transform();
	}
})(jQuery);