// super lightweight String Builder class
function StringBuilder(value) {this.strings = new Array("");this.append(value);}
StringBuilder.prototype.append = function (value) {if (value) {this.strings.push(value);}}
StringBuilder.prototype.clear = function () {this.strings.length = 1;}
StringBuilder.prototype.toString = function () {return this.strings.join("");}

/************************************
	Attractions: "Arts & Culture", "Beaches", etc.
	Destinations: "Accommodations", "Dining", "Travel Services"
************************************/

var load_tab = 1;
var curr_tab = 0;
var show_mytrip = true;
var curr_attraction = "";
var gloading = false;
var active_attraction = "";
var curr_dest = {
	"accommodations" : {"on" : false, "markers" : []},
	"dining" : {"on" : false, "markers" : []},
	"travelservices" : {"on" : false, "markers" : []}
}
var curr_region = "";
var curr_marker = null;
var gmap_imgs = "/docs/images/travel";

var words = {
	add_to_trip : "Add to My Trip",
	read_more : "Read More",
	accommodations : "Accommodations",
	dining : "Dining",
	travel_services : "Travel Services",
	full_state : "View<br />Full State",
	nearby : "nearby.jpg"
}

/************************************
	Page Navigation Handler
************************************/

mapnav = {
	load : function() {
		fixTemplate();
		mapnav.setTab(load_tab);
	},
	setTab : function(idx) {
		if (curr_tab != idx) {
			// clear the navigation of selected attractions
			gmapV1.clearAttraction();
			// set the tab styles
			document.getElementById("tab_1").className = (idx == 2) ? "tab_off" : "tab_on";
			document.getElementById("tab_2").className = (idx == 2) ? "tab_on"  : "tab_off";
			// set the current tab
			curr_tab = idx;
			// clear the map canvas and show/hide attraction navigation
			document.getElementById("map_canvas").innerHTML = "";
			document.getElementById("mapnav_extra").style.display = (curr_tab == 1) ? "none" : "block";
			// load the proper map.
			if (curr_tab == 1) {
				cmapV2.load();
			} else {
				gmapV1.load();
			}
		}
	},
	showCover : function() {
		document.getElementById("map_canvas_modal").style.display = "inline";
		gloading = true;
	},
	hideCover : function() {
		document.getElementById("map_canvas_modal").style.display = "none";
		gloading = false;
	},
	showMapLabels : function() {
		document.getElementById("map_canvas_labels").style.display = "inline";
	},
	hideMapLabels : function() {
		document.getElementById("map_canvas_labels").style.display = "none";
		document.getElementById("map_canvas_labels").innerHTML = "";
	}
}


/************************************
	Interactive Map handler
************************************/

