/*
* jQuery-1.4.4 bannerCycler by FirstView (http://firstviewmedia.com).
* This lets you setup a banner with children and loop though them, with various options
* Options include type, the use of navigation, callbacks, easing and delay time.
* Use of the CSS file is neccessary.
*/
/*
Eg. :

$('.bannerCycler').bannerCycler({
	delayTime:2000,
	type:'fade',
	direction:'down',
	onAnimStart:function($this){
		 ($this.find('img').attr('src'))
	}
});

HTML Needs to be setup like this :

<div class="bannerCycler">
	
	<div class="bannersWrapper">
				
		<div class="bannerContainer">
			<!-- Content can go here -->
		</div>
		<div class="bannerContainer">
			<!-- Content can go here -->
		</div>
		<div class="bannerContainer">
			<!-- Content can go here -->
		</div>
		<div class="bannerContainer">
			<!-- Content can go here -->
		</div>			
	
	</div>
			
</div>
*/

(function($){
		  
	$.fn.bannerCycler = function(opts) {
	
		var defaults = {
			type: 'fade',						// Sets the type of anim.  Possible values are : slide,fade,hard. //
			direction: 'right',					// Sets the direction of the anim  if type is 'slide'. Possible values are : up,down,left,right. //
			useNumbers: true,					// Sets to show numbers to navigate or not . Possible values are : true, false. //
			onAnimEnd: null,					// Additional function to peform when anim ends. //
			onAnimStart: null,					// Additional function to peform when anim begins. //
			animSpeed:500,						// Anim time in milliseconds. //
			easing: '',							// Easing to apply. //
			delayTime:5000						// Time in milliseconds between anims. //
		};
		
		var opts								= $.extend(defaults, opts);
		var supportsOpacity						= $.support.opacity;
		
		return this.each(function( bannerNum ){
			
			// Define vars. //
			var $this = $(this);
			$this.data(opts);
			$this.data('numBanners', $this.find('.bannersWrapper .bannerContainer').length-1);
			$this.data('current', 0);
			$this.data('bannerNum', bannerNum);
			$this.data('bannerHeight', $this.find('.bannersWrapper .bannerContainer').height());
			$this.data('bannerWidth', $this.find('.bannersWrapper .bannerContainer').width());
			
			// A random number for generating a timeout name. //
			var rand = Math.random(0, 1);
			
			
			// If there is only one banner, don't worry about this whole thing. //
			if( $this.data('numBanners') <= 0 ) return;
			
			
			// Create .bannersNavWrapper if needed. //
			if( opts.useNumbers ) $this.find('.bannersWrapper').after('<div class="bannersNavWrapper"></div>')
			
			
			// Change CSS depending on type & direction. //
			if( opts.type == 'slide' ){
				
				$this.find('.bannersWrapper .bannerContainer').first().clone().appendTo($this.find('.bannersWrapper'));
				
				$this.addClass('slideAnim');
				if( opts.direction == 'up' || opts.direction == 'down' ){
					$this.addClass('vertical');
					var bannerWrapperHeight = ($this.data('numBanners')+2) * $this.data('bannerHeight');
					$this.find('.bannersWrapper').height(bannerWrapperHeight);
					
					if( opts.direction == 'up'){
						$this.addClass('slideUp');
					}else if( opts.direction == 'down' ){
						$this.addClass('slideDown');
					}
					
				}else if( opts.direction == 'left' || opts.direction == 'right' ){
					$this.addClass('horizontal');
					var bannerWrapperWidth = ($this.data('numBanners')+2) * $this.data('bannerWidth');
					$this.find('.bannersWrapper').width(bannerWrapperWidth);
					
					if( opts.direction == 'left'){
						$this.addClass('slideLeft');
					}else if( opts.direction == 'right' ){
						$this.addClass('slideRight');
					}
					
				}
			}else if( opts.type == 'fade'|| opts.type == 'hard' ) $this.addClass('fadeAnim');
			
			
			// Class banner children uniquely & hide/show if neccessary. Add buttons if neccessary. //
			$this.find('.bannersWrapper .bannerContainer').each(function( i ){
				var count = i+1;
				$(this).addClass('_jsBanner'+i);
				if ( opts.type == 'fade' && i > 0 ) $(this).fadeTo(1, 0);
				if( opts.useNumbers && i <= $this.data('numBanners') ) $this.find('.bannersNavWrapper').append('<a class="contextColor" href="javascript:;">'+count+'</a>');
			});
						
			
			// Create interactivity for buttons. Bind buttons to banners. //
			var $navBtns = $this.find('.bannersNavWrapper a');
			$navBtns.each(function( i ){
				$(this).addClass('_jsBannerBtn'+i)
				.click(function( event ){
					event.preventDefault();
					if ( $this.find('.bannersWrapper').is(':animated') || $this.find('.bannersWrapper').children().is(':animated') ) return;
					$.doTimeout('nextAnim' + rand + bannerNum);
					$this.data('hover', false);
					showBanner($this, bannerNum, i, true, rand );
				});
			});
			
			
			// Stops the anim when hovering on the banner. Resumes on mouseout. //
			$this.mouseenter(function(){
				
				$this.data('hover', true);				
				// Cancels current timeout //
				$.doTimeout('nextAnim' + rand + bannerNum);
			});
			
			$this.mouseleave(function(e){
				
				$this.data('hover', false);
				
				// Ignore if it's an A tag //
				if( e.target.nodeName == 'A' ){
					$this.data('hover', true);
					return;
				}
				
				// Continue new invertval //
				$.doTimeout('nextAnim' + rand + bannerNum, opts.delayTime, function(){ 
					showBanner( $this, bannerNum, ($this.data('current')+1), false, rand );
					return true;
				});
			});
			
			// Run interval immediately //
			$.doTimeout('nextAnim' + rand + bannerNum, opts.delayTime, function(){ 
				showBanner( $this, bannerNum, ($this.data('current')+1), false, rand );
				return true;
			});
			
			// Show banner first time //
			showBanner( $this, bannerNum, 0, false, rand );
			
		});
		
		// Show next image function. //
		function showBanner( $this, bannerNum, showNum, fromClick, rand ){
			
			// If we're hovering, ignore //
			if($this.data('hover')){
				return;	
			}
			
			
			// Define vars. //
			var current			= showNum;
			var numBanners			= $this.data('numBanners');
			var $navBtns			= $this.find('.bannersNavWrapper a');
			var animSpeed			= $this.data('animSpeed');
			var easing				= $this.data('easing');
			var faking				= false;
			
			if( current < 0 ) current = numBanners;
			if( opts.type == 'slide' ){
				if( current > Number(numBanners+1) ) current = 0;
				else if( current > numBanners && fromClick ) current = 0;
				if( current == Number(numBanners+1) ) faking = true;
			}else if( opts.type == 'fade' || opts.type == 'hard' ){
				if( current > numBanners ) current = 0;
			}
			
			$this.data('current', current);
			if( opts.onAnimStart ) opts.onAnimStart($this);
			
			
			// Image animating. //
			
			
			// Slide animtion. //
			if( opts.type == 'slide' ){
				
				if( opts.direction == 'up'){
					$this.find('.bannersWrapper').animate({'top':-$this.data('bannerHeight')*current},{duration:animSpeed, easing:easing,complete:function(){
						if( faking ){
							$this.find('.bannersWrapper').css({'top':0});
							$this.data('current', 0);
						}
						if( opts.onAnimEnd ) opts.onAnimEnd($this);
					}});
				}else if( opts.direction == 'down' ){
					$this.find('.bannersWrapper').animate({'bottom':-$this.data('bannerHeight')*current},{duration:animSpeed, easing:easing,complete:function(){
						if( faking ){
							$this.find('.bannersWrapper').css({'bottom':0});
							$this.data('current', 0);
						}
						if( opts.onAnimEnd ) opts.onAnimEnd($this);
					}});
				}else if( opts.direction == 'left' ){
					$this.find('.bannersWrapper').animate({'left':-$this.data('bannerWidth')*current},{duration:animSpeed, easing:easing,complete:function(){
						if( faking ){
							$this.find('.bannersWrapper').css({'left':0});
							$this.data('current', 0);
						}
						if( opts.onAnimEnd ) opts.onAnimEnd($this);
					}});
				}else if( opts.direction == 'right' ){
					$this.find('.bannersWrapper').animate({'right':-$this.data('bannerWidth')*current}, {duration:animSpeed, easing:easing, complete:function(){
						if( faking ){
							$this.find('.bannersWrapper').css({'right':0});
							$this.data('current', 0);
						}
						if( opts.onAnimEnd ) opts.onAnimEnd($this);
					}});
				}
			}
			
			
			// Fade animtion. //
			if( opts.type == 'fade' || opts.type == 'hard' ){
				var $imgToShow = $this.find('.bannersWrapper ._jsBanner'+current );
				$this.find('.bannersWrapper').append($imgToShow);
				if( supportsOpacity && opts.type == 'fade' ){
					$imgToShow.fadeTo( animSpeed, 1, easing, function(){
						if( opts.type == 'fade' ) $this.find('.bannersWrapper .bannerContainer').filter(':not(._jsBanner'+current+')').fadeTo(1,0);
						if( opts.onAnimEnd ) opts.onAnimEnd($this);
					});
				}else if( opts.onAnimEnd ) opts.onAnimEnd($this);
			}
			
			
			// Changes classes on navigation buttons. //
			$navBtns.filter( ':not(._jsBannerBtn' + current+')' ).removeClass('selected');
			$navBtns.filter( '._jsBannerBtn' + current ).addClass('selected');
			if( faking ) $navBtns.filter( '._jsBannerBtn0' ).addClass('selected');
			
		}
	};
})(jQuery);