;
(function($){
	$.fn.playImgs = function(settings){
		var options = $.extend({
			imgCSS		: {}, // 用户自定义图片样式
			transition	: 0,  // 播放模式选项 1:溶解，2:挂历模式，3:滑动(从左到右),4:滑动(从上到下),5:滑动(从下到上),6:滑动(从右到左),23:随机
			width		: '', // 播放器div容器的宽度
			height		: '', // 播放器div容器的高度
			time		: 0,  // 图片播放间隙时间,单位：毫秒
			duration	: 500,// 图片播放时间,单位：毫秒
			onStart		: function(){}, // 开始播放时执行的函数
			onStop		: function(){}, // 停止播放时执行的函数
			onShow		: function($) {$.show();}, // 每页图片显示时执行的函数
			onHide		: function($) {$.hide();}  // 每页图片隐藏时执行的函数
		}, settings);

		// 获得图片播放器容器
		var $container 	= this.hide().addClass("focuspic_div").css('width',options.width).css('height',options.height);
		// 获得图片数组
		var $images 	= $container.find("img").hide().css(options.imgCSS).addClass("focuspic_img");
		// 最后一张（从左到右）图片的索引
		var lastIndex 	= $images.length - 1;
		// 最后一次访问图片的索引（从0开始）
		var prevIndex	= lastIndex;
		var index = 0;		// 记录当前索引值, 默认为第一张图片的索引：0
		var timer;			// 定时器

		// 生成标题栏
		var $title_bar = $("<div>&nbsp;</div>").appendTo($container).addClass("focuspic_title").fadeTo('fast', "0.75");
		$title_bar.width($container.width() - 5 * 2);//除去 $title_bar自身左右padding 5px

		// 生成索引序号
		var $indexGroups = $("<ul></ul>").addClass("focuspic_ul").fadeTo('fast', 0.9);
		for (var i = 0; i < $images.length; i++) {
			$indexGroups.append("<li class='focuspic_pagehide'>" + (i + 1) + "</li>");
		}
		// 获取序号元素的jQuery对象数组
		var $sn = $indexGroups.appendTo($container).children("li")

		// 为每一个图片绑定hover事件
		$images.hover(function(){
			pause();
		},function(){
			timer = setTimeout(run, options.time);
		});

		// 为每一个li标签绑定hover事件
		$sn.addClass("focuspic_li").hover(function() {

			$('.focuspic_img:animated').stop(false,true);		// + modified by sur
			// 计算当前图片的索引
			index = $.trim($(this).text()) - 1;

			if (prevIndex != index) {
				// 隐藏上一张图片
				hide(prevIndex);

				// 显示当前索引的图片
				show(index);
			}
			// alert("prevIndex : " + prevIndex + ",  index : " + index);


			// 记住当前图片索引
			prevIndex = index;

			// 计时器停暂停运行
			pause();
		}, function() {
			prevIndex = $.trim($(this).text()) - 1;
			timer = setTimeout(run, options.time);
		});

		function run() {
			// 计算index值，如果指定显示正在显示的图片，则计时器将显示下一幅图片
			index = index == prevIndex ? index + 1 : index;
			// 计算index值，超过最后索引值则重置
			index = index > lastIndex ? 0 : index;

			if (options.transition == 23) {
				var random_num = parseInt(Math.random() * 5) + 1;
				$container.playAction(random_num);
			}

			hide(prevIndex);
			show(index);

			prevIndex = index;
			index++;

			timer = setTimeout(run, options.time);
		}

		function show(index) {
			options.onShow($images.eq(index));
			$title_bar.text($images.eq(index).parent("a").attr("title"));

			$sn.eq(index).removeClass("focuspic_pagehide").addClass("focuspic_pageshow");
		}

		function hide(index) {
			options.onHide($images.eq(index));
			$sn.eq(index).removeClass("focuspic_pageshow").addClass("focuspic_pagehide");
		}

		function pause() {
			options.onStop();
			clearTimeout(timer);
		}

		$container.start = function(){ options.onStart();run();return $container;}
		$container.stop  = function(){ options.onStop();pause();return $container;}

		// 定义动画
		$container.playAction = function(n) {
			switch(n) {
				case 1 :
					options.onShow = function($_) {$_.fadeIn(options.duration);};
					options.onHide = function($_) {$_.fadeOut(options.duration);};
					break;
				case 2 : // 日历模式
					options.onShow = function($_) {$_.slideDown(options.duration);};
					options.onHide = function($_) {$_.slideUp(options.duration);};
					break;
				case 3 : // →
					options.onShow = function($_){
						$_.css("left",  -$_.width() + 'px').show().animate({left: "0px"}, options.duration);
					};
					options.onHide = function($_){
						$_.css("left", '0px').animate({left: $_.width() + 'px'}, options.duration);
					};
					break;
				case 4 : // ↓
					options.onShow = function($_){
						$_.css("top", -$_.height() + 'px').show().animate({top: "0px"}, options.duration);
					};
					options.onHide = function($_){
						$_.css("top", '0px').animate({top: $_.height() + 'px'}, options.duration);
					};
					break;
				case 5 : //↑
					options.onShow = function($_){
						$_.css("bottom", -$_.height() + 'px').show().animate({bottom: "0px"}, options.duration);
					};
					options.onHide = function($_){
						$_.css("bottom", '0px').animate({bottom: $_.height() + 'px'}, options.duration);
					};
					break;
				case 6 : //←
					options.onShow = function($_){
						$_.css("left",  $_.width() + 'px').show().animate({left: "0px"}, options.duration);
					};
					options.onHide = function($_){
						$_.css("left", '0px').animate({left: -$_.width() + 'px'}, options.duration);
					};
					break;
				case 23 :
					var random = parseInt(Math.random() * 5) + 1;
					break;
			}
			return this;
		}

		return $container.playAction(options.transition).show();
	}
})(jQuery);