gmapV1 = {
	load : function() {
		mapnav.hideMapLabels();
		gmapV1.initialize();
		gmapV1.clearSearch();
	},
	clearDest : function() {
		gmapV1.clearDestMarkers("accommodations");
		gmapV1.clearDestMarkers("dining");
		gmapV1.clearDestMarkers("travelservices");
	},
	clearDestMarkers : function(code) {
		for(var i=0; i<curr_dest[code].markers.length;i++) {
			gmapobj.removeOverlay(curr_dest[code].markers[i]);
		}
		curr_dest[code].markers = [];
		curr_dest[code].on = false;
	},
	def_center : new GLatLng(37.61378,-117.07832),  //new GLatLng(37.613788,-119.27832)
	def_zoom : 6,
    initialize : function() {
		gmapobj = new GMap2(document.getElementById("map_canvas"));

        G_NORMAL_MAP.getMinimumResolution = function () { return 6 }; 
        G_NORMAL_MAP.getMaximumResolution = function () { return 18 }; 

		gmapobj.setUIToDefault();
		
		gmapobj.removeMapType(G_PHYSICAL_MAP); 
		gmapobj.removeMapType(G_SATELLITE_MAP); 
		gmapobj.removeMapType(G_HYBRID_MAP); 
		
		gmapobj.setMapType(G_NORMAL_MAP);
		gmapobj.setCenter(gmapV1.def_center, gmapV1.def_zoom);
		
		GEvent.addListener(gmapobj, "zoomend", gmapV1.zoomDetect);
	},
	zoomDetect : function(oldZoom,newZoom) {
		if (newZoom == 6) {
			// User is at the max zoom level.  Recenter the map.
			gmapobj.setCenter(gmapV1.def_center, gmapV1.def_zoom);
		}
	},
	
	// HANDLERS FOR CHOOSING AN ATTRACTION TYPE FROM THE NAVIGATION:
		// getMarkers, loadMarkers, createMarker, showQuick, showQuickMarker, hideQuick
	getMarkers : function(code,icon) {
		if (gloading == false) {
			gmapV1.clearSearch();
			if (curr_tab != 2) {
				mapnav.setTab(2);
			}
			if (code == curr_attraction) {
				gmapV1.setAttraction("","");
				gmapobj.clearOverlays();
				gmapobj.setCenter(gmapV1.def_center, gmapV1.def_zoom);
			} else {
				mapnav.showCover();
				gmapV1.setAttraction(code,icon);
				gmapobj.clearOverlays();
				GDownloadUrl("/MapsModule.ashx?code="+code,gmapV1.loadMarkers);
			}
		}
	},
	loadMarkers : function(data, responseCode) {
		if(responseCode == 200) {
			var jsonData = eval("("+data+")");
			for (var i=0;i<jsonData.markers.length;i++) {
				gmapV1.createMarker(jsonData.markers[i],jsonData.icon);
			}
			mapnav.hideCover();
		}
	},
	createMarker : function(obj,icon_str) {
		if (obj.title != "") {
			// the unselected state of the marker.  add it to the map object.
			var gicon = new GIcon(G_DEFAULT_ICON); 
			gicon.image = gmap_imgs+"/icons/"+icon_str+".png";
			gicon.shadow = ""; 
			gicon.iconSize = new GSize(23,29);
			var marker = new GMarker(obj.point,{icon:gicon});
			gmapobj.addOverlay(marker);
			
			// the selected state of the marker.  create the marker for now, don't add it to the map yet.
			var gicon_on = new GIcon(G_DEFAULT_ICON);
			gicon_on.image = gmap_imgs+"/icons/"+icon_str+"_on.png";
			gicon_on.shadow = ""; 
			gicon_on.iconSize = new GSize(23,29);
			var marker_on = new GMarker(obj.point,{icon:gicon_on});
			marker_on.obj = obj;
			
			// click event for the marker.
			GEvent.addListener(marker, "click", function() {
				// add the selected state of the marker to map.
				gmapobj.addOverlay(marker_on);
				// show the info window for the selected state marker.
				gmapV1.showInfo(obj);
				// show the quick navigation bar in the lower right corner of the google map.
				gmapV1.showQuick(obj,icon_str);
				// set the current marker, so the quick navigation knows which marker to show the infowindow.
				curr_marker = marker_on;
				// if there is already a selected attraction, clear its selected state marker from the map.
				if (active_attraction != "") {
					gmapobj.removeOverlay(active_attraction);
					gmapV1.clearDest();
				}
				// set the current active selected marker.
				active_attraction = marker_on;
			});
			
			// click event for the selected state marker.
			GEvent.addListener(marker_on, "click", function() {
				gmapV1.showInfo(obj);
			});

		}
	},
	showQuick : function(obj,icon_str) {
		var sb = new StringBuilder();
		sb.append("<div class=\"map_attr_img\"><a href=\"javascript:void(0);\" onclick=\"gmapV1.showQuickMarker();\"><img src=\""+gmap_imgs+"/icons/"+icon_str+"_on.png\" /></a></div>");
		sb.append("<div class=\"map_attr_txt\"><a href=\"javascript:void(0);\" onclick=\"gmapV1.showQuickMarker();\">"+obj.title+"</a></div>");
		sb.append("<div class=\"map_attr_zoom\"><a href=\"javascript:void(0);\" onclick=\"gmapobj.setCenter(gmapV1.def_center, gmapV1.def_zoom);\">"+words.full_state+"</a></div>");
		document.getElementById("map_canvas_attr").style.display = "inline";
		document.getElementById("map_canvas_attr").innerHTML = sb.toString();
	},
	showQuickMarker : function() {
		gmapV1.showInfo(curr_marker.obj);
	},
	hideQuick : function() {
		document.getElementById("map_canvas_attr").style.display = "none";
		document.getElementById("map_canvas_attr").innerHTML = "";
		gmapV1.hideInfo();
	},
	
	showInfo : function(obj) {
		document.getElementById("map_canvas_info").style.display = "inline";
		document.getElementById("map_canvas_info_content").innerHTML = gmapV1.showBubble(obj);
	},
	hideInfo : function() {
		document.getElementById("map_canvas_info").style.display = "none";
		document.getElementById("map_canvas_info_content").innerHTML = "";
	},
	
	// HANDLERS FOR THE NAVIGATION ICON AND FOR SETTING THE CURRENTLY SELECTED ATTRACTION:
		// setAttraction, clearAttraction
	setAttraction : function(code,icon) {
		gmapV1.clearAttraction();
		if (code != "") {
			document.getElementById("mapnav_img_"+code).src = gmap_imgs+"/icons/"+icon+".png";
		}
		curr_attraction = code;
	},
	clearAttraction : function() {
		if (curr_attraction != "") {
			document.getElementById("mapnav_img_"+curr_attraction).src = gmap_imgs+"/icons/gray.png";
			curr_attraction = "";
			gmapV1.hideQuick();
			curr_marker = null;
		}
	},
	
	
	// HANDLERS FOR SELECTING "NEARBY DESTINATIONS" OPTION FROM THE INFO WINDOW:
		// getDest, loadDest, createDest
	getDest : function(code,id) {
		if (gloading == false) {
			if (curr_dest[code].on == true) {
				// remove the markers for current destination type
				gmapV1.clearDestMarkers(code);
			} else {
				// load the markers for the current destination type
				mapnav.showCover();
				curr_dest[code].on = true;
				curr_dest[code].markers = [];
				GDownloadUrl("/MapsModule.ashx?code="+code+"&id="+id,gmapV1.loadDest);
			}
		}
	},
	loadDest : function(data, responseCode) {
		if(responseCode == 200) {
			var zoomGoto = gmapobj.getZoom();
			if (zoomGoto < 13) {
				gmapobj.setZoom(13);
			}
			var jsonData = eval("("+data+")");
			for (var i=0;i<jsonData.markers.length;i++) {
				gmapV1.createDest(jsonData.markers[i],jsonData.icon,jsonData.code);
			}
			mapnav.hideCover();
		}
	},
	createDest : function(obj,icon_str,code) {
		if (obj.title != "") {
			// create the marker for the destination
			var gicon = new GIcon(G_DEFAULT_ICON); 
			gicon.image = gmap_imgs+"/icons/"+icon_str+".png";
			gicon.shadow = ""; 
			gicon.iconSize = new GSize(20,22);
			var marker = new GMarker(obj.point,{icon:gicon});
			
			// add the marker to array of markers for that type.  then add to the map.
			curr_dest[code].markers.push(marker);
			gmapobj.addOverlay(marker);
			
			// click handler for the destination marker.  show the info window.
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(
					gmapV1.showBubbleDest(obj)
				);
			});

		}
	},
	
	//HANDLERS FOR RUNNING A TEXT SEARCH
	getSearchEnter : function(e) {
		var characterCode;
		if(e && e.which){characterCode = e.which;}else{e=event;characterCode = e.keyCode;}
		if(characterCode == 13){gmapV1.getSearch();return false;}
		return true;
	},
	
	getSearch : function() {
		if (gloading == false) {
			gmapobj.clearOverlays();
			gmapV1.clearAttraction();
			mapnav.showCover();
			var txt_search = document.getElementById("txt_search").value;
			GDownloadUrl("/MapsModule.ashx?search="+txt_search,gmapV1.loadSearch);
		}
	},
	loadSearch : function(data, responseCode) {
		if(responseCode == 200) {
			var jsonData = eval("("+data+")");
			for (var i=0;i<jsonData.markers.length;i++) {
				gmapV1.createSearch(jsonData.markers[i],jsonData.icon);
			}
			mapnav.hideCover();
		}
	},
	createSearch : function(obj,icon_str) {
		if (obj.title != "") {
			// create the marker for the destination
			var gicon = new GIcon(G_DEFAULT_ICON); 
			gicon.image = gmap_imgs+"/icons/"+icon_str+".png";
			gicon.shadow = ""; 
			gicon.iconSize = new GSize(20,22);
			var marker = new GMarker(obj.point,{icon:gicon});
			
			// add the marker to array of markers for that type.  then add to the map.
			gmapobj.addOverlay(marker);
			
			gmapobj.setCenter(obj.point,7)
			
			marker.openInfoWindowHtml(
				gmapV1.showBubbleSearch(obj)
			);
			
			// click handler for the destination marker.  show the info window.
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(
					gmapV1.showBubbleSearch(obj)
				);
			});

		}
	},
	clearSearch : function() {
		document.getElementById("txt_search").value = "";
	},
	
	getDetails : function(id) {
		if (gloading == false) {
			mapnav.showCover();
			//alert(id);
			GDownloadUrl("/MapsModule.ashx?details="+id,gmapV1.loadDetails);
		}
	},
	loadDetails : function(data, responseCode) {
		if(responseCode == 200) {
			//alert(data);
			document.getElementById("info_bubble_desc").className = "bubble_desc_full";
			document.getElementById("info_bubble_desc").innerHTML = data;
			mapnav.hideCover();
		}
	},
	
	//HANDLERS FOR POPULATING THE CONTENTS OF THE INFO WINDOWS:
		// showBubble, showBubbleDest
	showBubble : function(obj) {
		// this method is used exclusively for attraction info windows.
		var zoomGoto = gmapobj.getZoom();
		if (zoomGoto == 6) {
			zoomGoto = 13;
		}
		gmapobj.setCenter(obj.point, zoomGoto);
		var sb = new StringBuilder();
		
		sb.append("<div class=\"mapitem_bubble\">");
			sb.append("<div>");
				sb.append("<div class=\"bubble_close\"><a href=\"javascript:void(0);\" onclick=\"gmapV1.hideInfo()\"><img src=\""+gmap_imgs+"/bubble_close.gif\" /></a></div>");
			sb.append("</div>");
			sb.append("<div>");
				sb.append("<div class=\"bubble_title\">"+obj.title+"</div>");
				if (show_mytrip) {
					sb.append("<div class=\"bubble_mytrip\"><a href=\"javascript:void(0);\" onclick=\"mytrip.addE('"+obj.record+"',this,true)\"><img src=\""+gmap_imgs+"/sm_folder.jpg\" align=\"middle\" /> "+words.add_to_trip+"</a></div>");
				}
			sb.append("</div>");
			if (obj.image != "") {
				sb.append("<div class=\"bubble_img\"><img src=\""+obj.image+"\" /></div>");
			}
			sb.append("<div id=\"info_bubble_desc\" class=\"bubble_desc\">"+obj.desc+" <a href=\"javascript:void(0)\" onclick=\"gmapV1.getDetails('"+obj.record+"')\">"+words.read_more+"</a></div>");
			sb.append("<div class=\"bubble_near\"><img src=\"/docs/images/travel/"+words.nearby+"\" /></div>");
			sb.append("<div class=\"bubble_extras\"><table cellpadding=\"0\" cellspacing=\"0\"><tr>");
				sb.append("<td nowrap><a href=\"javascript:void(0);\" onclick=\"gmapV1.getDest('accommodations','"+obj.record+"')\"><img src=\""+gmap_imgs+"/icons/AccommodationsB.png\" align=\"middle\" /> "+words.accommodations+"</a></td>");
				sb.append("<td nowrap><a href=\"javascript:void(0);\" onclick=\"gmapV1.getDest('dining','"+obj.record+"')\"><img src=\""+gmap_imgs+"/icons/DiningB.png\" align=\"middle\" /> "+words.dining+"</a></td>");
				sb.append("<td nowrap><a href=\"javascript:void(0);\" onclick=\"gmapV1.getDest('travelservices','"+obj.record+"')\"><img src=\""+gmap_imgs+"/icons/TravelServicesB.png\" align=\"middle\" /> "+words.travel_services+"</a></td>");
			sb.append("</tr></div>");
		sb.append("</div>");
		return sb.toString();
	},
	showBubbleDest : function(obj) {
		// this method is used exclusively for destination info windows.
		var sb = new StringBuilder();
		sb.append("<div class=\"mapitem_bubble_dest\">");
			sb.append("<div class=\"bubble_title\">"+obj.title+"</div>");
			sb.append("<div class=\"bubble_desc\">"+obj.body+"</div>");
			sb.append("<div class=\"bubble_mytrip\">");
				if (show_mytrip) {
					sb.append("<a href=\"javascript:void(0);\" onclick=\"mytrip.addI('"+obj.record+"',this,true)\"><img src=\""+gmap_imgs+"/sm_folder.jpg\" align=\"middle\" />"+words.add_to_trip+"</a>");
				}
			sb.append("</div>");
		sb.append("</div>");
		return sb.toString();
	},
	showBubbleSearch : function(obj) {
		// this method is used exclusively for destination info windows.
		var sb = new StringBuilder();
		sb.append("<div class=\"mapitem_bubble_dest\">");
			sb.append("<div class=\"bubble_title\">"+obj.title+"</div>");
			sb.append("<div class=\"bubble_desc\">"+obj.body+"</div>");
		sb.append("</div>");
		return sb.toString();
	}
}


