From 28826c10068bfd6140df4fb48b5f190c5eec54ed Mon Sep 17 00:00:00 2001
From: Matthew Petroff <matthew@mpetroff.net>
Date: Sat, 19 Jan 2013 16:28:31 -0500
Subject: [PATCH] Added basic hot spot support.

---
 src/css/pannellum.css |  8 ++++++++
 src/js/pannellum.js   | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/src/css/pannellum.css b/src/css/pannellum.css
index 9f9d4a9..e8bd73e 100644
--- a/src/css/pannellum.css
+++ b/src/css/pannellum.css
@@ -313,3 +313,11 @@ body {
 #about a:hover, #about a:active {
 	color:#eee;
 }
+
+.hotspot {
+	position:absolute;
+	height:20px;
+	width:20px;
+	background:rgba(0,0,0,0.8);
+	display:none;
+}
diff --git a/src/js/pannellum.js b/src/js/pannellum.js
index ed12f2c..5175e09 100644
--- a/src/js/pannellum.js
+++ b/src/js/pannellum.js
@@ -483,6 +483,7 @@ function onDocumentResize() {
 
 function animate() {
 	render();
+	
 	if(isUserInteracting) {
 		requestAnimationFrame(animate);
 	}
@@ -498,6 +499,8 @@ function render() {
 		
 		lat = Math.max(-85,Math.min(85,lat));
 		renderer.render(lat * Math.PI / 180,lon * Math.PI / 180,fov * Math.PI / 180);
+		
+		renderHotSpots();
 	} catch(event) {
 		// panorama not loaded
 	}
@@ -528,6 +531,40 @@ function renderInit() {
 	}
 }
 
+var hotspots = new Array();
+//hotspots[0] = new hotspot(10, 20);
+//hotspots[1] = new hotspot(10, -30);
+function hotspot(lat, lon) {
+    var div = document.createElement('div');
+    div.setAttribute('class', 'hotspot');
+    document.getElementById('page').appendChild(div);
+    this.div = div;
+    this.lat = lat;
+    this.lon = lon;
+}
+
+function renderHotSpots() {
+	hotspots.forEach(function(hs) {
+	    var z = Math.sin(hs.lat * Math.PI / 180) * Math.sin(lat * Math.PI /
+	        180) + Math.cos(hs.lat * Math.PI / 180) * Math.cos((hs.lon + lon) *
+	        Math.PI / 180) * Math.cos(lat * Math.PI / 180);
+    	if((hs.lon <= 90 && hs.lon > -90 && z <= 0) ||
+    	  (hs.lon > 90 || hs.lon <= -90 && z <= 0)) {
+	        hs.div.style.display = 'none';
+	    } else {
+    	    hs.div.style.display = 'inline';
+    	    hs.div.style.top = -canvas.height / Math.tan(fov * Math.PI / 360) *
+    	        (Math.sin(hs.lat * Math.PI / 180) * Math.cos(lat * Math.PI /
+    	        180) - Math.cos(hs.lat * Math.PI / 180) * Math.cos((hs.lon +
+    	        lon) * Math.PI / 180) * Math.sin(lat * Math.PI / 180)) / z /
+    	        2 + canvas.height / 2 - 10 + 'px';
+    	    hs.div.style.left = -canvas.height / Math.tan(fov * Math.PI / 360) *
+    	        Math.sin((hs.lon + lon) * Math.PI / 180) * Math.cos(hs.lat *
+    	        Math.PI / 180) / z / 2 + canvas.width / 2 - 10 + 'px';
+    	}
+	});
+}
+
 function getURLParameter(name) {
 	name = name.replace(/[\[]/,'\\\[').replace(/[\]]/,'\\\]');
 	var regexS = '[\\?&]'+name+'=([^&#]*)';