﻿// Globals
var objMap, objPano, panoUrl, panoSrcUrl;
// Detection
var isIE  = navigator.appVersion.indexOf("MSIE") != -1 ? true : false;
// Hide errors in IE
if (isIE) window.onerror = Function("return true;");
// Make links fast
window.onbeforeunload = stopPanoramaRotating;
// Remove space from input string
function trimString(str) {
	return str.replace(/^\s+/g,'').replace(/\s+$/g,'');
}
// Initialize all
function initPage(pageId) {
	initMenu();
	initCategories();
	initForm();
	if (typeof initMap == "function" && GBrowserIsCompatible()) { 
		objMap = new GooglePanoramaMap();
		if (objMap.map) initMap(objMap); 
	}
	if (typeof initPano == "function") {
		objPano = new Panorama();
		if (objPano.pano) initPano(objPano);
		initSharing();
	}
}
function unloadPage() {
	if (document.getElementById("mapCanvas")) GUnload();
}
function stopPanoramaRotating() {
	var objPanoMovie = document.getElementById(isIE ? "panoMovie" : "panoMovieEmbed");
	if (objPanoMovie) objPanoMovie.stopAutorotate();
}
function startPanoramaRotating() {
	var objPanoMovie = document.getElementById(isIE ? "panoMovie" : "panoMovieEmbed");
	if (objPanoMovie) objPanoMovie.setAutorotate(0.15, 1, 1, false);
}
/* Menu */
function initMenu() {
	var objMainMenu = document.getElementById("tblMainMenu");
	if (objMainMenu) {
		var arrMnuItems = objMainMenu.getElementsByTagName("img");
		for (var i=0; i < arrMnuItems.length; i++) {
			if (arrMnuItems[i].src.indexOf("mnu") > -1) {
				arrMnuItems[i].onmouseover = Function("doMenuHover(this, true);");
				arrMnuItems[i].onmouseout = Function("doMenuHover(this, false);");
			}
		}
	}
	var objBtnBack = document.getElementById("btnBack");
	if (objBtnBack && window.history.length > 0) {
		objBtnBack.style.visibility = "visible";
		objBtnBack.onclick = Function("window.history.go(-1);");
	}
	var objLink = document.getElementById("linkFlickr");
	if (objLink) {
		objLink.onclick = function() {
			stopPanoramaRotating(); 
		};
	}
	objLink = document.getElementById("linkWebsite");
	if (objLink) {
		objLink.onclick = function() {
			stopPanoramaRotating(); 
		};
	}
}
function doMenuHover(objImg, hover) {
	var objParentCell = objImg.parentNode.parentNode;
	if (hover) 
		objParentCell.className += " mnuHover";
	else if (objParentCell.className.indexOf("mnuHover") > -1) 
		objParentCell.className = objParentCell.className.substring(0, objParentCell.className.length - 9);
}
/* Categories */
function initCategories() {
	var objLayer = document.getElementById("layerCategories");
	if (objLayer) {
		var arrLayers = objLayer.getElementsByTagName("DIV");
		for (var i=0; i < arrLayers.length; i++) {
			arrLayers[i].onmouseover = Function("this.className='layerHover'");
			arrLayers[i].onmouseout = Function("this.className=''");
			arrLayers[i].onclick = Function("return searchWithCategory(this)");
		}
	}
}
function searchWithCategory(objLayer) {
	var arrAnchor = objLayer.getElementsByTagName("A");
	if (arrAnchor.length > 0) {
		document.location.href = arrAnchor[0].href;
		return false;
	}
}
/* Class Panorama */
function Panorama() {
	this.pano = document.getElementById("panoCanvas");
	this.loadPano = mLoadPano;
}
function mLoadPano(width, height, panoId) {
	if (detectFlash()) {
		this.pano.innerHTML = getEmbedFlashHTML("files/panoramas/" + panoId + ".swf", "100%", "100%", false);
		enableRightPanel();
	}
	else  {
		this.pano.innerHTML = '<p class="warning">Flash player version 9 or higher is needed. Install ' + '<a href="http://www.adobe.com/go/getflash/">Adobe Flash Player<\/a> to run this tour.<\/p>';
	}
}
function detectFlash() {
	return true;
}
function getEmbedFlashHTML(url, width, height, sharing) {
	var embedHTML = "<object ";
	embedHTML += sharing ? "" : "id=\"panoMovie\" ";
	embedHTML += "classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" ";
	embedHTML += "codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0\" ";
	embedHTML += "width=\"" + width + "\" height=\"" + height + "\">";
	embedHTML += sharing ? "\n" : "";
	embedHTML += "<param name=\"movie\" value=\"" + url + "\">";
	embedHTML += "<param name=\"allowFullScreen\" value=\"true\">";
	embedHTML += sharing ? "" : "<param name=\"FlashVars\" value=\"externalinterface=1\">";
	embedHTML += sharing ? "\n" : "";
	embedHTML += "<embed ";
	embedHTML += sharing ? "" : "id=\"panoMovieEmbed\" ";
	embedHTML += "pluginspage=\"http://www.macromedia.com/go/getflashplayer\" type=\"application/x-shockwave-flash\" ";
	embedHTML += "width=\"" + width + "\" height=\"" + height + "\" ";
	embedHTML += "src=\"" + url + "\" ";
	embedHTML += "allowFullScreen=\"true\"";
	embedHTML += sharing ? "" : " FlashVars=\"externalinterface=1\"";
	embedHTML += sharing ? ">\n" : ">";
	embedHTML += "</object>";
	return embedHTML;
}
/* Right panel */
function enableRightPanel() {
	var objBtnLayer = document.getElementById("btnHidePanel");
	if (objBtnLayer) {
		objBtnLayer.onclick = Function("togglePanelRight(true);");
		objBtnLayer.style.visibility = "visible";
	}
	objBtnLayer = document.getElementById("btnShowPanel");
	if (objBtnLayer) objBtnLayer.onclick = Function("togglePanelRight(false);");
}
function togglePanelRight(hide) {
	var objPanelRight = document.getElementById("cellPanelRight");
	var objPanelPano = document.getElementById("panoCanvas");
	var objBtnLayer = document.getElementById("btnShowPanel");
	if (objPanelRight && objPanelPano && objBtnLayer) {
		objPanelRight.style.display = hide ? "none" : "";
		if (objMap && !hide) objMap.resetCenter();
		objPanelPano.style.width = hide ? 975 : 680;
		objPanelPano.style.height = hide ? 645 : 450;
		objBtnLayer.style.visibility = hide ? "visible" : "hidden";
	}
}
/* Class Map */
function orderOfCreation(marker, b) {
	return GOverlay.getZIndex(marker.getPoint().lat());
}
function importanceOrder(marker, b) {
	return 999;
}
function GooglePanoramaMap() {
	var objMapLayer = document.getElementById("mapCanvas");
	if (objMapLayer) {
		this.map = new GMap2(objMapLayer);
		this.tooltip = document.createElement("div");
		objMapLayer.appendChild(this.tooltip);
		this.tooltip.style.visibility = "hidden";
		this.redIcon = new GIcon(G_DEFAULT_ICON);
		this.redIcon.image = "ico/marker-red.png";
		this.markerOptions = {icon:this.redIcon, zIndexProcess:orderOfCreation};
		this.selectIcon = new GIcon(G_DEFAULT_ICON);
		this.selectIcon.image = "ico/marker-select.png";
		this.markerSelectOptions = {icon:this.selectIcon, zIndexProcess:importanceOrder};
		/*
		GEvent.addListener(this.map, "click", function(overlay, latlng) {     
			if (latlng) {   
				prompt("Point Clicked", latlng.x + ", " + latlng.y);
				prompt("Center Map", objMap.map.getCenter());
			}
		});
		*/
	}
	this.setCenter = mSetCenter;
	this.resetCenter = mResetCenter;
	this.addMarker = mAddMarker;
	this.addMarkers = mAddMarkers;
	this.addDraggableMarker = mAddDraggableMarker;
	this.setSimpleUI = mSetSimpleUI;
	this.setAdvancedUI = mSetAdvancedUI;
	this.setMapType = mSetMapType;
	this.getCurrentView = mGetCurrentView;
	this.latLngBounds = new GLatLngBounds();
	this.latCenter;
	this.lngCenter;
	this.UseClusters = false;
	this.markers = [];
	this.clusterMarkers = mClusterMarkers;
}
function mSetMapType(view) {
	if (this.map) {
		switch(view) {
			case "hybrid":
				this.map.setMapType(G_HYBRID_MAP);
				break;
			case "terrain":
				this.map.setMapType(G_PHYSICAL_MAP);
				break;
		}
	}
}
function mGetCurrentView() {
	if (this.map) {
		var objMapType = this.map.getCurrentMapType();
		if (objMapType) {
			var viewName = objMapType.getName();
			if (viewName && viewName.length > 0) return viewName.toLowerCase();
		}
	}
	return "map";
}
function mSetCenter(lat, lng, zoom) {
	if (this.map) {
		if (lat && lng && zoom) {
			this.latCenter = lat;
			this.lngCenter = lng;
			this.map.setCenter(new GLatLng(lat, lng), zoom);
		}
		else if (this.latLngBounds) {
			this.map.setCenter(this.latLngBounds.getCenter(), this.map.getBoundsZoomLevel(this.latLngBounds) - 1);
		}
	}
}
function mResetCenter() {
	if (this.map && this.latCenter && this.lngCenter) {
		this.map.checkResize();
		this.map.setCenter(new GLatLng(this.latCenter, this.lngCenter));
	}
}
function mAddMarker(lat, lng, panId, panTitle, select) {
	if (this.map) {
		var latlng = new GLatLng(lat, lng);
		var marker = new GMarker(latlng, select ? this.markerSelectOptions : this.markerOptions);
		marker.tooltip = '<div class="tooltip">' + panTitle + '<\/div>';
		GEvent.addListener(marker, "click", function() {
			document.location.href = "panorama.html?id=" + panId;
		});
		GEvent.addListener(marker, "mouseover", function() {
			showTooltip(marker);
		});        
		GEvent.addListener(marker, "mouseout", function() {
			if (objMap && objMap.tooltip) objMap.tooltip.style.visibility = "hidden"
		});  
		if (this.UseClusters)
			this.markers.push(marker);
		else 
			this.map.addOverlay(marker);
		this.latLngBounds.extend(latlng);
	}
}
function mAddDraggableMarker(lat, lng) {
	if (this.map) {
		var latlng = new GLatLng(lat, lng);
		var marker = new GMarker(latlng, {draggable: true});
		GEvent.addListener(marker, "dragstart", function() {
			// do nothing
		});
		GEvent.addListener(marker, "dragend", function() {
			var latlng = this.getLatLng();
			if (latlng) {
				var objInput = document.getElementById("latitude");
				if (objInput) objInput.value = Math.round(latlng.y*100000)/100000;
				objInput = document.getElementById("longitude");
				if (objInput) objInput.value = Math.round(latlng.x*100000)/100000;
			}
		});
		this.map.addOverlay(marker);
	}
}
function mAddMarkers(panoId) {
	if (this.panoramas && this.panoramas.length > 0) {
		for (var i=0; i < this.panoramas.length; i++) {
			this.addMarker(this.panoramas[i][0], this.panoramas[i][1], this.panoramas[i][2], this.panoramas[i][3], this.panoramas[i][2] == panoId);
		}
	}
}
function showTooltip(marker) {
	if (objMap && objMap.tooltip) {
		objMap.tooltip.innerHTML = marker.tooltip;
		var point = objMap.map.getCurrentMapType().getProjection().fromLatLngToPixel(objMap.map.getBounds().getSouthWest(), objMap.map.getZoom());
		var offset = objMap.map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(), objMap.map.getZoom());
		var anchor = marker.getIcon().iconAnchor;
		var width = marker.getIcon().iconSize.width;
		var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width, - offset.y + point.y + anchor.y)); 
		pos.apply(objMap.tooltip);
		objMap.tooltip.style.visibility = "visible";
	}
}
function mSetSimpleUI() {
	this.map.addControl(new GSmallMapControl()); 
}
function mSetAdvancedUI() {
	this.map.disableScrollWheelZoom();
	this.map.addControl(new GLargeMapControl3D());
}
function mClusterMarkers() {
	if (this.UseClusters) var markerCluster = new MarkerClusterer(this.map, this.markers);
}
/* Search Form */
var _KEYWORD_EXAMPLE = "e.g. 'Sorobon' or 'Donkey'";
function clearExampleText(objInput) {
	if (objInput.value == _KEYWORD_EXAMPLE) {
		objInput.value = ""; 
		objInput.className = "";
	} 
}
function validateSearchForm(view) {
	var objInput = document.getElementById("cntrlKeyword");
	if (objInput && (objInput.value == _KEYWORD_EXAMPLE || objInput.value == "")) {
		objInput.value = ""; 
		objInput.className = "";
	}
	objInput = document.getElementById("cntrlView");
	if (objInput) {
		if (view) 
			objInput.value = view;
		else if (objMap)
			objInput.value = objMap.getCurrentView();
	}
	if (!view) {
		objInput = document.getElementById("cntrlPage");
		if (objInput) {
			objInput.value = "1";
			objInput.parentNode.removeChild(objInput);
		}
	}
	return true;
}
function resetSearchForm() {
	var objInput = document.getElementById("cntrlKeyword");
	if (objInput) {
		objInput.className = "info";
		objInput.value = _KEYWORD_EXAMPLE; 
	}
	objInput = document.getElementById("cntrlCategory");
	if (objInput) objInput.selectedIndex = 0;
	objInput = document.getElementById("cntrlLocation");
	if (objInput) objInput.selectedIndex = 0;
	objInput = document.getElementById("cntrlFavorites");
	if (objInput) objInput.checked = false;
	objInput = document.getElementById("cntrlNew");
	if (objInput) objInput.checked = false;
	objInput = document.getElementById("cntrlPage");
	if (objInput) objInput.parentNode.removeChild(objInput);
	return false;
}
function initForm() {
	var objForm = document.getElementById("frmSearch");
	if (objForm)  {
		objForm.onsubmit = Function("return validateSearchForm();");
		var objInput = document.getElementById("cntrlKeyword");
		if (objInput) {
			objInput.onfocus = Function("clearExampleText(this);");
			objInput.onclick = Function("clearExampleText(this);");
		}
		var objResetBtn = document.getElementById("btnReset");
		if (objResetBtn) objResetBtn.onclick = Function("return resetSearchForm();");
		var objMapBtn = document.getElementById("btnViewMap");
		if (objMapBtn) objMapBtn.onclick = Function("submitSearchForm('map')");
		objMapBtn = document.getElementById("btnViewSatellite");
		if (objMapBtn) objMapBtn.onclick = Function("submitSearchForm('hybrid')");
		objMapBtn = document.getElementById("btnViewTerrain");
		if (objMapBtn) objMapBtn.onclick = Function("submitSearchForm('terrain')");
		objMapBtn = document.getElementById("btnViewList");
		if (objMapBtn) objMapBtn.onclick = Function("submitSearchForm('list')");
	}
}
function submitSearchForm(view) {
	var objForm = document.getElementById("frmSearch");
	if (objForm && validateSearchForm(view)) objForm.submit();
}
// Sharing
function initSharing() {
	var objLink = document.getElementById("linkShare");
	if (objLink) {
		objLink.onclick = function() {
			var objLayer = document.getElementById("layerShareCntrls");
			if (objLayer) objLayer.style.display="block";
			objLayer = document.getElementById("layerEmbedCntrls");
			if (objLayer) objLayer.style.display="none";
			return false; 
		};
	}
	objLink = document.getElementById("linkEmbed");
	if (objLink) {
		objLink.onclick = function() {
			var objLayer = document.getElementById("layerEmbedCntrls");
			if (objLayer) objLayer.style.display="block";
			objLayer = document.getElementById("layerShareCntrls");
			if (objLayer) objLayer.style.display="none";
			return false; 
		};
	}
	var objImg = document.getElementById("btnCloseShareCntrls");
	if (objImg) {
		objImg.onclick = function() {
			var objLayer = document.getElementById("layerShareCntrls");
			if (objLayer) objLayer.style.display="none";
		};
	}
	objImg = document.getElementById("btnCloseEmbedCntrls");
	if (objImg) {
		objImg.onclick = function() {
			var objLayer = document.getElementById("layerEmbedCntrls");
			if (objLayer) objLayer.style.display="none";
		};
	}
	var objInput = document.getElementById("cntrlShareUrl");
	if (objInput) {
		panoUrl = objInput.value;
		objInput.onclick = Function("this.focus(); this.select();"); 
	}
	objInput = document.getElementById("cntrlEmbedCode");
	if (objInput) {
		panoSrcUrl = objInput.value;
		objInput.value = getEmbedFlashHTML(panoSrcUrl, "680", "450", true);
		objInput.onclick = Function("this.focus(); this.select();"); 
	}
	objInput = document.getElementById("cntrlEmbedWidth");
	if (objInput) objInput.onchange = updateEmbedCode; 
	objInput = document.getElementById("cntrlEmbedHeight");
	if (objInput) objInput.onchange = updateEmbedCode; 
	var objChkbox = document.getElementById("cntrlUrlHidePanel");
	if (objChkbox) {
		objChkbox.onclick = function() {
			var objChkbox = document.getElementById("cntrlUrlPanoOnly");
			if (objChkbox) objChkbox.checked = false;
			var objInput = document.getElementById("cntrlShareUrl");
			if (objInput) objInput.value = this.checked ? panoUrl + "&layout=hide-panel" : panoUrl;
		}
	}
	objChkbox = document.getElementById("cntrlUrlPanoOnly");
	if (objChkbox) {
		objChkbox.onclick = function() {
			var objChkbox = document.getElementById("cntrlUrlHidePanel");
			if (objChkbox) objChkbox.checked = false;
			var objInput = document.getElementById("cntrlShareUrl");
			if (objInput) objInput.value = this.checked ? panoUrl + "&layout=pano" : panoUrl;
		}
	}
	var objTbl = document.getElementById("tblShareBtns");
	if (objTbl) {
		var arrBtns = objTbl.getElementsByTagName("DIV");
		for (var i=0; i < arrBtns.length; i++) {
			arrBtns[i].onmouseover = Function("this.className='shareBtn shareBtnHover';");
			arrBtns[i].onmouseout = Function("this.className='shareBtn';");
			arrBtns[i].onclick = Function("sharePanoLink(this)");
		}
	}
	objTbl = document.getElementById("tblShareBtnsMain");
	if (objTbl) {
		var arrBtns = objTbl.getElementsByTagName("DIV");
		for (var i=0; i < arrBtns.length; i++) {
			arrBtns[i].onmouseover = Function("this.className='shareBtn shareBtnHover';");
			arrBtns[i].onmouseout = Function("this.className='shareBtn';");
			arrBtns[i].onclick = Function("sharePanoLink(this)");
		}
	}
}
function updateEmbedCode() {
	var objEmbedCode = document.getElementById("cntrlEmbedCode");
	if (objEmbedCode) {
		var objEmbedWidth = document.getElementById("cntrlEmbedWidth");
		var objEmbedHeight = document.getElementById("cntrlEmbedHeight");
		if (objEmbedWidth && objEmbedHeight) {
			if (!isValidEmbedNumber(objEmbedWidth.value)) 
				objEmbedWidth.value = "680";
			else 
				objEmbedWidth.value = trimString(objEmbedWidth.value);
			if (!isValidEmbedNumber(objEmbedHeight.value)) 
				objEmbedHeight.value = "450";
			else
				objEmbedHeight.value = trimString(objEmbedHeight.value);
			objEmbedCode.value = getEmbedFlashHTML(panoSrcUrl, objEmbedWidth.value, objEmbedHeight.value, true);
		}
	}
}
function isValidEmbedNumber(numberValue) {
	numberValue = trimString(numberValue);
	if (numberValue.length > 0 && numberValue.substring(numberValue.length - 1) == "%") {
		numberValue = trimString(numberValue.substring(0, numberValue.length - 1));
	}
	return numberValue.length > 0 && !isNaN(numberValue);
}
function sharePanoLink(objBtn) {
	var shareUrl = panoUrl;
	var objChkbox = document.getElementById("cntrlUrlHidePanel");
	if (objChkbox.checked) shareUrl += "&layout=hide-panel";	
	objChkbox = document.getElementById("cntrlUrlPanoOnly");
	if (objChkbox.checked) shareUrl += "&layout=pano";
	var shareTitle = "Bonaire Panoramas";	
	var objInput = document.getElementById("cntrlShareTitle");
	if (objInput) shareTitle += " - " + objInput.value;
	shareUrl = encodeURIComponent(shareUrl);
	shareTitle = encodeURIComponent(shareTitle);
	stopPanoramaRotating();
	switch (objBtn.id) {
		case "btnEmail":
		case "btnEmailMain":
			document.location = "mailto:?subject=" + shareTitle + "&body=" + shareUrl;
			break;
		case "btnFaceBook":
		case "btnFaceBookMain":
			window.open("http://www.facebook.com/sharer.php?u=" + shareUrl + "&t=" + shareTitle);
			break;
		case "btnTwitter":
		case "btnTwitterMain":
			window.open("http://twitter.com/home?status=Check%20out%20-%20" + shareTitle + "%20" + shareUrl);
			break;
		case "btnMySpace":
			window.open("http://www.myspace.com/Modules/PostTo/Pages/?u=" + shareUrl);
			break;
		case "btnBlogger":
			window.open("http://www.blogger.com/blog-this.g?t=" + shareUrl + "&n=" + shareTitle);
			break;
		case "btnStumbleUpon":
			window.open("http://www.stumbleupon.com/submit?url=" + shareUrl + "&title=" + shareTitle);
			break;
	}
}
/* Request Form */
function validateRequestForm() {
	var testNumber;
	var objLatitude = document.getElementById("latitude");
	var objLongitude = document.getElementById("longitude");
	if (objLatitude && objLongitude) {
		testNumber = trimString(objLatitude.value);
		if (testNumber.length == 0 || isNaN(testNumber)) {
			objLatitude.value = "";
			objLongitude.value = "";
		}
		testNumber = trimString(objLongitude.value);
		if (testNumber.length == 0 || isNaN(testNumber)) {
			objLatitude.value = "";
			objLongitude.value = "";
		}
	}
	return true;
}

