/* 彦磊基于jQuery图片平滑滚动插件(2009.04)
 * 在IE6/IE7/Mozilla 5.0（Firefox 3.0.5）中测试通过
 * 
 * 
 * 此插件要求运行在jQuery v1.2 或更高版本上
 * 插件可以实现图片平滑向上或向左滚动
 * 如果您需要更多的效果或在使用中本插件存在BUG，可以给在彦磊的博客上留言，彦磊将尽自己最大努力完善此插件
 * 您留言前请先到：http://gmarwaha.com/jquery/jcarousellite/ 上面下载jcarousellite插件　
 * 来和彦磊图片平滑滚动的插件相互补充使用以获取更多的图片效果
 * 彦磊图片平滑滚动插件只是对jcarousellite插件的补充
 * 
 * 
 * 技术支持：HTTP://HI.BAIDU.COM/DPXDQX
 * 此为自由拷贝版本，您可以在此基础上添加任何功能
 * 彦磊建议您将修改过的版本或发布地址发到彦磊博客上以共享，也建议您保留部分彦磊的信息
 * 
 * 
 * 此插件没有象jcarousellite插件样对相关元素的CSS全自动设置，部分CSS样式需要您为设置
 * 原因很简单：您需要考虑部分用户的浏览器不支持JAVASCRIPT或相关功能被禁用
 * 您需要让您的页面元素布局在此时也能显示正确，因此必要的CSS设置还需要您自己来做。
 * 
 * 使用前您一定要引入jQurey及本脚本,如
 *  <script type="text/javascript" src="js/jquery_last.js"></script>
 *  <script type="text/javascript" src="js/YlMarquee.js">
 * 使用方法：
 * 
 * 1、为您要设置滚动的对象设置容器，并命名class，如class="ylMarquee"
 * 2、将您要滚动的对象置入<ul></ul>中，并添加li标签，li标签中可以是图片、文字或表格……
 * 3、此版本需要您设置每个li列表的宽度或高度一至
 *  <div class="ylMarquee">
 *     <ul>
 *          <li><img src="image/1.jpg" alt="1"></li>
 *          <li><img src="image/2.jpg" alt="2"></li>
 *          <li><img src="image/3.jpg" alt="3"></li>
 *      </ul>
 *  </div>
 * 4、设置ylMarquee的height或width样式——向上滚动必须设置height的大小，向左滚动必须设置width的大小，否则页面将显示不正常。
 * 5、在页面中添加jQuery语句，调用此插件，并对相关参数进行设置,如：
 * <script type="text/javascript">
 * $(document).ready(function(){
 *  $(".stroll").jMarquee({
 *     visible:3,
 *     step:1,
 *     direction:"left"
 *   });
 *});
 * </script>
 * 6、插件相关参数：
 * visible:页面可见元素（图片）个数，默认为1，必须参数。
 * step:滚动步长，整数，默认为1，增大此数可加快滚动速度，设为0，则不进行滚动。
 * direction:滚动方向，有"left"（向左滚动）和"up"（向上滚动）两个参数，注意设置时一定要加英文的双引("")号或单引号('')。
 */

(function($) { 
	 $.fn.jmarquee = function(o) {
		o = $.extend({
			minspeed:1,
			maxspeed:30,
			minstep:1,
			maxstep:5,
			speed:30,
			step:1,				//滚动步长
			direction:"left",	//滚动方向
			visible:3			//可见元素数量
		}, o || {});

		//获取滚动内容内各元素相关信息
		var i=0;
		var div=$(this);

		var btnLeft = $(".left");
		var btnRight = $(".right");

		var ul=$("ul",div);
		var tli=$("li",ul);
		switch(o.direction){
			case "left":
				tli.css("float","left");
				break;
			case "right":
				tli.css("float","left");
				break;
		}
		var liSize=tli.size();
		var liWidth=tli.innerWidth();
		var liHeight=tli.height();

		var ulHeight=liHeight*liSize;
		var ulWidth=liWidth*liSize;
		var divWidth = liWidth*o.visible < div.width() ? liWidth*o.visible : div.width();
	  
		//如果对象元素个数大于指定的显示元素则进行滚动，否则不滚动。
		if(liSize>o.visible){
			ul.append(tli.slice(0,o.visible).clone())  //复制前o.visible个li，并添加到ul的最后
			li=$("li",ul);
			liSize=li.size();
			
			  //给滚动内容添加相关CSS样式
			div.css({"position":"relative",overflow:"hidden"});
			ul.css({"position":"relative",margin:"0",padding:"0","list-style":"none"});
			li.css({margin:"0",padding:"0","position":"relative"});

			switch(o.direction){
				case "left":
					div.css("width",(divWidth)+"px");
					ul.css("width",(liWidth*liSize)+"px");
					li.css("float","left");
					break;
				case "right":
					div.css("width",(divWidth)+"px");
					ul.css("width",(liWidth*liSize)+"px");
					li.css("float","left");
					break;
				case "up":
					div.css({"height":(liHeight*o.visible)+"px"});
					ul.css("height",(liHeight*liSize)+"px");
					break;
			}	
		   
			var MyMar=setInterval(ylMarquee,o.speed);

			ul.hover(
				function(){clearInterval(MyMar);},
				function(){MyMar=setInterval(ylMarquee,o.speed);}
			)

			btnLeft.mousedown(
				function(){
					o.direction = "left";
					o.step = o.maxstep;
					o.speed = o.minspeed;
					clearInterval(MyMar);
					MyMar=setInterval(ylMarquee,o.speed);
				}
			)
			
			btnLeft.mouseup(
				function(){
					clearInterval(MyMar);
					o.step = o.minstep;
					o.speed = o.maxspeed;
					MyMar=setInterval(ylMarquee,o.speed);
				}
			)

			btnRight.mousedown(
				function(){
					o.direction = "right";
					o.step = o.maxstep;
					o.speed = o.minspeed;
					clearInterval(MyMar);
					MyMar=setInterval(ylMarquee,o.speed);
				}
			)
			
			btnRight.mouseup(
				function(){
					clearInterval(MyMar);
					o.step = o.minstep;
					o.speed = o.maxspeed;
					MyMar=setInterval(ylMarquee,o.speed);
				}
			)
		};

		function ylMarquee(){
			 
			if(o.direction=="left"){
				if(div.scrollLeft()>=ulWidth){
					div.scrollLeft(0);
				}
				else
				{
					var leftNum=div.scrollLeft();
					leftNum+=parseInt(o.step);
					div.scrollLeft(leftNum)
				}
			}

			if(o.direction=="right"){
				if(div.scrollLeft()<=0){
					div.scrollLeft(ulWidth);
				}
				else
				{
					var leftNum=div.scrollLeft();
					leftNum-=parseInt(o.step);
					div.scrollLeft(leftNum)
				}
			}
			
			if(o.direction=="up"){
				if(div.scrollTop()>=ulHeight){
				   div.scrollTop(0);
				}
				else{
				   var topNum=div.scrollTop();
				   topNum+=parseInt(o.step);
				   div.scrollTop(topNum);
				}
			}
			
		};
	   
	}; 
	
})(jQuery);