/*
 *精品酒店页面图片切换效果
 * 此效果需要在指定目录下放置图片，在调用页面上有 hotelid这个值.否则无法使用
 */
$(function() {
	function beginPlayImg(){
		var sWidth = $("#Info_image_px .px_image").width(); //获取焦点图的宽度（显示面积）
		var len = $("#Info_image_px .px_image>ul>li").length; //获取焦点图个数
		var index = 0;
		var picTimer;
		//显示图片
		showPics(0);

		//上一页按钮
		$("#Info_image_px .px_prev").click(function() {
			index -= 1;
			if(index == -1) {index = len - 1;}
			showPics2(index,'Up');return false;
		});

		//下一页按钮
		$("#Info_image_px .px_next").click(function() {
			index += 1;
			if(index == len) {index = 0;}
			showPics2(index,'Down');return false;
		});

		//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
		$("#Info_image_px ul").css("width",sWidth * (len));
		
		//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
		$("#Info_image_px").hover(function() {
			clearInterval(picTimer);
		},function() {
			picTimer = setInterval(function() {
				showPics2(index,'Down');
				index++;
				if(index == len) {index = 0;}
			},4000); //此4000代表自动播放的间隔，单位：毫秒
		}).trigger("mouseleave");
		
		function showPics(index) { //普通切换
			var nowLeft = -index*sWidth;
			var h=index;
			var showObj =  $("#Info_image_px .px_image>ul>li");
			$("#Info_image_px ul").stop(true,false).animate({"left":nowLeft},300);//移动换
			$("#Info_image_px .px_page").html((index+1) + ' / ' + len);
			$("#Info_image_px .px_describ").html(showObj.eq(index).find('img').attr('title'));
		}
		function showPics2(index,direction){
			if(direction == "Down"){
				Obj = $("#Info_image_px .px_image>ul>li:first").fadeTo(0.1, 0);
				setTimeout('Obj.appendTo("#Info_image_px .px_image>ul").fadeTo("slow", 1)',100);
				showObj = Obj;
			}else{
				Obj = $("#Info_image_px .px_image>ul>li:last").fadeTo(1000, 0);
				setTimeout('Obj.prependTo("#Info_image_px .px_image>ul").fadeTo("slow", 1)',1000);
				showObj = Obj.prev();
				
			}
			$("#Info_image_px .px_page").html((index+1) + ' / ' + len);
			$("#Info_image_px .px_describ").html(showObj.find('img').attr('title'));
		}
	}
	if(typeof beginPlayImg == 'function'){
		beginPlayImg();
	}
});