/**
 * Nice (???) Implementation
 */
var currentIndex = 0; 
var rotate =  
{
	// class attributes/properties
	image_url: new Array(),
	arrayLength: null,
	container: '#big-dude',
	
	nextImage: function() 
	{
		rotate.changeImage( 'next' );
	},
	changeImage: function( type )
	{
		// fade current image out
		$( rotate.container ).animate( { opacity: 0.1}, 'slow', function()
		{
			var thisNum = currentIndex;
			var newImageId = 0;
			
			
			if(type == 'prev')
			{
				// determine next image
				newImageId = (thisNum > 0) ? (thisNum-1) : rotate.arrayLength;
				
			}
			else
			{
				// determine next image
                if( ( 1 + currentIndex ) > rotate.image_url.length ) {
                    currentIndex = 0;
                }
                newImageId = currentIndex;

			}

			// force image to load
			var nextImage = new Image();
			var src = rotate.image_url[ newImageId ];
			nextImage.src = src;
			
			if(nextImage.complete)
			{
				// fade new image in
				$( rotate.container ).css('backgroundImage', "url(" + src + ")" );
				//$( rotate.container ).animate({width: '100%', opacity: 1}, 'slow');
				$( rotate.container ).animate( {opacity: 1}, 'slow');
				
			}
			else
			{
				nextImage.onload = function()
				{
					// fade new image in
					$( rotate.container ).css('backgroundImage', "url(" + src + ")" );
					//$( rotate.container ).animate({width: '100%', opacity: 1}, 'slow');
					$( rotate.container ).animate( {opacity: 1}, 'slow');
					
				}   
				
			}
			currentIndex++;
			
		});
		
	},
	
	// initalizer method
	init: function( images )
	{
		for( var i = 0; i < images.length; i++ ) {
			rotate.image_url[ i ] = images[ i ];
			
		}
		
		// store array length - 1
		rotate.arrayLength = rotate.image_url.length;
		rotate.arrayLength -= 1;

        // Set the first image; override default
        rotate.nextImage();
		
		// add event next / previous divs
		$( "#big-dude" ).everyTime( 5000, rotate.nextImage );
		
		
	}
	
}