jQuery.fn.extend({
	complete: function(fn) {
		var $complete = true;
		$(this).each(function(){
			if($(this).attr("complete") !== true){
				$complete = false;
				return false;
			}
		});
		var $args = arguments; 
		var $this = this;
		if($complete){fn();}else{setTimeout(function(){$args.callee.apply($this,$args)},1);}
	}
});

$(document).ready(function(){
	(function(){
		$("#play_list").scrollLeft(0); //回到第一帧
		$("#play_list a").click(function(){return false;}) //取消所有click
		$("#play_list a").each(function(i) {
				$("#play_text").append("<span class=\"unselect\">" + (i + 1) + "</span>");
		}); //增加数字控制按钮
		$("#play_text span").css("color","gray"); //设置成灰色，代表不可以操作
		$("#play_text span:first").removeClass("unselect").addClass("select"); //选中第一按钮
		$("#play_info").html("<a href=\"" + $("#play_list a:first").attr("href") + "\">" + $("#play_list a img:first").attr("alt") + "</a>");
	})();

	//计算宽度得等图片加载完毕
	$("#play_list img").complete(function(){
		$("#play_text span").css("color",""); //去掉灰色
		var $mouseX = 0; //鼠标X轴坐标
		var $scrollLeft = 0; //滑动位置标记
		var intervalID = null; //视窗轮换计时器标识
		(function(){
			$("#play_list").width($("#play_list img:first").width())
			intervalID = window.setInterval(autoPlay, 3000); //启动计时器
		})();

		//开始工作，记录鼠标位置
		$("#play_list img").mousedown(function(e){$mouseX = e.pageX;return false;	});

		$("#play_list img").mouseup(function(e){
			if($mouseX > 0){
				var $move = $mouseX-e.pageX;//滑动偏移量
				//点击处理
				if($move==0){
					$("#play_list img").unbind();//取消所有在图片上的事件，防止用户拖动图片
					window.location = $(this).parent().attr("href");
					return false;
				}			
				$mouseX = 0;//还原设置值
				var $target = ($move > 0)?$(this).parent().next():$(this).parent().prev();
				if($target.html() != null){
					play($target);
				}
			}
			return false;
		});

		//图片跟随鼠标滑动
		$("#play_list img").mousemove(function(e){
			if($mouseX > 0){
				var $move = $scrollLeft + $mouseX-e.pageX; 
				$("#play_list").scrollLeft($move);
			}
			return false;
		});

		//数字控制按钮
		$("#play_text span").mousemove(function() {
			if($(this).attr("class") != "select"){ //防止事件重复发生
				var $i = $(this).prevAll().length;
				play($("#play_list a").eq($i));
			}
		});

		//鼠标进入后，自动滑动停止
		$("#event").hover(
				 function() { window.clearInterval(intervalID); },
				function() { intervalID = window.setInterval(autoPlay, 3000); }
		);

		//滑动效果
		//$targe：将要滑动的元素
		function play($target){
			$("#play_list").stop(true,false);
			$("#play_text .select").removeClass("select").addClass("unselect"); //删除已选定的数字按钮
			var $i = $target.prevAll().length;
			$("#play_text span").eq($i).removeClass("unselect").addClass("select"); //加上选定数字效果

			$scrollLeft = $("#play_list").scrollLeft()+$target.offset().left - $target.parent().offset().left;
			$("#play_list").animate({ scrollLeft: $scrollLeft },300); //设置滑动位置及动画效果
			
			//加上说明字幕
			$("#play_info").html("<a href=\"" + $target.attr("href") + "\">" + $target.find("img").attr("alt") + "</a>");
		}

		function autoPlay(){
			var $i = $("#play_text .select").prevAll().length;
			$i++; //滑动到后一帧
			if($i >= $("#play_text span").length){
				$i = 0;
			}
			play($("#play_list a").eq($i));
		}
	});
});

$(document).ready(function() {
    $(".roll .ArrowL img").hover(img_over, img_over)
        .mouseenter(function() { img_mouseenter($(this), 1); })
        .mouseleave(function() { img_mouseleave($(this), 1); });
    $(".roll .ArrowR img").hover(img_over, img_over)
        .mouseenter(function() { img_mouseenter($(this), -1); })
        .mouseleave(function() { img_mouseleave($(this), -1); });

    function img_mouseenter($this, f) {
        var $div = $this.parent();
        var $scrollLeft = 0;
        var $distance = 0;
        if (f > 0) {
            $div = $div.next();
            $scrollLeft = $div.attr("scrollWidth");
            $distance = $scrollLeft - $div.attr("scrollLeft");
        } else {
            $div = $div.prev();
            $distance = $div.attr("scrollLeft");
        }
        var $speed = $distance / 0.5;
        $div.animate({ scrollLeft: $scrollLeft }, $speed);
    }

    function img_mouseleave($this, f) {
        var $div = $this.parent();
        $div = (f > 0) ? $div.next() : $div.prev();
        $div.stop();
    }

    function img_over() {
        var src = $(this).attr("src");
        if (src.indexOf("over.gif") == -1) {
            src = src.replace(".gif", "_over.gif");
        } else {
            src = src.replace("_over.gif", ".gif");
        }
        $(this).attr("src", src);
    }
});