/*
 * 
 * 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.homeViewer = function(options){
	var defaults = { 
		next:"next",
		prev:"prev",
		child:"slide",
		delay: 5000,
		duration: 500,
		auto:true
	  }; 
	var p = $.extend({}, defaults, options); 
	
	p.next = $("." + p.next, this);
	p.prev = $("." + p.prev, this);
	p.child = "." + p.child;
	var _imgFrame = this;
	var _childs = $(p.child,_imgFrame);

	if (_childs.length <= 1){
		p.auto = false;
	}
	var interval;
	var _firstchild = _imgFrame.find(p.child+":first");
	var _width = _firstchild.width();
	_firstchild.appendTo( _imgFrame );
	var turnLeft = function (e){
		e.preventDefault();

		p.prev.unbind("click");
		_firstchild = _imgFrame.find(p.child+":first");
		_lastchild = _imgFrame.find(p.child+":last");
		_width = _firstchild.width();
		_firstchild.css('marginLeft',_width);
		_firstchild.appendTo( _imgFrame );
		$(".slide",_imgFrame).removeClass('active');
		_firstchild.addClass('active');
		if(p.auto) autoStop();
			
		_firstchild.animate({
			  marginLeft: parseInt(_firstchild.css('marginLeft'),10) == 0 ?
				-_firstchild.outerWidth() :
				0
			}, p.duration, function (){
				p.prev.bind("click",turnLeft);
				if(p.auto) autoPlay();
				setActivetab(_firstchild.attr('id'));
		});
		_lastchild.animate({
			  marginLeft: parseInt(_lastchild.css('marginLeft'),10) == 0 ?
				-_lastchild.outerWidth() :
				0
			}, p.duration, function (){
				_lastchild.css("marginLeft",0);
		});
	};
	var turnRight = function (e){
		
			e.preventDefault();
		
		p.next.unbind("click");
		if(p.auto) autoStop();
		_childs = $(p.child,_imgFrame);
		if (_childs.length > 2){
			var _firstchild = _childs.eq(_childs.length-2);
		} else {
			var _firstchild = _imgFrame.find(p.child+":first");
		}
		_lastchild = _imgFrame.find(p.child+":last");
		_firstchild.css('marginLeft',-_width);
		$(".slide",_imgFrame).removeClass('active');
		_firstchild.addClass('active');
		
		_firstchild.animate({
			  marginLeft: parseInt(_firstchild.css('marginLeft'),10) == 0 ?
				_firstchild.outerWidth() :
				0
			}, p.duration, function (){
				p.next.bind("click",turnRight);
				if(p.auto) autoPlay();
				setActivetab(_firstchild.attr('id'));
		});
		
		_lastchild.animate({
			  marginLeft: parseInt(_lastchild.css('marginLeft'),10) == 0 ?
				_lastchild.outerWidth() :
				0
			}, p.duration, function (){
				_lastchild.prependTo( _imgFrame );
				_lastchild.css("marginLeft",0);
		});
		
	};
	p.next.click( turnRight );
	p.prev.click( turnLeft );
	
	function doClick(){
		p.prev.trigger('click'); 
	};
	// trigger the redirect now
	//doClick();

	
	$(".pager a",_imgFrame).click(function(event){event.preventDefault();});
	
	var setActivetab = function (slideid) {
		$(".pager a",_imgFrame).each(function(index) {
			$(this).removeClass('active');
			if ($(this).attr("href") == "#"+slideid){
				$(this).addClass('active');
			}				
		});
		$(".pager a",_imgFrame).removeClass
	};
	var autoPlay = function () {	  
	  interval = window.setInterval(doClick, p.delay);
	};
	var autoStop = function () {
		window.clearInterval(interval);
	};
	
	if (p.auto)	{
		autoPlay();
		this.hover(
			function(){	
				$(p.prev, this).fadeIn("1");			
				$(p.next, this).fadeIn("1");					
			},
			function(){
				$(p.prev, this).fadeOut("1");			
				$(p.next, this).fadeOut("1");			
			}
		);
	}
};