﻿(function() {

/*　説明
------------------------------------------------------------------------------- 
// HTML sample
<div id="container-box">
 <div class="fade-box">
  切替要素1
 </div>
 <div class="fade-box">
  切替要素2
 </div>
</div>

// init sample
$('#container-box').changeElement({'eleClass':'.fade-box'});

/*	変数
------------------------------------------------------------------------------- */
	jQuery.fn.changeElement = function(config){	
		config = jQuery.extend({
				eleClass	:	'.contents-panel',
				wait_ms		:	4800,
				easing		:	500,
				count			:	0
		},config);
		
		/* format 
		----------------------------------------------- */
		var ctr_box = $(this);
		var targets = $(this).find(config.eleClass);
		var checker = false;
		var timer,tmp;
		
		count = config.count;
		wait_ms = config.wait_ms;
		easing = config.easing;
		
		$(targets.get(count)).css('display','block');
		ctr_box.css('background','none');
		
		if(targets.length == 1) return false;
		fadeElements(count);
	
		function fadeElements(c){
	
			c= c? c: count;
			timer = setTimeout(function(){
				
				var on_ele,nx_ele;
				on_ele = $(targets.get(c));
				c = c+1>=targets.length ? 0: c+1;
				nx_ele = $(targets.get(c));	
				
				if(config.easing!= 0){
					on_ele.fadeOut(easing,function(){
						nx_ele.fadeIn(easing);
						tmp = c;
					});
				}else {
					on_ele.css('display','none');
					nx_ele.css('display','block');
						tmp = c;
	
				}
				
				return fadeElements(c);
				
			},wait_ms);
			
		}
		ctr_box.mouseover(function(){
			checker = true;
			clearTimeout(timer);
		});
		ctr_box.mouseout(function(){
			if(checker) fadeElements(tmp);
		});
	};
})(jQuery);