﻿/*  JS for manipulating GoogleMap API
     Author: Lin Lin
     Date:    February 22, 2008
 */
 
 	        var map;
			var CMapMode="";
			var CMapInfo="";
			var	cityDetailsUrl="";
			var	attDetailsUrl="";
			var CID=0;
			var PID=-1;
			
			function initialize() {
				CMapMode=eval('(' + document.getElementById('hMapMode').value + ')');
				CMapInfo=eval('(' + document.getElementById('hMapXML').value + ')');
				CID=parseInt(document.getElementById('HCityID').value.toString(),10);
				cityDetailsUrl=document.getElementById('hMapDetailUrl').value +"?cityID=";
				attDetailsUrl=document.getElementById('hMapDetailUrl').value +"?AttID=";


				InitCityList();
				InitMap();

                var mapMode= CMapMode.Mode;
               	var cityIndex= CMapMode.CityIndex; 
				var attIndex= CMapMode.AttIndex;
				var lat= CMapMode.Lat; 
				var lng= CMapMode.Lng;
               
				switch (mapMode)
				{
					case 0:
							//Country Mode
							AdjustMap(G_NORMAL_MAP,new GLatLng(lat,lng),4); 
							LoadCityMarks(-1);;
							break;
							
					case 1:
							//City Mode
							AdjustMap(G_NORMAL_MAP,new GLatLng(lat,lng),4); 
							
							LoadCityMarks(-1); 
							InitAttList(cityIndex);
					
							break;
					case 2:
							//Att Mode
							AdjustMap(G_SATELLITE_MAP,new GLatLng(lat,lng),15); 
							InitAttList(cityIndex); 
							LoadAttMarks(cityIndex,attIndex); 
							break;
					default:
							document.write("Unexpected Error");
				}
				
				if(PID>-1)
				{
					 panToCity(PID);
				 }

			}
  

  
			//Init Map
			function InitMap(){
				map = new GMap2(document.getElementById("map_canvas"));
				map.setCenter(new GLatLng(39.905556,116.395833),4);
				
				map.removeMapType(G_HYBRID_MAP);
				map.addControl(new GLargeMapControl());
				var mapControl = new GMapTypeControl();
				map.addControl(mapControl);
				map.addControl(new GOverviewMapControl());
		
			}
			  
			//Init City List
			function InitCityList(){
					//Clear cityList first
					ClearCityList();

					//Add 'All Citys'
					var cityList=document.getElementById('ul_cityList');
					var allCityLi=document.createElement("li") ;
					var allCityLink=document.createElement("a") ;
					var allCityLinkText=document.createTextNode("All Cities");
					
			   	    allCityLink.href="javascript:panToCity(-1);";
			   	    allCityLink.onclick=function(){
			   	           //Reset all other item color value
			   	           for(var i=0;i<cityList.childNodes.length;i++){
			   	                     cityList.childNodes[i].style.backgroundColor="white";
			   	           }  
			   	           //Change the current item color value
			   	           allCityLi.style.backgroundColor="#B7DBFF";
			   	    }
					allCityLink.appendChild(allCityLinkText);
					allCityLi.appendChild(allCityLink);
					cityList.appendChild(allCityLi);  
					  
					
					//Add city name to cityList
					var count=0;
					for(var z=0;z<CMapInfo.length;z++){
				
					        var cityName=CMapInfo[z].name.replace('!','`')+"  ";
					        var cityType=CMapInfo[z].cityType; 
						    var cityID=parseInt(CMapInfo[z].id,10);
						    
							var cityLi=document.createElement("li") ;
							if(cityID==CID){cityLi.style.backgroundColor="#B7DBFF";PID=z;}
							
							var cityLink=document.createElement("a") ;
							var cityLinkText=document.createTextNode(cityName);
							cityLink.href="javascript:panToCity("+z+");";
						
							changeCityListColor(cityLi);
							
							cityLink.appendChild(cityLinkText);
							cityLi.appendChild(cityLink);
							
							
							cityList.appendChild(cityLi);  
					}
						
				   
			}
			
			function changeCityListColor(cityLi){
			             cityLi.onclick=function(){
			                        var cityList=document.getElementById('ul_cityList');
			   						//Reset all other item color value
			   						for(z=0;z<cityList.childNodes.length;z++){
			   						            cityList.childNodes[z].style.backgroundColor="white";
			   						}  
			   						//Change the current item color value
			   						cityLi.style.backgroundColor="#B7DBFF";
			   				}	
			}
			function changeAttListColor(attLi){
			             attLi.onclick=function(){
			                        var attList=document.getElementById('ul_attList');
			   						//Reset all other item color value
			   						for(z=0;z<attList.childNodes.length;z++){
			   						            attList.childNodes[z].style.backgroundColor="white";
			   						}  
			   						//Change the current item color value
			   						attLi.style.backgroundColor="#B7DBFF";
			   				}	
			}
			function ClearCityList(){
			   
					var cityList=document.getElementById('ul_cityList');
					cityList.innerHTML="";
					 
			}
  
			//Init Attractions List
			function InitAttList(cityIndex){
		        
				//Clear attList first
				ClearAttList();
				//Change backgroud color if no atts of the selected citys
				var attList=document.getElementById('ul_attList');

				  if(CMapInfo[cityIndex].Att.length==0){
				              document.getElementById('map_attList').style.backgroundColor='#f5f5f5';
				   }
				   else{
				               document.getElementById('map_attList').style.backgroundColor='#ffffff';
				   }
				  for(var i=0;i<CMapInfo[cityIndex].Att.length;i++){
				  
				                var attName=CMapInfo[cityIndex].Att[i].name.replace(/!/,'`');
								var attLi=document.createElement("li") ;
								var attLink=document.createElement("a") ;
								var attLinkText=document.createTextNode(attName);
								attLink.href="javascript:panToAtt("+i+","+cityIndex +");";
								changeAttListColor(attLi);
								attLink.appendChild(attLinkText);
								attLi.appendChild(attLink);
								attList.appendChild(attLi);  
				  }
				   
			} 
  
			function ClearAttList(){
					var attList=document.getElementById('ul_attList');
					attList.innerHTML="";
			}
			  

			//Adjust the Map
			function AdjustMap(mapType,latlng,zoomLevel){ 
				map.setMapType(mapType);
				map.setCenter(latlng,zoomLevel);
			}

  
			//Load all city marks
			function LoadCityMarks(cityIndex){
			
			
					map.clearOverlays();
				   
                    for(var i=0;i< CMapInfo.length;i++){
                           var cityID= CMapInfo[i].id;
				           var cityName=CMapInfo[i].name.replace("'","!");
				           var cityCo =CMapInfo[i].co.split(",");
				           var latlng = new GLatLng(cityCo[0],cityCo[1]);
				           
				           var cityDetails="<iframe   frameborder='0' style='width:600px; height:335px; border-style: none'   src='"+ cityDetailsUrl+cityID+ "&Type=1"+"&CityName="+cityName+"'></iframe>";
	                       createMapMarker(latlng,cityDetails,(cityIndex==i)); 
                    }
			}
			  
			//Load all attractions marks
			function LoadAttMarks(cityIndex, attIndex){
				//1) clear all overlays
					map.clearOverlays();

					//Read XML, and add city marks
					var popAttID;
					var popLatlng;
					
					
					for(var i=0;i<CMapInfo[cityIndex].Att.length;i++){
						
					          var cityID= CMapInfo[cityIndex].id;
							  var cityName=CMapInfo[cityIndex].name;
									 cityName=cityName.replace("'","!");
											
							  var attCo= CMapInfo[cityIndex].Att[i].co.split(",");
							  var latlng = new GLatLng(attCo[0],attCo[1]);
							  var attID=CMapInfo[cityIndex].Att[i].id;
							
							  var attDetails="<iframe    frameborder='0' style='height:335px;width:600px;border-style: none' src='"+ attDetailsUrl+attID +"&Type=2"+"&CityID="+cityID+ "&CityName="+cityName+"'></iframe>";
							  createMapMarker(latlng,attDetails,(attIndex==i));
												 

							  if(attIndex!=-1 && attIndex==i){
												    popAttID=attID;
													popLatlng=latlng;
							   }
							  //pop the attraction info window
							  if(attIndex!=-1){
											 map.openInfoWindowHtml(popLatlng,"<iframe    frameborder='0' style='height:335px;width:600px;border-style: none' src='"+ attDetailsUrl+popAttID +"&Type=2"+"&CityID="+cityID+ "&CityName="+cityName+"'></iframe>"); 
							  }					
					          
					}
					
			}
			function popUpAtt(popLatlng,attID,cityID,cityName){
			               map.openInfoWindowHtml(popLatlng,"<iframe    frameborder='0' style='height:335px;width:600px;border-style: none' src='"+ attDetailsUrl+attID +"&Type=2"+"&CityID="+cityID+ "&CityName="+cityName+"'></iframe>"); 
												
			}
			 
			  
			function createMapMarker(latlng,cityDetails,highLight){

                    var opts = new Object(); 
					opts.maxWidth = 30; 
					var blueIcon = new GIcon(G_DEFAULT_ICON);
					if(highLight!=true){
					           blueIcon.image="http://www.chinatraveldepot.com/PubImages/Images/blue-dot.png";
					           blueIcon.iconSize=new GSize(32,32);
					}
					opts.icon=blueIcon;
					opts.title="Click to View";
					var myMarker=new GMarker(latlng,opts);

					GEvent.addListener(myMarker, "click", function() {  
							map.openInfoWindowHtml(latlng,cityDetails,opts);  
					});   
					map.addOverlay(myMarker);
			     
			}
			  

			  
			function panToAtt(attIndex,cityIndex){
				      var attCo = CMapInfo[cityIndex].Att[attIndex].co.split(",");
					  var latlng = new GLatLng(attCo[0],attCo[1]);
                      AdjustMap(G_SATELLITE_MAP,latlng,15); 
					  LoadAttMarks(cityIndex,attIndex);      
			}
			  
		function panToCity(cityIndex){
				
					if(cityIndex==-1){
							AdjustMap(G_NORMAL_MAP,new GLatLng(36.96022296929667,104.8203125),4); 
							LoadCityMarks(-1); 
							ClearAttList();
					}
					else{

							var cityID= CMapInfo[cityIndex].id;
							var cityName=CMapInfo[cityIndex].name.replace("'","!");
							var cityCo =CMapInfo[cityIndex].co.split(",");;  
							var latlng = new GLatLng(cityCo[0],cityCo[1]);
						
				 			AdjustMap(G_NORMAL_MAP,latlng,11); 
							LoadCityMarks(cityIndex); 
							ClearAttList();
							InitAttList(cityIndex); 
														 
							//Pop up the selected city
							//map.openInfoWindowHtml(latlng,"<iframe   frameborder='0' style='width:600px; height:335px; border-style: none'   src='"+ cityDetailsUrl+cityID+ "&Type=1"+"&CityName="+cityName+"'></iframe>"); 
			     }			 	 			

	   }
			
			
			
			
			
			
			
			///JS For gMapDetails Page
			
					   String.prototype.trim = function () {
                     return this.replace(/^\s*/, "").replace(/\s*$/, "");
            }
            
		    function initInterface(){
		    
		            //make the progress icon invisible
		              var re=document.getElementById("tabProgress");
		            var container=document.getElementById("tabProgress").parentNode;
		            container.removeChild(re);
		            
					for(var id = 1;id<=3;id++)
					{
							var tabName="con"+id;
							var tab=document.getElementById(tabName);
								
							  var s = new String(tab.innerHTML);
							  if(s.trim().length!=0){
					             document.getElementById("tab"+id).style.display="block";
					         }
							     
					}
				
					//Select first video tag
					if(document.getElementById("video1")!=null){
						       document.getElementById("videoMenu1").style.backgroundColor="#0099FF";
						        document.getElementById("videoMenu1").style.color="#FFFFFF";
						        document.getElementById("videoMenu1").style.textDecoration="none";
						        
					 }	
					 //Select first slide tag
					if(document.getElementById("slide1")!=null){
						       document.getElementById("slideMenu1").style.backgroundColor="#0099FF";
						        document.getElementById("slideMenu1").style.color="#FFFFFF";
						        document.getElementById("slideMenu1").style.textDecoration="none";
					 }	
					
					
		    }
			function changeVideo(num){
			      for(var id = 1;id<=10;id++)
					{
							var videoName="video"+id;
							var videoDesc="videoDesc"+id;
							var menuName="videoMenu"+id;
							
							if(document.getElementById(videoName)==null){
						       return;
					    	}	
							
							if(id==num){
							    document.getElementById("videoShow").style.display="none";
							    document.getElementById("videoDesc").style.display="none";
						        document.getElementById("videoShow").innerHTML=document.getElementById(videoName).value;
			                    document.getElementById("videoDesc").innerHTML="<p>"+document.getElementById(videoDesc).value+"</p><span style='color:white;'> -  www.ChinaTravelDepot.com - </span>";
			                    document.getElementById("videoDesc").style.display="block";
			
						        document.getElementById(menuName).style.backgroundColor="#0099FF";
						        document.getElementById(menuName).style.color="#FFFFFF";
						        document.getElementById(menuName).style.textDecoration="none";

                                setTimeout("showVideo()",500);
						        
							}
							else{
									document.getElementById(menuName).style.backgroundColor="#FFFFFF";
									document.getElementById(menuName).style.color="#143885";
									document.getElementById(menuName).style.textDecoration="underline";
				
							}
							
				}
			
			}
			function showVideo(){
			           document.getElementById("videoShow").style.display="block";
			}
			
			function changeSlide(num){
			        //the final data will less than 10
			        for(var id = 1;id<=10;id++)
					{
						var slideName="slide"+id;
						var slideDesc="slideDesc"+id;
						var menuName="slideMenu"+id;
						
						if(document.getElementById(slideName)==null){
						       return;
						}					
						
						if(id==num){
						       document.getElementById("slideShow").style.display="none";
							   document.getElementById("slideDesc").style.display="none";
						      document.getElementById("slideShow").innerHTML=document.getElementById(slideName).value;
						      document.getElementById("slideDesc").innerHTML="<p>"+document.getElementById(slideDesc).value+"</p><span style='color:white;'> -  www.ChinaTravelDepot.com - </span>";
						      document.getElementById("slideDesc").style.display="block";
						
						        document.getElementById(menuName).style.backgroundColor="#0099FF";
						        document.getElementById(menuName).style.color="#FFFFFF";
						        document.getElementById(menuName).style.textDecoration="none";
						        
						        setTimeout("showSlide()",500);

						}
						else{
						        document.getElementById(menuName).style.backgroundColor="#FFFFFF";
								document.getElementById(menuName).style.color="#143885";
								document.getElementById(menuName).style.textDecoration="underline";
						}
						
			     }
			
			}
			function showSlide(){
			           document.getElementById("slideShow").style.display="block";
			}

			function changeTab(num){
					for(var id = 1;id<=3;id++)
					{
						var tabName="con"+id;
						var menuName="menu"+id;
						
						if( document.getElementById(tabName)==null){
						       return;
						}
						
						if(id==num){
						        document.getElementById(tabName).style.display="";
						        document.getElementById(menuName).style.backgroundColor="#0099FF";
						        document.getElementById(menuName).style.color="#FFFFFF";
						        document.getElementById(menuName).style.textDecoration="none";
						        
						        if(num==2){
						              changeVideo(1);
						        }
						        }
						else{
								document.getElementById(tabName).style.display="none";
								document.getElementById(menuName).style.backgroundColor="#B7DBFF";
								document.getElementById(menuName).style.color="#10437C";
								document.getElementById(menuName).style.textDecoration="underline";
								}
					}

			}
    
