(function($){
	
	/***
	 * author: hao.lin@qunar.com
	 * usage:
	 * 
	 * HTML Sample

			 <div id="slider" class="slider"> 
			 	<img src="images/slideshow/01.jpg" width="630" height="300" />
				<div class="slider_pager">
					<a href="#" image="images/slideshow/01.jpg" class="active">1</a>
					<a href="#" image="images/slideshow/02.jpg">2</a>
					<a href="#" image="images/slideshow/03.jpg" >3</a>
					<a href="#" image="images/slideshow/04.jpg" >4</a>
				</div>
			</div>
			
		js Sample
			
			$('#slider').slideshow();	
	 * 
	 */
	
	function SlideShow( host , options ){		
		
		this.host = host;
		this.current = null;
		this.curhandler = null;
				
		var self = this;
		var options = options || {};
		
		var my = $(this.host);
		var alist = my.find('a');
		var frame = my.find('img');
		
		//============================
		
		this.start = function(){
			 
			var frame = my.find('img');
			
			//cache image
			alist.each(function(){
				var i = new Image();
				i.src = $(this).attr('image');
			});
			
			//register event
			alist.click(function(event){
				
				self.select( this );
	 
				event.stopPropagation();
				
				return false;
			});
			
			//stop image 
			my.mouseenter(function(){
				self.pause();
			});
			
			my.mouseleave(function(){
				self.play();
			});
			
			//start first image
			self.select( alist[ options.selectedIndex || 0 ] );
			
		};
		
		this.pause = function(){
			
			if ( self.curhandler ) {
				clearTimeout( self.curhandler );
			}

			self.state = 'pause';
			
		};
		
		
		this.play = function(){
			
			if ( !this.state == 'pause' ) return;
			
			if ( !this.current ){
				this.current = this.alist[0];
			}
			
			//next
			var self = this;
			self.curhandler = setTimeout(function(){
				self.next();
			}, options.interval || 5000 );
			
		};
		
		
		this.select = function( a ){
						
			var imgurl = $( a ).attr('image');
            var link = $( a ).attr('link');
			
			//state
			self.state = 'playing';
			
			//prev hander
			if ( self.curhandler ) {
				clearTimeout( self.curhandler );
			}
			
			//handler
			if ( self.current ) {
				$( self.current ).removeClass('active');
			}
			
			$( a ).addClass('active');
			
			//picture
			frame.fadeOut('fast',function(){
								
				frame[0].src = imgurl;

                if ( link ) {
                    
                    frame.unbind();
 
                    frame.click(function(){
                        window.open( link );
                    });

                    frame.css({ cursor : 'pointer' });
    
                } else {

                    frame.unbind();
                    frame.css({ cursor : '' });                    

                }
				
				frame.fadeIn('slow');
				
			});
					
			self.current = a;
			
			//next
			self.curhandler = setTimeout(function(){
				self.next();
			}, options.interval || 5000 );
		};
		
		this.next = function(){
			 
			var idx = $.inArray( this.current , alist );
			
			if ( idx + 1 >= alist.length ) { 
				idx = 0; 
			} else {
				idx ++;
			}
			
			var a = alist[idx];
			
			this.select( a );
		};
		
		//============================
		
		this.start();
	};
	 
	  
	
	//----------------------------
	
	$.fn.slideshow = function( options ) {
		 
		return $.each( this , function(){
			this.slider = new SlideShow( this , options );
		});
		
	};
	
	
})(jQuery);