data.chinahighlights.com/js/diy.js

//DIY China Tour
//2012-3-20 by shw

var uDays=0;
var uCities="";
var uCitiesId="";
var uCitiesNum=0;

var lsLeft=0;
var lsTop=new Array(4);

$(function(){
	var selectDays=$("#selectDays ul li");
	selectDays.click(function(){
		$("#selectDays").css("border","2px solid #FFF");
		$("#one").hide();
		$("#cityIcon,#goNext,#goBack").show(300);
		selectDays.attr("class","");
		$(this).attr("class","select");
		uDays=$(this).html();
		$("#selectDays").hide();
		$("#stepBox .steps").eq(1).addClass("on");
		msg();
	});
	
	var cityIcon=$("#cityIcon li.ico");
	
	cityIcon.hover(function(){
		$(this).css("opacity","0.8");
	},function(){$(this).css("opacity","1");});
	
	cityIcon.toggle(function(){
		if(uCitiesNum<uDays || 1==1){               //ȥ<><C8A5><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ƴ<EFBFBD><C6B3><EFBFBD>
			$(this).attr("class","select");
			uCitiesNum++;
		}
		msg();
	},function(){
		var thisClass=$(this).attr("class");
		if(uCitiesNum<=uDays && thisClass=="select"){
			$(this).attr("class","");
			uCitiesNum--;
		}
		msg();
	});
	
	$("#goBack").click(function(){
		$("h1").text("DIY Your China Tours");
		$("#cityIcon,#goNext,#goBack").hide();
		$("#selectDays").show(300);
		$("#stepBox .steps").eq(1).removeClass("on");
	});
	
	$("#goBackToCityIco,#goBackToCityIco_f").click(function(){
		$("#goBackToCityIco,#goBackToCityIco_f,#goNextToForm,#goNextToForm_f,#msgBox,#attractions").hide();
		$("#cityIcon li,#goNext,#goBack").show();
		$("#selectCity li").remove();
		$("#attractions div").remove();
		$("#nowNum").text(0);
		uCities="";
		$("#stepBox .steps").eq(2).removeClass("on");
	});
	
	$("#goNext").click(function(){
		
		//1
		
		uCities="";
		$("#selectCity li").remove();
		
		$("#stepBox .steps").eq(2).addClass("on");
		
		var selectCities=$("#cityIcon li.select");
		var selectNum=selectCities.length;
		for(var i=0;i<selectNum;i++){
			var selectCityName=selectCities.eq(i).find(".cityName").html();
			uCities+=selectCityName+" ";
			var thisCityActs=$('<div class="cityActs" id="'+selectCityName+'"></div>');
			$("#attractions").append(thisCityActs);
		}
		
		$("#goBack,#goNext").hide();
		$("#goBackToCityIco,#goNextToForm,#goBackToCityIco_f,#goNextToForm_f").show();
		
		selectCities.clone().prependTo("#selectCity"); 
		$("#cityIcon li").hide();
		$("#selectCity li").attr("class","");
		$("#selectCity").show(500);
		$("h1").append(" "+uCities+" DIY Tour");
		
		$("#sNum").text(2*uDays);
		$("#mNum").text(3*uDays);
		$("#lNum").text(4*uDays);
		$("#msgBox").show();
		
		var maxNum=4*uDays;
		
		var isLoad=0;
		
		//2
		var selectCity=$("#selectCity li");
		
		selectCity.click(function(){
			
			if(isLoad==0){
			
			isLoad=1;
			
			var thisId=$(this).find(".cityName").attr("id");
			
			lsTop[0]=0;
			lsTop[1]=0;
			lsTop[2]=0;
			lsTop[3]=0;
			lsLeft=0;
			
			//alert(thisId);
			
			var thisNum=$(this).index();
			selectCity.attr("class","");
			$("#attractions .cityActs").hide();
			$(this).attr("class","select");
			
			var isOld=$("#attractions .cityActs").eq(thisNum).find("ul").length;
			
			if(isOld==0){
			
				var loadDom=$("<div id='loadBox'><img src='/pic/loadLine.gif' id='loadPic' /></div>");
				var percentageDom=$("<p id='loadNum'>0 %<p>");
				$("#attractions .cityActs").eq(thisNum).html(loadDom);
				$("#attractions .cityActs").eq(thisNum).append(percentageDom);
				$("#loadNum").css({"text-align":"center","color":"#999","font-weight":"bold"});
				$("#attractions").show();
				$("#attractions .cityActs").eq(thisNum).show();
				
				$.post("/diy/attraction/",{pid:thisId},function(data){
					
					$("#attractions .cityActs").eq(thisNum).append(data);
					$("#attractions .cityActs").eq(thisNum).find("ul").hide();
					var thisLiNum=$("#attractions .cityActs").eq(thisNum).find("li").length;
					
					var thisDivImg=$("#attractions .cityActs").eq(thisNum).find("li").find("img");
					var divImgNum=0;
					var imgPercentage=0;
					
					thisDivImg.load(function(){
						
						divImgNum++;
						imgPercentage=((divImgNum/thisLiNum)*100).toFixed(2);
						
						$("#loadNum").html(imgPercentage+" %");
						
						$("#loadPic").css({"width":imgPercentage+"%","height":"39px"});
						
						if(divImgNum==thisLiNum){
							
							isLoad=0;
							
							var thisDivHeight=$("#attractions .cityActs").eq(thisNum).css("height");
							$("#attractions .cityActs").eq(thisNum).find("li").css({"position":"absolute"});
							loadDom.remove();
							percentageDom.remove();
							$("#attractions .cityActs").eq(thisNum).find("ul").show();
							
							var lastTopPx=0;
							
							for(var q=0;q<thisLiNum;q++){
						
								var nowNum=q+1;
								var nowTop=nowNum % 4;
								var thisLi=$("#attractions .cityActs").eq(thisNum).find("li").eq(q);
								var thisLiWidth=thisLi.css("width");
								var thisLiHeight=thisLi.css("height");
								
								thisLi.css({"left":lsLeft+"px","top":lsTop[3-nowTop]+"px"});
								
								lsLeft=lsLeft+parseInt(thisLiWidth)+25;
								lsTop[3-nowTop]=lsTop[3-nowTop]+parseInt(thisLiHeight)+26;
								if(nowTop == 0){
									lsLeft=0;
								}
								
								if(q==thisLiNum-1){
									var maxTop=0;
									for(var t=0;t<4;t++){
										if(t==0){
										maxTop=lsTop[t];
										}else{
											if(lsTop[t]>maxTop){maxTop=lsTop[t]}
										}
									}
									lastTopPx=maxTop;
								}
								
							}
							
							$("#attractions .cityActs").eq(thisNum).find("ul").css("height",lastTopPx+"px");
							
							//<2F><><EFBFBD>㽻<EFBFBD><E3BDBB>
							var attractionLi=$("#attractions .cityActs li img");
							
							attractionLi.hover(function(){
								$(this).css("opacity","0.9");
							},function(){
								$(this).css("opacity","1");
							});
							
							attractionLi.toggle(function(){
								var nowANum=parseInt($("#nowNum").text());
								nowANum++;
								$("#nowNum").text(nowANum);
								$(this).parent().parent().attr("class","select");
							},function(){
								var nowANum=parseInt($("#nowNum").text());
								nowANum--;
								$("#nowNum").text(nowANum);
								$(this).parent().parent().attr("class","");
							});
							
							//<2F>鿴<EFBFBD><E9BFB4><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ϸ<EFBFBD><CFB8>Ϣ
							$(".attractionName").click(function(){
								
								var urlStr=$(this).attr("name");
								var thisActOBJ=$(this).parent();
								var thisActOBJclass=thisActOBJ.attr("class");
								
								var butStr="";
								
								if(thisActOBJclass=="select"){
									butStr="Cancel selection";
								}else{
									butStr="Choose this";	
								}
								
								var actBox=art.dialog({okValue:butStr,ok:function() {
										thisActOBJ.find("img").click();
									}});
								actBox.lock();
								
								$.post("/diy/getdata/",{url:urlStr},function(data){
									actBox.content("<div class='infoMsgBox'>"+data+"</div>");
								});
								
							});
							
							$("#goNextToForm,#goNextToForm_f").click(function(){
								
								$("#goBackToCityIco,#goNextToForm,#goBackToCityIco_f,#goNextToForm_f").hide();
								
								$("#stepBox .steps").eq(3).addClass("on");
								
								var allSelectAct=$("#attractions .cityActs li.select");
								var allSelectNum=allSelectAct.length;
								var userTour="";
								for(var x=0;x<allSelectNum;x++){
									var actCityName=allSelectAct.eq(x).parent().parent().attr("id");
									var actName=allSelectAct.eq(x).text();
									userTour+=actCityName+"---"+actName+"\n";
								}
								var tourTitle=$("h1").text();
								var tourAllStr=tourTitle+"\n\n"+userTour;
								
								$("#selectCity,#attractions,#msgBox").hide();
								
								$("#userTourStr").val("Your China Tour:\n"+tourAllStr);
								
								$("#uForm").show();
								
							});
							
						}
					});
					
				});
			
			}else{ isLoad=0; $("#attractions .cityActs").eq(thisNum).show(); }
			
			$(window).scroll(scrollAct);
			
			}
		});
		
		selectCity.eq(0).click();
		
		//over
	});
	
	//backNow
//	$("#backBut2").click(function(){
//		$("#stepBox .steps").eq(2).removeClass("on");
//		$("#selectCity,#attractions .cityActs,#msgBox").hide();
//		$("#cityIcon li,#goNext").show(300);
//	});
	
	
});

