/*
 * 
 * ImageScroller - a Image Horizental Scroll Viewer 
 * Version 0.1
 * @requires jQuery v1.2.1
 * 
 * Copyright (c) 2007 Luan
 * Email verycss-ok@yahoo.com.cn 
 * 
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * 
 * Example:
 *   #viewer {height:100px; width:300px; clear:both; overflow:hidden; border:3px solid #e5e5e5;}
 *   #viewerFrame {width:505px; clear:both; padding:0;}
 *   #viewer img {width:90px; height:90px; margin:5px; display:inline; border:0;}
 *   #viewer a {display:block; float:left; width:100px; height:100px;}
 *   <script type="text/javascript">
 *   $(function(){
 *   	$("#viewer").imageScroller({
 *   	next:"btn1",
 *   	prev:"btn2",
 *   	frame:"viewerFrame",
 *   	width:100, 
 *   	child:"a",
 *   	auto:true
 *   	});	 
 *   });
 *   </script>
 *   <div id="viewer"><div id="viewerFrame">
 *   <a href=""><img src="pre1.jpg"></a>
 *   <a href=""><img src="pre2.jpg"></a>
 *   <a href=""><img src="pre3.jpg"></a>
 *   <a href=""><img src="pre4.jpg"></a>
 *   <a href=""><img src="pre5.jpg"></a>
 *   </div></div>
 *   <span id="btn1">prev</span><br/><span id="btn2">next</span>   
*/

jQuery.fn.imageScroller = function(params){
	var p = params || {
		next:"buttonNext",
		prev:"buttonPrev",
		frame:"viewerFrame",
		width:100,
		child:"a",
		auto:true
	}; 
	var _btnNext = $("#"+ p.next);
	var _btnPrev = $("#"+ p.prev);
	var _imgFrame = $("#"+ p.frame);
	var _width = p.width;
	var _child = p.child;
	var _auto = p.auto;
	var _itv;
	
					
	var turnLeft = function(){
		_btnPrev.unbind("click",turnLeft);
		if(_auto) autoStop();
		_imgFrame.animate( {marginLeft:-_width}, 800, 'jswing', function(){
			_imgFrame.find(_child+":first").appendTo( _imgFrame );
			_imgFrame.css("marginLeft",0);
			_btnPrev.bind("click",turnLeft);
			if(_auto) autoPlay();
			alert(_imgFrame.html());
		});
	};
	var stopFlag = false;
	var turnRight = function(){
		if(stopFlag == false)
		{
			_btnNext.unbind("click",turnRight);
			if(_auto) autoStop();
			//var nodesSize = _imgFrame.find(_child).size();
			

			var nodeU = _imgFrame.find(_child+":last");
			nodeUid = nodeU.attr('id');
			var emPopup = nodeU.find('em.popup').html();
			
			nodeU.clone().attr('id',nodeUid+'1').hover( function(){
				if($('#'+this.id+' em.popup').hasClass('exception-anim'))
				{
					var exception_a_ = true;
					$('#'+this.id+' em.popup').fadeIn('fast');
				}else{
					 $('#'+this.id+' em.popup').fadeIn('fast');
				}	
				stopFlag = true;
				stop(true);
					},
					function(){
						 $('#'+this.id+' em.popup').fadeOut('fast');
						 stopFlag = false;
							
					}).show().prependTo( _imgFrame );
			_imgFrame.css("marginLeft",-_width);
			_imgFrame.animate( {marginLeft:0}, 800 ,'jswing', function(){
				_imgFrame.find(_child+":last").remove();
				_btnNext.bind("click",turnRight);
				if(stopFlag != true)
					if(_auto) autoPlay(); 
				//alert($(_imgFrame+'>em').html()));
			});
			
			jQuery.each(_imgFrame.find(_child), function(i) {
				if( i==0 || i==7 )
				{
					$('#'+this.id+' em.popup').addClass('exception-anim');
					if(i==0) $('#'+this.id+' em.popup').addClass('exception-anim-left');
					if(i==7) $('#'+this.id+' em.popup').addClass('exception-anim-right');
				}else{
					$('#'+this.id+' em.popup').removeClass('exception-anim');
					$('#'+this.id+' em.popup').removeClass('exception-anim-left');
					$('#'+this.id+' em.popup').removeClass('exception-anim-right');
				}
			});
			
		}
	};
	
	_btnNext.css("cursor","hand").click( turnRight );
	_btnPrev.css("cursor","hand").click( turnLeft );
	
	var autoPlay = function(){
	  _itv = window.setInterval(turnRight, 3000);
	};
	var autoStop = function(){
		window.clearInterval(_itv);
	};
	if(_auto)	autoPlay();
	
	jQuery.each(_imgFrame.find(_child), function(i) {
				if( i==0 || i==7 )
				{
					$('#'+this.id+' em.popup').addClass('exception-anim');
					if(i==0) $('#'+this.id+' em.popup').addClass('exception-anim-left');
					if(i==7) $('#'+this.id+' em.popup').addClass('exception-anim-right');
				}else{
					$('#'+this.id+' em.popup').removeClass('exception-anim');
					$('#'+this.id+' em.popup').removeClass('exception-anim-left');
					$('#'+this.id+' em.popup').removeClass('exception-anim-right');
				}
			});
	$('.bubbleInfo').hover( function(){
				if($('#'+this.id+' em.popup').hasClass('exception-anim'))
				{
					var exception_a_ = true;
					$('#'+this.id+' em.popup').fadeIn('slow');
				}else{
				 $('#'+this.id+' em.popup').fadeIn('slow');
				 
				}
				autoStop();
				},
				function(){
					 $('#'+this.id+' em.popup').fadeOut('fast');
					 autoPlay();		 
	});
};