// JavaScript Document
/*
設定
*/
var mysettings = {
	delay    : 3000, //透過速度(ms)
	waittime : 5000	  //次の画像待ち時間(ms)
};

$(document).ready(function(){
	var i = 0;
	var images = $("#top_images li img");
	var len = images.length;
	
	$("#top_images").css({
		background : 'none',
		overflow   : 'hidden'
	});	
	
	images.each(function(){
		var img = new Image();
		$(img).bind('load',function(){
			++i;
			if(i == len) act();
		});
		img.src = this.src;
		
		$(window).bind('unload',function(){
			$(img).unbind();
		});
	});

	function act(){
		$("#top_images li img").topAnimate({
				delay    : mysettings.delay, 
				waittime : mysettings.waittime
		});
	}	

	$(window).bind('unload',function(){
		$("#top_images li img").unbind();
		$(window).unbind();		
	});
});

(function($){
	$.fn.topAnimate = function(settings){
		settings = jQuery.extend({
			delay    : 1000,
			waittime : 3000,
			use_css  : $.ui.transitionAnimator.isAvailable()
			},settings);
		
		var objects = this;
		var i = 0;
		var j = i + 1;
		
		function init(){
			objects.each(function(){
				$(this).css({
					position :  'absolute',
					left     :  0,
					top      :  0,
					opacity  :  1,
					zIndex   :  objects.length - objects.index(this)
				});
			});
			setTimeout(function(){
					if(settings.use_css){
						settings.delay = settings.waittime;
						animateCss(i,j);
					}else{
						animate(i,j);
					}
				},settings.waittime);
		}
		
		function animate(i,j){
			var fnc = arguments.callee.caller;
			var hide_prop = {'opacity':0};
			var show_prop = {'opacity':1};
			$(objects[i]).stop().animate(hide_prop,{
				duration   : settings.delay,
				complete: function(){
						i = i >= objects.length - 1 ? 0 : ++i;
						j = j >= objects.length - 1 ? 0 : ++j;
				      setTimeout(function(){	
							animate(i,j);}
						,settings.waittime);
				}
			});
			$(objects[j]).stop().animate(show_prop,{
				duration:settings.delay
			});	
		}
		
		function animateCss(i,j){	
			$(objects[i]).transitionAnimator({
				property: 'opacity'
			});
			
			$(objects[i]).stop().transitionAnimator('animate',{
				val: 0,
				duration: settings.delay,
				easing: 'ease-in',
				after: function(){
						i = i >= objects.length - 1 ? 0 : ++i;
						j = j >= objects.length - 1 ? 0 : ++j;
						setTimeout(function(){	
							animateCss(i,j);}
						,settings.waittime);
				}
			});	
			$(objects[j]).transitionAnimator({
				property: 'opacity'
			});
			
			$(objects[j]).stop().transitionAnimator('animate',{
				val      : 1,
				duration : settings.delay
			});			
		}
		
		init();
	
	}
	
})(jQuery);