(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('.ab_zone');
			var step 			= 0;
			if (o.steps.length > 0) {
				setInterval(function(){
					++step;
					//from last jump to first
					if (step > o.total_steps) step = 1;
					
					$areas.each(function() {
						var $area 		= $(this);
						var idx			= $area.index();
						//the element where the div contents are located for this area
						var $wrap		= $area.find('.ab_wrap');
						//current shown div
						var $current	= $wrap.find('div:visible');
						var current_idx = $current.index();
						var config		= o.steps[step-1][idx];
						//the next div position
						var next_idx 	= config[0].to;
						//the effect to use
						var effect		= config[1].effect;
						if (parseInt(current_idx+1) != next_idx) {
							var $next 	= $wrap.find('div:nth-child('+ next_idx +')');
							$next.css({'width':'100%','height':'100%'});
							switch (effect) {
								case 'zoomOut-zoomInRotated':
									$next.css({'width':'0px','height':'0px'}).show();
									$current.stop().animate({'width':'0px','height':'0px'},300,function(){
										$current.removeClass('ab_shown').hide();
										$next.addClass('ab_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('ab_shown').hide();
										$next.addClass('ab_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('ab_shown').hide();
										$next.addClass('ab_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('ab_shown').hide();
										$next.addClass('ab_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('ab_shown').hide();
										$next.addClass('ab_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('ab_shown').hide();
										$next.addClass('ab_shown').show();
										$area.animate({'top': $area.data('t')},300,'easeOutBounce');
									});
									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('ab_shown').hide();
										$next.addClass('ab_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('ab_shown').hide();
										$next.addClass('ab_shown').show();
										$area.animate({'top': $area.data('t')},300,'easeInOutBack');
									});
									break;
								default:
									$current.removeClass('ab_shown').hide();
									$next.addClass('ab_shown').show();
							}
						}
					});
				}, o.speed);
			}
		});
	};
	$.fn.banner.defaults = {
		steps   	: [],
		total_steps : 1,
		speed		: 5000	
	};
})(jQuery);