/**
 * ContentONE Rotator
 *
 * Automatically rotates between a series of images.
 *
 * @version		1.1
 * @date		September 9, 2009
 * @author		Brad Harrison
 * @copyright	(c) World Web Management Services (http://www.worldwebms.com/)
 */
(function($) {

	/**
	 * Create C1 jQuery extension.
	 */
	if( !$.fn.c1 ) {
		$.fn.c1 = function( name, options ) {
			if( this.c1[name] )
				return this.c1[name].call( this, options );
			return this;
		}
	}
	
	/**
	 * Create C1 Rotator jQuery extension.
	 */
	$.fn.c1.rotator = function( options ) {
		return this.each( function() {
			options.images = $(options.images ? options.images : ".c1-rotator-image", this);
			options.thumbs = $(options.thumbs ? options.thumbs : ".c1-rotator-thumb", this);
			$.fn.c1.rotator.manager.init( options );
		} );
	};
	
	/**
	 * Create C1 Rotator management class.
	 */
	$.fn.c1.rotator.manager = {
		
		id: 0,
		config: [],
	
		/**
		 * Initialises an image rotator.
		 * @param	object config The configuration
		 */
		init: function( config ) {
		
			// Update the configuration
			config.images = $(config.images);
			config.thumbs = $(config.thumbs);
			config.pos = 0;
			config.speed *= 1000;
			config.animating = false;
			if( config.fade == null )
				config.fade = "slow";
			if( config.delay == null )
				config.delay = 0;
			
			// Setup the configuration
			var id = this.id++;
			this.config[id] = config;
			
			// Intercept hover events
			if( config.hover == true ) {
				this.config[id].thumbs.each( function( i ) {
					$(this).hover(
						function() {
							$.fn.c1.rotator.manager.show( id, i, false );
						},
						function() {
							$.fn.c1.rotator.manager.start( id );
						}
					);
				} );
				this.config[id].images.each( function( i ) {
					$(this).hover(
						function() {
							$.fn.c1.rotator.manager.stop( id );
						},
						function() {
							$.fn.c1.rotator.manager.start( id );
						}
					);
				} );
				
			// Intercept onclick events for thumbnails
			} else {
				this.config[id].thumbs.each( function( i ) {
					$(this).click( function() {
						$.fn.c1.rotator.manager.show( id, i );
					} );
				} );
				
			}
			
			// Start the rotation
			if( config.delay == 0 )
				this.start( id );
			else
				window.setTimeout( "jQuery.fn.c1.rotator.manager.next( " + id + " );", config.delay * 1000 );
			
			return id;
		},
		
		/**
		 * Displays the next image in a specific group.
		 * @param	integer id The id of the group
		 */
		next: function( id ) {
		
			// Determine the next position
			var pos = this.config[id].pos + 1;
			if( pos >= this.config[id].images.length )
				pos = 0;
				
			// Display the image
			this.show( id, pos, true );
				
		},
		
		/**
		 * Shows a specific image in the group.
		 * @param	integer id The id of the group
		 * @param	integer pos The position to display
		 * @param	boolean rotate True to continue rotating; false to stop rotating
		 */
		 show: function( id, pos, rotate ) {
		 	var t = this;
		 
		 	// Clear any existing timeouts
		 	t.stop( id );
		 	
		 	// If the next position should be used
		 	if( pos < 0 ) {
		 		rotate = t.config[id].next.rotate;
		 		pos = t.config[id].next.pos;
		 		t.config[id].next = null;
		 	}
		 	
		 	// If there is currently an animation, then delay the showing
		 	if( t.config[id].animating ) {
		 		t.config[id].next = {pos: pos, rotate: rotate};
		 		return;
		 	}
		 		
		 	// As long as the position has changed
		 	if( t.config[id].pos != pos ) {
		 
			 	// Determine the current and next image
				var next = $(t.config[id].images[pos]);
				var existing = $(t.config[id].images[t.config[id].pos]);
				
				// Reset the active class on the existing thumb
				var thumb = t.config[id].thumbs[t.config[id].pos];
				if( thumb ) {
					if( t.config[id].thumbFade == null ) {
						t.flip( $(thumb).removeClass( "c1-rotator-thumb-active" ).find( "img" ) );
						t.flip( $(t.config[id].thumbs[pos]).addClass( "c1-rotator-thumb-active" ).find( "img" ) );
					} else {
						var thumbNew = $(t.config[id].thumbs[pos]).css( 'z-index', 11 );
						$(thumb).css( 'z-index', 10 );
						t.flip( thumbNew.addClass( 'c1-rotator-thumb-active' ).hide().find( 'img' ) );
						thumbNew.fadeIn( t.config[id].thumbFade, function() {
							t.flip( $(thumb).removeClass( 'c1-rotator-thumb-active' ).hide().find( 'img' ) );
						} );
					}
				}
				
				// Fade in the new image
				t.config[id].pos = pos;
				if( t.config[id].fade != 0 ) {
					t.config[id].animating = true;
					existing.css( "z-index", 1 );
					next.css( "z-index", 2 ).fadeIn( t.config[id].fade, function() {
						existing.hide();
						$.fn.c1.rotator.manager.config[id].animating = false;
						if( $.fn.c1.rotator.manager.config[id].next != null )
							window.setTimeout( "jQuery.fn.c1.rotator.manager.show( " + id + ", -1 );", 10 );
					} );
					if( t.config[id].fadeOut )
						existing.fadeOut( t.config[id].fade );
				} else {
					existing.hide();
					next.show();
					if( t.config[id].next != null )
						window.setTimeout( "jQuery.fn.c1.rotator.manager.show( " + id + ", -1 );", 10 );
				}
				
			}
			
			// Continue automatic rotation if requested
			if( rotate == null || rotate == true )
				t.start( id );
			
		 },
		 
		 /**
		  * Starts the rotation for the given id.
		  * @param	integer id The id of the group
		  */
		 start: function( id ) {
			this.config[id].timeout = window.setTimeout( "jQuery.fn.c1.rotator.manager.next( " + id + " );", this.config[id].speed );
		 },
		 
		 /**
		  * Stops the rotator for the given id.
		  * @param	integer id The id of the group
		  */
		 stop: function( id ) {
		 	if( this.config[id].timeout ) {
			 	window.clearTimeout( this.config[id].timeout );
			 	this.config[id].timeout = null;
			 }
		 },
		 
		 /**
		  * Flips the src and background image of the specified element.
		  * @param	object jQuery element The element to update
		  */
		 flip: function( element ) {
		 	var bg = element.css( "background-image" ).replace( /url\(/g, "" ).replace( /[)"']/g, "" );
		 	var src = element.attr( "src" );
		 	if( src && bg && bg != "none" ) {
			 	element.attr( "src", bg );
			 	element.css( "background-image", "url(" + src + ")" );
			 }
		 }
	
	};
	
})(jQuery);