/************************************
	Region Map handler
************************************/

cmapV2 = {
	load : function() {
		mapnav.showCover();
		mapnav.showMapLabels();
		cmapV2.initialize();
	},
	
	def_center : new GLatLng(37.61378,-117.07832),  //new GLatLng(37.613788,-119.27832)
	def_zoom : 6,
    
    initialize : function() {
		mapobj = new GMap2(document.getElementById("map_canvas"));
		mapobj.setCenter(cmapV2.def_center, cmapV2.def_zoom);
		mapobj.setMapType(G_PHYSICAL_MAP);
		
		mapobj.disableDragging();
		mapobj.disableDoubleClickZoom();
		mapobj.disableScrollWheelZoom();
		
		// this is the code that adds the overlay.  gmap_data is loaded from another javascript file that is language specific.
		for (var key in gmap_data) {
			cmapV2.regionView(key);
		}
		cmapV2.regionOutside("no_region");
		
		GEvent.addListener(mapobj,"addoverlay", function(overlay) {
			// this event handler is the trick to the region map.  Since GGeoXml doesn't return an overlay object to play with,
			// we need to detect that a GPolygon was added to the map and then determine which one.  GPolygon does have a
			// getVertexCount() method which returns the number of data points, which acts a fingerprint for the region.  See cmapV2.getRegionCode
			if (overlay instanceof GPolygon) {
				var o_region = cmapV2.getRegionCode(overlay);
				if (o_region != "no_region") {
					// gmap_data is loaded from another javascript file that is language specific.
					var obj = gmap_data[o_region];
					// create the region label and place it on the map.
					var sb = new StringBuilder();
					sb.append("<div id=\"map_lbl_"+o_region+"\" class=\"map_lbl_on\" style=\"top:"+obj.top+"px;left:"+obj.left+"px;\">");
						sb.append("<a href=\""+gmap_data[o_region].url_section+"\" ");
							sb.append("onmouseover=\"cmapV2.handleMouseOver('"+o_region+"');\" ");
							sb.append("onmouseout=\"cmapV2.handleMouseOut('"+o_region+"');\">");
							sb.append("<div style=\"padding:3px;\">"); //onclick=\"cmapV2.handleClick('"+o_region+"');
						sb.append(obj.title + "</div></a></div>");
					document.getElementById("map_canvas_labels").innerHTML += sb.toString();
					// add the GPolygon overlay to the gmap_data.
					obj.overlay = overlay;
				} else {
					mapnav.hideCover();
				}
			}
		}); 
	},
	// the methods here retrieve the kml and add the geoxml overlay to the map, which fires the "addoverlay" GEvent above.
	regionView : function(region_name){
		var geoxml = new GGeoXml('http://www.visitcalifornia.com/pages/widgets/KML.aspx/'+region_name+'.kml?linecolor=CCFFFFFF&polycolor=00FFFFFF&fill=1');
		mapobj.addOverlay(geoxml);
	},
	regionOutside : function(region_name){
		var geoxml = new GGeoXml('http://www.visitcalifornia.com/pages/widgets/KML.aspx/'+region_name+'.kml?linecolor=00000000&polycolor=80000000&fill=1');
		mapobj.addOverlay(geoxml);
	},
	// interaction handler for the region labels.
	handleClick : function(o_region) {
		location.href = gmap_data[o_region].url_section;
	},
	handleMouseOver : function(o_region) {
		cmapV2.loadRegionText(o_region);
		document.getElementById("map_canvas_popup").style.display = 'inline';
		gmap_data[o_region].overlay.setFillStyle({color:"#94d1e4",opacity:0.7});
		//for (var key in gmap_data) {
		//	if (o_region != key) {
		//		document.getElementById("map_lbl_"+key).className = "map_lbl_off";
		//	}
		//}
	},
	handleMouseOut : function(o_region) {
		document.getElementById("map_canvas_popup").style.display = 'none';
		gmap_data[o_region].overlay.setFillStyle({color:"#FFFFFF",opacity:0});
		//for (var key in gmap_data) {
		//	document.getElementById("map_lbl_"+key).className = "map_lbl_on";
		//}
	},
	// loads the text and image into the region's dhtml window that appears above nevada
	loadRegionText : function(o_region) {
		var obj = gmap_data[o_region];
		var sb = new StringBuilder();
		sb.append("<div class=\"pop_title\">"+obj.title+"</div>");
			sb.append("<div class=\"pop_img\"><img src=\""+gmap_imgs+"/region/pop_"+o_region+".jpg\"></div>");
			sb.append("<div class=\"pop_body\">"+obj.body+"</div>");
		document.getElementById("map_canvas_popup_content").innerHTML = sb.toString();
	},
	// this is the method that allows the region map to function
	getRegionCode : function(o) {
		var vertices = o.getVertexCount();
		var region = "not_detected";
		switch (vertices) {
			// determine which region we clicked on from the vertices.  As long as each KML file has a unique number of vertices, this will work.
			case 327: {region = "bay_area";break;}
			case 123: {region = "north_coast";break;}
			case 26: {region = "shasta_cascade";break;}
			case 56: {region = "gold_country";break;}
			case 28: {region = "high_sierra";break;}
			case 104: {region = "central_valley";break;}
			case 310: {region = "central_coast";break;}
			case 50: {region = "desert";break;}
			case 212: {region = "los_angeles";break;}
			case 17: {region = "inland_empire";break;}
			case 68: {region = "orange_county";break;}
			case 47: {region = "san_diego";break;}
			case 39: {region = "no_region";break;}
		}
		return region;
	}
}