/*
 * 
 * ImageScroller - a Image Horizental Scroll Viewer 
 * Version 0.1
 * 
 * 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();
//		_width	= _imgFrame.find(_child+':first').width();
		_imgFrame.animate( {marginLeft:-_width}, 'fast', '', function(){
			_imgFrame.find(_child+':first').appendTo( _imgFrame );
			_imgFrame.css('margin-left',0);
			_btnPrev.bind('click',turnLeft);
			if(_auto)
				autoPlay();
		});
	};

	var turnRight = function(){
		_btnNext.unbind('click',turnRight);
		if(_auto)
			autoStop();
//		_width	= _imgFrame.find(_child+':last').width();
		_imgFrame.find(_child+':last').clone().show().prependTo( _imgFrame );
		_imgFrame.css('margin-left',-_width);
		_imgFrame.animate( {marginLeft:0}, 'fast' ,'', function(){
			_imgFrame.find(_child+':last').remove();
			_btnNext.bind('click',turnRight);
			if(_auto)
				autoPlay(); 
		});
	};

	_btnNext.css('cursor','pointer').click(turnRight);
	_btnPrev.css('cursor','pointer').click(turnLeft);

	var autoPlay = function(){
		_itv = window.setInterval(turnRight, 3000);
	};
	var autoStop = function(){
		window.clearInterval(_itv);
	};
	if(_auto)
		autoPlay();
};