// ***************************************************************
// ***************************************************************
// Banner JS

(function(){

	// Banner Options
	var slideshow_enabled = true; 		// Turns banner slide show on and off, true = on, false = off
	var slideshow_delay_duration = 5;   // the number of seconds each image slide will be visible 
	var animation_speed = .7;      		// the number of seconds that each image animation will take  
	// the effect used to change each image
	var effect = 'fade-in'; 		        
	// This is the list of the available effects	
	var fx = ["random", /* RANDOM !!!!! */
			  "shuffle-left", "shuffle-right", "shuffle-down", "shuffle-up",
			  "slide-left", "slide-right", "slide-up", "slide-down", 
			  "slide-in-left", "slide-in-right", "slide-in-up", "slide-in-down",
			  "slide-out-left", "slide-out-right", "slide-out-up", "slide-out-down",
			  "fade-in", "fade-out"];
	
	/* to not change */ 
	var total_items = 0,
		sliderTO = null,
		current_zindex,
		current_int = 1,
		next_int = 2,
		dim = { 
			height:0, 
			width:0 
		};
	
	// start banner slider
	$(function(){
		if( $('#banner-main').length > 0 ) {
			// get banner object
			$banner = $('#banner-main');
			// get banner "slides"
			$items = $banner.find('div.banner-slide');
			// get total items / and set current z-index
			total_items = current_zindex =  $items.length;
			// get dimensions
			dim.width = $banner.find('.banner-holder').width();
			dim.height = $banner.find('.banner-holder').height();
			// add propers z-index
			var zstart = total_items, sint=1;
			$.each( $items, function(){ $(this).attr('data-int', sint).css('z-index', zstart); zstart--; sint++ });
			// setup animation
			$banner.data('animating', false);
			
			// need at least 2 items
			if( total_items > 1 ) {
				// add button events
				if( $('#banner-next').length > 0 )
					$('#banner-next').bind( 'click', banner_next );
				if( $('#banner-previous').length > 0 )
					$('#banner-previous').bind( 'click', banner_prev );
				// setup slide show
				if( slideshow_enabled === true ){
					//add hover events to start/stop slideshow 
					$banner.hover( function(){
						banner_change_stop();
					}, function(){
						banner_change_restart();
					});
					banner_change_restart();
				}
			}
		}
	});
	
	// Show the next slide
	function banner_next(event, type){
		var type = ( type ? type : 'next' );
		// cancel if animation is in progress
		if( $banner.data('animating') === true ) return false;
		// increase banner counter
		next_int = ( current_int + 1 );
		if( next_int > total_items ) next_int = 1;
					
		banner_animate(type);	
	}
	
	// show the previous slide
	function banner_prev(){
		// cancel if animation is in progress
		if( $banner.data('animating') === true ) return false;
		//decrease banner counter
		next_int = ( current_int - 1 );
		if( next_int == 0 ) next_int = total_items;
		// start animation
		banner_animate('prev');
	}
	
	// Slideshow Change
	function banner_change(){
		// call the banner_next() and wait for the finnished event
		$banner.unbind('banner.complete').bind('banner.complete', function(e, type){
			banner_change_restart();
		});
		banner_next(null, 'change');
	}
	// Resstart the timeout countdown
	function banner_change_restart(){
		sliderTO = window.setTimeout( function(){
					$(document.body).append('');
					banner_change();
				}, (slideshow_delay_duration*1000) );
	}
	function banner_change_stop(){
		window.clearTimeout(sliderTO);	
	}
	
	// Do the Animation
	function banner_animate(type){
		
		var type = (type ? type : null);
		
		// stop the banner slideshow
		if( slideshow_enabled === true )
			banner_change_stop();
			
		// flag animation start
		$banner.data('animating', true);
		// get slide items
		$current = $banner.find('.banner-slide[data-int="'+current_int+'"]');
		$next = $banner.find('.banner-slide[data-int="'+next_int+'"]');
		
		_effect = effect;
		
		// handle random effect
		if( effect == 'random') _effect = fx[(Math.floor((Math.random()* (fx.length) )+1))];
		
		// effect switch
		if( _effect ) {
			switch( _effect ){
				case 'slide-left':
				default:
					current_zindex++;
					$current.css({left:0,top:0,'z-index':(current_zindex)});
					$next.css({left:dim.width+'px',top:0,'z-index':(current_zindex - 1)});
					$current.animate({left:'-'+dim.width+'px'},( animation_speed*1000 ));
					$next.animate({left:'0px'},( animation_speed*1000 ), function(){
						$current.css({left:0,top:0, 'z-index':0});
						banner_complete(type);
					});	
				break;
				case 'slide-right':
					current_zindex++;
					$current.css({left:0,top:0,'z-index':(current_zindex)});
					$next.css({left:'-'+dim.width+'px',top:0,'z-index':(current_zindex - 1)});
					$current.animate({left:dim.width+'px'},( animation_speed*1000 ));
					$next.animate({left:'0px'},( animation_speed*1000 ), function(){
						$current.css({left:0,top:0, 'z-index':0});
						banner_complete(type);
					});	
				break;
				case 'slide-up':
					current_zindex++;
					$current.css({left:0,top:0,'z-index':(current_zindex)});
					$next.css({left:0,top:dim.height+'px','z-index':(current_zindex - 1)});
					$current.animate({left:0, top:'-'+dim.height+'px' },( animation_speed*1000 ));
					$next.animate({left:0, top:0},( animation_speed*1000 ), function(){
						$current.css({left:0, top:0, 'z-index':0});
						banner_complete(type);
					});	
				break;
				case 'slide-down':
					current_zindex++;
					$current.css({left:0,top:0,'z-index':(current_zindex)});
					$next.css({left:0,top:'-'+dim.height+'px','z-index':(current_zindex - 1)});
					$current.animate({left:0, top:dim.height+'px' },( animation_speed*1000 ));
					$next.animate({left:0, top:0},( animation_speed*1000 ), function(){
						$current.css({left:0, top:0, 'z-index':0});
						banner_complete(type);
					});	
				break;
				case 'slide-in-right':
					$next.css({left:dim.width+'px',top:0,'z-index':(current_zindex++)});
					$next.animate({left:'0px'},( animation_speed*1000 ), function(){banner_complete(type);});
				break;
				case 'slide-in-left':
					$next.css({left:'-'+dim.width+'px',top:0,'z-index':(current_zindex++)});
					$next.animate({left:'0px'},( animation_speed*1000 ), function(){ banner_complete(type);});
				break;	
				case 'slide-in-up':
					$next.css({left:'0px',top:dim.height+'px','z-index':(current_zindex++)});
					$next.animate({top:'0px'},( animation_speed*1000 ), function(){ banner_complete(type);});
				break;
				case 'slide-in-down':
					$next.css({left:'0px',top:'-'+dim.height+'px','z-index':(current_zindex++)});
					$next.animate({top:'0px'},( animation_speed*1000 ), function(){ banner_complete(type);});
				break;
				case 'slide-out-right':
					current_zindex++;
					$current.css({left:0,top:0,'z-index':(current_zindex)});
					$next.css({left:0,top:0,'z-index':(current_zindex - 1)});
					$current.animate({left:dim.width+'px'},( animation_speed*1000 ), function(){
						$current.css({left:0,top:0, 'z-index':0});
						banner_complete(type);
					});
				break;
				case 'slide-out-left':
					current_zindex++;
					$current.css({left:0,top:0,'z-index':(current_zindex)});
					$next.css({left:0,top:0,'z-index':(current_zindex - 1)});
					$current.animate({left:'-'+dim.width+'px'},( animation_speed*1000 ), function(){
						$current.css({left:0,top:0, 'z-index':0});
						banner_complete(type);
					});
				break;	
				case 'slide-out-up':
					current_zindex++;
					$current.css({left:0,top:0,'z-index':(current_zindex)});
					$next.css({left:0,top:0,'z-index':(current_zindex - 1)});
					$current.animate({top:'-'+dim.height+'px'},( animation_speed*1000 ), function(){
						$current.css({left:0,top:0, 'z-index':0});
						banner_complete(type);
					});
				break;
				case 'slide-out-down':
					current_zindex++;
					$current.css({left:0,top:0,'z-index':(current_zindex)});
					$next.css({left:0,top:0,'z-index':(current_zindex - 1)});
					$current.animate({top:dim.height+'px'},( animation_speed*1000 ), function(){
						$current.css({left:0,top:0, 'z-index':0});
						banner_complete(type);
					});
				break;
				case 'fade-in':
					current_zindex++;
					$next.hide().css({left:0,top:0,'z-index':(current_zindex)});
					$next.fadeIn(( animation_speed*1000 ), function(){ 
						$current.css({left:0,top:0}).show();
						banner_complete(type); 
					});
					
				break;
				case 'fade-out':
					current_zindex++;
					$current.css({left:0,top:0,'z-index':(current_zindex)});
					$next.css({left:0,top:0,'z-index':(current_zindex-1)});
					$current.fadeOut(( animation_speed*1000 ), function(){ 
						$current.css({left:0,top:0, 'z-index':0}).show();
						banner_complete(type); 
					});
				break;
				case 'shuffle-left':
					current_zindex++;
					$current.css({left:0,top:0,'z-index':(current_zindex)});
					$next.css({left:0,top:0,'z-index':(current_zindex - 1)});
					$current.animate({left:'-'+(dim.width/2)+'px'},( animation_speed*1000 ) )
							.animate({left:0},( animation_speed*1000 ) );
					$next.animate({left:(dim.width/2)+'px'},( animation_speed*1000 ),function(){
						current_zindex++;
						$next.css('z-index',current_zindex).animate({left:0},( animation_speed*1000 ), function(){
							$current.css({left:0,top:0, 'z-index':0});
							banner_complete(type);	
						})
					});
				break;
				case 'shuffle-right':
					current_zindex++;
					$current.css({left:0,top:0,'z-index':(current_zindex)});
					$next.css({left:0,top:0,'z-index':(current_zindex - 1)});
					$current.animate({left:(dim.width/2)+'px'},( animation_speed*1000 ) )
							.animate({left:0},( animation_speed*1000 ) );
					$next.animate({left:'-'+(dim.width/2)+'px'},( animation_speed*1000 ),function(){
						current_zindex++;
						$next.css('z-index',current_zindex).animate({left:0},( animation_speed*1000 ), function(){
							$current.css({left:0,top:0, 'z-index':0});
							banner_complete(type);	
						})
					});
				break;
				case 'shuffle-up':
					current_zindex++;
					$current.css({left:0,top:0,'z-index':(current_zindex)});
					$next.css({left:0,top:0,'z-index':(current_zindex - 1)});
					$current.animate({top:'-'+(dim.height/2)+'px'},( animation_speed*1000 ) )
							.animate({top:0},( animation_speed*1000 ) );
					$next.animate({top:(dim.height/2)+'px'},( animation_speed*1000 ),function(){
						current_zindex++;
						$next.css('z-index',current_zindex).animate({top:0},( animation_speed*1000 ), function(){
							$current.css({left:0,top:0, 'z-index':0});
							banner_complete(type);	
						})
					});
				break;
				case 'shuffle-down':
					current_zindex++;
					$current.css({left:0,top:0,'z-index':(current_zindex)});
					$next.css({left:0,top:0,'z-index':(current_zindex - 1)});
					$current.animate({top:(dim.height/2)+'px'},( animation_speed*1000 ) )
							.animate({top:0},( animation_speed*1000 ) );
					$next.animate({top:'-'+(dim.height/2)+'px'},( animation_speed*1000 ),function(){
						current_zindex++;
						$next.css('z-index',current_zindex).animate({top:0},( animation_speed*1000 ), function(){
							$current.css({left:0,top:0, 'z-index':0});
							banner_complete(type);	
						})
					});
				break;
			}
		}
		
	}
	
	// Animation Complete
	function banner_complete(type){
		current_int = next_int;
		$banner.data('animating', false);
		
		// restart the slideshow timer
		if( type !== 'change' && slideshow_enabled === true)
			banner_change_restart();
			
		$banner.trigger( 'banner.complete', [type] );
	}
	
})(window);