$(function()
{
	// Scroller
	var scroller = 
	{
		scroll: null,
		currentIndex: 1,
		enableAutoPlay: true,
		interval: 15000,
		maxIndex:0,
		intervalHandle: null,
	
		init: function( cfg )
		{
			$( '#scroll' ).scrollable(
			{
			
			});
			
			this.scroll = $( '#scroll' ).data( 'scrollable' );			
			this.maxIndex = $( '#scroll .items .item' ).length;
			this.initAutoPlay();
			
			$( '#thumbs LI' ).click( function(){ scroller.clickHandler( this ); } );
		},
		
		clickHandler: function( el )
		{
			var id = $( el ).attr( 'id' );
			var idx = Number( id.replace( 't', '' ) );
			
			this.enableAutoPlay = false;
			
			if( this.currentIndex != idx )
			{
				this.showNext( idx );
			}
		},
		
		showNext: function( idx )
		{
			// Classes
			$( String.format( '#thumbs #t{0}', this.currentIndex ) ).removeClass( 'on' ); 
			$( String.format( '#thumbs #t{0}', idx ) ).addClass( 'on' ); 
		
			// Do the scroll
			this.scroll.seekTo( idx - 1 );
			this.currentIndex = idx;
		},
		
		initAutoPlay: function()
		{
			this.intervalHandle = setInterval( function(){ scroller.autoPlayNextHandler(); }, this.interval );
		},
		
		autoPlayNextHandler: function()
		{
			if( this.enableAutoPlay )
			{
				// Next
				var idx = this.currentIndex + 1;
				if( idx > this.maxIndex )
				{
					idx = 2;
				}
				this.showNext( idx );
			}
			else
			{
				if( this.intervalHandle )
				{
					clearInterval( this.intervalHandle );
				}
			}
		
		}
	
	};
	
	scroller.init({});
	
	var preloadImages = 
	{
		cache: [],
		imagePrefix: '',
		
		init: function()
		{
			this.imagePrefix = cfg[0] + '/images/';
			
			var args_len = arguments.length;
			for( var i = args_len; i--; )
			{
				var cacheImage = document.createElement('img');
				cacheImage.src = this.imagePrefix + arguments[i];
				this.cache.push( cacheImage );
			}
		}
	};

	preloadImages.init( 'hp-feature-welcome.jpg','hp-feature-dragdrop.jpg','hp-feature-trustedusers.jpg','hp-feature-reports.jpg','hp-feature-budgets.jpg','hp-feature-uploads.jpg','hp-feature-accountant.jpg' );
	
});