/*
@HTML
<div id="imgcontainer">
	<ul>
		<li><a href="articleurl1"><img src="imgurl1" /></a>
		<li><a href="articleurl2"><img src="imgurl2" /></a>
	</ul>
</div>
@DOM
<div id="imgcontainer">
	<var><i>1</i><i>2</i></var>
	<ul>
		<li><a href="articleurl"><img src="imgurl" /></a>
		<li><a href="articleurl2"><img src="imgurl2" /></a>
	</ul>
</div>
@CSS
#imgcontainer{position:relative;float:right;width:435px;margin-top: 5px;display: inline;}
#imgcontainer {width:435px;}
#imgcontainer li a{text-decoration:none;}
#imgcontainer li a img{width:440px;height:290px;border:0px;}
#imgcontainer li a i{font-style: normal;background:#000;display:block;height:25px;text-align:center;font-weight:bold;font-size:14px;text-decoration:none;color:#fff;line-height:25px;cursor:pointer;}
#imgcontainer var {position:absolute;top:270px;left:360px;}
#imgcontainer var i{float:left;margin:0px 1px;width:18px;height:14px;text-align:center;text-decoration:none;font-size:11px;color:#fff;line-height:14px;background:#000;font-weight:normal;font-family: Arial;border: solid 1px #ccc;cursor:pointer;}
#imgcontainer var i.actived{background:#f30;}

@Usage
*    $('#imgcontainer').imgSlideShow(options);
* @options
*    btn:"num" //按钮样式： num 数字按钮式，img 缩略图片式
*    delay: 2000 //切换延时
*    speed:300 //图片淡入淡出速度
*/

(function($){
    $.fn.extend({
        'imgSlideShow': function(options){
            // 扩展参数
            var op = $.extend({
                'btn': "num",
                'delay': 2000,
								'speed':300
            }, options);
            // 设置窗口的样式
            this.css({
                position: 'relative',
                overflow: 'hidden'
            });
            // 设置图片项的样式
            $('ul li',this).css({
                clear: 'both',
                display: 'none'
            });
						// 取得所有图片项
            var items = $('ul li', this);
            // 图片项的数目
            var itemsLength = items.length;
            // 当前的图片项索引
            var curItemIndex = 0;
            // 当前的 timeout 函数返回值
            var timeoutReturn;
            
						var obj=this;
            // 添加按钮项
						var currentBtn="";
            for(var i=0;i<itemsLength;i++){
                if(op.btn=="num"){
									currentBtn+='<i>' + (i + 1) + '</i>';
                }else if(op.btn=="img"){
									currentBtn+='<i><img src="' + $('img',obj)[curItemIndex].src + '" /></i>';
                }
            }
						$("<var>"+currentBtn+"</var>").appendTo(obj);
						$("var i",obj).each(function(idx){
							$(this).mouseover(function(e){// 标签项的鼠标滑过事件
								items.eq(curItemIndex).hide();
								// 阻止事件流
								e.stopPropagation();
								// 暂停当前的 timeout 函数
								clearTimeout(timeoutReturn);
								// 设置标签项的样式
								$("var i.actived",obj).removeClass("actived");
								$("var i",obj).eq(idx).addClass("actived");
								// 重新设置索引
								curItemIndex = idx;
								items.eq(curItemIndex).fadeIn(op.speed);
							});
							$(this).mouseout(function(e){// 标签项的鼠标离开事件
								// 从当前的索引开始，重新开始图片动画
								timeoutReturn = setTimeout(obj.imgFadeOut, op.delay);
							});
							
						});
            // 图片动画执行函数
            this.imgSlideShowProcess = function(){
								$('var i',obj).eq(curItemIndex).addClass("actived");
								items.eq(curItemIndex).fadeIn(op.speed, function(){
                    timeoutReturn = setTimeout(obj.imgFadeOut, op.delay);
                });
            };
            // 淡出图片
            this.imgFadeOut = function(){
                items.eq(curItemIndex).fadeOut(1, function(){
										$("var i.actived",obj).removeClass("actived");
                    curItemIndex = (curItemIndex + 1) % itemsLength;
                    obj.imgSlideShowProcess();
                });
            };
            // 开始图片动画
            this.imgSlideShowProcess();

            return this;
        }
    });
})(jQuery);