/**

 * slide.js
 * 
 * Slideshow
 * 
 * @author KienNT
 */

(function( $, undefined ) {
	
	/*
	 * Slideshow object.
	 */
	$.Slideshow 				= function( options, element ) {
	
		this.$el	= $( element );
		this._init( options );
		
	};
	
	$.Slideshow.defaults 		= {
		current		: 0,	// index of current item
		autoplay	: true, // slideshow on / off
		interval	: 6000  // time between transitions
    };
	
	$.Slideshow.prototype 	= {
		_init 				: function( options ) {
			
			this.options 		= $.extend( true, {}, $.Slideshow.defaults, options );
			
			this.$items			= this.$el.children(".sl-item");
			this.itemsCount		= this.$items.length;
			
			this.$nav			= this.$el.find('.nav');
			this.$navItems		= this.$nav.children();

			this.current		= this.options.current;
						
			this.$items.css({
				/*'opacity'	: 0,
				'visibility': 'hidden'
				,
				'opacity':0*/
				'display':'none'
			});
			
			var _self = this;
			
			this.$navItems.click(function(){
				_self._setSlide(_self.$navItems.index(this));
				return false;
			});
			
			this._validate();
			
			// load the events
			this._loadEvents();
			
			// slideshow
			this._setSlide(this.current);
			
			
		},
		_validate			: function() {
		
			if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {
				
				this.current = 0;
			
			}	
		
		},
		_loadEvents			: function() {
			
			
			
		},
		_navigate			: function( dir ) {
			
			switch( dir ) {
			
				case 'next' :
					var _current = this.current;
					
					if(this.current >= this.itemsCount - 1){
						this.current = 0;
					}
					else{
						this.current++;
					}
				
					this._changeSlide(_current, this.current);
					
					break;
					
				case 'prev' :
					var _current = this.current;
					
					if(this.current <= 0){
						this.current = this.itemsCount - 1;
					}
					else{
						this.current--;
					}
				
					this._changeSlide(_current, this.current);
					
					break;	
					
			};
			
			
		},
		_startSlideshow		: function() {
		
			var _self	= this;
			//this._setSlide(this.current);
			
			this.slideshow	= setTimeout( function() {
				
				_self._navigate( 'next' );
				
				if( _self.options.autoplay ) {
				
					_self._startSlideshow();
				
				}
			
			}, this.options.interval );
		
		},
		_setSlide		: function(index){
			if(index < 0 || index >= this.itemsCount){
				return;
			}
			
			clearTimeout(this.slideshow);
			this._changeSlide(this.current, index);
			
			if( this.options.autoplay ) {
			
				this._startSlideshow();
			
			}
		},
		_getItem		: function(index){
			return this.$items.eq(index);
		},
		_getNav			: function(index){
			return this.$navItems.eq(index);
		},
		_changeSlide	: function(from, to){
			var _currentItem = this._getItem(from);
			var _currentNav = this._getNav(from);
			var _nextItem = this._getItem(to);
			var _nextNav = this._getNav(to);
			
			_currentItem.fadeOut(1000);
			_nextItem.fadeIn(2000);
			
			var _transType = "slideshowImg "+(this.options.interval/1000 + 1)+"s";
			
			_nextItem.children("img").css("animation",_transType);
			_currentNav.removeClass("active");
			_nextNav.addClass("active");
			
			this.current = to;
		}
	};
	
	var logError 			= function( message ) {
		if ( this.console ) {
			console.error( message );
		}
	};
	
	$.fn.Slideshow			= function( options ) {
	
		if ( typeof options === 'string' ) {
			
			var args = Array.prototype.slice.call( arguments, 1 );
			
			this.each(function() {
			
				var instance = $.data( this, 'Slideshow' );
				
				if ( !instance ) {
					logError( "cannot call methods on Slideshow prior to initialization; " +
					"attempted to call method '" + options + "'" );
					return;
				}
				
				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
					logError( "no such method '" + options + "' for Slideshow instance" );
					return;
				}
				
				instance[ options ].apply( instance, args );
			
			});
		
		} 
		else {
		
			this.each(function() {
			
				var instance = $.data( this, 'Slideshow' );
				if ( !instance ) {
					$.data( this, 'Slideshow', new $.Slideshow( options, this ) );
				}
			});
		
		}
		
		return this;
		
	};


	/*
		Slide object
	*/

	$.Slide = function( options, element ) {
	
		this.$el	= $( element );
		this._init( options );
		
	};
	
	$.Slide.defaults 		= {
		current		: 0,	// index of current item
		started		: false,
		autoplay	: true, // Slide on / off
		interval	: 3000  // time between transitions
    };
	
	$.Slide.prototype 	= {
		_init 				: function( options ) {
			
			this.options 		= $.extend( true, {}, $.Slide.defaults, options );
			
			this.$items			= this.$el.find(".design-process-step-detail");
			this.itemsCount		= this.$items.length;
			
			this.$navItems		= this.$el.find('.design-process-step');

			this.current		= this.options.current;
						
			this.$items.css({
				/*'opacity'	: 0,
				'visibility': 'hidden'
				,
				'opacity':0*/
				'display':'none'
			});
			
			var _self = this;
			
			this.$navItems.click(function(){
				_self._setSlide(_self.$navItems.index(this));
				return false;
			});

			this.$items.hover(function(){
				_self._pauseSlide();
			}, function(){
				_self._resumeSlide();
			});
			
			this._validate();
			
			// load the events
			this._loadEvents();
			
			// Slide
			this._setSlide(this.current);
			
			
		},
		_validate			: function() {
		
			if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {
				
				this.current = 0;
			
			}	
		
		},
		_loadEvents			: function() {
			
			
			
		},
		_navigate			: function( dir ) {
			
			switch( dir ) {
			
				case 'next' :
					var _current = this.current;
					
					if(this.current >= this.itemsCount - 1){
						this.current = 0;
					}
					else{
						this.current++;
					}
				
					this._changeSlide(_current, this.current);
					
					break;
					
				case 'prev' :
					var _current = this.current;
					
					if(this.current <= 0){
						this.current = this.itemsCount - 1;
					}
					else{
						this.current--;
					}
				
					this._changeSlide(_current, this.current);
					
					break;	
					
			};
			
			
		},
		_startSlide		: function() {
		
			var _self	= this;
			//this._setSlide(this.current);
			
			this.Slide	= setTimeout( function() {
				
				_self._navigate( 'next' );
				
				if( _self.options.autoplay ) {
				
					_self._startSlide();
				
				}
			
			}, this.options.interval );
		
		},
		_setSlide		: function(index){
			if(index < 0 || index >= this.itemsCount || (index == this.current && this.started)){
				return;
			}

			this.started = true;
			
			clearTimeout(this.Slide);
			this._changeSlide(this.current, index);
			
			if( this.options.autoplay ) {
			
				this._startSlide();
			
			}
		},
		_getItem		: function(index){
			return this.$items.eq(index);
		},
		_getNav			: function(index){
			return this.$navItems.eq(index);
		},
		_changeSlide	: function(from, to){
			var _currentItem = this._getItem(from);
			var _currentNav = this._getNav(from);
			var _nextItem = this._getItem(to);
			var _nextNav = this._getNav(to);
			
			_currentItem.fadeOut(1000);
			_nextItem.fadeIn(1000);
			
			this.current = to;
		},
		_pauseSlide     : function(){
			clearTimeout(this.Slide);
		},
		_resumeSlide     : function(){
			if( this.options.autoplay ) {
				this._startSlide();
			}
		}
	};
	
	var logError 			= function( message ) {
		if ( this.console ) {
			console.error( message );
		}
	};
	
	$.fn.Slide			= function( options ) {
	
		if ( typeof options === 'string' ) {
			
			var args = Array.prototype.slice.call( arguments, 1 );
			
			this.each(function() {
			
				var instance = $.data( this, 'Slide' );
				
				if ( !instance ) {
					logError( "cannot call methods on Slide prior to initialization; " +
					"attempted to call method '" + options + "'" );
					return;
				}
				
				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
					logError( "no such method '" + options + "' for Slide instance" );
					return;
				}
				
				instance[ options ].apply( instance, args );
			
			});
		
		} 
		else {
		
			this.each(function() {
			
				var instance = $.data( this, 'Slide' );
				if ( !instance ) {
					$.data( this, 'Slide', new $.Slide( options, this ) );
				}
			});
		
		}
		
		return this;
		
	};
	
})( jQuery );