﻿// 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 () {
		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,type) {
		if (gloading == false) {
			mapnav.showCover();
			//alert(id);
			GDownloadUrl("/MapsModule.ashx?details=" + id + "&type=" + type, 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.body + " <a href=\"javascript:void(0)\" onclick=\"gmapV1.getDetails('" + obj.record + "', '"+obj.type+"')\">" + 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
************************************/
//Object.prototype.getName = function() { 
//   var funcNameRegex = /function (.{1,})\(/;
//   var results = (funcNameRegex).exec((this).constructor.toString());
//   return (results && results.length > 1) ? results[1] : "";
//};
GPolygon.prototype.cttc_region = "";

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.
		cmapV2.regionOutside("no_region");
		for (var key in gmap_data) {
			cmapV2.regionView(key);
		}

		GEvent.addListener(mapobj, "addoverlay", function (overlay) {
			// implemented json versions of the coordinates instead of KML 11/16/2011 JM
			if (overlay instanceof GPolygon) {
				var o_region = overlay.cttc_region;
				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();
				}
			}
			//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) {
		$.ajax({
			url: "/docs/kml/json/" + region_name + ".html",
			dataType: "html",
			cache: true,
			success: function (data) { cmapV2.regionView_loaded(data, region_name); },
			error: function (xhr, err, e) { alert("Error (1): " + err + ".." + region_name); }
		});
	},
	regionView_loaded: function (json_str, region_name) {
		var pts = eval(json_str);
		var polygon = new GPolygon(pts, "#ffffff", 2, 0.8, "#ffffff", 0, { clickable: false });
		polygon.cttc_region = region_name;
		mapobj.addOverlay(polygon);
	},
	regionOutside: function (region_name) {
		$.ajax({
			url: "/docs/kml/json/" + region_name + ".html",
			dataType: "html",
			cache: true,
			success: function (data) { cmapV2.regionOutside_loaded(data, region_name); },
			error: function (xhr, err, e) { alert("Error (2): " + err + ".." + region_name); }
		});
	},
	regionOutside_loaded: function(json_str, region_name) {
		var pts = eval(json_str);
		var polygon = new GPolygon(pts, "#ffffff", 1, 0.1, "#000000", 0.5, { clickable: false });
		polygon.cttc_region = region_name;
		mapobj.addOverlay(polygon);
	},
	// 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();
	}
}
