(function($) {
	$.fn.banner = function(options) {
		var opts = $.extend({}, $.fn.banner.defaults, options);
		return this.each(function() {
			$this 				= $(this);
			var o 				= $.meta ? $.extend({}, opts, $this.data()) : opts;
			var banner_width 	= $this.width();
			var $areas			= $this.find('.ca_zone');
			var step 			= 0;
			if(o.steps.length > 0)
			setInterval(function(){
				++step;
				if(step > o.total_steps) step = 1;
				$areas.each(function(){
					var $area 		= $(this);
					var idx			= $area.index();
					var $wrap		= $area.find('.ca_wrap');
					var $current	= $wrap.find('img:visible');
					var current_idx = $current.index();
					var config		= o.steps[step-1][idx];
					var next_idx 	= config[0].to;
					var effect		= config[1].effect;
					if(parseInt(current_idx+1) != next_idx){
						var $next 	= $wrap.find('img:nth-child('+ next_idx +')');
						switch(effect){
							case 'zoomOut-zoomInRotated':
								$next.css({'width':'0px','height':'0px'}).show();
								$current.stop().animate({'width':'0px','height':'0px'},300,function(){
									$current.removeClass('ca_shown').hide();
									$next.addClass('ca_shown').stop().animate({/*'width':'100%','height':'100%',*/ 'rotate':'1080deg'},300);
								});
								break;
							case 'zoomOutRotated-zoomInRotated':
								$next.css({'width':'0px','height':'0px'}).show();
								$current.stop().animate({'width':'0px','height':'0px','rotate':'1080deg'},300,function(){
									$current.removeClass('ca_shown').hide();
									$next.addClass('ca_shown').stop().animate({/*'width':'100%','height':'100%',*/'rotate':'1080deg'},300);
								});
								break;
							case 'zoomOut-zoomIn':
								$next.css({'width':'0px','height':'0px'}).show();
								$current.stop().animate({'width':'0px','height':'0px'},300,function(){
									$current.removeClass('ca_shown').hide();
									$next.addClass('ca_shown').stop().animate({/*'width':'100%','height':'100%'*/},300);
								});
								break;
							case 'slideOutRight-slideInRight':
								$area.data('l',$area.css('left'));
								$area.stop().animate({'left': banner_width + 20 + 'px'},300,function(){
									$current.removeClass('ca_shown').hide();
									$next.addClass('ca_shown').show();
									$area.animate({'left': $area.data('l')},300);//try 'easeOutBack'
								});
								break;
							case 'slideOutLeft-slideInLeft':
								$area.data('l',$area.css('left'));
								$area.stop().animate({'left': 0-$area.width()-20 + 'px'},300,function(){
									$current.removeClass('ca_shown').hide();
									$next.addClass('ca_shown').show();
									$area.animate({'left': $area.data('l')},300);
								});
								break;
							case 'slideOutTop-slideInTop':
								$area.data('t',$area.css('top'));
								$area.stop().animate({'top': 0-$area.height()-20 + 'px'},300,function(){
									$current.removeClass('ca_shown').hide();
									$next.addClass('ca_shown').show();
									$area.animate({'top': $area.data('t')},300);
								});
								break;
							case 'slideOutBottom-slideInTop':
								$area.data('t',$area.css('top'));

								$area.stop().animate({'top': $area.height()+20 + 'px'},300,function(){
									$area.css('top',0-$area.height()-20 + 'px');
									$current.removeClass('ca_shown').hide();
									$next.addClass('ca_shown').show();
									$area.animate({'top': $area.data('t')},300,'easeOutBounce');
								});
								break;
							case 'slideOutTop-slideInBottom':
								$area.data('t',$area.css('top'));

								$area.stop().animate({'top': 0-$area.height()-20 + 'px'},300,function(){
									$area.css('top',$area.height()+20 + 'px');
									$current.removeClass('ca_shown').hide();
									$next.addClass('ca_shown').show();
									$area.animate({'top': $area.data('t')},300,'easeInOutBack');
								});
								break;
							default:
								$current.removeClass('ca_shown').hide();
								$next.addClass('ca_shown').show();
						}
					}

				});
			},o.speed);
		});
	};
	$.fn.banner.defaults = {
		steps   	: [],
		total_steps : 1,
		speed		: 5000
	};
})(jQuery);