/*!*******************************************************************************
|	$Revision$
|	$Date$
|
********************************************************************************/  

/* CP.Slide Manager
----------------------------------------------------------------------------*/
CP.set( 'Slide', {
	initialize: function( uid, options, slides, menu )
	{
		this.defaults = {
			baseHref: CP.BASE_HREF,
			loaderHtml: 	['<div class="loader">',
							'<div class="inner">',
							'<img src="' + this.baseHref + 'img/loader.gif" width="35" height="35" alt="Loader"/>',
							'<p>' + __( 'Loading' ) + '...</p>',
							'</div>',
							'</div>'].join(''),

			slideSelector: '.slide-list',
			slideItemSelector: '.slide',						

			menuSelector: '.slide-selectors',
			menuItemSelector: 'li',

			width: 580,
			height: 300,

			autoRotate: true,
			rotateDelay: 5000,	

			// Callbacks
			beforeSelect: function(){},
			afterSelect: function(){}				
		};

		this.settings = {};
		this.setParams( options || {} );

		this.uid = uid;
		this.dom = $( '#' + uid );
		this.dom.addClass( this._ns.instanceClass );

		this.slidesWrap = slides || $( this.settings.slideSelector, this.dom );
		this.slides = this.slidesWrap.find( this.settings.slideItemSelector );

		this.menuWrap = menu || $( this.settings.menuSelector, this.dom );	
		this.menu = this.menuWrap.find( this.settings.menuItemSelector );

		this.loader = null;
		this.currentSlide = null;

		this.paused = false;	
		this.free = true;
		this.rotateInterval = null;

		this.init();

		return this;
	}
	,setParams: function( options )
	{
		this.settings = $.extend( this.settings, this.defaults, options );
	}
	,init: function()
	{
		var _this = this;

		this.loader = $( this.settings.loaderHtml ).css( 'display', 'none' );
		this.slidesWrap.append( this.loader );
		this._bind();
		this.select( 0 );

		if( this.settings.autoRotate )
		{
			this.dom.hover(
				function(){
					// _this.paused = true;
					_this.stop();
				},
				function(){
					// _this.paused = false;
					_this.start();									
				}				
			);
			this.start();
		}

	}
	,stop: function(){
		if ( this.rotateInterval != null )
			clearInterval( this.rotateInterval );
	}
	,start: function(){
		var _this = this;

		this.stop();
		this.rotateInterval = setInterval( function(){
			if( !_this.paused )
				_this.next();
		}, this.settings.rotateDelay ); 
	}
	,pause: function()
	{
		this.paused = !this.paused;
	}	
	,_bind: function()
	{
		var _this = this;

		this.menu.each( function( id, menu ){
			var $menu = $( menu );
			if( !$menu.is( 'a' ) )
				$menu = $menu.find( 'a' );

			$menu.click( function( e ){
				e.preventDefault();
				_this.select( id );
			})
		})
	}
	,select: function( id )
	{
		var _this = this,
			$slide = this.slides.filter( ':eq(' +id + ')'),
			$nav = this.menu.filter( ':eq(' +id + ')'),
			$siblings = $slide.siblings();

		// if( _this.free == false )
		// 	return;

		this.free = false;
		
		if( $.isFunction( this.settings.beforeSelect ) )
			this.settings.beforeSelect.call( this, id );

		this._activate( $nav, id );

		// fadeOut
		var $last = $siblings.filter( '.active' ).fadeOut( 'fast', function(){
			_slide();
		});

		if ( !$last.length )
			_slide();

		function _slide()
		{
			if( _this.currentSlide == id )
				return false;

			_this.currentSlide = id;

			var loaded = _this._load( $slide, function(){
				_this.loader.hide();
				$slide.fadeIn( 'fast', function(){
					_this.free = true;
				} );
				_this._activate( $slide, id );
				if( $.isFunction( _this.settings.afterSelect ) )
					_this.settings.afterSelect.call( _this, id );				
			});

			if( !loaded )
				_this.loader.show();
		}

	}
	,prev: function()
	{
		this.step( -1 );
	}
	,next: function()
	{
		this.step( 1 );		
	}
	,step: function( step )
	{
		var index = this.currentSlide + step;

		if( !this.slides[index] )
		{
			if( step > 0 )
				index = 0;
			else
				index = this.slides.length - 1;			
		}

		this.select( index );
	}
	,_load: function( slide, callback )
	{
		var _this = this,
			$images = $( slide ).find( 'img' ),
			missingImages = [];

		$images.each( function()
		{
			if( !this.complete )
				missingImages.push( this );
		});

		if( missingImages.length == 0 )
		{
			if( $.isFunction( callback ) )
				callback.call( _this );

			return true;			
		}

		// TODO: we should have one callback per slide!
		$.each( missingImages, function( id, item ){
			var im = new Image();

			$( im ).load( function(){
				if( $.isFunction( callback ) )
					callback.call( _this );

			}).attr( 'src', item.src );			
		});

		return false;
	}
	,_activate: function( $el, id ) 
	{
		$el.addClass( 'active' ).addClass( 'active-' + id );
		$el.siblings().removeClass( 'active' );

		for (var i = this.slides.length - 1; i >= 0; i--){
			$el.siblings().removeClass( 'active-' + i );
		};
	}	
});
CP.Slide.instanceClass = 'cp-slide';