function msg(){
	$("h1").html(uDays+"-Day ");
}

function scrollAct(){
	var msgTop=$("#msgBox").offset().top;
	var msgHeight=parseInt($("#msgBox").css("height"));
	if($(window).scrollTop() + msgHeight > msgTop){
		$("#msgBox").css({"position":"fixed","top":"0","z-index":"99","width":"933px"});
	}
	if(msgTop<=320){
		$("#msgBox").css({"position":""});
	}
}

this.vtip = function() {    
    this.xOffset = 0; // x distance from mouse
    this.yOffset = 10; // y distance from mouse       
    
    $(".vtip").unbind().hover(    
        function(e) {
            this.t = this.title;
            this.title = ''; 
            this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);
            
            $('body').append( '<p id="vtip"><img id="vtipArrow" />' + this.t + '</p>' );
                        
            $('p#vtip #vtipArrow').attr("src", '/css/images/vtip_arrow.png');
            $('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");
            
        },
        function() {
            this.title = this.t;
            $("p#vtip").fadeOut("slow").remove();
        }
    ).mousemove(
        function(e) {
            this.top = (e.pageY + yOffset);
            this.left = (e.pageX + xOffset);
                         
            $("p#vtip").css("top", this.top+"px").css("left", this.left+"px");
        }
    );            
    
};jQuery(document).ready(function($){vtip();})